Web Development Project Plan

SDLC Model

Chosen Model: Lean

Justification: As a solo developer, the Lean strategy allows for rapid iteration, delivering core features and functionality fast while minimizing waste and enabling continuous improvement.

Project Overview

Project Name: Portfolio Website

Description: A central portfolio site designed to showcase my technical projects and documentation. It allows anyone to explore my complete and ongoing work and contact me directly.

Goals and Objectives:

• Showcase my portfolio and personal projects
• Learn and apply new technologies/frameworks
• Demonstrate full-stack and project management skills
• Ensure mobile-friendliness and responsive design

Scope

In Scope:

• Homepage, contact form, about page, and responsive layout
• Projects and documentation sections
• Filtering and searching features
• Dynamic UI compatible with any device

Out of Scope:

• User authentication and dashboards
• Database integration
• External APIs
• Self-hosted deployment

Assumptions and Constraints:

• Project will use open-source libraries only

Timeline

Start Date: March 15, 2025

Estimated End Date: Ongoing

Key Milestones: To be added as project phases are completed

Requirements

Functional Requirements:

• Users can view a categorized list of software and lab projects
• Contact form sends email to site owner (me)
• Project pages include overview, documentation links, and repo access
• Projects can be filtered by category (e.g., software, lab)
• Site navigation includes Home, About, Projects, Docs, and Contact

Non-Functional Requirements:

• Responsive and mobile-friendly UI
• Code organized in reusable Vue 3 components
• SEO support for major pages
• Sensitive data managed via environment variables
• HTTPS enforced on all communication

Design Plan

Wireframe Notes:

• Nav Bar: Fixed top layout with route-based SPA links
• Image Carousel: Displays rotating featured project previews
• Category Buttons: Route to filtered project views
• CTA Section: Prompts users to visit the contact page
• Footer: Hyperlinks to key pages and social profiles, mobile-optimized

Style/Theme Guidelines:

• Visual Style: Modern, professional, tech-leaning
• Color Scheme: Dark/navy backgrounds with translucent light containers
• Layout: Clean grid-based structure with light hover effects and box shadows
• Typography: Simple, legible sans-serif font; scaled for mobile

Technology Stack:

• Frontend: Vue 3 + Nuxt
• Backend: Node.js + Express (if needed)
• Language: TypeScript
• Styling: CSS (with optional Tailwind)
• Hosting: Vercel
• Repository: GitHub

Development Plan

Phases:

1. Project Setup: Git repo, Vite/Nuxt configuration, routing, linting
2. Layout & Navigation: Build nav bar, routes, and search component
3. Homepage Components: Add carousel, category buttons, and CTA section
4. Content Pages: Build Projects, Documentation, About, and Contact sections
5. Routing & Transitions: Implement navigation logic and smooth transitions
6. Responsive Styling: Apply responsive layouts using CSS or media queries
7. Accessibility & SEO: Use semantic HTML, aria-labels, and meta tags
8. Testing & Debugging: Manual QA + Lighthouse audits
9. Deployment: Configure and deploy on Vercel, set custom domain

Version Control: Git with hosting on GitHub

Testing Strategy

Testing Types:

• Manual testing for functionality and UI responsiveness
• Lighthouse audits for performance, accessibility, SEO

Bug Tracking:

• All bugs tracked via GitHub Issues with labels (bug, in progress, fixed)
• Issues prioritized by visibility and user impact

Deployment Plan

Deployment Environment:

• Platform: Vercel
• Environment Type: Static SPA with client-side routing
• Framework: Vue 3 + Nuxt
• Build Tool: Vite
• Output Directory: dist/
• Routing Mode: History or hash (based on router setup)
• Custom Domain: Optional (e.g., ryannedbalek.com)
• HTTPS: Enabled by default via Vercel
• Environment Variables: Configured via Vercel Dashboard (prefixed with VITE_)

Tools & Services:

• Development: Vue 3, Vite, VS Code, Git, GitHub, Node.js
• Testing & Auditing: Manual QA, Lighthouse, (optional) Vitest + Vue Test Utils
• Forms/Integration: EmailJS, Vercel-managed env vars

Post-Deployment Steps:

1. Functionality check (nav, carousel, forms)
2. Responsive & browser testing (desktop, tablet, mobile)
3. Run Lighthouse and resolve major issues
4. Verify SEO tags and metadata
5. Test email delivery and fallback
6. Set up optional analytics (Google Analytics, Plausible)
7. Configure custom domain and HTTPS
8. Tag release in GitHub and create backups

Maintenance Plan

Update Schedule: As needed after new project completions or updates

Monitoring Tools: Vercel's built-in performance and status dashboard

Issue Tracking Process:

• Use GitHub Issues to log bugs and feature requests
• Tag, prioritize, and close after testing and confirmation