Bytefolio

My Personal Portfolio Made in Next.js

TypeScript ⭐ 0

README

ByteFolio

A modern, full-featured portfolio application built with Next.js 15, featuring a complete admin dashboard for dynamic content management. Built for developers and creatives who want a professional online presence without touching code after initial setup.

✨ Features

Public Portfolio

Hero Section - Eye-catching landing with name, specialization, and call-to-action
About Me - Professional summary and bio with profile image
Skills Showcase - Categorized skills with proficiency levels and custom icons
Education Timeline - Academic background displayed in an interactive vertical timeline
Projects Gallery - Portfolio projects with images, tags, live demos, and repository links
Certifications - Professional certifications with verification links
Contact Form - Dual email integration (EmailJS client-side + Resend server-side fallback)
Dark/Light Mode - System-aware theme switching with smooth transitions
Responsive Design - Optimized for all screen sizes and devices
SEO Optimized - Built-in sitemap, robots.txt, canonical URLs, and JSON-LD structured data

Admin Dashboard

Complete CRUD operations for all content sections:

Dashboard Overview - Real-time stats for projects, skills, certifications, and page views
About Management - Edit professional summary, bio, and profile image
Skills Manager - Add/edit/delete skills with categories, levels, and Lucide icons
Education Manager - Manage academic history with timeline integration
Projects Manager - Full project portfolio management with image upload support
Certifications Manager - Track and display professional credentials
Site Settings - Configure site name, tagline, SEO metadata, and contact information
Integrations - Set up EmailJS, Google Analytics, Ko-fi, and custom HTML widgets

🛠️ Tech Stack

Frontend

Next.js 15 - React framework with App Router
TypeScript - Type-safe development
Tailwind CSS - Utility-first styling
shadcn/ui - High-quality React components
Lucide Icons - Beautiful icon library
React Hook Form - Form validation
Zod - Schema validation

Backend & Database

Firebase Realtime Database - Real-time data storage
Firebase Admin SDK - Secure server-side operations
Next.js Server Actions - Type-safe mutations

AI & Integrations

Google Genkit - AI capabilities
EmailJS - Client-side email
Resend - Server-side email fallback
Recharts - Dashboard analytics

🏗️ Architecture

graph LR
    User["👤 User"] --> App["⚡ Next.js App<br/>Port 9002"]
    App --> |"Read Data"| Firebase["🔥 Firebase<br/>Realtime DB"]
    App --> |"Update Content"| Actions["🔄 Server Actions<br/>+ Zod Validation"]
    Actions --> Firebase
    
    App --> Email["📧 Email<br/>EmailJS + Resend"]
    App -.-> UI["🎨 UI Layer<br/>Tailwind + shadcn/ui"]
    
    style User fill:#4A90E2,stroke:#2E5C8A,stroke-width:2px,color:#fff
    style App fill:#06B6D4,stroke:#0891B2,stroke-width:2px,color:#fff
    style Actions fill:#10B981,stroke:#059669,stroke-width:2px,color:#fff
    style Firebase fill:#FFA000,stroke:#FF6F00,stroke-width:2px,color:#fff
    style Email fill:#8B5CF6,stroke:#6D28D9,stroke-width:2px,color:#fff
    style UI fill:#EC4899,stroke:#DB2777,stroke-width:2px,color:#fff

🔑 Key Points:

Next.js App Router handles routing, rendering, and SEO optimization
Server Actions process all updates with Zod validation for type safety
Firebase Realtime DB stores all content with secure server-side access
Dual Email System ensures message delivery (EmailJS → Resend fallback)
Modern UI Stack combines Tailwind CSS and shadcn/ui components

🚀 Quick Start

Prerequisites

Node.js 20 or higher
Firebase project (Create one here)
npm or yarn package manager

Installation

Clone the repository

git clone https://github.com/KunalGupta25/Bytefolio.git
cd Bytefolio

Install dependencies

npm install

Configure Firebase

Go to Firebase Console
Create a new project or select existing
Navigate to Project Settings → Service Accounts
Click "Generate New Private Key" under Admin SDK
Download the JSON file

Set up environment variables

Create .env.local in the root directory:

# Firebase Admin SDK (from downloaded JSON file)
FIREBASE_SERVICE_ACCOUNT_TYPE="service_account"
FIREBASE_SERVICE_ACCOUNT_PROJECT_ID="your-project-id"
FIREBASE_SERVICE_ACCOUNT_PRIVATE_KEY_ID="your-private-key-id"
FIREBASE_SERVICE_ACCOUNT_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nYOUR_KEY_HERE\n-----END PRIVATE KEY-----\n"
FIREBASE_SERVICE_ACCOUNT_CLIENT_EMAIL="[email protected]"
FIREBASE_SERVICE_ACCOUNT_CLIENT_ID="your-client-id"
FIREBASE_SERVICE_ACCOUNT_AUTH_URI="https://accounts.google.com/o/oauth2/auth"
FIREBASE_SERVICE_ACCOUNT_TOKEN_URI="https://oauth2.googleapis.com/token"
FIREBASE_SERVICE_ACCOUNT_AUTH_PROVIDER_X509_CERT_URL="https://www.googleapis.com/oauth2/v1/certs"
FIREBASE_SERVICE_ACCOUNT_CLIENT_X509_CERT_URL="https://www.googleapis.com/robot/v1/metadata/x509/YOUR_EMAIL_ENCODED"
FIREBASE_SERVICE_ACCOUNT_UNIVERSE_DOMAIN="googleapis.com"

