Portfolio Website

A modern, responsive portfolio website built with React, TypeScript, and Hono.

Features

  • šŸŽØ Modern, clean design with smooth animations
  • šŸ“± Fully responsive layout
  • šŸŒ™ Dark/light theme toggle
  • šŸ“§ Contact form with email integration
  • šŸš€ Fast loading with optimized assets
  • šŸ’¼ Project showcase with filtering
  • šŸ“„ Downloadable resume/CV

Project Structure

ā”œā”€ā”€ backend/
│   └── index.ts             # Hono server with API routes
ā”œā”€ā”€ frontend/
│   ā”œā”€ā”€ components/
│   │   ā”œā”€ā”€ App.tsx          # Main React application
│   │   ā”œā”€ā”€ Header.tsx       # Navigation header
│   │   ā”œā”€ā”€ Hero.tsx         # Hero section
│   │   ā”œā”€ā”€ About.tsx        # About section
│   │   ā”œā”€ā”€ Projects.tsx     # Projects showcase
│   │   ā”œā”€ā”€ Contact.tsx      # Contact form
│   │   └── Footer.tsx       # Footer component
│   ā”œā”€ā”€ index.html           # Main HTML template
│   ā”œā”€ā”€ index.tsx            # React entry point
│   └── style.css            # Custom styles
ā”œā”€ā”€ shared/
│   └── types.ts             # Shared TypeScript types
└── README.md

Getting Started

  1. The backend serves the frontend and handles API requests
  2. Contact form submissions are processed via email
  3. All content can be customized in the component files
  4. Theme preferences are saved in localStorage

Customization

  • Update personal information in frontend/components/App.tsx
  • Add your projects in the projects data array
  • Customize colors and styling in frontend/style.css
  • Configure email settings in backend environment variables

Environment Variables

  • CONTACT_EMAIL: Email address to receive contact form submissions