https://github.com/ayokanmi-adejola/github-profile
A responsive, accessible single page app that lets users search GitHub profiles with live suggestions, keyboard navigation, and previews of recent repositories. Built with semantic HTML, modern CSS, and vanilla JavaScript; it integrates the GitHub REST API for real data.
https://github.com/ayokanmi-adejola/github-profile
css3 devchallengesio github-rest-api html5 mobile-first-workflow vanilla-js
Last synced: 3 months ago
JSON representation
A responsive, accessible single page app that lets users search GitHub profiles with live suggestions, keyboard navigation, and previews of recent repositories. Built with semantic HTML, modern CSS, and vanilla JavaScript; it integrates the GitHub REST API for real data.
- Host: GitHub
- URL: https://github.com/ayokanmi-adejola/github-profile
- Owner: Ayokanmi-Adejola
- Created: 2025-10-08T14:01:33.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-10-09T11:25:30.000Z (3 months ago)
- Last Synced: 2025-10-20T06:57:47.761Z (3 months ago)
- Topics: css3, devchallengesio, github-rest-api, html5, mobile-first-workflow, vanilla-js
- Language: JavaScript
- Homepage: https://git-hub-profile-wine.vercel.app
- Size: 1.33 MB
- Stars: 6
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# GitHub Profile — Responsive Search UI
A polished, responsive web application that lets users search for GitHub profiles, preview profile details and recent repositories, and explore results using keyboard and mouse. Built as a UI-focused challenge demonstrating modern front-end techniques, accessibility and integration with the GitHub REST API.
## Overview
This small app is a focused UI exercise, it mimics a GitHub profile search landing, with a hero banner and an inline search control. The goal was to produce a high-quality, accessible, responsive interface with subtle motion, keyboard support, and a lightweight JS integration to the GitHub REST API.
Key goals:
- Clean, modern visual design with a dark theme and translucent overlay.
- Fast, responsive layout for desktop, tablet and mobile.
- Polished UX: input suggestions, keyboard navigation, loading states, and error handling.
| Desktop | Tablet | Mobile |
| ------- | ------ | ------ |
|  |  |  |
## Demo
Open the `index.html` file in a browser (no build required) or deploy to GitHub Pages / Netlify.
## Features
- Type-ahead suggestions (GitHub Search API)
- Full user profile view (avatar, name, bio, follower/following counts)
- Recent public repositories (6 most recently updated)
- Keyboard navigation and shortcuts ("/" to focus search, Up/Down to navigate suggestions)
- Loading and error states with clear feedback
- Responsive design (mobile, tablet, desktop)
- Accessibility-minded markup and focus styles
## Built with
- HTML5 (semantic markup)
- Modern CSS (Flexbox, Grid, custom properties)
- Vanilla JavaScript (ES6+)
- GitHub REST API (no server required)
---
## Project structure
```
github-profile-master/
├─ index.html # Single-page UI
├─ styles.css # All styling (responsive + components)
├─ script.js # Application logic and API calls
├─ resources/ # Images and icons used in the UI
├─ design/ # Design reference images
├─ README.md # This document
└─ thumbnail.jpg # Project thumbnail
```
## Installation
This is a static project — no build step is required. To run it locally:
1. Clone the repository:
```powershell
git clone https://github.com/Ayokanmi-Adejola/GitHub-Profile && cd github-profile-master
```
2. Open `index.html` in your browser, or serve the folder using a local dev server. For example, using Python:
```powershell
python -m http.server 8080
# then open http://localhost:8080
```
## Usage
- Focus the search input by clicking it or pressing `/` on your keyboard.
- Type a GitHub username; suggestions will appear below the input.
- Use Arrow Up / Arrow Down to navigate suggestions and Enter to select.
- Click a suggestion or press Enter to execute the full search and display the profile and repositories.
Errors and load states are displayed inline; the app degrades gracefully when a result is missing.
## Developer notes
### API usage & rate limits
This project uses unauthenticated requests to the GitHub REST API. Unauthenticated rate limits are low (60 requests per hour per IP). Tips:
- For development, use a GitHub personal access token (PAT) to increase limits. Add it to API calls by setting the `Authorization: token ` header in `script.js` (do NOT commit tokens).
- Cache popular queries or debounce input to reduce requests (the app already uses a debounce on suggestions).
### Accessibility considerations
- The suggestions list uses `role="listbox"` and each suggestion uses `role="option"` with `aria-selected` to indicate keyboard selection.
- The search input includes `aria-autocomplete="list"` and the suggestions container is connected by `aria-controls`.
- Focus styles are visible and the layout is keyboard-navigable.
- Further improvements: an ARIA live region to announce result counts and explicit announcements for errors.
### Performance & optimizations
- Images are responsive via `srcset` and `sizes` to avoid downloading unnecessarily large assets on small screens.
- Requests for user data and repositories are fetched in parallel.
- Minimal third-party dependencies keep the bundle small.
## Testing
Manual testing checklist:
- Search for several GitHub usernames and confirm profile and repos display.
- Try keyboard navigation for suggestions.
- Test 404 / non-existent usernames to see the error message.
- Resize the browser to tablet and mobile widths.
Automated tests are not included in this repository; for production-grade apps, add unit tests and end-to-end tests (Jest, Playwright).
## Deployment
This is a static site. Recommended hosts:
- GitHub Pages — free and simple for public repos.
- Netlify or Vercel — provides continuous deployment and previews.
To deploy to GitHub Pages from the `main` branch, add the repo to GitHub and enable Pages in repo Settings.
## Contributing
Contributions are welcome. If you plan to add features or fix issues:
1. Fork the repository.
2. Create a branch: `git checkout -b feat/your-feature`.
3. Make changes and add tests where appropriate.
4. Open a pull request describing the changes.
Please follow semantic commits and include clear PR descriptions.
## Roadmap & enhancements
Potential improvements:
- Add OAuth authentication to boost API rate limits and access private data.
- Add repository filtering, sorting and pagination.
- Add theme toggle (light/dark) and persist preference.
- Add caching layer or service worker for offline-friendly search.
- Add unit & E2E tests and CI checks (lint, format, test)."# GitHub-Profile"