https://github.com/ayokanmi-adejola/project-tracking-intro-component
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.
https://github.com/ayokanmi-adejola/project-tracking-intro-component
css3 flexbox-layout google-fonts html5 mobile-first-workflow vanilla-js
Last synced: 8 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/ayokanmi-adejola/project-tracking-intro-component
- Owner: Ayokanmi-Adejola
- Created: 2025-07-28T14:20:00.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-07-29T21:00:06.000Z (11 months ago)
- Last Synced: 2025-09-30T00:00:39.613Z (9 months ago)
- Topics: css3, flexbox-layout, google-fonts, html5, mobile-first-workflow, vanilla-js
- Language: CSS
- Homepage: https://project-tracking-intro-component-psi.vercel.app
- Size: 182 KB
- Stars: 5
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Project Tracking Intro Component
A responsive landing page component built with modern web technologies, featuring a clean design and smooth mobile navigation experience.
## 📋 Overview
This 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.
### Key Features
- **Fully Responsive Design**: Optimized for mobile (375px) and desktop (1440px) viewports
- **Interactive Mobile Navigation**: Hamburger menu with smooth slide-in animation and overlay
- **CSS-Generated Background Shapes**: Custom curved background created with pure CSS
- **Hover States**: Subtle interactive feedback for all clickable elements
- **Accessibility**: Semantic HTML structure with proper ARIA labels
- **Cross-Browser Compatibility**: Tested across modern browsers
## 🛠️ Built With
- **HTML5**: Semantic markup with accessibility best practices
- **CSS3**: Modern CSS features including Grid, Flexbox, and custom properties
- **Vanilla JavaScript**: DOM manipulation and event handling
- **Google Fonts**: Barlow and Barlow Condensed typography
- **Mobile-First Design**: Progressive enhancement approach
## 🎨 Design System
### Colors
- **Primary**: Red 400 (`hsl(0, 100%, 68%)`)
- **Neutral Dark**: Blue 950 (`hsl(230, 29%, 20%)`)
- **Neutral Light**: Blue 100 (`hsl(207, 33%, 95%)`)
### Typography
- **Headings**: Barlow Condensed (400, 700)
- **Body**: Barlow (400)
- **Base Font Size**: 18px
### Breakpoints
- **Mobile**: 375px and up
- **Desktop**: 1440px and up
## 🚀 Getting Started
### Prerequisites
- Modern web browser
- Basic understanding of HTML, CSS, and JavaScript
### Installation
1. **Clone the repository**
```bash
git clone https://github.com/Ayokanmi-Adejola/project-tracking-intro-component.git
cd project-tracking-intro-component
```
2. **Open in browser**
```bash
# Simply open index.html in your preferred browser
open index.html
# or
python -m http.server 8000 # For local server
```
### Project Structure
```
project-tracking-intro-component/
├── index.html # Main HTML file
├── styles.css # CSS styles
├── script.js # JavaScript functionality
├── images/ # Image assets
│ ├── logo.svg
│ ├── illustration-devices.svg
│ ├── icon-hamburger.svg
│ └── icon-close.svg
├── design/ # Design references
└── README.md
```
## ✨ Features Implementation
### Responsive Design
- **Mobile-First Approach**: Designed for 375px mobile screens with progressive enhancement
- **CSS Grid Layout**: Modern layout system for the hero section
- **Flexible Typography**: Responsive font sizes and spacing
### Interactive Navigation
- **Hamburger Menu**: Smooth slide-in animation for mobile navigation
- **Overlay Effect**: Semi-transparent backdrop when menu is active
- **Close Functionality**: Multiple ways to close menu (button, overlay, outside click)
- **Scroll Prevention**: Body scroll disabled when menu is open
### CSS Techniques
- **Pseudo-Elements**: Background shape created with `::before` pseudo-element
- **Custom Properties**: Maintainable color system
- **Smooth Transitions**: Enhanced user experience with CSS animations
- **Hover States**: Interactive feedback for all clickable elements
## 🌐 Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
## 🚀 Deployment
This project can be easily deployed to various platforms:
### GitHub Pages
1. Push your code to a GitHub repository
2. Go to Settings > Pages
3. Select source branch (usually `main`)
4. Your site will be available at `https://username.github.io/repository-name`
### Netlify
1. Connect your GitHub repository to Netlify
2. Set build command: (leave empty for static sites)
3. Set publish directory: `/` (root)
4. Deploy automatically on every push
### Vercel
1. Import your GitHub repository
2. Configure project settings (auto-detected for static sites)
3. Deploy with zero configuration
## 🙏 Acknowledgments
- Design provided by [Frontend Mentor](https://www.frontendmentor.io)
- Icons and illustrations included in the design package
- Google Fonts for typography
## 👨💻 Author
- Frontend Mentor: [@Ayokanmi-Adejola](https://www.frontendmentor.io/profile/Ayokanmi-Adejola)