Devlog #10

I have finished the Experiences section of the website. This section was for sure a lot trickier than I thought it would be. The hardest part was trying to figure out how to arrange the boxes in a vertical but staggered order, so I could build the timeline. However, on the upside, I was able to quickly do styling, because a lot of the colors and like hover effects and everything was already set up in my code from styling the previous section, so that did not take too much time. Overall, I really like how this section turned out, and I think it is a bit different from the rest of the sections.

Current Progress

I completed the Experience section. This one is styled a bit differently from the other two. In this one, the timeline in centered and it goes longer than the length of the screen. The about me section and the projects section were all set to be as tall as the screen itself using height: 100dvh, but this one is actually dictated by the length of the cards, and then I added some padding at the bottom to separate it from the next section. The tricky part was to actually make the timeline affect. At first I did some research and thought or using pseudo elements in CSS to create a line through the middle of the page and arrange the boxes beside it. But that was way too complicated and didn’t seem to work for me, so I decided to arrange the boxes first and then add the line later. To arrange the boxes, I first centered them vertically in the middle of the screen, and then gave half of them one class and the other half another class. Then I pushed one class completely to the right, and the other to the left and that created a staggered timeline look. Then I needed to add a line through it. To do this, I created an empty <div> tag at the beginning of my experience section and then styled it as a line as long as my experience cards and then filled it with a rainbow gradient to kinda match my theme. I also added tiny circles using the same method to the timeline wherever their was a card to kinda just make it look cooler. I will acknowledge that I did use a bit of AI for this section to research the different ways to position the boxes, but otherwise I implemented all code by myself and I did not copy paste anything in. I really think this section introduced me to the flexibility in CSS, and how to manipulate different rules and elements to get the desired effect.

Next Steps

I am now going to work on the Achievements section. I am planning on making this section like a staggering kinda page of acheivements, like not quite even, just like a mosaic, because there is a lot of content in this section. For a kind of visualizer, I am planning to kinda style it like a pinterest page so like staggered and just fitting together. I just hope that it doesn’t turn out to jaggedy or uneven at the end of that part, and that it doesn’t take too long to organize them to look like at least like reasonably even at that. Hopefully I finish this section pretty quick, like just an hour or 2, and then I will quickly finish up the contact section as well, so then I will post a devlog of those two, but yeah I will see. I think I am getting close to a ship so keep an eye out for the next few days.

Below you can see like the full experience timeline like zoomed out and I am hovering over the first card.