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

0 stars

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages