Personal Portfolio

A modern, minimal and responsive developer portfolio built with React, TypeScript, Vite, and SCSS.

Designed with a focus on clean architecture, maintainability, accessibility and performance.

---

✨ Features

• Modern and minimal UI
• Fully responsive design
• Light & Dark theme
• Theme preference persistence
• Smooth animations using Framer Motion
• SCSS Modules
• TypeScript
• Easy to maintain JSON-based content
• SEO ready
• Deployment ready
• Accessibility focused
• Performance optimized

---

🛠 Tech Stack

Frontend

• React 19
• TypeScript
• Vite
• SCSS Modules

Libraries

• Framer Motion
• React Icons
• React Intersection Observer
• React Type Animation
• React Helmet Async
• clsx

Tooling

• ESLint
• Prettier
• TypeScript

---

📁 Project Structure

src
├── assets
├── components
│   ├── common
│   ├── layout
│   └── sections
├── data
├── hooks
├── styles
│   ├── abstracts
│   ├── base
│   ├── themes
│   └── globals.scss
├── types
├── utils
├── App.tsx
└── main.tsx

---

📦 Installation

Clone the repository

git clone <repository-url>

Navigate to the project

cd my-portfolio

Install dependencies

npm install

---

🚀 Development

Start the development server

npm run dev

---

🏗 Build

Create a production build

npm run build

Preview the production build

npm run preview

---

🧹 Code Quality

Run ESLint

npm run lint

Automatically fix lint issues

npm run lint:fix

Run TypeScript checks

npm run typecheck

Format the project

npm run format

Check formatting

npm run format:check

---

🎨 Customization

All portfolio content is maintained from the data layer.

Update the following information without touching UI components:

• Hero
• About
• Experience
• Projects
• Technologies
• Skills
• Achievements
• Testimonials
• Contact
• Social Links

This keeps the UI independent from content.

---

🌗 Theme

The application supports:

• Light Theme
• Dark Theme
• System Preference Detection
• Persistent Theme Selection

---

📱 Responsive Design

Optimized for:

• Mobile
• Tablet
• Laptop
• Desktop
• Large Displays

---

♿ Accessibility

• Semantic HTML
• Keyboard navigation
• Focus states
• ARIA labels
• Reduced motion support
• Accessible color contrast

---

⚡ Performance

• Lazy animations
• Optimized assets
• CSS Modules
• Minimal dependencies
• Production build optimized by Vite

---

🚀 Deployment

The project can be deployed to:

• Vercel
• Netlify
• GitHub Pages
• Cloudflare Pages
• Any static hosting provider

Build command

npm run build

Publish the generated dist folder.

---

📄 License

This project is available for personal use and customization.