Stop war.How to help
Back

Vertical timeline

As I was doing the 3rd version of my portfolio, I wanted to add a vertical timeline to it. I didn't find anything great online so I made my own. And because I thought it was quite great, I published it on tailwindcomponents.com.
As I was doing the 3rd version of my portfolio, I wanted to add a vertical timeline to it. I didn't find anything great online so I made my own. And because I thought it was quite great, I published it on tailwindcomponents.com.

Table of contents


Motivation

When I was making the 3rd version of my portfolio, I thought it would be cool to have a timeline of my learning journey. I first started to search on the Internet but I couldn’t find anything great made in CSS only, most of them were some kind of jQuery plugins.

BTW, I reused this timeline for the yNotes website.

How it’s done

At the time, I discovered CSS grid so I thought this was a great way to learn it. I used Tailwind CSS to make it quickly.

It uses flexbox for smaller screens and CSS grid for larger ones.

Wrapping up

This little project was quite interesting to explore how CSS grid works.

Type
Component
Technologies
CSS flexbox, CSS grid, Tailwind CSS

Get in touch

If you wish to talk, or chat about an existing / upcoming project, feel free to reach out with any of the below methods.

Profile picture
Florian
LEFEBVRE
French self-taught fullstack developer.

© 2022 Florian LEFEBVRE. All rights reserved.

Loading...