Build & Optimization

Relevant source files

The following files were used as context for generating this wiki page:

• package.json
• scripts/optimize-images.js
• netlify.toml
• src/app/App.tsx
• src/app/index.css
• index.html
• README.md

The build and optimization system for this portfolio is designed to create a performant, scalable, and resilient application, aligning with its goal of being a "masterclass in modern web architecture." It leverages Vite for fast development and optimized production builds, Netlify for continuous deployment, and a suite of custom scripts and configurations for asset optimization. Key strategies include code splitting via lazy loading, automated image optimization to modern formats, and efficient CSS management for theming and performance.

These systems work together to ensure fast load times, a smooth user experience, and a maintainable codebase that can be deployed automatically.

Build & Deployment

The project uses Vite as its build tool and is configured for automated deployments to Netlify. The entire process, from development to production, is managed through npm scripts defined in package.json.

Sources: package.json, netlify.toml

Build Scripts

The package.json file defines the core scripts for running, building, and optimizing the application.

Script	Command	Description
dev	vite	Starts the Vite development server for a fast, interactive development experience.
dev:host	vite --host	Starts the Vite development server and exposes it on the local network.
build	vite build	Creates an optimized production build of the application, bundling assets into the dist directory.
preview	vite preview	Serves the production build locally from the dist directory to test the final output.
optimize-images	node scripts/optimize-images.js	Runs a custom Node.js script to convert and compress images in the public directory. This is a manual step, not part of the main build.

Sources: package.json:6-12

Deployment Configuration

Deployment is handled by Netlify, as configured in netlify.toml. It automatically runs the npm run build command and deploys the contents of the dist directory.

Configuration	Value	Description
command	npm run build	The command Netlify executes to build the site.
publish	dist	The directory containing the built site assets that Netlify will deploy.
from	/*	Redirects all paths to index.html to support client-side routing (SPA).
status	200	The HTTP status code for the redirect rule.

Sources: netlify.toml:2-10

Build and Deployment Flow

The following diagram illustrates the automated build and deployment process triggered by a push to the repository.

This diagram shows the flow from a code push to the live deployment on Netlify.
Sources: package.json:8, netlify.toml:2-4

Asset Optimization

The project employs several strategies to optimize static assets, primarily focusing on images and CSS to reduce load times and improve rendering performance.

Image Optimization

A custom Node.js script using the sharp library is responsible for optimizing images. This script is manually triggered via npm run optimize-images.

Sources: scripts/optimize-images.js, package.json:11

Process Flow

The script recursively scans specified directories (public/projects, public/certs) for .png, .jpg, and .jpeg files. For each image found, it performs the following actions:

1. Converts the image to the modern .webp format.
2. Resizes the image to a maximum width of 800 pixels if it's larger.
3. Applies a quality setting of 80.
4. Deletes the original file after the conversion is successful.
   It also specifically processes a profile-image.jpg or profile-image.png in the public root, resizing it to 500px width.

This flowchart visualizes the steps taken by the optimize-images.js script for each image it processes.
Sources: scripts/optimize-images.js:23-53

Configuration

The script's behavior is controlled by constants defined at the top of the file.

Constant	Value	Description
MAX_WIDTH	800	The maximum width for project screenshots.
QUALITY	80	The quality level (1-100) for WebP conversion.

Sources: scripts/optimize-images.js:15-16

CSS Management

The project uses Tailwind CSS for styling, with a configuration that supports theming and optimization. The main stylesheet at src/app/index.css defines CSS variables for light and dark themes, which are then used by Tailwind's @theme directive. This allows for a semantic and theme-aware styling system that is efficient and easy to maintain.

Key features include:

• CSS Variables: A robust system of CSS variables for colors, fonts, and spacing is defined for html[data-theme="light"] and html[data-theme="dark"].
• Tailwind Integration: The @theme block maps Tailwind's utility classes to these CSS variables, ensuring consistency.
• Layering: The @layer base directive applies base styles to the body and other core elements, including a custom scrollbar.
• PostCSS: The project uses autoprefixer and @tailwindcss/postcss as dev dependencies, indicating that PostCSS processes the CSS to add vendor prefixes and handle Tailwind directives.

Sources: src/app/index.css:4-100, package.json:49, 53

Frontend Performance

Performance is a core consideration, addressed primarily through code splitting and efficient component rendering.

Code Splitting & Lazy Loading

The application implements code splitting on a per-route basis using React.lazy and Suspense. This means that the JavaScript code for each page is only downloaded when the user navigates to it, reducing the initial bundle size and improving the initial load time.

The main application component, App.tsx, wraps each route in a Suspense boundary with a fallback skeleton loader.

// src/app/App.tsx:11-17
const Home = lazy(() => import("@/pages/Home"));
const About = lazy(() => import("@/pages/About"));
const Projects = lazy(() => import("@/pages/Projects"));
const Contact = lazy(() => import("@/pages/Contact"));
const Certificates = lazy(() => import("@/pages/Certificates"));
const NotFound = lazy(() => import("@/pages/NotFound"));
const PrivacyPolicy = lazy(() => import("@/pages/PrivacyPolicy"));

Lazy Loading Sequence

The following diagram shows what happens when a user navigates to a page that has not been loaded yet.

This sequence illustrates how lazy loading defers the loading of page-specific code until it is needed.
Sources: src/app/App.tsx:10-17, 43-50

TypeScript Strict Mode

The tsconfig.json file is configured with several strict flags. These settings, while primarily for code quality and correctness, indirectly contribute to optimization by preventing common errors and enabling the compiler to make better assumptions.

• "strict": true: Enables all strict type-checking options.
• "noUnusedLocals": true: Helps identify and remove dead code.
• "noUnusedParameters": true: Similar to noUnusedLocals, but for function parameters.
• "target": "ES2020": Ensures the compiled JavaScript is modern and efficient.

Sources: tsconfig.json:14-23