# Firebase Realtime Database
FIREBASE_DATABASE_URL="https://your-project-default-rtdb.firebaseio.com"

# Admin Credentials
ADMIN_EMAIL="[email protected]"
ADMIN_PASSWORD="your-secure-password"

# Email Service (Optional)
CONTACT_FORM_RECIPIENT_EMAIL="[email protected]"
RESEND_API_KEY="re_xxxxxxxxxxxx"

# Analytics (Optional)
NEXT_PUBLIC_GA_MEASUREMENT_ID="G-XXXXXXXXXX"

# Site Configuration
NEXT_PUBLIC_SITE_URL="https://yourdomain.com"

Configure Firebase Realtime Database Rules

In Firebase Console → Realtime Database → Rules, set:

{
  "rules": {
    ".read": false,
    ".write": false
  }
}

The Admin SDK bypasses these rules, keeping your data secure.

Start development server

npm run dev

Visit http://localhost:9002 to see your portfolio.

Access admin panel

Navigate to http://localhost:9002/admin/login and use the credentials from your .env.local file.

📜 Available Scripts

npm run dev          # Start development server on port 9002
npm run build        # Build for production
npm start            # Start production server
npm run lint         # Run ESLint
npm run typecheck    # Run TypeScript type checking
npm run genkit:dev   # Start Genkit AI development server

🗂️ Project Structure

Bytefolio/
├── src/
│   ├── app/
│   │   ├── actions.ts              # Server actions for CRUD operations
│   │   ├── layout.tsx              # Root layout with metadata
│   │   ├── page.tsx                # Homepage
│   │   ├── robots.ts               # SEO robots configuration
│   │   ├── sitemap.ts              # Dynamic sitemap generation
│   │   ├── admin/                  # Admin dashboard
│   │   │   ├── login/              # Admin authentication
│   │   │   ├── about/              # About Me management
│   │   │   ├── skills/             # Skills management
│   │   │   ├── education/          # Education management
│   │   │   ├── projects/           # Projects management
│   │   │   ├── certifications/     # Certifications management
│   │   │   ├── settings/           # Site settings
│   │   │   └── integrations/       # Third-party integrations
│   │   └── components/             # Page-specific components
│   ├── components/
│   │   └── ui/                     # Reusable UI components (shadcn)
│   ├── lib/
│   │   ├── data.ts                 # Data interfaces and queries
│   │   ├── firebase-admin.ts       # Firebase Admin initialization
│   │   ├── site-url.ts             # URL utilities
│   │   └── utils.ts                # Helper functions
│   ├── hooks/                      # React hooks
│   └── ai/                         # Genkit AI configuration
├── public/                         # Static assets
├── docs/                           # Documentation
└── .env.local.example              # Environment variables template

🔐 Security

Private Database: Firebase rules set to deny all public access
Server-Side Auth: Admin SDK handles all database operations securely
Environment Variables: Sensitive credentials stored in .env.local
Admin Routes: Protected with basic authentication (enhance for production)
SEO Protection: Admin routes excluded via robots.txt and noindex meta tags

🌐 Deployment

Deploy to Vercel

Click the "Deploy with Vercel" button above, or:
Connect your GitHub repository to Vercel
Add all environment variables from .env.local
Deploy

Deploy to Netlify

Connect your repository to Netlify
Build command: npm run build
Publish directory: .next
Add environment variables
Deploy

The project includes netlify.toml for automatic Netlify configuration.

🎨 Customization

Theme Colors

Edit tailwind.config.ts to customize colors:

Primary: Navy blue #24292F
Secondary: Light gray #E5E5E5
Accent: Teal #008080

Site Content

All content is managed through the admin dashboard at /admin:

Update your name, tagline, and bio
Add/remove skills, projects, and certifications
Configure social media links
Customize site metadata for SEO

Components

All UI components are in src/components/ui/ and can be customized following shadcn/ui patterns.

📊 Features in Detail

Email Integration

ByteFolio supports dual email configuration:

EmailJS (Client-side): Configure in Admin → Integrations
Resend (Server-side): Automatic fallback using environment variables

Analytics

Google Analytics: Add NEXT_PUBLIC_GA_MEASUREMENT_ID to track visitors
Page Views: Built-in counter displayed in admin dashboard

AI Integration

Google Genkit is integrated for potential AI features:

npm run genkit:dev  # Start AI development server

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📝 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

Built with:

shadcn/ui for beautiful components
Lucide for icons
Vercel for hosting platform
Firebase for backend services

📧 Support

For issues and questions:

Open an issue on GitHub
Check existing documentation in /docs

Made with ❤️ by Kunal Gupta