Portfolio Website — Chhatresh Khatri

This portfolio website, meticulously crafted using Astro 7, Tailwind CSS v4, and TypeScript, embodies a fusion of modern design, edge performance, and robust architecture.

Consistency is ensured across the site with a well-structured navigation menu, subtle micro-animations capped strictly at 300ms, and dynamic dark/light mode with synchronized cross-fading. The website's SEO optimization, edge caching, and analytics integration make it a potent tool for showcasing full-stack skills, cloud platforms, and enterprise experience.

🛠️ Built With

• Astro — High-performance web framework with Content Collections and SSR capabilities
• Tailwind CSS — Modern utility-first CSS framework (v4) with OKLCH gradient palettes
• TypeScript — Strict, type-safe development across components and API data contracts
• Cloudflare Workers — Edge deployment & SSR adapter with global cache headers
• Wrangler — Cloudflare developer CLI for local emulation and deployment

✨ Features

• 📖 Multi-Page Layout — Fast, structured navigation across Home, About, Projects, and Privacy Policy.
• 🎨 Modern Design & Styling — Custom Tailwind CSS v4 theme with glassmorphism cards and fluid typography.
• 🌓 Synchronized Theme Toggle — Seamless Dark/Light mode cross-fade with persistent user preference in localStorage.
• ⚡ Fluid Micro-Animations — Immediate @starting-style entry transitions strictly capped at 300ms with event-delegated spotlight cursor tracking.
• 📱 Fully Responsive — Mobile-first, adaptive layouts optimized for mobile, tablet, and desktop viewports.
• ⚡ Edge SSR & Caching — Server-side rendered on Cloudflare Workers edge runtime with smart Cache-Control headers.
• 🎯 Single Source of Truth — Clean dynamic rendering directly sourced from Cloudflare Worker JSON endpoints with zero hardcoded fallbacks.
• 🔍 Interactive Search Palette — Quick fuzzy search modal with keyboard navigation (Cmd/Ctrl + K).
• 🏷️ SEO & Social Ready — Dynamic Open Graph and Twitter Card tags, Schema.org JSON-LD structured data, RSS feed, and automated XML sitemap generation.
• ♿ Accessible & Semantic — Built using semantic HTML5, descriptive ARIA attributes, and reduced-motion accessibility support.

🔌 API

This portfolio consumes a dedicated serverless Cloudflare Workers API for dynamic data:

• Repository: portfolio-api
• Base URL is configured via PUBLIC_API_URL (see Environment Variables below).
• Endpoints consumed by this site:
  • /home — Hero intro, typewriter roles, statistics, featured projects, enterprise highlight, and core capabilities
  • /about — Biography, work experience, decoupled honors & recognition, education credentials, and tech stack
  • /projects — Comprehensive project catalog, problem/solution highlights, technologies, and live/repo links

If running the API locally, start the worker server before launching Astro.

🔐 Environment Variables

Create a .env file at the project root (you can copy .env.example):

cp .env.example .env

Configure the following variables:

PUBLIC_API_URL="https://your-api-url.com" # Base URL of the portfolio API (or http://127.0.0.1:8787 locally)
PUBLIC_visitsCounter="unique-counter-id"  # ID used by the footer visits counter badge

🚀 Getting Started

Ensure you have Node.js (>=22.22.0) and git installed on your machine.

🛠️ Installation and Setup

1. Clone the repository:

   git clone https://github.com/ChhatreshKhatri/astro-portfolio.git
   cd astro-portfolio

2. Install dependencies:

   npm install

3. Start local development server:

   npm run dev

   Open http://localhost:4321 in your browser.

4. Run type checks & diagnostics:

   npx astro check

5. Create a production build:

   npm run build

6. Preview the production build locally:

   npm run preview

7. Deploy to Cloudflare Workers:

   npm run deploy

8. Regenerate Cloudflare Worker type definitions:

   npm run generate-types

📚 Documentation & Resources

• Astro Documentation — Learn about Astro features and routing.
• Astro Cloudflare Adapter — Learn about Cloudflare deployment and bindings.
• Wrangler Configuration — Official Wrangler configuration documentation.

🖼️ Screenshots

🧷 Share My Portfolio

Share my portfolio (https://www.chhatreshkhatri.com/) with your friends in just a click: