My Portfolio Website

Executive Summary

• Built an accessibility-first portfolio to centralize work and speed recruiter review.
• Clear paths to Resume, Featured projects, and Case studies with demos.
• High-contrast theme, visible focus rings, keyboard navigation, alt text throughout.

Tech highlights

• Next.js App Router with static export for GitHub Pages (basePath/assetPrefix tuned).
• CI/CD: GitHub Actions builds on push to main and publishes the static out/ artifact to Pages.
• MDX + Contentlayer: typed Project model; front-matter drives routes and TOC.
• Sticky left TOC (IntersectionObserver + offset-aware smooth scroll).
• Accessible lightbox (Esc / ← / →, focus trap, restores focus on close).
• Tailwind v4 tokens + component classes (high-contrast theme, button variants).
• Quality gates: eslint-plugin-jsx-a11y, Lighthouse 100, axe DevTools clean.

• Role: Designer · Front-end · Prototyper
• Stack: Next.js, TypeScript, Tailwind, MDX
• Accessibility: WCAG 2.0 AA (AODA); skip link, keyboard-friendly TOC, reduced-motion support; audits: Lighthouse 100, axe DevTools (Free) clean, eslint-plugin-jsx-a11y in CI
• Timeline: 2 weeks (see breakdown below)
• Links: Resume · Figma Prototype · Source (Github)

Project Overview

Problem Statement Recruiters often requested a portfolio to validate my abilities, but I didn’t yet have one. I created this project to centralize my work, showcase UI/UX projects, highlight my resume, and supplement my CV.

Goal Design and launch a clean, accessible, and responsive portfolio website that communicates my skills and professional presence effectively.

Role Designer, Programmer, Prototyper

• Figma – lo-fi & hi-fi mocks + interactive prototype
• Next.js + TypeScript + Tailwind + MDX – content-driven, accessibility-focused build
• axe DevTools, Colour Contrast Analyser – verify WCAG contrast and semantics
• Git + GitHub – version control and deploy

Constraints The portfolio needed to be completed quickly to meet application deadlines and be ready for recruiter review.

• Wireframing: lo-fi exploration (1 day) → hi-fi refinement in Figma (1 day)
• Prototyping: interactive build and component development (5 days)
• Testing & iteration: usability testing, accessibility validation, refinements (4 days)
• Launch: final deployment and review (1 day)

Research & Planning

Target Audience IT professionals and peers, with an emphasis on accessibility and inclusivity.

• Designed to conform to WCAG 2.0 Level AA (AODA); also checked key 2.1/2.2 criteria (keyboard, focus visibility, reduced motion).
• Verified with Lighthouse (A11y 100, Perf 100), axe DevTools (no critical violations), and eslint-plugin-jsx-a11y (clean CI).
• Color contrast validated with Colour Contrast Analyser; all interactive controls have visible focus and non-color cues.

Comparative Analysis I reviewed 10+ portfolios on Behance and UXfolio, and also studied sites from several of my favourite indie game developers (solo and small teams) to stay current on interaction patterns and publishing workflows. Key takeaways:

• Clarity over volume: the strongest portfolios lead with 2–4 polished projects vs. long “work dumps.”
• Case-study depth: clear problem → approach → outcome structure with scannable subheads works best.
• Live artifacts matter: playable demos / code links / prototypes build trust faster than screenshots alone.
• Performance & motion: lightweight media and restrained animations with prefers-reduced-motion support.
• Tech signal: concise “built with” sections (framework + tools) help recruiters and peers qualify quickly.

What I adopted: featured-first layout, live demo links, concise tool list, and a structured case-study template.
What I avoided: heavy hero videos, autoplay media, and overly experimental navigation that hurts accessibility.

• Hiring Manager: Needs quick access to the resume and a clear overview of skills
• IT Peer / Collaborator: Interested in project details and experience for potential collaboration

Storyboarding I storyboarded two primary journeys to confirm that navigation supported both hiring and collaboration needs.

• Recruiter journey: Lands on home → finds resume in under 2 seconds → optionally reviews projects for context.

• Peer/collaborator journey: “See All Projects” → filter → open a case study → try demo.

CI/CD & Hosting

• Platform: GitHub Pages
• Pipeline: GitHub Actions (build → export → deploy)
• Trigger: On every push to main (plus manual “Run workflow”)
• Build steps: npm ci → contentlayer build → next build && next export
• Publish: Uploads static site from out/ to Pages
• Routing: basePath / assetPrefix configured for GitHub Pages
• Images: next/image in unoptimized mode for static hosting
• Quality gates: ESLint (jsx-a11y), Lighthouse/axe spot checks before shipping

Wireframing & Prototyping

After validating flows, I translated them into wireframes to lock structure and navigation before visual polish.

Components I standardized the navigation bar, project cards, buttons, and footer. Each meets accessibility expectations: sufficient contrast, large click/tap areas, visible focus, and non-color cues on hover.

• Palette: Switched from pastel to high-contrast after contrast failures; ensures AA for default, hover, focus, and disabled states.
• Nav clarity: Resume link moved from footer → navbar after 3/5 testers missed it; now 5/5 find it in < 2s.
• Components: Button variants with visible focus rings, hover underline, and thicker borders to signal interactivity.

User Testing & Feedback

• 5 testers (5 peers, 5 general tech users)
• Tasks: open resume; find one featured project; navigate to demo; keyboard-only pass

• Resume link in footer missed by 8/10 of testers → moved to navbar → 10/10 success rate
• Button hover contrast too subtle → added border-2 + underline on hover
• Case study TOC sticky state jitter → added offset-aware smooth scroll and stable active-section detection

Changes Shipped Promoted resume to main nav; improved button hover/focus; stabilized Table Of Content behavior.

• Keyboard-only task completion: 100%
• Contrast checks pass (text and interactive states)

Final Design & Launch

Outcome A polished, responsive, accessibility-first portfolio that effectively represents my skills and professional identity.

Reflection Accessibility was the strongest success. Color Contrast Analyser and axe DevTools surfaced issues that weren’t always obvious. The main challenge was balancing aesthetics with accessibility—pastel palettes and experimental layouts often conflicted with WCAG, so I prioritized inclusivity and usability. I plan to build a secondary, experimental portfolio to explore unconventional designs while keeping this primary site professional and AA-focused.

Images

• 
  Skip link appears for keyboard users

What’s next

• Open to: Accessibility-first front-end, UI/UX collaboration, design systems.
• Contact: Email · LinkedIn
• Code: Site repository