• 🌙 Dark Mode - Eye-friendly dark theme
• ☀️ Light Mode - Clean and bright appearance
• ⚡ Neon Mode - Vibrant and energetic colors
• 🌅 Sunset Mode - Warm and relaxing tones
• 🌲 Forest Mode - Nature-inspired green theme
• 💾 LocalStorage theme persistence

• 🌟 Interactive 3D scene with Three.js
• ⭐ Animated particle system (2000+ particles)
• 🔮 Rotating and morphing 3D sphere
• 🎪 Smooth page transitions with Framer Motion
• 🎨 Scroll-triggered animations
• ✨ Hover effects and micro-interactions

• 📱 Mobile-first approach (320px - 1440px+)
• 💻 Tablet optimization
• 🖥️ Desktop widescreen support
• 🔄 Perfect display on all devices

• 📝 Single config file (lib/config.js) for all site content
• 👤 Personal information
• 💼 Experience & career timeline
• 🛠️ Skills & technologies
• 🚀 Projects (GitHub integration)
• 📧 Contact information
• 🎯 Goals & achievements

• 🔗 Auto-fetch repositories from GitHub API
• ⭐ Sort projects by star count
• 🖼️ OpenGraph preview images
• 🏷️ Language-based filtering
• 📊 Display stats (stars, forks)

• 🚀 Next.js 14 with SSG & SSR
• 📦 Optimized bundle size (~130 kB)
• 🎯 Code splitting & lazy loading
• 🔧 Production-ready build
• 📈 SEO optimized

• React.js 18.2.0 - UI Library
• Next.js 14.0.3 - React Framework
• Tailwind CSS 3.3.5 - Utility-first CSS
• Framer Motion 10.16.4 - Animation Library
• Three.js + React Three Fiber - 3D Graphics
• TypeScript - Type Safety

• Node.js - Runtime Environment
• Express.js - API Routes
• MongoDB & PostgreSQL - Databases
• Socket.IO - Real-time Features
• Vercel - Deployment Platform
• Git & GitHub - Version Control

• Node.js 16+ installed
• npm or yarn package manager

1. Clone the repository

git clone https://github.com/umutxyp/Personal-Website.git
cd Personal-Website

2. Install dependencies

npm install
# or
yarn install

3. Configure your settings

Edit lib/config.js with your information:

export const siteConfig = {
  personal: {
    name: "Your Name",
    username: "yourusername",
    email: "[email protected]",
    // ... more settings
  },
  // ... other configurations
}

4. Run development server

npm run dev
# or
yarn dev

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

5. Build for production

npm run build
npm start
# or
yarn build
yarn start

portfolio/
├── components/          # React components
│   ├── NewHeader.js     # Navigation header
│   ├── HeroSection.js   # Landing section with 3D background
│   ├── SkillsSection.js # Skills & technologies display
│   ├── ExperienceSection.js # Career timeline
│   ├── ProjectsSection.js   # GitHub projects gallery
│   ├── ContactSection.js    # Contact information
│   └── ThemeSwitcher.js     # Theme selection UI
├── pages/               # Next.js pages
│   ├── _app.jsx         # App wrapper
│   ├── _document.jsx    # HTML document
│   ├── index.jsx        # Home page
│   ├── projects.jsx     # Projects page
│   ├── contact.jsx      # Contact page
│   └── api/             # API routes
│       └── github-repos.js  # GitHub API integration
├── lib/                 # Utilities
│   ├── config.js        # 🎯 MAIN CONFIGURATION FILE
│   └── swr.js           # SWR hooks
├── contexts/            # React contexts
│   └── ThemeContext.js  # Theme management
├── public/              # Static assets
│   └── assets/
│       └── techs/       # Technology icons
└── styles/              # Global styles
    └── globals.css      # CSS variables & utilities

All site content is managed in lib/config.js:

personal: {
  name: "Your Name",
  username: "yourusername",
  email: "[email protected]",
  location: "Your City, Country",
  // ...
}

skills: {
  frontend: [
    { name: "React.js", level: 95, icon: "react.svg" },
    // ...
  ],
  backend: [...],
  tools: [...]
}

githubUsername: "yourusername"  // Your GitHub username

Customize theme colors in themes object:

themes: {
  dark: {
    colors: { primary: "#3B82F6", ... },
    styles: { fontWeight: "normal", ... }
  },
  // ...
}

Each theme has:

• Colors: Primary, secondary, accent, background, surface, text
• Styles: Font weights, shadows, glows, borders

Themes use CSS variables for real-time switching:

var(--color-primary)
var(--color-secondary)
var(--style-glow)
var(--style-shadow)

Route (pages)                              Size     First Load JS
┌ ○ /                                      9.99 kB         138 kB
├ ○ /contact                               2.41 kB         127 kB
└ ○ /projects                              1.54 kB         129 kB
+ First Load JS shared by all              130 kB
  ├ chunks/framework.js                    45.2 kB
  ├ chunks/main.js                         31.8 kB
  └ chunks/pages/_app.js                   46.4 kB

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Deploy with one click

npm run build
npm start

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project at github.com/umutxyp/Personal-Website
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

This project is open source and available under the MIT License.

Umut Bayraktar

• Website: umutbayraktar.vercel.app
• GitHub: @umutxyp
• Instagram: @umutxyp
• YouTube: @umutxyp
• Twitter: @devbayraktar
• Discord: Join Server

• Next.js - React Framework
• Tailwind CSS - CSS Framework
• Three.js - 3D Graphics
• Framer Motion - Animation Library
• Vercel - Deployment Platform