A dynamic developer portfolio with a built-in admin panel.
No database · Password protected · Deploy from your browser

/admin  ·  admin123  ·  node panel.mjs  ·  npm run dev

---

⚡ Features

Section What it shows Hero Animated intro with scroll parallax, spring animations, gradient text About Background story with timeline, glass cards Skills Categorized grid with Lucide icons, stagger animations Projects Cards with image, tech stack pills, detail modal Achievements Interactive milestone cards with expandable modal Startup Vision Mission statement with icon pillars Sandbox (LinkedIn) High-fidelity mock LinkedIn profile rendering cover, about story, experience timeline, education history, certificates, and interactive posts feed Contact Form with validation, animated send button Footer Social links with hover animations

Tab What you can do Profile Edit name, title, bio, social links, image Skills Add / Edit / Delete with icon & category Projects Add / Edit / Delete with image upload Achievements Add / Edit / Delete with date & image Life Dashboard Manage projects, learning paths, activities, ideas, devlogs, experiences, and education. Supports browser bookmarklet sync. Messages View & delete contact submissions, sync from GitHub Settings Playlist, Background, Token, Deploy

---

🚀 Quick Start

# Install
npm install

# Start development
npm run dev

---

🛠 Tech Stack

╔══════════════╤══════════════════════════════════╗
║  React 19    │  UI Framework                    ║
║  Vite 7      │  Build Tool                      ║
║  Tailwind 3  │  Styling + Animations            ║
║  Zustand 5   │  State Management (localStorage) ║
║  Framer      │  Motion & Transitions            ║
║  Lucide      │  Icon Library                    ║
║  React Router│  Client-side Routing             ║
╚══════════════╧══════════════════════════════════╝

No backend server. Everything runs in the browser.

---

✨ Visual Effects & Animations

🌀 Cinematic Hero (3D Portrait)

The hero section features an interactive 3D character portrait with scroll + mouse-driven parallax:

• 3D perspective — portrait rotates on X/Y axes using combined mouse tracking and scroll position, with transform-style: preserve-3d and perspective: 1200px
• Scroll depth — portrait scales 1→0.85, translates Z -80px, and tilts -12° on scroll for a card-reveal effect
• Mouse tracking — cursor position drives ±6° rotation via spring physics (stiffness 150), throttled with requestAnimationFrame
• Layered effects — rim light, floor glow, gradient overlay, and ambient glow move independently for faux-3D depth
• Ambient background — dark canvas with floating gradient orbs, grain overlay, and vignette
• Particle field — 20 CSS-only twinkling particles (8 on mobile) — zero JavaScript animation overhead

🚀 Splash Screen

A full-screen preloader that animates while the website renders behind it:

• Star field — 250 twinkling stars with randomized sizes, pulse speeds, and delays
• Falling stars — 12 diagonal shooting stars with trailing tails at staggered intervals
• Orbit rings — 8 ultra-thin expanding rings with slight tilts, like solar system orbits
• Portfolio image — circular profile photo with dual pulsing ring borders
• Custom font — "Bagind" font self-hosted via @font-face for the name
• Loading indicator — 3 pulsing dots at the bottom
• Smart timing — splash stays minimum 2.8s; all website content renders behind it so animations are complete before reveal

🎬 Section Animations

Every section uses framer-motion with whileInView for scroll-triggered reveals:

• Spring stiffness/damping values tuned per element (80–300 stiffness)
• Stagger children — Skills grid items fly in with staggerChildren: 0.04
• Hover cards — Projects and Achievements lift on hover with spring physics
• Magnetic buttons — CTA buttons scale to 1.02–1.03 on hover, 0.97–0.98 on tap
• Navbar — slides down from top with spring, mobile menu animates with AnimatePresence
• Entrance speed — all section entrance durations reduced to 0.35–0.5s for instant scroll reveal

Each section uses a consistent pattern: initial → whileInView → viewport: { once: true } for efficient re-rendering. Below-fold sections use content-visibility: auto (.lazy-section) for instant paint on scroll.

🎵 Music Player Animations

Custom Tailwind keyframes defined in tailwind.config.js:

