A modern, clean portfolio website built with Next.js 16, TypeScript, and Tailwind CSS. Features a black and deep purple theme with smooth animations and a readable Basic mode.
- Modern Design: Clean, black/deep purple theme with smooth animations
- Responsive: Fully responsive design that works on all devices
- Fast Performance: Optimized for Core Web Vitals
- SEO Friendly: Built with Next.js for excellent SEO
- Smooth Animations: Framer Motion for delightful user interactions
- Type Safe: Full TypeScript support
- Vercel Ready: Optimized for Vercel deployment
- Home: Introduction, three deliberately selected case studies, expertise, company/community links, project history, and freelance services; the ambient backdrop and scroll cue pause while the page is hidden
- About: Full bio, skills, project history, work/education, and recent certifications, with section shortcuts and a CV download near the top
- Projects: Search public projects by name, description or technology, combine branch filters, and explore matching grid/timeline views. Case studies include custom interactive showcases for all 16 public projects. Each showcase uses illustrative local data; live product links remain separate.
- Galacia: Company overview, product availability, and links to the public company website
- Open Source: Automatically updated upstream PRs for T3 Code and Salesforce Inspector Reloaded, highlighting merged contributions and open reviews, with drafts and closed history collapsed, sync timestamps, and saved-data fallback
- Certifications: Certification listing and detail pages with downloadable PDFs
- Blog: Markdown-based routes retained; hidden from navigation and the sitemap until posts are available
- Contact: Direct email (mailto), a copy-address action with manual selection fallback, CV download and LinkedIn
Keyboard users can skip directly to the main content. Mobile navigation supports Escape, closes on route changes, and uses larger touch targets. Display mode can be changed from the header or footer; the system reduced-motion preference is respected until a visitor chooses a mode, including when local storage is blocked.
- Next.js 16 (App Router) and React 19
- TypeScript
- Tailwind CSS
- Framer Motion
- React Hook Form
- Zod
- Lucide React (Icons)
Use Node.js 24.x (validated with Node.js 24.13.1). Production and development builds explicitly retain Webpack. ESLint runs separately from the Next.js build.
- Install dependencies:
npm install- Run the development server:
npm run dev- Open http://localhost:3000 in your browser.
Run npm test, npm run lint, and npm run build before publishing.
After building, npm run test:production starts temporary loopback servers to
verify public routes, downloads and the private /jobs authentication boundary
with synthetic credentials. proxy.ts keeps that dashboard locked when
JOBS_DASHBOARD_PASSWORD is absent. Private job data is marked server-only and
rendered per authenticated request with private/no-store responses; job pages
are not prerendered. The production check also verifies that distinctive private
values are absent from public static assets. Do not place deployment credentials in Git.
The 27 September 2026 review records the framework migration, browser checks and remaining validation limits.
Edit lib/constants.ts to update:
- Your name and title
- Social media links
- Site description
- Navigation items
Edit lib/projects.ts to add your projects. Each project should have:
- Title and description
- Tech stack
- GitHub and live links
- Featured flag (homepage selection is curated separately in
FeaturedProjects.tsx)
Create Markdown files in content/blog/ directory. Each file should have frontmatter:
---
title: Your Post Title
date: 2024-01-15
excerpt: A brief description
tags: [web development, next.js]
author: Your Name
---
Your blog post content here...Add your resume PDF file to the public/ directory and name it resume.pdf. The download button on the About page and Hero section will automatically link to it.
Optional page-view and CV/email click measurement is prepared but disabled until an analytics account is configured. See measurement setup and verification.
The Contact page (app/contact/page.tsx) uses a direct mailto: link rather than a form,
so there's no API route or email service to configure. Case-study links prefill a subject
from a recognised public project; unknown query values fall back to generic contact. Update the email address in
lib/constants.ts (siteConfig.links.email).
Edit tailwind.config.ts to customize the color scheme. The current theme uses:
- Background: Black (#000000)
- Primary: Deep purple shades
- Accent: Purple gradients
Fonts are configured in app/layout.tsx. Currently using Inter from Google Fonts.
- Mobile: < 640px
- Tablet: 640px - 1024px
- Desktop: > 1024px
- Push your code to GitHub
- Import your repository in Vercel
- Vercel will automatically detect Next.js and configure the build
- Your site will be live!
If you're using an email service, add your API keys as environment variables in Vercel.
This project is open source and available under the MIT License.
Feel free to fork this project and customize it for your own portfolio!
Built with ❤️ using Next.js and Tailwind CSS