The old design
So, the website started as a rebranding from my old design which looked like this
The design was eeeh, decent. It was taken from a public site so it didn't really feel like it suited me considering I didn't make it and the spacing was just too far apart.
The new design
The new website now looks like this with a new and updated color theme and a better layout it's something I can be proud of
This in addition to dynamic routings, custom CSS, and sexy button animations
and not to mention the improved loading time from 2.5 seconds to 1.9 in the 99th percentile
Now the actual breakdown of the code. To make this project you need
- A Vercel account connected to GitHub (used for hosting the site)
- A custom domain (optional)
- A code editor
The homepage is pretty simple. You just take the default index.js file next.js gives you and modify the code a tiny bit
Now the code here isn't really that complicated, the only thing you really need to pay attention to is the styles and Link.
Styles is a function I made to import CSS code without having to make them global, instead of making them act as variables. As you can see in the example above, instead of using a bunch of "btn-06 flex" etc... I made it neatly into variables which you can find under the styles section of the code (we'll be going through that later)
As for why I use
Instead of <a> is because of the way react routing works. I don't really remember what was wrong with it, but I remember it throwing errors in the console which could be troublesome for the end-user. Note: <Link /> is only used when routing to a different page on the same site e.g contacts if you wanna route to something outside of the website e.g GitHub use <a>
When it comes to the CSS of this site I truly don't have a full understanding of how I did it myself let's start with the global CSS (applies to the entire website)
As you see this CSS code is nothing fancy, just sets the font and colors. The font used is Montserrat from google. But yeah nothing fancy, the only notable thing is the font and the background color
Now the second CSS file is a little big bigger and more comprehensive. It mainly focuses on the fine details and positioning of things
Now, this code once again imports the font but the real "special" thing about it is the container. The container is what aligns everything I want it to. It sets the minimum height of things. Makes sure everything is in a flexbox and even sets it up as a column. It also makes everything centered.
Now, this code makes things a bit spicier. It makes it so that all items are now flowing downwards as you can see here
Meaning that item 1 goes above item 2 and so on.
The text itself there (purple bit) is made by simply changing the color to purple using another CSS class you don't really need to see the code on that one.
Now comes the spicy part, the buttons. I spent most of my time working on those for the website since I wanted them to look nice and cool. The way the button works is that they're slightly displaced using a box shadow which creates that "layer" effect almost. Then when you hover over it the buttons switch to fill in
Now here's the bit you've been waiting for the CSS code
The thing you need to look at is the box-shadow that does the animation. Rest is just random stuff to style it the way I like it using padding and such. The colors were set using variables so instead of changing 5 different parts of the code, you can just change 2. It's mostly a quality of life thing.
There's only one thing I haven't gone through and that's the paragraphs you can see on pages describing my projects. It's just a simple paragraph with some max-width and text alignment
This results in the following
Looking pretty decent I know right.
Everything I've gone through so far should be enough for you to get started yourself with making your own website. Good luck have fun and remember: Google is your friend