Portfolio Website Redesign

Project Overview

This portfolio website showcases my work, skills, and experience. Built with Astro for incredible performance and developer experience, the site uses TypeScript for type safety and Tailwind CSS for styling.

Key Features

• Blazing Fast Performance: Static site generation with minimal JavaScript
• Responsive Design: Looks great on all devices, from mobile to desktop
• Content Collections: Type-safe content management using Astro’s content collections
• Cloudflare Integration: Deployed on Cloudflare Pages with R2 storage for media
• Image Optimization: Automatic image optimization and responsive images

Technical Implementation

The site architecture leverages Astro’s hybrid rendering approach, allowing for static generation of most pages while using server-side rendering for dynamic content when needed.

Images are stored in Cloudflare R2 and served through a custom image processing API built with Cloudflare Workers, which handles resizing, format conversion, and optimizations on the fly.

// Example of the image processing worker
async function handleImageRetrieve(request: Request, env: Env, key: string): Promise<Response> {
  try {
    const object = await env.portfoliophotos.get(key);
    
    if (!object) {
      return new Response(
        JSON.stringify({ error: 'Image not found' }), 
        { status: 404 }
      );
    }
    
    // Set cache control headers
    const headers = new Headers();
    object.writeHttpMetadata(headers);
    headers.set('cache-control', 'public, max-age=31536000');
    
    return new Response(object.body, { headers });
  } catch (error) {
    return new Response(
      JSON.stringify({ error: 'Server error' }), 
      { status: 500 }
    );
  }
}

Results

The website achieves a perfect 100 score on Lighthouse performance metrics, with fast load times and optimal Core Web Vitals. The modular architecture makes it easy to add new content and features as needed.