This project is a responsive portfolio website built as part of a frontend developer assignment. It transforms a provided Figma design into a high-performance, accessible, and SEO-friendly website using Next.js and Tailwind CSS.
The goal of this assignment was to develop a modern, responsive portfolio website that adheres to best practices in performance, SEO, accessibility, and UI development. The site demonstrates proficiency in using the latest web technologies and frameworks.
- Framework: Next.js
- Styling: Tailwind CSS
- Hosting: Vercel
- Version Control: Git & GitHub
- ✅ Fully responsive layout (mobile, tablet, desktop)
- ✅ Clean, semantic HTML5 structure
- ✅ Accessible navigation and content
- ✅ SEO-optimized (meta tags, alt attributes, semantic structure)
- ✅ Smooth scroll and subtle animations
- ✅ Deployed with Vercel
- ✅ PageSpeed Score: 96 plus out of 100 (Mobile & Desktop)
- ✅ Code is modular and maintainable
| Tool | Status |
|---|---|
| Google PageSpeed | ✅ 96+ Score |
| W3C Validator | ✅ Valid HTML/CSS |
| WAVE Tool | ✅ Accessibility passed |
| Cross-browser | ✅ Chrome, Firefox, Safari, Edge |
| Console Errors | ✅ None |
To run this project on your local machine:
-
Clone the repository:
git clone https://github.com/mdemong87/theamfisher-assignment.git
-
Move to the directory:
cd teamfisher-assignment
-
Install dependencies:
npm install
-
Start Development Server:
npm run dev
-
Open Your Browser at:
https:locaclhost:3000