Portfolio Web

A Next.js 15 App Router project that renders an interactive, VS Code–style portfolio experience. The UI emulates an IDE with tabs, sidebar navigation, and a terminal-like panel to showcase personal projects, experience, and achievements.

Architecture Overview

• App Shell: src/app/layout.tsx wires global metadata and imports globals.css for baseline styling; src/app/page.tsx mounts the IDE component as the primary view.
• Feature Components: src/components/IDE.tsx orchestrates local state for the active tab and sidebar. Supporting UI pieces (Sidebar, Editor, Terminal, StatusBar) live alongside reusable section components in src/components/sections/.
• Content Source: Portfolio copy, metrics, and file metadata are centralized in src/data/portfolioData.ts. Update this file to add sections, projects, or contact info without touching presentation components.
• Styling: Global resets live in src/app/globals.css; component-specific styles use CSS modules under src/styles/ (for example, IDE.module.css). Static assets reside in public/.

Local Setup

1. Install Node.js 18+ (LTS recommended) and npm.
2. Clone the repository and install dependencies:

   npm install

3. Start the development server with hot reload:

   npm run dev

4. Visit http://localhost:3000 to interact with the portfolio. Edit content in src/data/portfolioData.ts or component files and the page will refresh automatically.

Development Workflow

• Use absolute imports via the @/ alias defined in tsconfig.json (for example, import Sidebar from '@/components/Sidebar';).
• Keep component files in PascalCase and colocate related styles in matching CSS module files (e.g., Sidebar.tsx + Sidebar.module.css).
• Extend data structures by updating the TypeScript interfaces in src/data/portfolioData.ts to maintain type safety across the UI.

Testing & Quality

Automated tests are not yet configured. Run the lint task as the primary quality gate:

npm run lint

If you add tests, place them under src/__tests__/ and document new scripts in package.json.

Build & Deployment

Create an optimized production build and preview it locally:

npm run build
npm run start

Deploy the .next/ output to your hosting provider (Vercel or any static web hosting) or export a static build with next export if needed.