🌌 The Portfolios Atlas

A curated, browsable directory of 1,850+ developer portfolios compiled into a single, high-performance web atlas. Designed to spark design inspiration and showcase top-tier developer talent globally.

---

✨ Features

• 🎨 Rich Aesthetics: Sleek HSL-tailored dark mode, vibrant neon mesh gradients, glassmorphism card designs, and micro-interactions.
• 🔍 Lightning-Fast Search: Instant fuzzy filtering by name, title, role, or tech stack.
• 🎲 Surprise Me Roulette: Slot-machine-style shuffle animation that cycles entries to discover a random portfolio.
• 📂 Alphabetical Jump Menu: Fast A–Z pagination anchors integrated with Scroll Spy (active letter automatically highlights as you scroll).
• ⚡ Local Cache & Smart Sync: Fetches upstream repository data on demand and caches it. Runs 100% offline by gracefully falling back to the local database cache.
• 🔄 Dev Middleware Integration: Custom Vite dev-server endpoint that runs data regeneration locally with a single button click.

---

🛠️ Tech Stack

• Core: React 18 & TypeScript
• Bundler: Vite
• Styling: TailwindCSS & PostCSS
• Icons: Lucide React
• Integration: Custom Node.js markdown parsing engine

---

🚀 Quick Start

Get your local instance of the atlas running in under 60 seconds:

1. Clone the Repository

git clone https://github.com/Abhishek0964/The-Portfolios-Atlas.git
cd The-Portfolios-Atlas

2. Install Dependencies

npm install

3. Run the App

npm run dev

Open your browser and navigate to http://localhost:5173/.

---

🔄 How Caching & Syncing Works

The database is completely self-contained to eliminate runtime dependencies:

1. When you run npm run generate-data (or click Refresh data in the UI), the script fetches the upstream directory from emmabostian/developer-portfolios.
2. If there are updates, it updates the local cached copy (src/data/developer-portfolios-readme.md) and compiles the raw entries into the production JSON bundle.
3. If you are offline, it logs a warning and builds the application instantly from the local cached cache, guaranteeing zero build failures.

---

🤝 Contributing

We love contributions! If you have built an inspiring portfolio:

1. Open a PR to add your portfolio to the local file src/data/developer-portfolios-readme.md.
2. Run npm run generate-data to compile your additions.
3. Commit and push your changes!

---

⭐ Show Your Support

If this repository inspired your own developer portfolio, give it a star! It helps others find these amazing portfolios.