A high-performance, developer portfolio fusing Nothing OS visual aesthetics with an X (Twitter) profile layout, featuring a dedicated Admin Dashboard and Node.js/Express Backend Server.

nothing-os-themed-portfolio is a full-stack portfolio application designed around Nothing OS's brutalist dot-matrix aesthetic and Information Architecture inspired by X (Twitter) profile pages.

It features a static-first client with dynamic fallback, an interactive Admin Panel for real-time project & experience management, and an Express + MongoDB backend for persistence and view tracking.

• 🎨 Frontend Repository: oxvishall/nothing-os-themed-portfolio
• ⚡ Backend Server Repository: oxvishall/vibecoded-portfolio/server

• 📱 Nothing OS Aesthetics: Custom dot-matrix typography (Doto, DM Serif Display, Space Grotesk), monochrome design system, and canvas-rendered NDot grid textures.
• 🛠️ Admin Dashboard (/admin/dashboard):
  • Secure password authentication (/admin/login).
  • Real-time CRUD operations for Projects and Work Experiences.
  • Built-in TipTap Rich Text Editor for formatted descriptions.
  • Image uploads backed by Vercel Blob Storage.
• 👁️ Live Portfolio View Counter: Real-time server-side view tracking endpoint (POST /api/views) with eye-icon counter in the bio section.
• 📊 Live GitHub Metrics: Dynamic contribution counts and activity calculations via upstream API (/api/github-stats).
• 🌓 Interface Theme Switcher: Instant Light/Dark mode toggle with persistent state and custom SVG dark-mode filtering.
• 🔗 Deep Linking & Highlighting: URL parameter query matching (?project=id) for auto-scrolling and pulse-highlighting target projects.
• ⚡ Full-Stack Architecture: Next.js App Router frontend proxying route handlers to an Express.js & MongoDB backend.

• Framework: Next.js 16 (App Router) & React 19
• Styling: Vanilla CSS Design Tokens + Tailwind CSS
• Animations: Framer Motion
• Rich Text Editor: TipTap
• Icons: Lucide React & React Icons
• Analytics: Firebase Analytics

• Runtime: Node.js & Express.js (TypeScript)
• Database: MongoDB via Mongoose
• Storage: @vercel/blob for media & image uploads
• Deployment: Vercel Serverless / Node Runtime

┌─────────────────────────────────────────────────────────────┐
│                    Next.js Frontend App                     │
│               (https://oxvishall.vercel.app)                │
├──────────────────────────────┬──────────────────────────────┤
│  Public UI Components        │  Admin Panel (/admin)        │
│  - BioSection & View Counter │  - Login (/admin/login)      │
│  - Projects & Experiences    │  - Dashboard Editor          │
└──────────────┬───────────────┴──────────────┬───────────────┘
               │                              │
               ▼                              ▼
┌─────────────────────────────────────────────────────────────┐
│                   Next.js Route Handlers                    │
│   /api/views  •  /api/projects  •  /api/experience          │
└──────────────────────────────┬──────────────────────────────┘
                               │ (HTTP API Proxy)
                               ▼
┌─────────────────────────────────────────────────────────────┐
│                    Express Backend Server                   │
│   (https://github.com/oxvishall/vibecoded-portfolio/server)  │
├──────────────────────────────┬──────────────────────────────┤
│  MongoDB Database (Mongoose) │  Vercel Blob Storage         │
│  - Views Count Collection    │  - Uploaded Project Images   │
│  - Projects & Experiences    │                              │
└──────────────────────────────┴──────────────────────────────┘

• Node.js v18+ or Bun
• MongoDB cluster instance

git clone https://github.com/oxvishall/nothing-os-themed-portfolio.git
cd nothing-os-themed-portfolio

Create a .env file in the root of portfolio:

# Server Backend API URL
API_URL=https://vibecoded-portfolio-server.vercel.app/api

# Firebase Configuration
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your_measurement_id

If running the Express Backend Server locally (vibecoded-portfolio/server):

PORT=5000
MONGODB_URI=your_mongodb_connection_string
ADMIN_PASSWORD=your_secure_admin_password
BLOB_READ_WRITE_TOKEN=your_vercel_blob_token

bun install  # or npm install
bun dev      # or npm run dev

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

cd ../vibecoded-portfolio/server
npm install
npm run dev

portfolio/
├── app/
│   ├── admin/               ← Admin dashboard & login pages
│   │   ├── dashboard/
│   │   └── login/
│   ├── api/                 ← Next.js API Proxy routes (projects, experience, views)
│   ├── components/          ← UI components (BioSection, CoverBanner, ProfileTabs, Sidebar)
│   ├── data/                ← Default/static portfolio dataset (portfolio.tsx)
│   ├── globals.css          ← Nothing OS theme design tokens & styles
│   ├── layout.tsx           ← Metadata, fonts & root HTML layout
│   └── page.tsx             ← Portfolio main landing page
├── lib/
│   ├── analytics.ts         ← Firebase analytics trackers
│   └── firebase.ts          ← Firebase initialization
├── public/                  ← Icons, images, and web fonts
└── README.md                ← Project documentation

To access the project management dashboard:

1. Navigate to /admin/login on the deployed site or localhost.
2. Enter your ADMIN_PASSWORD (configured on the Express backend).
3. Manage, edit, reorder, or delete projects and experience entries in real time.

This project is licensed under the MIT License.

Crafted with ❤️ by Vishal Aakash