A modern, responsive personal portfolio website showcasing professional experience as a Senior Frontend Engineer. Built with Next.js 15, TypeScript, and Mantine UI, featuring a clean design and comprehensive project showcase.
- Home Page: Animated counters, social links, and professional introduction
- About Page: Detailed bio with auto-scrolling tech showcase
- Projects Page: Separated professional and personal projects with detailed descriptions
- Project Detail Pages: Individual pages for each project with comprehensive information
- Glass-morphism UI: Beautiful backdrop-blur effects and gradient backgrounds
- Dark/Light Mode: Automatic system detection with manual override
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- Custom Animations: Smooth fade-in effects and interactive hover states
- Multi-layer Architecture: Services → Repositories → Presenters → Components pattern
- Type Safety: Full TypeScript implementation with Zod validation
- Performance Optimizations: React.memo, useMemo, useCallback strategically applied
- Testing Suite: Jest + React Testing Library for comprehensive test coverage
- Next.js 15 - App Router with TypeScript
- React 18 - Latest features and concurrent rendering
- TypeScript - Full type safety throughout the application
- Mantine UI - Modern React components library
- SCSS Modules - Scoped styling with CSS custom properties
- ESLint - Code quality and consistency
- Jest - Unit and integration testing
- React Testing Library - Component testing utilities
- Zod - Runtime type validation
- Result Pattern - Functional error handling
- Glass-morphism - Modern backdrop-filter effects
- CSS Animations - Smooth transitions and hover effects
- Intersection Observer - Viewport-triggered animations
- Auto-scrolling Tech Icons - Seamless infinite scroll showcase
┌─── Components (UI Layer)
├─── Presenters (Business Logic)
├─── Repositories (Data Access)
└─── Services (External APIs)
- Separation of Concerns: Clear boundaries between layers
- Dependency Injection: Testable and maintainable code structure
- Error Handling: Comprehensive Result pattern implementation
- Type Safety: End-to-end TypeScript with runtime validation
- Node.js 18+ and npm/yarn/pnpm
- Modern browser with ES2022 support
# Clone the repository
git clone <repository-url>
cd personal-website
# Install dependencies
npm install
# Start development server
npm run devnpm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint
npm run typecheck # Run TypeScript compiler
npm test # Run test suite
npm test:watch # Run test suite in watch mode
npm test:coverage # Run test suite with coverage reportComprehensive testing strategy including:
- Unit Tests: Individual component and utility testing
- Integration Tests: Multi-component interaction testing
- Type Testing: Runtime type validation with Zod
npm test # Run all tests
npm test:watch # Run tests in watch mode
npm test:coverage # Generate coverage reportOptimized for deployment on Vercel, Netlify, or any static hosting platform:
npm run build # Generate production build
npm run start # Preview production build locally- Static generation for optimal loading speeds
- CSS optimization with SCSS modules
- Tree-shaking for minimal bundle size
- Strict TypeScript rules
- React best practices
- Accessibility linting
- Import organization
- Strict mode enabled
- Path aliases for clean imports
- Latest ES features support
src/
├── app/ # Next.js 15 app router pages
├── components/ # Reusable UI components
├── repositories/ # Data access layer
├── services/ # External API services
├── utils/ # Shared utilities
├── styles/ # Global styles and variables
└── types/ # TypeScript type definitions
This project is private and proprietary.
Built by Hakim Abdelcadir
Senior Frontend Engineer | React & TypeScript Specialist | London, UK