Theark - Personal Portfolio Website

Modern and responsive personal portfolio website built with Nuxt 3, TypeScript, Tailwind CSS, and Vue 3.

✨ Features

• 🌐 Multi-language Support - Turkish and English language support
• 🎨 Dark/Light Theme - Theme switching based on user preference
• 🎵 Spotify Integration - Currently playing music information
• 💬 Discord Status - Discord status display via Lanyard API
• 📊 GitHub Statistics - GitHub repositories and language statistics
• 📱 Responsive Design - Perfect appearance on all devices
• ⚡ SSR Support - Fast loading with server-side rendering
• 🎭 Animations - Smooth animations with AOS (Animate On Scroll)

🚀 Quick Start

Requirements

• Node.js 18+
• Yarn or npm

Installation

1. Clone the project:

git clone https://github.com/thearkxd/website.git
cd website

2. Install dependencies:

yarn install
# or
npm install

3. Set up environment variables:

cp .env.example .env

Edit the .env file and add the required API keys.

4. Start the development server:

yarn dev
# or
npm run dev

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

📝 Environment Variables

You need to add the following environment variables to your .env file:

# Discord
DISCORD_USER_ID=your_discord_user_id
DISCORD_WEBHOOK_URL=your_discord_webhook_url

# GitHub
GITHUB_TOKEN=your_github_token
GITHUB_USERNAME=your_github_username

# Spotify (Optional)
SPOTIFY_CLIENT_ID=your_spotify_client_id
SPOTIFY_CLIENT_SECRET=your_spotify_client_secret
SPOTIFY_REFRESH_TOKEN=your_spotify_refresh_token

Getting API Keys

• Discord User ID: Enable Developer Mode in Discord and copy your user ID
• Discord Webhook: Create a webhook in your Discord server
• GitHub Token: Create a token from GitHub Settings > Developer settings > Personal access tokens
• Spotify API: Create an application from Spotify Developer Dashboard

🛠️ Development

Project Structure

website/
├── assets/          # Static files (CSS, fonts, images)
├── components/       # Vue components
├── composables/      # Vue composables
├── layouts/         # Page layouts
├── pages/           # Page routes
├── plugins/         # Nuxt plugins
├── public/          # Public files
├── server/          # Server API routes
├── store/           # Pinia stores
└── util/            # Helper functions

Available Commands

# Development server
yarn dev

# Production build
yarn build

# Production preview
yarn preview

# Lint check
yarn lint

# Lint fix
yarn lintfix

# Run tests
yarn test

# Test coverage
yarn test:coverage

🧪 Testing

The project is tested using Vitest. To run tests:

yarn test

For coverage report:

yarn test:coverage

🤝 Contributing

Contributions are welcome! Please read CONTRIBUTING.md first.

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

📄 License

This project is licensed under the MIT License.

👤 Author

Theark

• GitHub: @thearkxd
• Website: thearkxd.me

🙏 Acknowledgments

• Nuxt 3
• Vue 3
• Tailwind CSS
• Lanyard API
• Font Awesome

📊 Project Status