---

📋 Table of Contents

• About
• Features
• Tech Stack
• Getting Started
• Project Structure
• Customization
• Deployment
• Contact

---

🎯 About

Welcome to my personal portfolio! This project is a reflection of my passion for software engineering and technology. Built with cutting-edge web technologies, it features:

"Passionate about Tech, turned me into Software engineer ❤️"

"I love building things and helping people."

The portfolio highlights my professional journey, showcasing work experience at companies like Redlio Designs and Salecto, along with the projects that define my technical expertise.

---

✨ Features

🎨 Design & UX ✅ Responsive Design - Pixel-perfect on all devices ✅ Dark/Light Mode - User preference theme switching ✅ Smooth Animations - Polished micro-interactions ✅ macOS-Style Dock - Elegant navigation experience

⚡ Performance ✅ Fast Load Times - Optimized assets & code splitting ✅ SEO Optimized - Better discoverability ✅ Modern Stack - Latest Next.js & React features ✅ Modular SCSS - Maintainable styling architecture

---

🛠️ Tech Stack

---

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

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

Installation

1. Clone the repository

   git clone https://github.com/yourusername/portfolio_website.git
   cd portfolio_website
   

2. Install dependencies

   npm install
   # or
   yarn install
   

3. Run the development server

   npm run dev
   # or
   yarn dev
   

4. Open your browser

   Navigate to http://localhost:3000 🎉

Build for Production

npm run build
npm start

---

📂 Project Structure

portfolio_website/
│
├── 📁 components/          # Reusable React components
│   ├── Dock/              # macOS-style dock component
│   └── MainWrapper/       # Layout wrapper component
│
├── 📁 contexts/           # React Context providers
│   └── ThemeContext.js    # Theme management (dark/light mode)
│
├── 📁 pages/              # Next.js pages & routing
│   ├── _app.js           # Custom App component
│   ├── _document.js      # Custom Document
│   ├── index.js          # Home page
│   └── api/              # API routes
│
├── 📁 public/             # Static assets
│   ├── images/           # Image assets
│   └── fonts/            # Custom fonts
│
├── 📁 styles/             # Global & module styles
│   ├── globals.scss      # Global SCSS styles
│   └── *.module.scss     # Component-specific styles
│
├── 📄 next.config.mjs     # Next.js configuration
├── 📄 jsconfig.json       # JavaScript configuration
└── 📄 package.json        # Project dependencies

---

🎨 Customization

Updating Personal Information

1. Profile & Bio: Edit pages/index.js
2. Theme Colors: Modify styles/globals.scss
3. Profile Image: Replace public/images/test(1).png

Adding New Sections

Create new components in the components/ directory and import them in pages/index.js.

---

🚢 Deployment

Deploy on Vercel (Recommended)

The easiest way to deploy this Next.js app:

1. Push your code to GitHub
2. Import your repository on Vercel
3. Vercel will automatically detect Next.js and configure settings
4. Your site will be live in minutes! 🎉

Other Platforms

• Netlify: Connect your repo and deploy
• AWS Amplify: Use the Amplify Console
• Traditional Hosting: Run npm run build and deploy the .next folder

---

👨‍💻 Contact

---