A horror-themed personal portfolio website built with modern web technologies. This isn't your average portfolio - it's an immersive experience with spooky animations, interactive elements, and a unique dark aesthetic.

• Horror Theme - Blood red & void black color palette
• Animated Ghost Character - A floating ghost that follows you around
• Typing Animation - Dynamic "I am a..." text that cycles through roles
• 3D Page Flip Transitions - Smooth card-flip animation when navigating pages
• Glitch Effects - CSS glitch animation on titles
• Fog & Blood Overlays - Atmospheric horror effects

• Firebase Authentication - Email/password + Google Sign-In
• Protected Admin Dashboard - Only accessible by admin email
• Media Upload System - Upload project images and videos

• Guestbook - Visitors can leave messages with emoji spirits
• Contact Form - Direct messages saved to database
• Project Gallery - Dynamic project cards with links to GitHub

• Responsive Design - Works on all screen sizes
• Auto-Hide Navigation - Nav bar hides on scroll down
• Preloader Animation - "Welcome to Krishna's Portfolio Void" intro
• Smooth Scroll - Polished scrolling experience

portfolio_website/
├── app/
│   ├── components/        # Reusable UI components
│   │   ├── LiquidGlassNav.tsx
│   │   ├── AnimatedCharacter.tsx
│   │   ├── TypewriterEffect.tsx
│   │   ├── Preloader.tsx
│   │   └── ...
│   ├── admin/             # Admin dashboard (protected)
│   ├── guestbook/         # Guestbook page
│   ├── projects/          # Projects listing
│   ├── project/[id]/      # Individual project pages
│   ├── login/             # Login page
│   ├── signup/            # Signup page
│   ├── contact/           # Contact form
│   ├── globals.css        # Global styles & theme
│   └── page.tsx           # Homepage
├── lib/
│   ├── firebase.ts        # Firebase configuration
│   ├── supabase.ts        # Supabase client
│   └── storage.ts         # File upload utilities
├── public/                # Static assets
└── screenshots/           # README images (add your own!)

• Node.js 18+ installed
• npm or yarn
• Firebase project (for auth)
• Supabase project (for database)

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

npm install

Create a .env.local file in the root directory:

# Firebase Configuration
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id

# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=https://your_project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key

Run this SQL in your Supabase SQL Editor:

-- Contact Submissions Table
CREATE TABLE IF NOT EXISTS contact_submissions (
    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
    name TEXT NOT NULL,
    email TEXT NOT NULL,
    message TEXT NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Guestbook Table
CREATE TABLE IF NOT EXISTS guestbook (
    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
    user_id TEXT NOT NULL,
    author_name TEXT NOT NULL,
    message TEXT NOT NULL,
    emoji TEXT DEFAULT '👻',
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Project Media Table (for admin uploads)
CREATE TABLE IF NOT EXISTS project_media (
    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
    repo_name TEXT NOT NULL UNIQUE,
    image_url TEXT,
    video_url TEXT,
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Enable Row Level Security
ALTER TABLE contact_submissions ENABLE ROW LEVEL SECURITY;
ALTER TABLE guestbook ENABLE ROW LEVEL SECURITY;
ALTER TABLE project_media ENABLE ROW LEVEL SECURITY;

-- Create policies for public access
CREATE POLICY "Public can insert contacts" ON contact_submissions FOR INSERT TO public WITH CHECK (true);
CREATE POLICY "Public can read guestbook" ON guestbook FOR SELECT TO public USING (true);
CREATE POLICY "Public can insert guestbook" ON guestbook FOR INSERT TO public WITH CHECK (true);
CREATE POLICY "Public can read media" ON project_media FOR SELECT TO public USING (true);

npm run dev

Open http://localhost:3000 in your browser.

The admin dashboard is protected and only accessible by the configured admin email.

Admin Email: [email protected]

To access:

1. Go to /login
2. Sign in with the admin email
3. Navigate to /admin

Add your own screenshots in the screenshots/ folder:

Add a screen recording showing the preloader, typing animation, and page transitions.

View Live Site →

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

Krishna Kumar

• Email: [email protected]
• GitHub: github.com/krishna3163
• LinkedIn: linkedin.com/in/krishnakumar

👻 "Enter if you dare..."