tommy_bordas

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