{"id":32451262,"url":"https://github.com/ayokanmi-adejola/github-profile","last_synced_at":"2025-10-26T06:59:55.113Z","repository":{"id":319776465,"uuid":"1072282189","full_name":"Ayokanmi-Adejola/GitHub-Profile","owner":"Ayokanmi-Adejola","description":"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.","archived":false,"fork":false,"pushed_at":"2025-10-09T11:25:30.000Z","size":1398,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-20T06:57:47.761Z","etag":null,"topics":["css3","devchallengesio","github-rest-api","html5","mobile-first-workflow","vanilla-js"],"latest_commit_sha":null,"homepage":"https://git-hub-profile-wine.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ayokanmi-Adejola.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-08T14:01:33.000Z","updated_at":"2025-10-17T09:46:16.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/Ayokanmi-Adejola/GitHub-Profile","commit_stats":null,"previous_names":["ayokanmi-adejola/github-profile"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/Ayokanmi-Adejola/GitHub-Profile","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FGitHub-Profile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FGitHub-Profile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FGitHub-Profile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FGitHub-Profile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ayokanmi-Adejola","download_url":"https://codeload.github.com/Ayokanmi-Adejola/GitHub-Profile/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FGitHub-Profile/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281069108,"owners_count":26438554,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-26T02:00:06.575Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css3","devchallengesio","github-rest-api","html5","mobile-first-workflow","vanilla-js"],"created_at":"2025-10-26T06:59:54.286Z","updated_at":"2025-10-26T06:59:55.106Z","avatar_url":"https://github.com/Ayokanmi-Adejola.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GitHub Profile — Responsive Search UI\n\n![Project thumbnail](./thumbnail.jpg)\n\nA 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.\n\n\n## Overview\n\nThis 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.\n\nKey goals:\n- Clean, modern visual design with a dark theme and translucent overlay.\n- Fast, responsive layout for desktop, tablet and mobile.\n- Polished UX: input suggestions, keyboard navigation, loading states, and error handling.\n\n| Desktop | Tablet | Mobile |\n| ------- | ------ | ------ |\n| ![Desktop](./design/Desktop_1350px.jpg) | ![Tablet](./design/Tablet_1024px.jpg) | ![Mobile](./design/Mobile_412px.jpg) |\n\n## Demo\n\nOpen the `index.html` file in a browser (no build required) or deploy to GitHub Pages / Netlify.\n\n\n\n## Features\n\n- Type-ahead suggestions (GitHub Search API)\n- Full user profile view (avatar, name, bio, follower/following counts)\n- Recent public repositories (6 most recently updated)\n- Keyboard navigation and shortcuts (\"/\" to focus search, Up/Down to navigate suggestions)\n- Loading and error states with clear feedback\n- Responsive design (mobile, tablet, desktop)\n- Accessibility-minded markup and focus styles\n\n\n\n## Built with\n\n- HTML5 (semantic markup)\n- Modern CSS (Flexbox, Grid, custom properties)\n- Vanilla JavaScript (ES6+)\n- GitHub REST API (no server required)\n\n---\n\n## Project structure\n\n```\ngithub-profile-master/\n├─ index.html          # Single-page UI\n├─ styles.css          # All styling (responsive + components)\n├─ script.js           # Application logic and API calls\n├─ resources/          # Images and icons used in the UI\n├─ design/             # Design reference images\n├─ README.md           # This document\n└─ thumbnail.jpg       # Project thumbnail\n```\n\n\n\n## Installation\n\nThis is a static project — no build step is required. To run it locally:\n\n1. Clone the repository:\n\n```powershell\ngit clone https://github.com/Ayokanmi-Adejola/GitHub-Profile \u0026\u0026 cd github-profile-master\n```\n\n2. Open `index.html` in your browser, or serve the folder using a local dev server. For example, using Python:\n\n```powershell\npython -m http.server 8080\n# then open http://localhost:8080\n```\n\n\n## Usage\n\n- Focus the search input by clicking it or pressing `/` on your keyboard.\n- Type a GitHub username; suggestions will appear below the input.\n- Use Arrow Up / Arrow Down to navigate suggestions and Enter to select.\n- Click a suggestion or press Enter to execute the full search and display the profile and repositories.\n\nErrors and load states are displayed inline; the app degrades gracefully when a result is missing.\n\n\n## Developer notes\n\n### API usage \u0026 rate limits\n\nThis project uses unauthenticated requests to the GitHub REST API. Unauthenticated rate limits are low (60 requests per hour per IP). Tips:\n\n- For development, use a GitHub personal access token (PAT) to increase limits. Add it to API calls by setting the `Authorization: token \u003cPAT\u003e` header in `script.js` (do NOT commit tokens).\n- Cache popular queries or debounce input to reduce requests (the app already uses a debounce on suggestions).\n\n### Accessibility considerations\n\n- The suggestions list uses `role=\"listbox\"` and each suggestion uses `role=\"option\"` with `aria-selected` to indicate keyboard selection.\n- The search input includes `aria-autocomplete=\"list\"` and the suggestions container is connected by `aria-controls`.\n- Focus styles are visible and the layout is keyboard-navigable.\n- Further improvements: an ARIA live region to announce result counts and explicit announcements for errors.\n\n### Performance \u0026 optimizations\n\n- Images are responsive via `srcset` and `sizes` to avoid downloading unnecessarily large assets on small screens.\n- Requests for user data and repositories are fetched in parallel.\n- Minimal third-party dependencies keep the bundle small.\n\n\n## Testing\n\nManual testing checklist:\n\n- Search for several GitHub usernames and confirm profile and repos display.\n- Try keyboard navigation for suggestions.\n- Test 404 / non-existent usernames to see the error message.\n- Resize the browser to tablet and mobile widths.\n\nAutomated tests are not included in this repository; for production-grade apps, add unit tests and end-to-end tests (Jest, Playwright).\n\n## Deployment\n\nThis is a static site. Recommended hosts:\n\n- GitHub Pages — free and simple for public repos.\n- Netlify or Vercel — provides continuous deployment and previews.\n\nTo deploy to GitHub Pages from the `main` branch, add the repo to GitHub and enable Pages in repo Settings.\n\n\n## Contributing\n\nContributions are welcome. If you plan to add features or fix issues:\n\n1. Fork the repository.\n2. Create a branch: `git checkout -b feat/your-feature`.\n3. Make changes and add tests where appropriate.\n4. Open a pull request describing the changes.\n\nPlease follow semantic commits and include clear PR descriptions.\n\n\n## Roadmap \u0026 enhancements\n\nPotential improvements:\n\n- Add OAuth authentication to boost API rate limits and access private data.\n- Add repository filtering, sorting and pagination.\n- Add theme toggle (light/dark) and persist preference.\n- Add caching layer or service worker for offline-friendly search.\n- Add unit \u0026 E2E tests and CI checks (lint, format, test).\"# GitHub-Profile\" \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayokanmi-adejola%2Fgithub-profile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fayokanmi-adejola%2Fgithub-profile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayokanmi-adejola%2Fgithub-profile/lists"}