Anabelle Handdoek · Senior Software Architect

Personal portfolio and résumé website built with Next.js, React, and TypeScript. Editorial, typography-led design with automatic light and dark themes and a responsive layout.

Features

• Editorial Design: Instrument Serif display type, Geist body text, a single indigo accent, and light/dark themes that follow the system setting
• Fully Responsive: Mobile-first design that scales to all screen sizes
• Accessibility: WCAG compliant with skip links, focus states, and semantic HTML
• Performance Optimized: Next.js static generation with image optimization
• Type-Safe: Full TypeScript implementation

Technology

• Next.js - React framework
• TypeScript - Type safety
• React - UI library
• Tailwind CSS - Utility-first CSS framework (not currently used, but configured)
• Netlify - Deployment platform

Getting Started

Prerequisites

• Node.js 18+ installed
• npm or yarn package manager

Installation

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm start - Start production server
• npm run lint - Run ESLint
• npm run format - Format code with Prettier
• npm run types - Run TypeScript type checking

Project Structure

/
├── public/           # Static assets (images, favicon)
├── src/
│   ├── pages/        # Next.js pages
│   │   ├── index.tsx # Main portfolio page
│   │   ├── _app.tsx  # App component
│   │   └── _document.tsx # HTML document structure
│   └── styles/       # Global styles
│       └── globals.css
├── package.json
├── tsconfig.json
└── next.config.js

Customization

Content

All content is located in src/pages/index.tsx. Modify the data arrays to update:

• achievements - Key statistics and highlights
• skills - Technical expertise areas
• projects - Personal projects with images and tags
• featured - Featured work and professional projects
• experience - Work history
• education - Certifications and courses
• awards - Recognition and awards
• links - Social and professional links

Styling

Global styles are in src/styles/globals.css. Key CSS variables:

• --bg / --surface - Page and image-well backgrounds
• --text / --muted / --faint - Primary, secondary and tertiary text
• --rule / --rule-strong - Hairline dividers
• --accent - The single accent color (indigo)
• --font-sans / --font-serif / --font-mono - Type families

Every color token is redefined under @media (prefers-color-scheme: dark).

Deployment

This project is deployed on Netlify. Simply connect your Git repository to Netlify and it will automatically deploy on push.

License

MIT License - Feel free to use this as a template for your own portfolio.