Making-of

Making Of

How this site was designed and developed

Technical Architecture

Framework & Tools

Angular 17 - Frontend framework with latest features (Signals, Control Flow, SSR)
TypeScript - For more robust and maintainable code
Standalone Components - Modular and performant architecture

UI & Styling

TailwindCSS - Utility-first CSS for rapid development
DaisyUI - Consistent UI components and dynamic themes
FontAwesome - High-performance vector icons

Key Features

Interactive Background

Three.js - 3D rendering of stars in background
Parallax Effect - Mouse movement reactivity
Day/Night Cycle - Color transitions based on time or scroll

Animations & Interactions

Matter.js - 2D physics for skills section
Smooth Scrolling - Smooth navigation between sections
Responsive Design - Adaptation to all screen sizes

Performance & Optimizations

Frontend Optimizations

Lazy Loading - On-demand module loading
Image Optimization - WebP images and lazy loading
Code Splitting - Route-optimized bundle

Accessibility & SEO

SSR - Better search engine indexing
Semantic HTML - Accessible and SEO-friendly structure
ARIA Labels - Screen reader support

Deployment & CI/CD

Infrastructure

Node.js Server - Server-side rendering and API handling
PM2 - Process manager for Node.js applications
NGINX - Reverse proxy and static file serving

CI/CD Pipeline

GitHub Actions - Automated build, test and deployment
Docker - Containerized deployment for consistency
Automated Testing - Unit and E2E tests on each push