Modern project showcase with glassmorphic design
Auto-fetches GitHub repos with smooth animations
🌐 github.com/Daniel-wambua/havoclab

Why waste time building portfolio sites from scratch when you can have one that auto-syncs with your GitHub? HavocLab eliminates manual project updates. Just push to GitHub and your showcase updates automatically. Built with bleeding-edge tech so you don't need to f**k around with outdated frameworks and slow-loading sites.

HavocLab is a SvelteKit-powered project showcase that automatically displays your GitHub repositories. No manual updates needed—just a sleek, performant portfolio site.

Core Features:

• 🧬 Auto GitHub API integration
• � Dark/Light mode toggle with persistent preferences
• 📊 GitHub stats display (stars, forks, last updated)
• 🔍 Advanced search & filtering with real-time updates
• 📈 Smart sorting (stars, forks, updated date, name)
• 🏷️ Project tags/categories with filter chips
• 📱 Grid/List view toggle with different layouts
• 📊 Quick stats dashboard (total projects, stars, forks, languages)
• �🎨 Glassmorphic dark theme (#00AEEF accent)
• ⚡ Motion One animations (3.8KB vs 90KB alternatives)
• ⭐ Featured projects support
• 📱 Fully responsive design
• 🎯 Smart context-aware icons
• 📈 Vercel Analytics & Speed Insights integration

Tech Stack:

• SvelteKit 2.0 + Svelte 5.0
• TailwindCSS 3.4 (custom dark theme)
• Motion One 10.16 (lightweight animations)
• TypeScript 5.0 (fully typed)
• GitHub REST API

# Clone the repo
git clone https://github.com/Daniel-wambua/havoclab.git
cd havoclab

# Install dependencies
npm install

# Configure GitHub username
# Edit src/lib/constants.ts → GITHUB_USERNAME

# Add GitHub token (REQUIRED for private repos, recommended for rate limits)
cp .env.example .env
# Edit .env and add your token

# To create a GitHub token:
# 1. Go to: https://github.com/settings/tokens/new
# 2. Name: "HavocLab Showcase"
# 3. Expiration: No expiration (or your preference)
# 4. Scopes:
#    - Check "repo" (full access) for PRIVATE repos
#    - OR just "public_repo" for PUBLIC repos only
# 5. Generate token and copy it to .env

# Run dev server
npm run dev

HavocLab can display both public AND private repositories when properly configured.

Requirements:

1. GitHub Personal Access Token with repo scope
2. Token must be added to .env file or deployment environment variables

Setup Steps:

# 1. Create a GitHub token
# Visit: https://github.com/settings/tokens/new

# 2. Configure token settings:
#    - Note: "HavocLab Showcase"
#    - Expiration: No expiration (recommended for personal projects)
#    - Scopes: ✅ repo (Full control of private repositories)

# 3. Generate token and copy it

# 4. Add to your .env file
echo "GITHUB_TOKEN=your_token_here" > .env

# 5. For Vercel deployment, add to environment variables:
#    Dashboard → Settings → Environment Variables
#    Name: GITHUB_TOKEN
#    Value: your_token_here
#    Environment: Production, Preview, Development

How it works:

• ✅ With token: Fetches from /user/repos (includes private repos)
• ⚠️ Without token: Fetches from /users/{username}/repos (public only)

Important Notes:

• Private repos will only be visible when the token is present
• The token must belong to the account that owns the private repositories
• Rate limits: 60 requests/hour (no token) → 5,000 requests/hour (with token)
• Never commit your .env file to version control (it's in .gitignore)

Customize Your Showcase:

Project Structure:

src/
├── lib/
│   ├── components/            # UI components
│   │   ├── Header.svelte      # Header with search & theme toggle
│   │   ├── FilterBar.svelte   # Sorting & filtering controls
│   │   ├── ProjectCard.svelte # Project display card
│   │   ├── SearchBar.svelte   # Real-time search input
│   │   ├── StatsDisplay.svelte # Quick stats dashboard
│   │   ├── ThemeToggle.svelte # Dark/light mode button
│   │   ├── LoadingState.svelte # Loading spinner
│   │   └── ErrorState.svelte  # Error display with retry
│   ├── stores/
│   │   ├── theme.ts           # Theme state management
│   │   └── preferences.ts     # User preferences (sort, view, filters)
│   ├── constants.ts           # GitHub config
│   ├── types.ts               # TypeScript interfaces
│   ├── featured.json          # Featured projects
│   └── project-images.json    # Manual image URLs
├── routes/
│   ├── +layout.svelte         # Analytics integration
│   ├── +page.svelte           # Main showcase
│   └── api/                   # GitHub/Featured endpoints
└── app.css                    # Tailwind + glassmorphism

New Features Guide:

{
  "YourRepoName": "https://your-image-url.com/screenshot.png"
}

GitHub API → Fetch Repos → Combine with Featured → Filter/Search → Display
                                                           ↓
                                           Motion One Animations

How It Works:

1. App loads → Fetch from /api/repos (GitHub) + /api/featured (local JSON)
2. Merge data → Featured projects appear first
3. User types → Filter by name/language in real-time
4. Cards animate → Fade-in with stagger, hover lift effects

Daniel-wambua/havoclab is licensed under MIT © Daniel Wambua 2025.
^{For information, see TLDR Legal > MIT}

The MIT License (MIT)
Copyright (c) Daniel Wambua <daniel@wambua.com>

Permission is hereby granted, free of charge, to any person obtaining a copy 
of this software and associated documentation files (the "Software"), to deal 
in the Software without restriction, including without limitation the rights 
to use, copy, modify, merge, publish, distribute, sub-license, and/or sell 
copies of the Software, and to permit persons to whom the Software is furnished 
to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all 
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

© Daniel Wambua 2025
Licensed under MIT

^{Thanks for visiting :)}