Welcome
Hello! My name is Petar, otherwise known online as Kizovani. Welcome to my website!
I built this website to showcase things I learn about web development and to have some fun building something that I thought looked cool.
Background
I was a freelance video editor over the Covid Quarantine and had a lot of fun being able to express things the way I thought looked the be st. It was just a matter of knowing how to use the tools I was given to be able to do whatever I wanted (and what the client asked for, of course). I loved the feeling of endless possibilities as long as I could figure out how to use the tools I had properly.
I got that same feeling after being given a default website boilerplate in one of my classes in university, and I wanted to see what I could do to satisfy the itch of the image I had in my head of what I could create. This website is what came out the other end.
About the Site
Each page is a little different, so I will get into as much detail as I can about each one.
Title page:
The main/landing page was built mostly using three.js for the main scene, with the model being just8's "Angel" model lifted from sketchfab, since I really liked the way it looked. Unfortunately, I had to heavily reduce the original quality of the model (from about one million polygons to about 1 percent of that). Then I used the ASCII effect in three.js to add a personal touch to it. Which also allowed for the model quality to be so low and load quicker since the effect drops the detail anyway.
I found the animation on its own to be a little too boring, so I added the light controls to add some more fun to it. The actual aninimation of the controls menu (the range slider and on/off switch) in and out of the view is done with GSAP, which I heard about before starting this project, so I wanted to try it out for myself.
Up next was the menu bar. I wanted to make this look unique yet still fit the theme, and lo and behold, the great Google algorithm saw I was interested in HTML, CSS, and the 'menu bar' keyword, so it decided to recommend me this video from codegrid, a Youtube channel I had never seen or heard of before. So I incorporated much of his work with some small tweaks to make it fit the theme better. I noticed he was also using GSAP, which was a happy accident and helped me learn a lot more about some use cases for it.
Projects Page
Then came my Projects page, I wasnt sure how I wanted this to look to be honest, but I knew I wanted it to obviously showcase some of the other fun projects I've done and some of the things I've learned along the way.
I ended up making those kind of cards you see, they were pretty simple, and done entirely in css although I cant remember the tutorial I followed, otherwise I would have also linked it here
Then of course comes the backround monster/worm/centipede thing in the backround, I was actually on instagram when a friend sent me this [INSERT LINK HERE] post, with the caption "you should put this on your website" so thats exactly what I did, apart from changing some starting conditions that code is entirely unaltered and full credits go to [INSERT NAME AND LINK HERE]
Art Page
I really wanted to try and make an image gallery of sorts, so I got a bunch of artworks I liked and got to work.
setting up the actual gallery was not that diffucult, I wanted to get some smoother scrolling like I've seen on some other websites, I ended up stumbling upon Lenis, which is a lightweight JavaScript library for creating smooth scrolling, I'm not entirely sure I used it to it's full potential but I think it looks better than the default scroll animation nonetheless.
After that, I needed to add something more the the gallery to make it look cooler, it was too bare. While looking around I found another Codegrid video that used a really cool minimap to show where in the gallery you were. I really loved this concept, I tried my best to emulate it using
Info Page
And then we finally arrive to this very info page, which even though its a bunch of text, was actually alot harder to get working the way I wanted with the baffle.js library (the library that scrambles/animates) the text, for some reason, the baffle effect completely removes links in the text, no clue why, I ended up having to read this entire info page, store it, and then repaste it over the effect when it completes, annoying, but sometimes you have to just make do.
Easter Eggs
There are some smaller jokes I have also built into the site. Try and find them yourself:
- they are all on the main page
- one has to do with hanging around for far too long
- One is to do with playing too roughly with the avatar (this is a complete lie and not implemented yet)
- The other has to do with the special cheat code of a certain video game company starting with a 'K' (another lie and not implemented yet)
- There is also a way to reveal all of the "secrets" of the site on this page if you can guess and type out my favorite word (final lie I swear)