You are browsing as a guest. Sign up (or log in) to start making projects!

Nasko

@Nasko

Joined June 12th, 2026

  • 4Devlogs
  • 2Projects
  • 1Ships
  • 0Votes
Ship

I created my personal site using HTML and CSS. I thought of making a ticket-shaped design that had two rectangles, one bigger than the other, with corners cut at a specific point to make two octagons, and I achieved it using polygons in CSS, and I created multiple elements so that I could use them seperately in HTML, becuase I was met with a bug that when I combined the two, their clip-path would sync and leave me with the same shape with the same dimensions, so I came up with the idea to do it that way using a wrapper, a back element, and a front element. I wanted a navigation bar to move between sections (which would come in handy if I were to make the site longer), and I managed the movement of the sidebar and the photo I placed on the right using position commands. I chose a blue color palette from ColorHunt (I provided the link in the README) to make the site look better. I needed to divide the page into left, middle and right at the first place, I tried using float boxes at the first place becuase it was what I saw from a YouTube tutorial, but after digging in some more, I found flex boxes, and I used flex boxes to make a partition of 1:3:1. Site is hosted in GitHub pages, and the code is on GitHub too, I tested them. You just have to go to the site to see it.

Try project → See source code →
Open comments for this post

2h 16m 48s logged

I spent more time on developing the design. I came up with the idea to make ticket shapes for the sections and the navigation bar, and splitting the diagram into 3 as I needed left, right, and middle sections on my design. I created them using flexes and a flex container, and I did some debugging to display content in them.

After doing the split, I created ticket as a css class with a clip-path class named cut-corners to get a basic ticket shape which I did get. Afterwards, I tried making a bigger copy of that ticket that would sit behind the smaller one to give a sense of a border, but I struggled on that for some time, because the solution I tried with .ticket::before didn’t work as it got its clip-path directly from ticket, thus making their dimensions same, and making the bigger one disappear, so I thought of doing it with a container. I created ticket-wrapper, and turned .ticket::before to ticket-back, did some splitting up in html, and I got my desired look on the page.

0
0
92
Open comments for this post

40m 22s logged

I started writing the html code as I completed the tutorial, and made a simple site with some descriptions, but it lacks design elements as I only used a background indicator and nothing else in css file. My next step will be to organise those with proper design in css.

0
0
13
Open comments for this post

37m 23s logged

I made some more progress on writing the code for the top ESP32. I mentioned in the Stasis that I will be using the ESP-NOW communication system to display the time as the main case calculates it. I now made a dummy MAC address and changed the message structure to send the data via direct text rather than unorganised bytes and an on/off signal.

0
0
1

Followers

Loading…