https://github.com/blordeus/project-tracking-intro-component
https://github.com/blordeus/project-tracking-intro-component
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/blordeus/project-tracking-intro-component
- Owner: blordeus
- Created: 2025-07-04T15:24:39.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-07-04T18:16:59.000Z (12 months ago)
- Last Synced: 2025-07-04T19:29:11.386Z (12 months ago)
- Language: CSS
- Homepage: https://blordeus.github.io/project-tracking-intro-component/
- Size: 386 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Project tracking intro component solution
This is a solution to the [Project tracking intro component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/project-tracking-intro-component-5d289097500fcb331a67d80e). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Frontend Mentor - Project tracking intro component solution](#frontend-mentor---project-tracking-intro-component-solution)
- [Table of contents](#table-of-contents)
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
## Overview
### The challenge
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Navigate through the mobile menu functionality
- Experience smooth transitions and animations
- View the custom-coded background pattern
### Screenshot
### Links
- Solution URL: [Solution](https://github.com/blordeus/project-tracking-intro-component)
- Live Site URL: [Live Site](https://blordeus.github.io/project-tracking-intro-component/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Vanilla JavaScript for mobile navigation
- CSS animations and transitions
### What I learned
This project was an excellent opportunity to practice creating complex layouts with CSS Grid and Flexbox. One of the most challenging aspects was creating the background pattern using pure CSS without relying on image assets.
Here's how I approached the custom background pattern:
I also implemented smooth mobile navigation with JavaScript:
```js
const mobileNavToggle = document.querySelector('.mobile-nav-toggle');
const navigationMenu = document.querySelector('.navigation-menu');
mobileNavToggle.addEventListener('click', () => {
navigationMenu.classList.toggle('active');
mobileNavToggle.classList.toggle('active');
});
```
### Continued development
Moving forward, I want to continue focusing on:
- Advanced CSS animations and micro-interactions
- Accessibility improvements with ARIA labels and keyboard navigation
- Performance optimization techniques
- CSS Grid mastery for complex layouts
- Mobile-first responsive design principles
### Useful resources
- [CSS Grid Guide](https://css-tricks.com/snippets/css/complete-guide-grid/) - This helped me understand CSS Grid layout for the main content area.
- [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - An excellent resource for understanding flexbox properties.
- [MDN Web Docs](https://developer.mozilla.org/) - Great reference for CSS properties and JavaScript methods.
## Author
- Website - [Bryan Lordeus](https://www.bryanlordeus.com)
- Frontend Mentor - [@blordeus](https://www.frontendmentor.io/profile/blordeus)
- GitHub - [@blordeus](https://github.com/blordeus)
## Acknowledgments
Thanks to Frontend Mentor for providing this challenging and engaging project. The design required creative problem-solving, especially for the background pattern implementation. I also appreciate the Frontend Mentor community for their helpful feedback and support throughout the development process.