How I made Daddie.dev

How I made Daddie.dev

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

CSS 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

  • Next.js
  • GitHub
  • A Vercel account connected to GitHub (used for hosting the site)
  • A custom domain (optional)
  • A code editor

The Homepage

The homepage is pretty simple. You just take the default index.js file next.js gives you and modify the code a tiny bit

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import Link from 'next/link'


export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Hi I'm Daddie0</title>
        <meta name="description" content="A retard with mild coding skills" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <div className={styles.buttoncontainer}>
          <h1 className={styles.intro}>Hi, I'm <name className={styles.name}>Daddie0</name>!</h1>
        </div>

        <div className={styles.nav}>
          <a href="https://github.com/GoByeBye" target="_blank" rel="noopener noreferrer"><button className={styles.main_button}>GitHub</button></a>
          <Link href="/portfolio" passHref><button className={styles.main_button}>Portfolio</button></Link>
          <Link href="/contact" passHref><button className={styles.main_button}>Contact</button></Link>
          <a href="https://blog.daddie.dev/" target="_self" rel="noopener noreferrer"><button className={styles.main_button}>Blog</button></a>
          
        </div>
      </main>
    </div>
  )
}
pages/index.js

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

<Link />

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>


The CSS

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)

/* This does the big font thingy idk men */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;600&display=swap');


html,
body {
  color: #fff;
  background: #0E0E10;
  padding: 0;
  margin: 0;
  font: 300 1em 'Montserrat', sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}
styles/global.css

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

/* This does the big font thingy idk men */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;600&display=swap');


.container {
  min-height: 100vh;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
styles/Home.module.css

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.

.main {
  padding: 5rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
styles/Home.module.css

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.

The Buttons

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

.main_button {
  align-items: center;
  max-width: 650px;
  --color: #FFD700;
  --hover: #FFD700;
  font: 1em 'Montserrat', sans-serif;
  font-weight: 600;
  color: var(--color);
  transition: 0.3s;

  background: none;
  border: 2px solid;
  font: inherit;
  line-height: 1;
  margin: 0.5em;
  padding: 1em 2em;
}
.main_button {
  box-shadow: 0.3em 0.3em 0 0 var(--color), inset 0.3em 0.3em 0 0 var(--color);
}
.main_button:hover, .main_button:focus {
  border-color: var(--hover);
  color: #0E0E10;
  box-shadow: 0 0 0 0 var(--hover), inset 6em 3.5em 0 0 var(--hover);
}
styles/Home.module.css

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

.paragraph {
  font: 1em 'Montserrat', sans-serif;
  max-width: 650px;
  padding-bottom: 1vh;
  font-weight: 600;
  text-align: center
}
styles/Home.module.css

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

Show Comments