🌐 OS Portfolio

A stunning, high-performance developer portfolio website built with cutting-edge technologies

Features • Tech Stack • Installation • Customization • Deployment • License

⚡ Features

🎯 Feature	📝 Description
⚡ Lightning Fast	Built on Next.js 15 with Turbopack for blazing fast development
🎨 Beautiful UI	Polished interface using shadcn/ui, Radix UI, and Tailwind CSS v4
📊 GitHub Integration	Dynamic widget that auto-fetches your GitHub profile data
📧 Contact Form	Working email API powered by Nodemailer (Gmail ready)
🌗 Theme Support	Seamless dark/light mode toggle with next-themes
🖼️ Export Ready	PDF export & screenshot capabilities built-in
🌀 Smooth Animations	Fluid animations using Framer Motion
🧩 State Management	Efficient state handling with Zustand
🔒 Type-Safe	Full TypeScript support for reliability
♿ Accessible	WCAG compliant with Radix UI primitives

🛠️ Tech Stack

Core Technologies

Next.js 15

React 19

TypeScript

Tailwind v4

UI & Animation

shadcn/ui

Radix UI

Framer Motion

Lucide Icons

Backend & Utilities

Category	Technology
State Management	Zustand
Email Service	Nodemailer
PDF Generation	jsPDF
Screenshots	html2canvas
Audio	Howler.js
Animations	tailwindcss-animate

📂 Project Structure

os-portfolio/
├── 📁 src/
│   ├── 📁 app/
│   │   ├── 📁 api/
│   │   │   └── 📁 send-email/
│   │   │       └── 📄 route.ts          # Contact form email handler
│   │   ├── 📄 layout.tsx
│   │   └── 📄 page.tsx                  # Homepage
│   ├── 📁 components/
│   │   ├── 📁 os/
│   │   │   └── 📁 widgets/
│   │   │       └── 📄 github-app.tsx    # GitHub Profile Widget
│   │   └── 📁 ui/                       # shadcn/ui components
│   ├── 📁 lib/
│   │   └── 📄 utils.ts
│   └── 📁 styles/
│       └── 📄 globals.css
├── 📁 public/
│   └── 📁 assets/
├── 📄 components.json                    # shadcn/ui config
├── 📄 next.config.ts
├── 📄 tailwind.config.js
├── 📄 tsconfig.json
├── 📄 package.json
├── 📄 .env.local.example
└── 📄 README.md

⚙️ Installation & Setup

📦 Prerequisites

Node.js 18.17 or later
npm, yarn, or pnpm
Git
Gmail account (for contact form)

🚀 Quick Start

# 1️⃣ Clone the repository
git clone https://github.com/nerkoux/os-portfolio.git
cd os-portfolio

# 2️⃣ Install dependencies
npm install
# or
yarn install
# or
pnpm install

# 3️⃣ Create environment file
cp .env.local.example .env.local

# 4️⃣ Configure your environment variables
# Edit .env.local and add:
# [email protected]
# SMTP_PASSWORD=your_app_password

# 5️⃣ Run the development server
npm run dev

🎉 Open http://localhost:3000 in your browser!

📧 Gmail App Password Setup

Click to expand Gmail configuration steps

Go to your Google Account
Navigate to Security → 2-Step Verification (enable if not already)
Scroll to App passwords
Generate a new app password for "Mail"
Copy the 16-character password
Add it to your .env.local file as SMTP_PASSWORD

💡 Note: Never use your actual Gmail password. Always use App Passwords for security.

🧠 Customization Guide

🔹 1. GitHub Widget Setup

File: src/components/os/widgets/github-app.tsx

// Replace with your GitHub username
const username = 'your-github-username' // 👈 Change this

useEffect(() => {
  fetchGitHubData()
}, [])

const fetchGitHubData = async () => {
  setLoading(true)
  setError(null)
  
  try {
    // Add delay to avoid rate limiting
    await new Promise(resolve => setTimeout(resolve, 100))
    
    // Fetch profile data with proper headers
    const profileResponse = await fetch(
      `https://api.github.com/users/${username}`,
      {
        headers: {
          'Accept': 'application/vnd.github.v3+json',
          'User-Agent': 'Portfolio-App'
        }
      }
    )

    if (!profileResponse.ok) throw new Error('Failed to fetch profile')
    
    const profileData = await profileResponse.json()
    setProfile(profileData)
    
    // Fetch repositories...
  } catch (err) {
    setError('Failed to load GitHub data.')
  } finally {
    setLoading(false)
  }
}

💡 Pro Tip: Using GitHub Personal Access Token

For higher API rate limits, add a GitHub token:

// In .env.local
GITHUB_TOKEN=ghp_your_token_here

// In github-app.tsx
const token = process.env.NEXT_PUBLIC_GITHUB_TOKEN

const profileResponse = await fetch(
  `https://api.github.com/users/${username}`,
  {
    headers: {
      'Authorization': token ? `Bearer ${token}` : '',
      'Accept': 'application/vnd.github.v3+json',
    }
  }
)

🔹 2. Contact Form Configuration

