🚀 SpacePortfolio

✨ Cosmic Developer Portfolio with 3D Animations ✨

🌐 Live Demo: https://portfolioqrtz.vercel.app 💻 GitHub: https://github.com/meguminn1/SpacePortfolio 🐛 Issues: https://github.com/meguminn1/SpacePortfolio/issues

🎯 Features & Highlights

🌟 3D Starfield Background - Interactive space simulation with parallax effects 🎬 Video Backgrounds - Animated blackhole, encryption, and card animations 💻 Tech Stack Visualizer - 50+ technology icons with hover effects 🚀 Framer Motion Animations - Smooth page transitions & micro-interactions 📱 Fully Responsive - Mobile-first design across all devices 🌓 Dual Theme Support - Light/dark mode icon sets

🏗️ Project Architecture

📦 SpacePortfolio/
├── 📁 app/                          # Next.js 14 App Router
│   ├── layout.tsx                   # 🌍 Root layout with metadata
│   ├── page.tsx                     # 🏠 Main page composition
│   └── globals.css                  # 🎨 Global Tailwind styles
├── 📁 components/
│   ├── 📁 main/                     # 🏢 Primary page sections
│   │   ├── About.tsx                # 👤 Bio & introduction
│   │   ├── Footer.tsx               # 👣 Site footer with links
│   │   ├── Hero.tsx                 # 🦸 Landing hero section
│   │   ├── Navbar.tsx               # 🧭 Navigation header
│   │   ├── Projects.tsx             # 🗂️ Portfolio projects showcase
│   │   ├── Skills.tsx               # ⚡ Skills visualization
│   │   └── StarBackground.tsx       # 🌌 3D animated starfield
│   └── 📁 sub/                      # 🧩 Supporting components
│       ├── HeroContent.tsx          # 📝 Hero text & CTAs
│       ├── ProjectCard.tsx          # 🃏 Individual project cards
│       ├── SkillDataProvider.tsx    # 🗄️ Skills state management
│       └── SkillText.tsx            # 🔤 Animated skill labels
├── 📁 constants/
│   └── index.ts                     # 📊 All data: skills, socials, projects
├── 📁 public/                       # 🖼️ Static assets
├── 📁 utils/
│   └── motion.ts                    # 🌀 Framer Motion animation presets
└── package.json                     # 📦 Project dependencies

⚡ Quick Setup & Launch

🚀 One-Command Installation

# Clone, install, and launch in one go!
git clone https://github.com/meguminn1/SpacePortfolio.git && cd SpacePortfolio && npm install && npm run dev

📥 Step-by-Step Guide

# 1️⃣ Clone the repository
git clone https://github.com/meguminn1/SpacePortfolio.git

# 2️⃣ Navigate to project
cd SpacePortfolio

# 3️⃣ Install dependencies
npm install
# or with yarn: yarn install
# or with pnpm: pnpm install

# 4️⃣ Start development server
npm run dev

# 5️⃣ Open in browser
# 🌐 http://localhost:3000

🏗️ Build for Production

# Build optimized version
npm run build

# Start production server
npm start

# Lint code for quality
npm run lint

# Deploy to Vercel (recommended)
vercel deploy

🎬 Animation System

🌀 Framer Motion Presets (utils/motion.ts)

// 📍 Slide animations with customizable delay
slideInFromLeft(delay)   // ← Slides from left
slideInFromRight(delay)  // → Slides from right
slideInFromTop           // ↓ Slides from top (delay: 0.5s)
slideInFromBottom        // ↑ Slides from bottom (delay: 0.5s)

💡 Usage Example

import { slideInFromLeft } from '@/utils/motion';
import { motion } from 'framer-motion';

<motion.div
  variants={slideInFromLeft(0.2)}
  initial="hidden"
  animate="visible"
>
  ✨ Your animated content here ✨
</motion.div>

🛠️ Tech Stack Breakdown

🏗️ Core Framework

· ⚛️ Next.js 14 with App Router · 📘 TypeScript for type safety · 🎨 Tailwind CSS for styling

🎬 Animation & UI

· 🌀 Framer Motion - Page transitions & animations · 🌌 Three.js - 3D starfield background · 🎯 React Icons - Icon library

🛠️ Development Tools

· 🐙 GitHub - Version control · ▲ Vercel - Deployment & hosting · 💻 VS Code - Development environment · 🎨 Figma - UI/UX design

⚙️ Backend & Databases

· 🐍 Django - Python web framework · 🐘 PostgreSQL - Primary database · 🐬 MySQL - Relational database · 🔥 Firebase - Google's backend platform · ⚡ Supabase - Open source Firebase alternative

📚 Libraries & APIs

· 🔄 React Query - Data fetching · 🔐 JWT - Authentication tokens · 💳 Stripe - Payment processing · 🎨 Three.js - 3D graphics

📱 Responsive Design Guide

📱 Device 🎯 Breakpoint ✨ Features 📲 Mobile < 640px Stacked sections, simplified nav, touch-friendly 📟 Tablet 641-1024px Adjusted grids, medium animations, optimized spacing 🖥️ Desktop 1025px Full layout, all animations, hover effects, parallax

🔧 Customization Guide

🔗 Update Social Links

Edit constants/index.ts:

export const Socials = [
  {
    name: "Github",
    src: "/github.svg",
    link: "https://github.com/YOUR_USERNAME"  // 👈 Change this
  },
  // Add more social links...
];

⚡ Modify Skills

Add/remove skills in the same file:

export const Skill_data = [
  {
    skill_name: "Your New Skill",  // 👈 Add your skill
    Image: "/your-icon.png",       // 👈 Add icon to public/
    width: 80,
    height: 80,
  },
];

🎬 Replace Videos/Images

1. Add new files to public/ folder
2. Update component imports:

<video src="/your-new-video.webm" autoPlay loop muted />

🤝 Contributing

We ❤️ contributions! Here's how to help:

1. 🍴 Fork the repository
2. 🌿 Create a feature branch (git checkout -b feature/amazing)
3. 💾 Commit changes (git commit -m 'Add amazing feature')
4. 📤 Push to branch (git push origin feature/amazing)
5. 🔀 Open a Pull Request

📄 License

📝 MIT License - see LICENSE file for details.

🌟 Show Your Support

If you like this project, give it a ⭐ star on GitHub!

🔥 Made with passion by meguminn1 ✨ Exploring the universe of web development ✨