Journey To: Software Engineer

From warehouse racks to full stack

Day 15: Figma SVG and MyPage

Slowly integrating figma into the workflow and working on my page.

April 21, 2025

Hello,


So today I put some more work into the draft. I'm so used to only a bit of time to code that I really need to get used to coding for longer. On the plus side I can work on more than just one thing or one project even, but on the downside it's just hard to stay focused on one project without getting bored. Nonetheless, I made good progress yesterday.


Eversports Draft


In terms of the draft, I worked on the Why section. Just for fun, I followed another Tom Is Loading tutorial to spice up the heading. Then I tried to wrap my head around inner-rounded-corners. What seems like such a simple problem is actually so much larger than I could imagine. The problem is as follows, say you want a L-shaped object, and say you want rounding on all the corners. Well now you have two problems. One: Creating the L-shaped object, either through clip-paths, masking, importing images... The second problem is the infamous inner rounding.


I don't know if I'm the problem here and there's some obvious solution, but as far as I searched, there is no simple way to do this that doesn't involve some workaround. I was hoping for something like in illustrator where you can select an anchor or the object then boom, round everything all at once. But no this is just not possible yet unfortunately. So instead of losing tons of time to frustration, I just created full rectangles.


Figma


I know I still don't use Figma to its full potential but what is very useful now is to create lines. A lot of these newer websites have these fun lines or brush strokes everywhere pointing, underlining and doing other things, and I found the easiest way to create these custom lines was to make them in Figma and copy the SVG. Then with motion I can add in the pathLength property to draw it in.


MyPage


Finally today I did some work on this page, specifically the Projects tab. I usually hardcode everything directly out from my head to the file, then later on view the patterns and repeated code and reduce them as much as possible. I hope in the future I can develop this sense of knowing how it will all look before I start coding, so I can write cleaner code the first time around.


Today has been great, lots of progress on both sites and starting to think of what's up next. Thank you for your time, I will see you next time.



Eversport Draft Repo