A modern, accessible, and performant resume website built with Next.js, React, and Styled Components. This project is designed for learning, portfolio, and as a best-practice reference for TypeScript-based React apps.

• No template: 100% custom design and layout
• TypeScript: Full type safety and maintainability
• Responsive: Mobile-friendly and adapts to all screen sizes
• Accessible: Keyboard navigation, semantic HTML, and a11y tests
• SEO Optimized: Meta tags, Open Graph, and Twitter Card support
• Performance: Code splitting, lazy loading, and bundle analysis
• Image Optimization: Only the profile image uses a custom styled-component; all other images use default or original components
• Testing: Unit, integration, and accessibility tests with Jest and jest-axe
• Pre-commit hooks: Linting, formatting, and build checks with Husky and lint-staged

This project is built with Next.js, React, and Styled Components. It includes basic functionality to showcase a resume and is intended as a learning exercise.

1. Clone the repository:

   git clone https://github.com/serhatozdursun/resume.git
   cd resume

2. Install dependencies:

yarn install

3. Set up environment variables:

cp env.example .env.local

Then edit .env.local and add your actual API keys and configuration values.

To run the development server:

yarn dev

This will start the Next.js development server at http://localhost:3000.

To build the project for production:

yarn build

To start the production server:

yarn start

• yarn lint – Run ESLint to lint your code
• yarn test – Run all tests (unit, integration, a11y)
• yarn format – Format code with Prettier
• yarn analyze – Analyze bundle size with @next/bundle-analyzer

• All interactive elements are keyboard accessible
• Uses semantic HTML and ARIA where appropriate
• Automated accessibility tests with jest-axe
• SEO meta tags, Open Graph, and Twitter Card support

• Unit & Integration: Jest and React Testing Library
• Accessibility: jest-axe for a11y checks
• Coverage: High test coverage for components and utilities

• Code splitting and lazy loading for major components
• Bundle analysis with @next/bundle-analyzer
• Optimized image handling (profile image uses a dedicated styled-component)

• Use clear, descriptive variable and function names
• Keep components small and focused
• Use TypeScript types and interfaces for all props and state
• Add comments for complex logic
• Run yarn lint and yarn format before committing
• All code is auto-checked with Husky pre-commit hooks

• Next.js: React framework for production
• React: JavaScript library for building user interfaces
• React DOM: React package for working with the DOM
• React Icons: Easily use icons from popular icon sets in your React projects
• Styled Components: Visual primitives for the component age

• TypeScript: Typed superset of JavaScript
• @types/node: TypeScript definitions for Node.js modules
• @types/react: TypeScript definitions for React
• @types/styled-components: TypeScript definitions for Styled Components

You can run this app in a production-like environment using Docker and Docker Compose.

docker compose up --build

This will build the Next.js app, serve it with Nginx, and expose it on http://localhost:3000.

Copy the example env file and fill in your values:

cp env.example .env.local

The .env.local file will be used at build time. If you change environment variables, rebuild the image.

docker compose down

• The app is served by Nginx in the container.
• The default Nginx config is used; you can customize it in the default file.
• Healthchecks are enabled for orchestration.