One page · Front-end interface
Time Tracking Dashboard: The time tracking dashboard is a build based on the Frontend Mentor challenges, starting from an image design to recreate a one page from scratch with HTML & CSS.
The time tracking dashboard is a build based on the Frontend Mentor challenges, starting from an image design to recreate a one page from scratch with HTML & CSS. It is an ideal tool for people who want to better understand how they use their time.
It lets users monitor their activities and make adjustments to reach their goals. It can be used to track time spent at work, gaming or studying, and can be customized to suit individual needs.
This exercise demonstrates my ability to turn a static design into a clean web interface that is faithful to the pixel. It highlights my command of the front-end fundamentals: semantic HTML structure, responsive layout in CSS and a careful rendering of a dashboard-style interface, without resorting to a framework.
Integration faithful to the design
A from-scratch reproduction of the Frontend Mentor design in HTML and CSS, respecting typography, spacing, colors and rounded corners for a near-pixel rendering.
Responsive layout
A grid of activity cards built in CSS that rearranges from mobile to tablet to desktop, without any external dependency.
Dashboard interface
A composition of daily, weekly and monthly cards with colored headers, for a clear and well-prioritized reading of the data.
Desktop version
Tablet version
Carousel Vertical
Discover a new way to scroll through your photos, with a vertical carousel.
Carte Animee
The animated card is an interactive feature that lets users hide information on a card and reveal it on hover.
Carte QR Code
Carte QR Code is a build based on the Frontend Mentor challenges, starting from a design image to recreate a one-page layout from scratch with HTML & CSS.
A project along the same lines?
Tell me about your needs — I'll quickly let you know what's relevant and realistic.