A premium, full-stack portfolio with an integrated blog system — built with React 19, Express, and MongoDB
🌐 Live Site • ✨ Features • 🛠 Tech Stack • 📐 Architecture • 🚀 Getting Started • ☁️ Deployment
This portfolio follows a "Technical Precision" aesthetic — a grid-based, high-contrast design language inspired by:
- Bloomberg Terminal — Information density with clarity
- Linear — Clean, systematic design with subtle animations
- Vercel — Minimalist elegance with purposeful whitespace
| Aspect | Implementation |
|---|---|
| Layout | Strict grid system with consistent 5xl max-width container |
| Typography | Inter font family with tight tracking for headings |
| Colors | Slate-based palette with emerald/amber accents |
| Borders | Unified border-grid utility with centralized control |
| Dark Mode | Full dark mode support with smooth drop transition |
| Motion | Subtle, purposeful animations using Framer Motion |
A beautiful, instant theme switch with a liquid drop animation that expands from the toggle button:
- Smooth
clip-pathanimation using custom easing - Spring-based icon rotation with glow effects
- Ripple feedback on the toggle button
- Custom Cursor Follower — A playful, context-aware cursor that responds to hoverable elements
- Smooth Scroll — Lenis-powered butter-smooth scrolling experience
- Command Palette — Spotlight-style search with
Cmd+K/Ctrl+K - Gradient Switcher — Switchable hero gradients (Deep Space, Obsidian Luster, Aurora Borealis)
| Section | Description |
|---|---|
| Hero | Split-row layout with profile image, status indicators, and social links |
| Selected Work | Bento grid showcasing projects with live/code links |
| Experience | Timeline-style professional experience display |
| Technical Arsenal | 4×4 grid of technologies with shimmer hover effects |
| Figma Designs | Gallery of design work with "pop" hover animations |
| About | Personal introduction with CTA button |
| Visitor Counter | Real-time visitor tracking with animated display |
- Blog Feed (
/blog) — Grid of posts fetched from the API - Single Post (
/blog/:slug) — Dynamic post pages with full content - Admin Login (
/admin) — Secured admin authentication with JWT - Admin Dashboard (
/admin/dashboard) — Create, Edit, and Delete posts - 404 Page — Custom animated "Signal Lost" page for missing routes
- React Helmet — Dynamic
<title>and<meta>tags per page - Open Graph / Twitter Cards — Rich social sharing previews
- Sitemap & Robots.txt — Search engine indexing support
- Vercel Analytics — Built-in traffic tracking
React 19.2.0 — UI Library
React Router DOM 7.x — Client-side routing
Vite 6.0.0 — Build tool
Tailwind CSS 4.0.0 — Utility-first styling (v4 with @theme)
Framer Motion 12.x — Animation library
Lenis 1.3.17 — Smooth scroll engine
react-helmet-async — Dynamic SEO meta tags
Lucide React — Icon library
clsx + tailwind-merge — Conditional class utilities
@vercel/analytics — Traffic analytics
Express 5.x — Node.js web framework
Mongoose 9.x — MongoDB ODM
bcryptjs — Password hashing
jsonwebtoken (JWT) — Authentication tokens
cors — Cross-origin resource sharing
dotenv — Environment variable management
MongoDB Atlas — Cloud-hosted NoSQL database
Professional_Portfolio/
├── src/ # Frontend Source
│ ├── App.jsx # Root component & routing
│ ├── main.jsx # Entry point (HelmetProvider)
│ ├── index.css # Global styles & Tailwind config
│ │
│ ├── components/
│ │ ├── common/
│ │ │ └── SEO.jsx # Reusable SEO meta tag component
│ │ ├── layout/
│ │ │ ├── Nav.jsx # Navigation with theme toggle & search
│ │ │ ├── GridBackground.jsx # Full-page grid overlay
│ │ │ └── Footer.jsx # Site footer with links
│ │ ├── sections/
│ │ │ ├── Hero.jsx # Hero with gradient switcher
│ │ │ ├── Projects.jsx # Bento grid project showcase
│ │ │ ├── Experience.jsx # Professional timeline
│ │ │ ├── TechStack.jsx # Technology grid
│ │ │ ├── FigmaDesigns.jsx # Design portfolio
│ │ │ ├── About.jsx # Personal introduction
│ │ │ └── CodeShowcase.jsx # Code snippet display
│ │ ├── ui/
│ │ │ ├── CursorFollower.jsx # Custom cursor component
│ │ │ ├── SearchCommand.jsx # Command palette modal
│ │ │ ├── VisitorCounter.jsx # Analytics display
│ │ │ ├── SectionSeparator.jsx
│ │ │ └── CodeBlock.jsx # Syntax-highlighted code blocks
│ │ └── utils/
│ │ └── SmoothScroll.jsx # Lenis scroll wrapper
│ │
│ ├── pages/
│ │ ├── Home.jsx # Main portfolio page
│ │ ├── Blog.jsx # Blog feed (fetches from API)
│ │ ├── BlogPost.jsx # Single post page (dynamic)
│ │ ├── AdminLogin.jsx # Admin authentication
│ │ ├── AdminDashboard.jsx # Post management (CRUD)
│ │ └── NotFound.jsx # 404 page with animation
│ │
│ ├── hooks/
│ │ └── useCalEmbed.js # Cal.com scheduling integration
│ └── utils/
│ └── cn.js # clsx + tailwind-merge utility
│
├── blog/server/ # Backend API
│ ├── src/
│ │ ├── server.js # Express app entry point
│ │ ├── controllers/ # Route handlers
│ │ ├── models/ # Mongoose schemas (Post, Admin)
│ │ ├── routes/ # API route definitions
│ │ └── middleware/ # Auth middleware (JWT)
│ ├── vercel.json # Vercel serverless config
│ └── package.json
│
├── public/ # Static assets
│ ├── tech/ # Technology icons
│ ├── robots.txt # Search engine rules
│ └── sitemap.xml # SEO sitemap
│
└── vercel.json # Frontend SPA routing config
- Node.js 18+
- npm
- MongoDB Atlas account (for the blog backend)
# Clone the repository
git clone https://github.com/gitit24x7/MyPortfolio.git
# Navigate to frontend
cd Professional_Portfolio
# Install dependencies
npm install
# Create .env file
echo "VITE_API_URL=http://localhost:3001" > .env
# Start development server
npm run dev# Navigate to backend
cd Professional_Portfolio/blog/server
# Install dependencies
npm install
# Create .env file with your credentials
# DATABASE_URL=mongodb+srv://your-connection-string
# JWT_SECRET=your-secret-key
# Start backend server
npm run dev| Command | Location | Description |
|---|---|---|
npm run dev |
Frontend | Start Vite dev server with HMR |
npm run build |
Frontend | Production build to dist/ |
npm run preview |
Frontend | Preview production build locally |
npm run dev |
Backend | Start Express server with watch mode |
npm start |
Backend | Start Express server (production) |
This project is a Monorepo — both Frontend and Backend live in one repository. Deploy both to Vercel for free.
- Push code to GitHub.
- Import repository to Vercel.
- Root Directory:
Professional_Portfolio - Build Command:
npm run build - Output Directory:
dist - Environment Variables:
VITE_API_URL→ Your Backend URL (from Step 2)
- Import the same repository to Vercel as a new project.
- Project Name:
my-portfolio-backend - Root Directory:
Professional_Portfolio/blog/server - Framework Preset:
Other - Environment Variables:
DATABASE_URL→ Your MongoDB Atlas connection stringJWT_SECRET→ A random secret string
- Click Deploy and copy the domain.
- Go to your Frontend project on Vercel → Settings → Environment Variables.
- Set
VITE_API_URLto your Backend URL (e.g.,https://my-backend.vercel.app). - Redeploy the Frontend.
Edit the gradients array in Hero.jsx:
const gradients = [
{ name: "Deep Space", class: "bg-gradient-to-br from-black via-indigo-950 ..." },
{ name: "Custom", class: "bg-gradient-to-br from-..." }
]Update the projects array in Projects.jsx:
{
title: "New Project",
description: "...",
tech: ["React", "Node.js"],
size: "large", // or "small"
liveUrl: "https://...",
githubUrl: "https://github.com/..."
}This project is licensed under the MIT License — see the LICENSE file for details.
Built with ❤️ by Aditya Ojha