Skip to content

rogx1ne/DevPortfolio

Repository files navigation

🚀 Space Command: Developer Portfolio

An immersive, space-themed interactive developer portfolio built with a futuristic "Command Center" aesthetic. This project features a full-stack AI communication system that uses Google Gemini to analyze incoming transmissions.

Portfolio Banner

🌌 Core Features

  • Full-Stack AI Comms: The contact form is a "Space Station" powered by Google Gemini 1.5 Flash.
    • AI Analysis: Every message is analyzed for intent and priority (LOW to CRITICAL).
    • Themed Feedback: Users receive a unique, AI-generated space-themed acknowledgment instantly.
  • Immersive UI/UX:
    • Parallax Spaceflight: Interactive planets and moons that respond to your mouse.
    • Hyperspace Transitions: Custom loading sequences using Framer Motion (motion/react).
    • HUD Navigation: A Head-Up Display bar and Galaxy Map for section navigation.
  • Retro-Futuristic Aesthetic: Pixel-perfect borders, glowing shadows, and custom Web Audio API sounds.
  • Vercel Ready: Built-in serverless architecture for one-click deployment.

🛠️ Technical Stack

  • Frontend: React 19, TypeScript, Vite
  • Styling: Tailwind CSS 4 (Custom Utilities)
  • Animations: Framer Motion (motion/react)
  • Backend: Vercel Serverless Functions (Node.js)
  • AI: Google Gemini 1.5 Flash (@google/generative-ai)
  • Email: Resend API
  • Audio: Web Audio API (Custom oscillators)

🚀 Local Launch Sequence

1. Clone & Install

git clone <your-repo-url>
cd DevPortfolio
npm install

2. Configure Environment Variables

Create a .env file in the root directory:

# Google Gemini API (Get from https://aistudio.google.com/)
GEMINI_API_KEY="your_gemini_key"

# Resend Email API (Get from https://resend.com/)
RESEND_API_KEY="re_your_resend_key"

# Where you want to receive the portfolio messages
DESTINATION_EMAIL="your-email@example.com"

3. Start Development

The easiest local setup is a single Vite server. It now serves both the frontend and the /api/transmit route:

npm run dev

If you want the API on a separate port for local debugging, run the standalone server too:

npm run server

This standalone API listens on http://localhost:3001/api/transmit.

🛰️ Deployment (Vercel)

This project is optimized for Vercel Serverless Functions.

  1. Push your code to a GitHub repository.
  2. Import the project into Vercel.
  3. Add your environment variables (GEMINI_API_KEY, RESEND_API_KEY, DESTINATION_EMAIL) in the Vercel Project Settings.
  4. Deploy! Vercel will automatically route /api/transmit to the serverless function.

📂 Project Structure

  • src/components/effects/: Starfields, Nebulas, and Pixel-art celestial bodies.
  • src/components/sections/: The main "Space Stations" of the portfolio.
  • api/transmit.ts: The AI-powered backend handler.
  • src/utils/audio.ts: Custom Web Audio API sound triggers.

Developed by AbhishekAll systems nominal.

About

this is my dev folio if any one want to check out, you can...

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages