{"id":31766259,"url":"https://github.com/ayokanmi-adejola/project-tracking-intro-component","last_synced_at":"2025-10-25T22:18:44.250Z","repository":{"id":308992270,"uuid":"1027780193","full_name":"Ayokanmi-Adejola/Project-Tracking-Intro-Component","owner":"Ayokanmi-Adejola","description":"A pixel-perfect, responsive landing page component featuring modern web development practices. Includes interactive mobile navigation with hamburger menu, CSS-generated background shapes, hover states, and accessibility considerations. Built with semantic HTML5, modern CSS3 (Grid, Flexbox, custom properties), and vanilla JavaScript.","archived":false,"fork":false,"pushed_at":"2025-07-29T21:00:06.000Z","size":186,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-30T00:00:39.613Z","etag":null,"topics":["css3","flexbox-layout","google-fonts","html5","mobile-first-workflow","vanilla-js"],"latest_commit_sha":null,"homepage":"https://project-tracking-intro-component-psi.vercel.app","language":"CSS","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}},"created_at":"2025-07-28T14:20:00.000Z","updated_at":"2025-09-15T13:29:44.000Z","dependencies_parsed_at":"2025-08-09T05:51:03.753Z","dependency_job_id":"ac1ea979-c4b1-46f0-946f-cfcb715964fe","html_url":"https://github.com/Ayokanmi-Adejola/Project-Tracking-Intro-Component","commit_stats":null,"previous_names":["ayokanmi-adejola/project-tracking-intro-component"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Ayokanmi-Adejola/Project-Tracking-Intro-Component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FProject-Tracking-Intro-Component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FProject-Tracking-Intro-Component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FProject-Tracking-Intro-Component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FProject-Tracking-Intro-Component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ayokanmi-Adejola","download_url":"https://codeload.github.com/Ayokanmi-Adejola/Project-Tracking-Intro-Component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FProject-Tracking-Intro-Component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279002360,"owners_count":26083356,"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-09T02:00:07.460Z","response_time":59,"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","flexbox-layout","google-fonts","html5","mobile-first-workflow","vanilla-js"],"created_at":"2025-10-10T00:30:04.686Z","updated_at":"2025-10-10T00:30:33.490Z","avatar_url":"https://github.com/Ayokanmi-Adejola.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Project Tracking Intro Component\n\n![Design preview for the Project tracking intro component](preview.jpg)\n\nA responsive landing page component built with modern web technologies, featuring a clean design and smooth mobile navigation experience.\n\n\n\n## 📋 Overview\n\nThis project is a pixel-perfect implementation of a project tracking intro component, originally designed by [Frontend Mentor](https://www.frontendmentor.io). The component showcases modern web development practices with responsive design, interactive elements, and accessibility considerations.\n\n### Key Features\n\n- **Fully Responsive Design**: Optimized for mobile (375px) and desktop (1440px) viewports\n- **Interactive Mobile Navigation**: Hamburger menu with smooth slide-in animation and overlay\n- **CSS-Generated Background Shapes**: Custom curved background created with pure CSS\n- **Hover States**: Subtle interactive feedback for all clickable elements\n- **Accessibility**: Semantic HTML structure with proper ARIA labels\n- **Cross-Browser Compatibility**: Tested across modern browsers\n\n## 🛠️ Built With\n\n- **HTML5**: Semantic markup with accessibility best practices\n- **CSS3**: Modern CSS features including Grid, Flexbox, and custom properties\n- **Vanilla JavaScript**: DOM manipulation and event handling\n- **Google Fonts**: Barlow and Barlow Condensed typography\n- **Mobile-First Design**: Progressive enhancement approach\n\n## 🎨 Design System\n\n### Colors\n- **Primary**: Red 400 (`hsl(0, 100%, 68%)`)\n- **Neutral Dark**: Blue 950 (`hsl(230, 29%, 20%)`)\n- **Neutral Light**: Blue 100 (`hsl(207, 33%, 95%)`)\n\n### Typography\n- **Headings**: Barlow Condensed (400, 700)\n- **Body**: Barlow (400)\n- **Base Font Size**: 18px\n\n### Breakpoints\n- **Mobile**: 375px and up\n- **Desktop**: 1440px and up\n\n## 🚀 Getting Started\n\n### Prerequisites\n- Modern web browser\n- Basic understanding of HTML, CSS, and JavaScript\n\n### Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/Ayokanmi-Adejola/project-tracking-intro-component.git\n   cd project-tracking-intro-component\n   ```\n\n2. **Open in browser**\n   ```bash\n   # Simply open index.html in your preferred browser\n   open index.html\n   # or\n   python -m http.server 8000  # For local server\n   ```\n\n### Project Structure\n```\nproject-tracking-intro-component/\n├── index.html              # Main HTML file\n├── styles.css              # CSS styles\n├── script.js               # JavaScript functionality\n├── images/                 # Image assets\n│   ├── logo.svg\n│   ├── illustration-devices.svg\n│   ├── icon-hamburger.svg\n│   └── icon-close.svg\n├── design/                 # Design references\n└── README.md\n```\n\n## ✨ Features Implementation\n\n### Responsive Design\n- **Mobile-First Approach**: Designed for 375px mobile screens with progressive enhancement\n- **CSS Grid Layout**: Modern layout system for the hero section\n- **Flexible Typography**: Responsive font sizes and spacing\n\n### Interactive Navigation\n- **Hamburger Menu**: Smooth slide-in animation for mobile navigation\n- **Overlay Effect**: Semi-transparent backdrop when menu is active\n- **Close Functionality**: Multiple ways to close menu (button, overlay, outside click)\n- **Scroll Prevention**: Body scroll disabled when menu is open\n\n### CSS Techniques\n- **Pseudo-Elements**: Background shape created with `::before` pseudo-element\n- **Custom Properties**: Maintainable color system\n- **Smooth Transitions**: Enhanced user experience with CSS animations\n- **Hover States**: Interactive feedback for all clickable elements\n\n## 🌐 Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n\n## 🚀 Deployment\n\nThis project can be easily deployed to various platforms:\n\n### GitHub Pages\n1. Push your code to a GitHub repository\n2. Go to Settings \u003e Pages\n3. Select source branch (usually `main`)\n4. Your site will be available at `https://username.github.io/repository-name`\n\n### Netlify\n1. Connect your GitHub repository to Netlify\n2. Set build command: (leave empty for static sites)\n3. Set publish directory: `/` (root)\n4. Deploy automatically on every push\n\n### Vercel\n1. Import your GitHub repository\n2. Configure project settings (auto-detected for static sites)\n3. Deploy with zero configuration\n\n\n## 🙏 Acknowledgments\n\n- Design provided by [Frontend Mentor](https://www.frontendmentor.io)\n- Icons and illustrations included in the design package\n- Google Fonts for typography\n\n\n## 👨‍💻 Author\n\n\n- Frontend Mentor: [@Ayokanmi-Adejola](https://www.frontendmentor.io/profile/Ayokanmi-Adejola)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayokanmi-adejola%2Fproject-tracking-intro-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fayokanmi-adejola%2Fproject-tracking-intro-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayokanmi-adejola%2Fproject-tracking-intro-component/lists"}