Animation	Duration	Effect
equalizer	0.8s	6 bars bounce at staggered heights (20%–100%) with opacity fade
disc-spin	4s	Smooth 360° rotation on YouTube thumbnail discs
pulse-glow	2s	Pulsing box-shadow from 12px to 30px gold blur
shine	3s	Gradient sweep across progress bar and card borders
aurora	6s	Slow horizontal sway with skew for the wave beneath the progress bar
twinkle	3s	Star particles fade and scale between 0.8 and 1.2

The collapsed pill button shows a spinning disc (YouTube thumbnail or styled icon), an animated equalizer for audio, and pulsing glow rings when active.

🪟 Glass-morphism UI

The admin panel uses a consistent glass aesthetic:

• backdrop-blur-xl on all panels and buttons
• border border-white/10 with bg-white/10 backgrounds
• Dark gradient fallback from-[#667eea] via-[#764ba2] to-[#f093fb]
• Overlay gradient from-black/40 via-transparent to-black/60 over media backgrounds
• All interactive elements have .active:scale-90 for tactile feedback

🤖 YouTube IFrame API

YouTube music plays entirely in the background — no visible video:

• Player element is w-0 h-0 opacity-0 pointer-events-none absolute
• API script injected on first YouTube song, reused for subsequent tracks
• loadVideoById() + playVideo() for seamless song switching
• seekTo() for progress bar seeking
• onStateChange tracks PLAYING/PAUSED/ENDED states
• Auto-resets volume to 100% on player ready
• Player destroyed on cleanup to prevent memory leaks

---

🏖️ Sandbox Page

The public Sandbox page (/sandbox) is an interactive playground that showcases developer activities, ongoing learning tracker, startup idea incubator, and mock social integrations.

Feature Area	Key Capability	Interactive Elements
1. Social Feed Switcher	Toggles mock feeds for LinkedIn, Snap Dude, GitHub, and YouTube	Likes, comments, slide-through post carousels
2. Learning Tracker	Tracks active upskilling curves, completed topics, and notes	Status badges, progress rings, study link tabs
3. Project Change-logs	Active project checklist lists, pending tasks, and date logs	Checklist completion states, toggleable logs
4. Startup Idea Repository	Incubator for brainstorming app concepts, pitches, and tech stacks	Conceptual descriptions and constraint logs
5. Activity Log (Devlog)	Chronological timeline of technical progress, features, and updates	Expandable documentation cards, screens

---

📱 Social Feed Integrations

💼 High-Fidelity LinkedIn Mock Profile

A pixel-perfect replica of a LinkedIn profile page rendered directly in your portfolio. This allows you to showcase a professional narrative without directing users off-site.

• Profile Header Card: Standard LinkedIn cover banner overlayed with avatar image, name, headline, geographic location, and a mock Connect button.
• Dynamic Experience Timeline: Automatically displays your professional career history (roles, companies, duration, and custom tag pills) synced directly from your database.
• Academic Education History: Lists school name, degree, dates, grade metrics, and academic activities.
• Credentials & Licenses: Dynamic Trophy-badged credentials populated directly from your achievements.
• Interactive Post Feed: Displays updates tagged for LinkedIn. Supports liking posts and viewing comments.

📸 Snap Dude Feed

An Instagram/Snapchat-style visual gallery feed for quick media updates.

• Double-tap posts to Like with spring-animated heart icons.
• Add comments directly under visual mock posts.
• Supports image slides, tag lists, and timestamps.

🐙 GitHub & 🎥 YouTube Views

• GitHub Integration: Renders your open-source projects, contribution stats, and direct links to active repositories.
• YouTube Embeds: Streams video logs, project demonstrations, and tutorials using a custom video player overlay.

---

📚 Learning & Progress Tracking

⚡ Learning Tracker

Tracks exactly what you are learning with high-fidelity visualization:

• Progress Rings: Smooth SVG circular rings displaying active progress percentage.
• Topic Checklists: Clear lists dividing completed topics (strikethrough) and pending topics.
• Resource Hub: Fast-access link pills linking directly to official documentation, tutorials, or guides.
• Field Notes: Custom insights, tips, and thoughts for each learning path.

🪵 Chronological Activity Log (Devlog)

A week-by-week technical journal representing your progress.

• Update Types: Highlights categories with custom emoji badges — ⚙️ Update, ✨ Feature, 📚 Learning.
• Details Cards: Expandable panels that reveal deep-dive technical documentation, checklists of changes made, and links to git commits.
• Embedded Screenshots: Image slides displaying proof-of-work layouts and screenshots directly inside the timeline.

---

🎨 Admin Panel Features

🔐 Password Protection

Default password: admin123
Change it directly in the Settings tab of the Admin Panel, then click Deploy to Production to apply it permanently (stored in data.json under profile.adminPassword).

Device	Behavior
First visit	Enter password → unlock for session
Same browser	Stays unlocked until tab closes
New device	Password prompt (works on every device)

🎵 Playlist & Music Player

Manage a playlist in Settings tab. A floating player appears at bottom-right.

• Add multiple songs — audio URLs, YouTube, or Spotify
• Reorder songs with up/down arrows
• Queue playback with next/prev, auto-advance to next song
• YouTube thumbnails shown as spinning disc + banner
• Animated progress bar with seek, star particles, and aurora glow
• Toggle on/off with the floating music button

🖼️ Background Image / Video

Set a background in Settings tab:

• Image — URL or upload from device
• Video — URL, upload, or YouTube link (auto-detected!)
• Toggle on/off with the eye button (bottom-left) — smooth crossfade
• Falls back to animated gradient when toggled off

🔗 LinkedIn Sync Scraper (Method 3)

Syncing data from LinkedIn is notoriously difficult due to CORS, authwalls, and bot blocks. This project uses a Browser Bookmarklet Scraper to sync your profile, experiences, and education in real-time under your own logged-in browser session.

flowchart TD
    subgraph Browser [Your Browser Session]
        A[Visit LinkedIn Profile] --> B[Click Bookmarklet]
        B --> C{Scrape profile, experiences, education}
        C --> D{POST to http://localhost:5173/api/sync}
    end

    subgraph DevServer [Local Portfolio Server]
        D -- "Success (CORS Preflight OK)" --> E[Vite server mock API]
        E --> F[Merge with existing data]
        F --> G[Write to public/data.json on disk]
    end

    subgraph Fallback [Clipboard Backup]
        D -- "Failed (Offline / Production)" --> H[Copy JSON to Clipboard]
        H --> I[Open Admin Modal]
        I --> J[Paste & Import manually]
    end

    style DevServer fill:#FFB800,stroke:#18112E,stroke-width:2px,color:#18112E
    style Fallback fill:#667eea,stroke:#fff,stroke-width:1px,color:#fff

Loading

How it works:

1. Copy the Bookmarklet: Inside the Admin Panel (Life Dashboard → Import LinkedIn JSON), copy the bookmarklet code.
2. Create a Bookmark: Create a new bookmark in your browser bookmarks bar, name it (e.g., Sync Portfolio), and paste the copied javascript code as the URL.
3. Visit LinkedIn: Navigate to your own public LinkedIn profile page (e.g., linkedin.com/in/your-name).
4. Click & Sync: Click the bookmarklet. The script scrapes your profile details, experiences, and education, and immediately POSTs it to the dev server's endpoint (http://localhost:5173/api/sync) which automatically writes to public/data.json on disk.
5. Production Fallback: If the local endpoint is unreachable (e.g., when visiting your live production site), the bookmarklet automatically copies the JSON data to your clipboard so you can paste it manually into the import modal text box.

🚀 Deploy to Production

1. Generate a GitHub classic token with repo scope at
   https://github.com/settings/tokens

2. Go to /admin → Settings → paste token → Save

3. Click Deploy to Production

Commits public/data.json to GitHub → Vercel auto-redeploys → all users see updates in ~30s.

📂 Upload Files

Every media setting supports both:

Method	How it works
URL	Paste a direct link (mp3, mp4, jpg, YouTube, etc.)
Upload	Pick a file from your device, stored as data URL in localStorage

No external storage service needed.

---

📁 Project Layout

📦 Portfolio CMS
├── 📂 public/
│   └── 📄 data.json            → deployed content (GitHub commit)
├── 📂 src/
│   ├── 📄 App.jsx              → Routes (/ + /admin)
│   ├── 📄 main.jsx             → React entry point
│   ├── 📄 index.css            → Tailwind directives + custom scrollbar
│   ├── 📂 lib/
│   │   └── 📄 store.js         → Zustand store (profile, skills, projects, achievements, messages, CRUD + GitHub sync)
│   ├── 📂 components/public/
│   │   ├── 📄 BackgroundScene.jsx → parallax orbs, grid, floating shapes
│   │   ├── 📄 Navbar.jsx          → sticky glass nav + mobile drawer
│   │   ├── 📄 Hero.jsx            → scroll parallax, spring text, CTAs
│   │   ├── 📄 About.jsx           → story section with timeline
│   │   ├── 📄 Skills.jsx          → categorized skill pills with stagger
│   │   ├── 📄 Projects.jsx        → project cards + detail modal
│   │   ├── 📄 Achievements.jsx    → milestone cards + expandable modal
│   │   ├── 📄 StartupVision.jsx   → mission pillars with hover lift
│   │   ├── 📄 Contact.jsx         → form with validation + social info
│   │   └── 📄 Footer.jsx          → social links + copyright
│   └── 📂 pages/
│       ├── 📂 public/
│       │   ├── 📄 Home.jsx        → composes all public sections
│       │   └── 📄 PublicLayout.jsx → layout with BackgroundScene
│       └── 📂 admin/
│           └── 📄 AdminPanel.jsx  → full admin (Profile, Skills, Projects, Achievements, Messages, Settings tabs)
├── 📄 panel.mjs              → CLI tool for terminal editing
├── 📄 eslint.config.js       → flat config with react-hooks + react-refresh
├── 📄 jsconfig.json          → path alias @/ → ./src/
├── 📄 tailwind.config.js     → custom colors, fonts, keyframes (shine, equalizer, aurora, twinkle, disc-spin, pulse-glow)
├── 📄 vite.config.js         → React plugin + @/ alias
└── 📄 vercel.json            → SPA rewrites for client-side routing

---

⌨️ Terminal CLI

node panel.mjs

┌── Portfolio Panel ──────────────────────┐
│  [ 0]  Edit Profile                     │
│  [ 1]  List Skills                      │
│  [ 2]  Add Skill                        │
│  [ 3]  Edit Skill                       │
│  [ 4]  Delete Skill                     │
│  [ 5]  List Projects                    │
│  [ 6]  Add Project                      │
│  ...                                    │
│  [15]  Preview Summary                  │
│  [16]  Reset to Defaults                │
│  [17]  Exit                             │
└─────────────────────────────────────────┘

---

🗃️ State Management (Zustand)

All portfolio data lives in a single Zustand store (src/lib/store.js):

Store shape:
  profile       → { name, title, intro, aboutStory, startupVision, characterImage, email, github, linkedin, twitter }
  skills[]      → { id, name, icon, category }
  projects[]    → { id, title, description, techStack, imageUrl, githubUrl, liveUrl }
  achievements[]→ { id, title, date, description, imageUrl }
  messages[]    → { id, name, email, message, createdAt }
  loading       → bool
  getGithubToken→ fn() (from localStorage)

Key actions:
  fetchAll()            → GET /data.json → fallback to localStorage
  addSkill / updateSkill / deleteSkill
  addProject / updateProject / deleteProject
  addAchievement / updateAchievement / deleteAchievement
  addMessage            → saves locally + pushes to GitHub if token set
  deleteMessage         → removes locally + syncs to GitHub
  fetchMessagesFromGitHub → merges remote messages with local
  uploadImage           → FileReader → base64 data URL

Data persists to localStorage under key portfolio_data on every mutation.

---

🔒 Security

Item	Storage
Admin password	Stored in public/data.json under profile.adminPassword (changeable via Settings UI)
GitHub token	Your browser's localStorage only
Portfolio content	public/data.json + localStorage
Contact messages	localStorage (per-browser)
Uploaded media	Data URLs in localStorage

---