NGXSMK Open Source Showcase

A premium Next.js website that showcases all open source Angular libraries and tools
from the NGXSMK GitHub organization.

     

🌐 Live → ngxsmk.github.io/ngxsmk

---

📸 Overview

A dark-mode-first showcase site that dynamically renders every public repo from the NGXSMK org, sorted by stars. It features an animated hero, a live-count stats bar, a featured spotlight card, and a filterable grid of all projects — all built with vanilla CSS Modules and zero UI-framework dependencies.

---

✨ Features

	Feature	Description
🚀	Static Export	Fully pre-rendered via next build — deploys to any static host
⭐	GitHub API	Live repo data (stars, forks, topics, language) fetched at build time
🔍	Search & Filter	Live search by name/description/topic + one-click language filter
🏆	Featured Card	Spotlight hero card for the top-starred repository
📊	Animated Stats	Count-up animation for total stars, forks, and repo count
🎨	Glassmorphism UI	Dark mode · violet & cyan gradient accents · hover glow effects
♿	Accessible	ARIA labels, semantic HTML, keyboard navigation, focus rings
📱	Responsive	Fluid layout from 375 px mobile to 1440 px+ desktop

---

🗂 Project Structure

src/
├── app/
│   ├── globals.css            # Design tokens, animations, utility classes
│   ├── layout.tsx             # Root layout + SEO / Open Graph metadata
│   ├── page.tsx               # Home page — SSR, fetches repos at build time
│   ├── page.module.css
│   └── api/repos/route.ts     # /api/repos — static JSON snapshot of org repos
│
├── components/
│   ├── Hero.tsx               # Animated hero with floating orbs & gradient headline
│   ├── StatsBar.tsx           # Org-wide stat counters (stars · forks · repos · issues)
│   ├── FeaturedProject.tsx    # Large spotlight card for the top-starred repo
│   ├── FilterBar.tsx          # Sticky search bar + language filter chips
│   ├── ProjectsGrid.tsx       # Client-side filter/search logic + responsive grid
│   ├── ProjectCard.tsx        # Individual repo card with glassmorphism hover effect
│   ├── LanguageBadge.tsx      # Coloured language dot + label
│   └── Footer.tsx             # Site footer with org links and author card
│
└── lib/
    └── github.ts              # GitHub REST API fetch utility + TypeScript types

---

🚀 Getting Started

Prerequisites

• Node.js ≥ 20
• npm ≥ 10

Local Development

# 1. Clone
git clone https://github.com/NGXSMK/ngxsmk.git
cd ngxsmk

# 2. Install dependencies
npm install

# 3. Start dev server
npm run dev

Open http://localhost:3000 — hot reload is on.

Static Build

npm run build
# → generates the `out/` folder (HTML · CSS · JS)

---

🌐 GitHub Pages Deployment

A ready-made GitHub Actions workflow is included at
.github/workflows/deploy.yml.

Setup (one-time)

1. Push this repo to GitHub under NGXSMK/ngxsmk
2. Go to Settings → Pages → Source and choose GitHub Actions
3. Push any commit to main — the workflow builds and deploys automatically

The site will be live at:

https://ngxsmk.github.io/ngxsmk/

Using a Custom Domain

1. Add a CNAME file inside public/ containing your domain (e.g. ngxsmk.dev)
2. In next.config.ts set basePath: ""
3. In the workflow set NEXT_PUBLIC_BASE_PATH to ""

---

⚙️ Configuration

File	Key setting
next.config.ts	output: 'export' · basePath · trailingSlash · images.unoptimized
src/lib/github.ts	API endpoint · revalidate: 3600 (refresh interval in seconds)
.github/workflows/deploy.yml	CI/CD pipeline · NEXT_PUBLIC_BASE_PATH env var

---

🧰 Tech Stack

Technology	Version	Role
Next.js	16	App Router · SSR · Static Export
React	19	UI rendering
TypeScript	5	Type safety
CSS Modules (Vanilla)	—	Scoped styles, zero runtime
GitHub REST API	2022-11-28	Repo data source

---

👤 Author

Sachin Dilshan Technical Lead · Frontend Developer We Make Platforms · Sri Lanka 🇱🇰

---

📄 License

Released under the MIT License — see LICENSE for details.

---

_{Built with ❤️ using Next.js  ·  Part of the NGXSMK open source ecosystem}