⚡ Amarnath's Portfolio

A modern, high-performance frontend developer portfolio built to showcase technical proficiency and creative design.

---

🚀 Live Demo

👉 View Live Portfolio

---

📖 Table of Contents

• About
• Key Features
• Tech Stack
• Project Structure
• Getting Started
• Deployment
• Performance & Accessibility
• Contact

---

👋 About

This portfolio is a representation of my journey and skills as a Frontend Developer. It is designed not just to display my projects, but to demonstrate my ability to build clean, responsive, and accessible web applications.

The site features a polished Dark/Light mode, smooth transitions, and a component-driven architecture that emphasizes maintainability and scalability.

---

✨ Key Features

• 🎨 Dynamic Theme System: Robust Light/Dark mode with system preference detection and local storage persistence.
• 📱 Fully Responsive: "Mobile-First" design approach ensuring perfect rendering on all devices from phones to 4K monitors.
• ⚡ Blazing Fast: Powered by Vite for instant server starts and optimized production builds.
• ♿ Accessible: Built with semantic HTML5 and WCAG guidelines (keyboard navigation, proper contrast, aria attributes).
• 🛠️ Modern Stack: Utilizes React 19 and Tailwind CSS v4 for cutting-edge development capabilities.
• 📨 Functional Contact Form: Integrated with Formspree for reliable email delivery without a backend.
• 📁 Detailed Project Showcases: Rich project cards with status tags, links, and learning outcomes.

---

🛠 Tech Stack

Domain	Technology	Description
Core	React 19	Latest library features for building interactive UIs.
Styling	Tailwind CSS v4	Utility-first CSS framework for rapid UI development.
Build Tool	Vite 7	Next-generation frontend tooling.
Icons	React Icons	Popular icon packs (Fa, Fi, Si) included as components.
Forms	@formspree/react	Serverless form handling.
Linting	ESLint + Prettier	Code quality and formatting consistency.

---

📂 Project Structure

A quick look at the top-level directory structure:

react-portfolio/
├── public/              # Static assets (favicon, manifest, etc.)
├── src/
│   ├── assets/          # Images, logos, and global static files
│   ├── components/      # Reusable UI components (Buttons, Cards, Navbar)
│   ├── context/         # React Context (ThemeContext, etc.)
│   ├── data/            # Static data files (projects.js, skills.jsx)
│   ├── pages/           # Page sections (Hero, About, Contact)
│   ├── App.jsx          # Main application layout
│   ├── main.jsx         # Application entry point
│   └── index.css        # Global styles & Tailwind imports
├── .eslintrc.cjs        # Linting configuration
├── tailwind.config.js   # Tailwind CSS configuration
└── vite.config.js       # Vite configuration

---

🚀 Getting Started

Follow these steps to set up the project locally on your machine.

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/amar-295/react-portfolio.git
   cd react-portfolio

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

   Open http://localhost:5173 to view it in the browser.

Building for Production

To create a production-ready build:

npm run build

---

📨 Environment Variables

To make the Contact Form functional, you need to set up Formspree.

1. Create a .env file in the root directory.
2. Add your Formspree Project ID:

VITE_FORMSPREE_PROJECT_ID=your_project_id_here

---

📈 Performance & Accessibility

This project is optimized for high performance and accessibility:

• Lighthouse Score: Targeting 90+ on all metrics.
• Semantic HTML: Using <nav>, <main>, <section>, and <footer> for better SEO and screen readers.
• Lazy Loading: Assets are optimized and loaded efficiently.

---

📬 Contact

I am open to Frontend Developer roles and interesting freelance projects.

• Email: 612amar@gmail.com
• GitHub: github.com/amar-295
• LinkedIn: Search "Amarnath"

---

⬆️ Back to Top