Mohammad Amin — AI-First Developer Portfolio

AI-First Full-Stack Developer (React • Flutter • Go)

---

📖 Overview

A bespoke personal portfolio crafted for Mohammad Amin — AI-First Full-Stack Developer based in Bandar Abbas, Iran.

The site showcases the intersection of high-throughput Go backend services, 60fps Flutter mobile applications, and reactive Next.js web frontends, supercharged by modern agentic workflows (Claude Code, Cursor, and Google Antigravity).

---

✨ Key Features & Architectural Highlights

1. ⚡ AI-First Visual Identity & Motion

• Dark Obsidian Aesthetics: Cyber-inspired dark theme (#09090b), glassmorphism card surfaces (backdrop-blur-md), ambient glow meshes, and glowing Emerald/Cyan neon accents.
• GSAP Kinetic Stagger: Smooth entrance motion for hero headlines, bento grids, and interactive badges.
• Global Command Palette (⌘K / Ctrl+K): Rapid keyboard-first navigation to search projects, inspect tech stacks, and copy contact details with particle confetti.

2. 💻 Interactive AI Developer Console

• Live simulated terminal at #terminal where visitors can execute real commands:
  • help — List all available commands
  • threadbyte — Deep-dive into the flagship AI collaboration platform
  • stack — Display the multi-tier engineering stack
  • ai-workflow — Inspect the 4-stage AI development methodology
  • whoami — Summarize bio, location, and credentials
  • projects — List all featured and open-source systems
  • contact — Instant links to Email, Phone, WhatsApp, GitHub, and LinkedIn
  • clear — Reset console buffer

3. 🎯 Centralized Project Management & Asset Pipeline

• Single Source of Truth: All project data, descriptions, metrics, features, and links live in data/portfolio-data.ts.
• Dedicated Asset Folder: All project screenshots and vector visuals are stored in public/projects/.
• Conditional Live Demos: Supports hasLiveDemo: boolean to dynamically toggle active links vs. disabled state for internal backend/microservice projects.
• Architecture Deep-Dive Modal: Interactive dialog displaying system architecture, SQLC/Go backend pipelines, and Multi-LLM provider details.

4. 📱 100% Fluid Responsive Layout

• Optimized for all screen form factors:
  • Mobile (< 640px): Compact header with search icon and smooth animated slide-down navigation menu.
  • Tablet (640px - 1023px): Perfectly balanced layout with search, quick CTA, and drawer.
  • Desktop (≥ 1024px): Full centered navigation pills, quick social badges, and direct action triggers.

5. 🌍 Location & Real-Time Presence

• Live real-time clock showing Bandar Abbas local time (Asia/Tehran UTC+3:30) in the footer.
• One-click email copy with instant toast confirmation and confetti effect.

---

🛠 Tech Stack

Layer	Technologies & Tools
Frontend Framework	Next.js 16 (App Router), React 19, TypeScript
Styling & Components	Tailwind CSS v4, shadcn/ui, Radix UI Primitives
Animations & Motion	GSAP, Canvas Confetti
Icons & Typography	Lucide React, Geist Font Family
Backend Expertise	Go (Golang), Gin, Fiber, PostgreSQL, SQLC, Gorilla WebSockets, JWT, Docker
Mobile Expertise	Flutter, Dart, BLoC Pattern, Riverpod, RESTful APIs, Clean Architecture
AI Tooling Suite	Claude Code, Cursor IDE, Google Antigravity, Multi-LLM Prompt Engineering
Deployment	Vercel

---

📂 Project Structure

portfolio/
├── app/
│   ├── globals.css             # Tailwind v4 theme, glassmorphic utilities & neon gradients
│   ├── layout.tsx              # SEO metadata, OpenGraph tags, viewport & Geist fonts
│   └── page.tsx                # Main single-page interactive layout
├── components/
│   ├── ui/                     # Accessible shadcn/ui components (button, badge, card, dialog, tabs)
│   ├── ai-workflow-section.tsx # 4-step AI development methodology breakdown
│   ├── bento-grid.tsx          # Bento grid highlighting speed multiplier & reliability
│   ├── command-menu.tsx        # Global Cmd+K search & quick action palette
│   ├── contact-section.tsx     # Contact channels, confetti email copy & message composer
│   ├── footer.tsx              # Bandar Abbas live time clock & social links
│   ├── hero-section.tsx        # Kinetic GSAP hero with availability badge & core pillars
│   ├── icons.tsx               # Custom SVG brand icons (GitHub, LinkedIn, etc.)
│   ├── interactive-terminal.tsx# Interactive AI-first developer console
│   ├── navbar.tsx              # Fully responsive glassmorphic navigation header
│   ├── project-card.tsx        # Modular project card with screenshot & live demo logic
│   ├── project-modal.tsx       # Deep-dive architecture & features modal dialog
│   ├── projects-section.tsx    # Filterable project gallery & THREADBYTE spotlight
│   └── stack-radar.tsx         # Interactive tech architecture radar
├── data/
│   └── portfolio-data.ts       # Centralized TypeScript data for projects, skills, and bio
├── lib/
│   ├── gsap-utils.ts           # Reusable GSAP animation hooks
│   └── utils.ts                # Class merging utility (clsx + tailwind-merge)
└── public/
    ├── avatar.svg              # Custom developer monogram
    └── projects/               # Dedicated folder for project screenshots & mockups
        ├── threadbyte-preview.svg
        ├── pulseflow-preview.svg
        ├── omniagent-preview.svg
        └── gophervault-preview.svg

---

🚀 How to Add a New Project

Adding a new project to the portfolio takes less than a minute:

1. Save your project image/screenshot to:

   public/projects/my-new-project.png (or .webp / .svg)
   

2. Add an entry to the projects array in data/portfolio-data.ts:

   {
     id: "my-new-project",
     slug: "my-new-project",
     title: "Project Title",
     tagline: "One-line summary",
     description: "Short description for the project card preview...",
     longDescription: "In-depth breakdown of features and architecture for the modal dialog...",
     category: "AI & Full-stack", // "AI & Full-stack" | "Mobile & Flutter" | "Backend & Go"
     tags: ["Go", "Flutter", "PostgreSQL"],
     techStack: ["Go", "Gin", "Flutter", "Riverpod", "SQLC", "Docker"],
     features: [
       "Key feature 1 with impact...",
       "Key feature 2 with performance metrics...",
     ],
     image: "/projects/my-new-project.png",
     githubUrl: "https://github.com/v-urit/my-new-project",
     liveUrl: "https://my-demo-url.com", // optional
     hasLiveDemo: true, // true to enable Live Demo button, false to disable
     featured: false,
     metrics: [
       { label: "Throughput", value: "10k RPS" },
       { label: "Latency", value: "< 5ms" }
     ]
   }

The website will automatically generate the card, enable category filtering, make it searchable in the ⌘K command menu, and render the deep-dive modal!

---

💻 Local Development

Prerequisites

• Node.js ≥ 20.0.0
• pnpm ≥ 10.0.0

Setup Instructions

# 1. Clone the repository
git clone https://github.com/v-urit/portfolio.git
cd portfolio

# 2. Install dependencies
pnpm install

# 3. Start development server
pnpm dev

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

Build & Verification

# Type-check and production build
pnpm build

# Start production server
pnpm start

# Run linter
pnpm lint

---

🌐 Deploy to Vercel

This repository is optimized for one-click deployment on Vercel:

1. Push your latest code to GitHub:

   git push origin main

2. In the Vercel Dashboard, select Add New Project → Import v-urit/portfolio.
3. Vercel will automatically detect Next.js and build settings.
4. Click Deploy. Your portfolio will be live at portfolio-amin-vu.vercel.app!

---

📬 Contact & Connect

• Name: Mohammad Amin
• Role: AI-First Full-Stack Developer
• Email: vuritman@gmail.com
• Phone / WhatsApp: +98 936 749 0920
• Location: Bandar Abbas, Iran (UTC+3:30)
• Portfolio: portfolio-amin-vu.vercel.app
• GitHub: github.com/v-urit
• LinkedIn: linkedin.com/in/mohmmad-amin

---

_{Built with ❤️ by Mohammad Amin using Next.js 16, React 19, Tailwind CSS, and GSAP.}