My Portfolio Website

A modern, responsive portfolio website built with Next.js 14 to showcase my development skills and projects.

✨ Features

• 🎨 Modern Design - Clean, responsive UI with smooth animations and transitions
• 📱 Mobile-First - Fully responsive design that works on all devices
• ⚡ Performance Optimized - Built with Next.js 14 for lightning-fast loading
• 📧 Contact Form - Integrated contact form with email validation and delivery

🛠️ Tech Stack

Frontend

• Next.js 14 - React framework with App Router
• React 18 - UI library with latest features
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• Tailwind Motion - Smooth animations
• React Icons - Beautiful icon library

Backend & Validation

• Zod - TypeScript-first schema validation
• Resend - Modern email API

Deployment & Tools

• Cloudflare Workers - Deployment and hosting
• Prettier - Code formatting

Run locally

Here's how to run it locally:

Prerequisites

• Node.js 18+
• npm or pnpm
• Git

Installation

1. Clone the repository

   git clone https://github.com/ashlin-a/portfolio.git
   cd portfolio

2. Install dependencies

   npm install
   # or
   pnpm install

3. Set up environment variables

   cp .env.example .env

   The contact form uses Resend for email delivery:

   • Sign up for a Resend account
   • Get your API key from the dashboard
   • Add the API key to your .env file

   RESEND_API_KEY=your_resend_api_key

4. Run the development server

   npm run dev
   # or
   pnpm run dev

5. Open http://localhost:3000 in your browser

🎨 Key Technical Implementations

Form Validation & Email Integration

• Built custom contact form with Zod schema validation
• Integrated Resend API for reliable email delivery
• Implemented client-side and server-side validation

Responsive Design & Animations

• Mobile-first approach with Tailwind CSS
• Smooth transitions using Tailwind Motion
• Interactive navigation with scroll detection

🌐 Deployment

This portfolio is deployed on Cloudflare Workers, chosen for its excellent performance, generous free tier and global CDN.

Build Command

pnpm run build

Deploy Command for Cloudflare Workers

pnpm run deploy

Deployment Process

1. Connected GitHub repository to Cloudflare Workers
2. Configured build settings (Next.js framework preset)
3. Added environment variables in Cloudflare dashboard
4. Automatic deployments on every push to main branch

Why Cloudflare Workers?

• Lightning-fast global CDN
• Excellent performance metrics
• Seamless integration with Cloudflare ecosystem

Asset Management

Project screenshots and images are stored in Cloudflare R2 for:

• Cost-effective object storage
• Global distribution via CDN
• Seamless integration with Cloudflare Pages
• Optimized image delivery

🛠️ Development Learnings

This project helped me master:

• Next.js 14 App Router - Modern React framework patterns
• TypeScript Integration - Type-safe development workflow
• Form Handling - Custom validation without external form libraries
• Email Integration - Server-side API routes with Resend
• Responsive Design - Mobile-first CSS architecture

📄 License

This project is licensed under the GNU GPL License - see the LICENSE file for details.

Acknowledgments

• Icons from React Icons
• Animations powered by Tailwind Motion
• People illustrations by Storyset

Contact

Ashlin Asokan

• Website: ashlin.dev
• LinkedIn: @simpleashlin
• Email: mail@ashlin.dev

---

⭐ Feel free to explore the code and see how it's built!