A sleek, responsive, dark-themed personal portfolio website for Draft—a passionate 16-year-old developer enthusiastic about coding and exploring new technologies. This site highlights projects, skills, and contact information in a modern, engaging layout.

1. Demo
2. Features
3. Tech Stack
4. Screenshots
5. Getting Started
   • Prerequisites
   • Installation
   • Running in Development
   • Building for Production
6. Project Structure
7. Scripts & Commands
8. Deployment
9. Contributing
10. Contact
11. License

🔗 Live Site: https://your-deployment-link.com
Replace the above link with your actual deployment URL once live.

• Hero Section
  A compelling introduction with a brief bio, name, and a call-to-action button linking to work or contact.

• About Section
  A concise overview of Draft's background, interests, and coding journey.

• Projects Section
  Showcases completed projects with live demos, GitHub links, descriptions, technology badges, and screenshots.

• Skills Section
  Categorized list of technical skills (languages, frameworks, tools) with proficiency indicators.

• Contact Section
  A contact form with email integration and social media icons for GitHub, LinkedIn, and Twitter.

• Responsive Design
  Mobile-first approach ensuring seamless adaptation across desktop, tablet, and mobile devices.

• Dark Theme (Default)
  A clean dark mode aesthetic featuring high-contrast text and subtle color accents for a polished appearance.

• Light/Dark Toggle (Optional)
  Option to switch between dark and light themes (if implemented).

• Smooth Scrolling & Animations
  Subtle fade-ins, hover effects, and scroll-triggered animations for a modern user experience.

• Framework: Next.js (v15.2.4)
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Radix UI & shadcn/ui
• Linting: ESLint with Next.js configuration (next lint)
• Icons: Lucide Icons (if used)
• Form Handling: React Hook Form (if contact form is present)

Replace the placeholder images below with actual screenshots or GIFs of your live site.

Hero Section	Projects Section	Mobile View

Follow these steps to set up and run the project locally.

• Node.js ≥ v18 (LTS recommended)
• pnpm ≥ v7 (or use npm/yarn)

Verify installation:

node -v
pnpm -v

1. Clone the Repository

   git clone https://github.com/Draftgamz/Portfolio-V2-Beta.git

2. Navigate to the Project Directory

   cd Portfolio-V2-Beta

3. Install Dependencies

   pnpm install

   Alternatively, use npm install or yarn install.

Start the development server with hot-reloading:

pnpm dev

Open http://localhost:3000 in your browser. The page will auto-refresh when you edit source files.

Compile and optimize the app for production deployment:

pnpm build

Run the production build locally:

pnpm start

Your site will be available at http://localhost:3000.

├── app/
│   ├── layout.tsx         # Main layout component (header, footer, theme context)
│   ├── page.tsx           # Homepage / landing page
│   ├── globals.css        # Global CSS (imports Tailwind, custom styles)
│   └── ...                # Other route files (e.g., about/page.tsx, projects/page.tsx)
├── components/
│   ├── ui/                # shadcn/ui-style components (Button, Card, etc.)
│   ├── navigation.tsx     # Floating navbar component
│   ├── hero-section.tsx   # Hero section component
│   ├── about-section.tsx  # About section component
│   ├── project-card.tsx   # Component to render each project item
│   ├── skills-grid.tsx    # Skills listing component
│   ├── contact-form.tsx   # Contact form component
│   └── footer.tsx         # Footer component
├── public/
│   ├── favicon.ico        # Favicon
│   ├── logo.png           # Logo image
│   ├── hero-bg.jpg        # Background image
│   └── ...                # Other static assets (fonts, images)
├── lib/
│   ├── api.ts             # Utility functions for API calls (e.g., form submission)
│   └── utils.ts           # General helper functions
├── hooks/
│   └── useDarkMode.ts     # Custom hook to toggle light/dark theme (optional)
├── tailwind.config.ts     # Tailwind CSS configuration
├── next.config.js         # Next.js configuration
├── tsconfig.json          # TypeScript configuration
├── package.json           # Project metadata & scripts
└── README.md              # This README file

Inside the project directory, you can run:

Adjust commands if using npm (npm run dev, etc.) or yarn (yarn dev).

This project can be deployed to platforms like Vercel, Netlify, or any static-hosting service that supports Next.js.

Contributions are welcome and appreciated! If you have suggestions or find issues, please open an issue or submit a pull request.

Made with ❤️ by Draft
🔗 GitHub: @Draftgamz

This project is licensed under the MIT License. See LICENSE for more information.