File: src/app/api/send-email/route.ts

import { NextResponse } from 'next/server'
import nodemailer from 'nodemailer'

export async function POST(request: Request) {
  try {
    const { name, email, message } = await request.json()

    // Validation
    if (!name || !email || !message) {
      return NextResponse.json(
        { error: 'Missing required fields' },
        { status: 400 }
      )
    }

    // Gmail SMTP Setup
    const transporter = nodemailer.createTransport({
      service: 'gmail',
      auth: {
        user: process.env.SMTP_EMAIL,
        pass: process.env.SMTP_PASSWORD,
      },
    })

    // Send email
    await transporter.sendMail({
      from: process.env.SMTP_EMAIL,
      to: process.env.SMTP_EMAIL, // Your email
      subject: `Portfolio Contact: ${name}`,
      text: message,
      html: `
        <h2>New Contact Form Submission</h2>
        <p><strong>Name:</strong> ${name}</p>
        <p><strong>Email:</strong> ${email}</p>
        <p><strong>Message:</strong></p>
        <p>${message}</p>
      `,
    })

    return NextResponse.json({ success: true })
  } catch (error) {
    console.error('Email error:', error)
    return NextResponse.json(
      { error: 'Failed to send email' },
      { status: 500 }
    )
  }
}

🔄 Alternative Email Providers

Outlook/Hotmail:

service: 'hotmail'

Yahoo:

service: 'yahoo'

Custom SMTP:

const transporter = nodemailer.createTransport({
  host: 'smtp.example.com',
  port: 587,
  secure: false,
  auth: {
    user: process.env.SMTP_EMAIL,
    pass: process.env.SMTP_PASSWORD,
  },
})

🔹 3. UI Customization

Tailwind Configuration

File: tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        // Customize your color palette
        primary: {
          50: '#eff6ff',
          // ... add your colors
          900: '#1e3a8a',
        },
      },
      animation: {
        // Add custom animations
        'fade-in': 'fadeIn 0.5s ease-in-out',
      },
    },
  },
}

Add shadcn/ui Components

# Add individual components
npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add input
npx shadcn-ui@latest add dialog

# View all available components
npx shadcn-ui@latest add

🧩 Available Scripts

Command	Description
`npm run dev`	🚀 Start development server with Turbopack
`npm run build`	📦 Build for production
`npm run start`	▶️ Start production server
`npm run lint`	🔍 Run ESLint checks
`npm run type-check`	✅ Run TypeScript type checking

🚀 Deployment

➤ Vercel (Recommended)

Steps:

Push your code to GitHub
Import your repository on Vercel
Add environment variables:
- SMTP_EMAIL
- SMTP_PASSWORD
Click Deploy 🎉

➤ Manual Build

# Build the application
npm run build

# Start production server
npm run start

➤ Alternative Hosting

Netlify

# Install Netlify CLI
npm install -g netlify-cli

# Deploy
netlify deploy --prod

Docker

FROM node:18-alpine

WORKDIR /app

COPY package*.json ./
RUN npm ci --only=production

COPY . .
RUN npm run build

EXPOSE 3000

CMD ["npm", "start"]

docker build -t os-portfolio .
docker run -p 3000:3000 os-portfolio

AWS (S3 + CloudFront)

# Build static export
npm run build

# Deploy to S3
aws s3 sync out/ s3://your-bucket-name --delete

📸 Screenshots

🏠 Homepage

📊 GitHub Widget

📧 Contact Form

🌗 Dark Mode

🔮 Roadmap & Future Enhancements

🤝 Contributing

Contributions are always welcome! Here's how you can help:

🍴 Fork the repository
🌿 Create a feature branch (git checkout -b feature/AmazingFeature)
💾 Commit your changes (git commit -m 'Add some AmazingFeature')
📤 Push to the branch (git push origin feature/AmazingFeature)
🔀 Open a Pull Request

📋 Contribution Guidelines

Follow the existing code style
Write meaningful commit messages
Update documentation as needed
Add tests for new features
Ensure all tests pass before submitting PR

🐛 Bug Reports & Feature Requests

Found a bug? Have a feature suggestion? Please open an issue with:

🐛 Clear description of the bug/feature
📸 Screenshots (if applicable)
🔍 Steps to reproduce (for bugs)
💡 Expected behavior
🖥️ Environment details

🧑‍💻 Author

Akshat Mehta

Full Stack Developer | UI/UX Enthusiast

Original concept inspired by @nerkoux

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License

Copyright (c) 2025 Akshat Mehta

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction...

💖 Support

If you found this project helpful, please consider:

⭐ Star this repository

🍴 Fork and share

☕ Buy me a coffee

🌟 Show some ❤️ by starring this repository!

Made with ❤️ and lots of ☕

Name		Name	Last commit message	Last commit date
Latest commit History 19 Commits
public		public
scripts		scripts
src		src
.gitattributes		.gitattributes
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
next.config.js		next.config.js
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json

License

nerkoux/OS-PORTFOLIO

Folders and files

Latest commit

History

Repository files navigation