FEMOG — Find Engineering Masters on GitHub

A curated, dark-mode directory to discover exceptional software engineers on GitHub — organized by engineering discipline.

---

Overview

FEMOG is an open-source, fully parameterized directory for discovering influential GitHub profiles categorized by engineering domain. Inspired by Remote In Tech, FEMOG focuses on the people behind the code — helping developers find engineers worth following, learning from, and drawing inspiration from.

Features

• Dark mode first — designed for developers, by a developer
• 11 engineering categories — AI, Backend, Frontend, Full Stack, DevOps, Mobile, Security, Data Science, Systems, Cloud, Open Source
• Instant client-side search — filter by name, username, bio, tags, company, or location
• Multi-category filtering — combine multiple role filters at once
• Fully parameterized — add new profiles and labels in minutes, no logic changes required
• No API calls — all data is statically curated; zero latency, zero cost
• Shareable — fully static, deployed edge-globally on Vercel

Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router)
Language	TypeScript (strict mode)
Styling	Tailwind CSS
Icons	Lucide React
Deployment	Vercel

Getting Started

# Clone the repository
git clone https://github.com/edujbarrios/femog.git
cd femog

# Install dependencies
npm install

# Start the development server
npm run dev

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

---

Contributing

Contributions are very welcome! The two most common ways to contribute are adding a new engineer profile or adding a new category label. Both require touching only one or two data files — no component or logic changes needed.

Adding a New Profile

1. Open data/profiles.ts
2. Append a new object to the PROFILES array following this exact shape:

{
  // Required
  id: 'github-username',               // unique, URL-safe (use the GitHub username)
  name: 'Full Name',
  username: 'github-username',         // GitHub handle (no @)
  bio: 'Short bio (1–2 sentences)',
  categories: ['backend'],             // one or more CategoryId values (see below)
  tags: ['nodejs', 'golang'],          // skill / tech keywords shown on the card
  githubUrl: 'https://github.com/username',

  // Optional
  location: 'City, Country',
  company: 'Company or @org',
  websiteUrl: 'https://example.com',
  twitterUsername: 'handle',           // without the @
}

3. Submit a pull request with the title feat: add profile for @username

Criteria for inclusion: the engineer should have made significant open source contributions or published influential technical content, and their GitHub profile must be public and active.

Adding a New Label (Category)

Adding a new engineering discipline label takes two small steps:

Step 1 — Register the ID in types/index.ts:

// Before
export type CategoryId =
  | 'ai' | 'backend' | 'frontend' | ...;

// After — append your new id
export type CategoryId =
  | 'ai' | 'backend' | 'frontend' | ... | 'your-new-label';

Step 2 — Add the display definition in data/categories.ts:

{
  id: 'your-new-label',
  label: 'Human-Readable Label',        // shown in the filter bar & badges
  description: 'One sentence summary',  // shown on the About page
  color: '#a5f3fc',                     // text / icon color (hex)
  bgColor: 'rgba(34, 211, 238, 0.12)', // badge background (semi-transparent)
  borderColor: 'rgba(34, 211, 238, 0.35)',
  icon: '🔧',                           // emoji shown next to the label
}

That's it — the filter pill, profile badge, and category count will all appear automatically. No component changes required.

3. Tag any existing profiles that belong to the new category by adding your new ID to their categories array in data/profiles.ts.

Commit Convention

feat:     add new profile or category
fix:      fix incorrect data (bio, follower count, etc.)
style:    UI / CSS changes with no logic impact
docs:     documentation only
chore:    tooling, config, dependencies
refactor: code restructuring, no behavior change

See CONTRIBUTING.md for the full guidelines.

---

Project Structure

├── app/                  # Next.js App Router pages
│   ├── about/            # About page
│   ├── globals.css       # Global styles + Tailwind directives
│   ├── layout.tsx        # Root layout with Header / Footer
│   └── page.tsx          # Main directory page
├── components/           # React UI components
│   ├── ui/               # Primitive, reusable components
│   │   ├── Badge.tsx
│   │   └── Button.tsx
│   ├── CategoryBadge.tsx
│   ├── FilterBar.tsx
│   ├── Footer.tsx
│   ├── Header.tsx
│   ├── HeroSection.tsx
│   ├── ProfileCard.tsx
│   ├── ProfileGrid.tsx
│   ├── SearchBar.tsx
│   └── StatsBar.tsx
├── data/                 # ✏️ Edit these to add profiles & labels
│   ├── categories.ts     # Category definitions (colors, icons, descriptions)
│   └── profiles.ts       # Engineer profile entries
├── hooks/
│   └── useProfiles.ts    # Filtering and search state
├── lib/
│   └── utils.ts          # filterProfiles(), cn()
└── types/
    └── index.ts          # TypeScript type definitions

---

MIT © Eduardo J. Barrios