NexuSearch 🔍⚡

NexuSearch is a front‑end web application built in 2026 to explore open knowledge through a sleek, accessibility‑first interface. Designed with a cold‑tech aesthetic and performance‑optimized architecture, the project demonstrates how semantic HTML, modular SCSS, and modern JavaScript can converge into a polished showcase of search intelligence.

---

🌐 Project Overview

This site highlights how a simple search interface can be elevated into a professional web project:

• Semantic HTML5 for clarity, accessibility, and maintainability
• SCSS architecture with tokens, mixins, and modular partials for scalable styling
• JavaScript (ES6 modules) for dynamic search handling, API requests, and result rendering
• Wikipedia Open API integration — live knowledge retrieval with structured presentation
• Distinct branding — cold‑tech palette, geometric corner cuts, and glowing cyan accents

---

📂 File Structure

nexusearch-app/
│
├── index.html              # Main search interface
│
├── scss/                   # SCSS source files
│   ├── style.scss          # Main entry point
│   ├── _base.scss          # System tokens, reset, mixins
│   ├── _layout.scss        # Page scaffold
│   ├── _search-entry.scss  # Wordmark, tagline, search bar
│   ├── _search-results.scss# Stats bar + result items
│   └── _footer.scss        # Footer styles
│
├── dist/css/               # Compiled & minified CSS
│   ├── style.min.css
│   └── style.min.css.map
│
└── js/                     # JavaScript modules
    ├── main.js             # App initialization & orchestration
    ├── dataFunctions.js    # API requests & parsing
    ├── searchBar.js        # Input handling & clear button
    └── searchResults.js    # Result rendering & stats

---

✨ Highlights

• Accessibility‑first design
  Screen‑reader labels, ARIA‑friendly roles, focus states, and semantic structure.

• Responsive layout
  SCSS mixins for breakpoints, adaptive widths, and fluid typography.

• Modern styling
  Cold‑tech palette, cyan glow accents, geometric corner cuts, and scanline overlays.

• Dynamic search experience
  Wikipedia API integration, lazy‑loaded thumbnails, and real‑time stats feedback.

---

🚀 Getting Started

1. Clone the repository:

   git clone https://github.com/your-username/NexuSearch.git

2. Navigate into the project folder:

   cd NexuSearch

3. Open index.html in your browser to launch the app.

---

🛠️ Technologies

• HTML5 — semantic structure and accessibility
• SCSS — modular partials, tokens, mixins, responsive design
• JavaScript (ES6 modules) — search logic, API integration, DOM rendering
• Wikipedia Open API — open knowledge source

---

📖 Context

NexuSearch was conceived as a portfolio project to demonstrate mastery of accessibility‑first design, modular SCSS architecture, and modern JavaScript practices. It transforms a basic search interface into a polished, scalable, and professional web application — emphasizing performance, usability, and design originality.

---

👨‍💻 Author

JJ Ginon
Front‑end Web Developer | Accessibility‑first, performance‑optimized, modern web projects