UITS_Job_Hunters Single Page Application (SPA)

A high-performance, production-ready Single Page Application (SPA) for UITS_Job_Hunters, a peer-driven career growth launchpad built under the umbrella oU1TS initiative.

---

Motto & Core Belief

"Someone will pay you for solving a problem they may have. Can you make them realize the problems they have? Are you capable of solving those?"

---

Overview

UITS_Job_Hunters connects early-career developers and tech enthusiasts with real-world job opportunities through proof of work, proactive outreach strategies, and community collaboration.

The website is engineered using vanilla HTML5, semantic CSS3, and ES6+ JavaScript with zero external libraries or framework dependencies.

---

Key Features

1. Header & Responsive Fixed Navigation:

   • Fixed top navbar displaying the UITS_Job_Hunters brand logo.
   • Dark/Light Theme Switcher button using standard CSS custom properties.
   • Mobile-responsive slide-out hamburger drawer menu for viewports under 768px.

2. Home / Hero Section:

   • Hero banner displaying the project title, motto, and quick action buttons.
   • Key initiative feature cards highlighting vetted talent, curated roadmaps, and community check-ins.

3. Hire Us (Talent Showcase):

   • Showcase of community members actively seeking full-time, contract, or internship roles.
   • Filter by Skillset: Frontend, Backend, Full Stack, DevOps.
   • Filter by Academic Level: Student or Graduated.
   • Direct Action Buttons: Direct links to candidate GitHub, LinkedIn, and Portfolio / CV / Resume.

4. Curated Resources:

   • Filterable knowledge base categorized by topic (Frontend, Backend, System Design, Cold Outreach).
   • Keyword search input filtering by title, description, or tag.

5. Join Us (Community Onboarding):

   • Step-by-step entry guide for official community channels: WhatsApp Community, Telegram Group, Facebook Group, and Discord Server.
   • Membership verification guidance and daily accountability check-in rules.

6. Learn More (Mission & Philosophy):

   • In-depth breakdown of the initiative's mission and 4 core growth philosophies (Problem First Mindset, Proof of Work, Daily Accountability, Peer Peer Growth).
   • Dedicated feature card anchoring back to the parent umbrella project hub (ou1ts.netlify.app).

---

Technical Stack & Constraints

• Core Languages: HTML5, CSS3, ES6+ JavaScript.
• Data Hydration: Asynchronous fetch() API parsing data.json.
• Styling Tokens: CSS Root Custom Properties (:root for Light theme, [data-theme="dark"] for Dark theme).
• Strict Guidelines Enforced:
  • No Gradients: Crisp, solid, high-contrast visual tokens.
  • No Emojis or Em-dashes: Professional typography and clean SVG icons.
  • Zero Dependencies: No npm packages, external JS libraries, or CSS frameworks.

---

Repository File Structure

c:\Users\gsmur\Documents\GitHub\[oU1TS]\job\
├── index.html        # Semantic HTML5 SPA container & section views
├── style.css         # Theme tokens, CSS variables, and layout rules
├── render.js        # Dynamic DOM component rendering helper module
├── app.js            # State management, hash router, theme toggle & event logic
├── data.json         # Dynamic JSON dataset (Hire Us, Resources, Community, About)
├── README.md         # Project overview and usage guidelines
└── Documentation.md  # Comprehensive technical specs and version history

---

Running Locally

Because the application uses the browser fetch() API to read data.json, serve the project root via any local HTTP web server to avoid browser CORS restrictions:

Using Python HTTP Server:

python -m http.server 8000

Then open http://localhost:8000 in your web browser.

Using Node / npx:

npx serve .

---

Related Repositories

• Parent Community Hub: ou1ts.netlify.app
• UITS Dev Lab: UITS_Dev_Lab Repository