https://github.com/ibidi/website

🚀 A modern personal portfolio website showcasing my professional journey and real-time activities. Built with Vue.js, NuxtJS, TypeScript, and TailwindCSS. Features include Spotify integration, dynamic experience timeline, and tech stack display.
https://github.com/ibidi/website

blog discord nuxt portfolio portfolio-website tailwind-css typescript vue windi-css

Last synced: 3 days ago
JSON representation

🚀 A modern personal portfolio website showcasing my professional journey and real-time activities. Built with Vue.js, NuxtJS, TypeScript, and TailwindCSS. Features include Spotify integration, dynamic experience timeline, and tech stack display.

• Host: GitHub
• URL: https://github.com/ibidi/website
• Owner: ibidi
• Created: 2025-01-01T21:23:19.000Z (14 days ago)
• Default Branch: main
• Last Pushed: 2025-01-12T13:44:37.000Z (4 days ago)
• Last Synced: 2025-01-12T14:39:30.180Z (4 days ago)
• Topics: blog, discord, nuxt, portfolio, portfolio-website, tailwind-css, typescript, vue, windi-css
• Language: Vue
• Homepage: https://ibidicodes.netlify.app
• Size: 375 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Personal Portfolio Website



  

  

  

  





  A modern and responsive personal portfolio website with dynamic theme switching, Spotify integration, and smooth animations.





  



## ✨ Features

  

    🌙

    Theme Switcher: Seamless dark/light mode support

  

  

    🎵

    Spotify Integration: Real-time "Now Playing" status

  

  

    🎨

    Modern UI: Beautiful gradient animations and transitions

  

  

    📱

    Responsive: Perfect display on all device sizes

  

  

    ⚡️

    Performance: Fast page transitions and optimized loading

  

  

    🔍

    Command Menu: Quick navigation with ⌘K shortcut

  

## 🚀 Tech Stack

Click to expand!

- **[Nuxt 3](https://nuxt.com/)** - The Vue.js Framework

  - Server-Side Rendering

  - Auto-imports

  - File-based routing

- **[Vue 3](https://vuejs.org/)** - The Progressive JavaScript Framework

  - Composition API

  - Script setup syntax

  - TypeScript support

- **[Tailwind CSS](https://tailwindcss.com/)** - A utility-first CSS framework

  - Custom animations

  - Dark mode support

  - Responsive design

- **[TypeScript](https://www.typescriptlang.org/)** - JavaScript with syntax for types

  - Type safety

  - Better IDE support

  - Enhanced code quality

- **[Spotify Web API](https://developer.spotify.com/documentation/web-api/)**

  - OAuth integration

  - Real-time track updates

  - Rich track metadata

## 📦 Setup

### Prerequisites

- Node.js (v16 or higher)

- Spotify Developer Account

- Git

### Installation Steps

1. **Clone the repository**

   ```bash

   git clone https://github.com/ibidi/website.git

   cd website

   ```

2. **Install dependencies**

   ```bash

   # Using npm

   npm install

   # Using yarn

   yarn install

   # Using pnpm

   pnpm install

   ```

3. **Configure environment variables**

   

   Create a `.env` file in the root directory:

   ```env

   SPOTIFY_CLIENT_ID=your_client_id

   SPOTIFY_CLIENT_SECRET=your_client_secret

   ```

4. **Start development server**

   ```bash

   # Using npm

   npm run dev

   # Using yarn

   yarn dev

   # Using pnpm

   pnpm dev

   ```

   The application will be available at `http://localhost:3000`

## 🏗️ Build

### Production Build

```bash

# Generate static files

npm run build

# Preview the build

npm run preview

```

## 📝 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

---



  Made with ❤️ by İhsan Baki Doğan