Twenty One Pilots band Fan Page

Devlog #4 - The Piano Nav Bar

(AKA The thing that’s been consuming all my time over the last few weeks )

I designed a piano from scratch to act as the NavBar for my Twenty One Pilots band page. There are spaces for navigation buttons on it that will take you to the other pages. This along took almost a week to finish, the 2 hours is just when I remembered to record on lapse (╥﹏╥).

Anyways, I’m not sure how I will do the guitar and drums at this point because it took so much time.

Devlog#3? - I made a scrolling animation.

Pretty straight forward really…

but I guess if you really want a detailed explanation that badly…

For the scrolling animation I created 3 animations: A FadeIn animation, a FadeIn and grow animation, and lastly a Fade out animation.

I applied the fade in animation to the “Welcome to” and the Page credits (“By Gideon…”) . For the fade in and grow, I only applied that to the page title (TOP fan page) and the fade out, only for the “Welcome to” heading.

I should probably change the heading numbers for the different words because I gave “Welcome to” the h1 attribute which doesn’t really fit since it doesn’t say anything about the website, so I’ll have to switch that to the title and change the sizes individualy.

All the animation stuff was new to me so everything I did today was more like an experiment. I like how it turned out but I might watch a few videos to see how I can perfect it

Devlog #3 (Home Page Update) …………………………………………………………………………………………………………..

Nothing too fancy, I just created a homepage according to the designs I made.

SKILLS LEARNED:
-clipmask
-translateX and Y

………………………………………………………………………………………… ………………

The previous home page is still active and this new one is currently separate from the actual page because It isn’t finished yet.

…………………………………………………………………………………………………………………….

I might as well talk about the troubles I faced when I made this.

1. The trapezoidal bar at the top (future navbar)

I’ll make this short and easy to read for you guys!!

I originally made the bar myself on canva then uploaded and linked it in css but that had its own problems: I couldn’t size it well but more importantly, I couldn’t put an outline around it to make it look how I wanted to. The outline that did show up was a rectangle around the general vicinity of the shape.

I couldn’t crop the sides diagonaly using any cropping tool so I decided to do some research.

after the research I found out that you can make shapes using CSS within the codespace and don’t have to make them externally. This made it super easy to make the shape but the outline and centering/ sizing issues persisted.

I threw in the towel at that point and decided to ask AI how to do it, I also watched a few videos and learnt about clip-masking and a few other things.

And just like that AI saved the day…yay ( I’m just happy i got it done -_-) ANYWAYS this is a long devlog because the video doesn’t look all too appealing despite the time I’ve spent on it.

Devlog #2: Designs …………………………………………………………………………….. (The devlog wont let me start on a new line so you’re going to have to bear with me on the dots ) …………..…………………………………………………………… …. So I made physical designs of my vision for the website so I was sure of what I wanted it to look like. I started this as an experimental website to learn html and css as I made it and now I’d like to improve it . My goal for this website is to make it an interactive visual experience that informs people about the great world of twenty one pilots, my faovorite band . ……………………………………………….………………………….. ……………………………….. So far I have a home page with a few features like a title (though it’s just an alias i made up right now) , top hits (I plan to make that a separate page) and a few picture of albums. It’s basically the same thing as the video I showed in my last devlog. I also have an albums page I haven’t showed yet which I’ll show I’m a video at the end. But anyway I’m done with a few basic sketches and I’m going to now start coding according to the design. (I kind already have started)

I have been working on a fan page since the summer began. I finished building the home page and the albums page.

This is a video of the home page