Introduction

On January 1st last year I made my first website project to see how much I've grown with 1 week of web development. It didn't look pretty, but I knew I was making good progress! It's been a year, and after learning many skills, I felt like remaking it today to show how much I've grown. I went a bit lazy on the last three sections, but I still think it looks good! If you want to see how I made it scroll down for more.

Before

After!

Nav menu

The nav menu only took a minute or two to make. First, I made a nav element with paragraph elements as its children. Then with CSS, I gave it a display property of flex and gave the children a gap of 10%. Finally, I centered the children's elements width align-items: center and justify-content: center. I also gave the children a hover animation where they go bold.

HTML

<nav>
      <p>Home</p>
      <p>Cafe</p>
      <p>About</p>
      <p>Blog</p>
    </nav>

CSS

nav {
    display: flex;
    gap: 10%;
    align-items: center;
    justify-content: flex-end;
    background-color: #e9c46a;
}

/*Hover animation*/
nav > p:hover {
  font-weight: bold;
  cursor: pointer
}

Intro section

I centered the text using flex and I used the transform property to place the images at specific places with specific rotations. I also gave them a keyframes transition where their opacity goes from 0 to 1 (meaning 100%).

CSS

header {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9c46a;
    height: 50rem;
}

/*Sizing the images*/
header > img {
    width: 100px;
    position: absolute;
    z-index: 0;
    animation: reveal 1s;
}

/*Starting animation*/
@keyframes reveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/*Adding their locations*/
header > img:nth-child(6) 
    transform: translate(-400px, 200px) rotate(30deg);
}
 header > img:nth-child(7) {
    transform: translateY(-300px);
}
 header > img:nth-child(3) {
    transform: translate(400px, 200px) rotate(-30deg);
}
 header > img:nth-child(4) {
    transform: translate(-400px, -200px) rotate(-30deg);
}
 header > img:nth-child(5) {
    transform: translate(400px, -200px) rotate(30deg);
}

Info section

I gave the section flex with a flex-direction of column. Then I made a div under the heading that is a flex row with each div in it having a gap of 30px. I used icons from ion-icons for each statistic. Lastly, I centered the icon and the text in each of the divs to make sure they look nice.

CSS

/*Aligning the headers*/
info > div:nth-child(1) {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*Aligning each stat*/
.info > div:nth-child(2) {
    display: flex;
    align-items: center;
    gap: 30px;
}

/*Aligning the content in the stats*/
 .info > div:nth-child(2) > div {
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    text-align: center;
}

/*Sizing the icons*/
.info > div ion-icon {
    font-size: 40px;
}

Resturants section

To me, this is the best out of all of the sections. First I aligned all the content in the section by giving it a display of grid then setting place-items to center. Next I div grid with six images where grid-template-columns is set to repeat(3, 1fr) meaning there are 3 images on every vertical part of the div. I gave each of the images a class of hidden, and I'll tell why in the paragraph below.


Using JavaScript, I used the Intersection Observer API to make it so that if the observed element intersects the viewport, it'll have the class show, but if not, it won't have that class. I then made the hidden class the thing being observed. So what does this do? The hidden class makes it so an element has 0 opacity and is all the way to the left, but the show class makes it so an element is back to where it was and has full opacity. So now each observed hidden element that intersects the viewport will go back to normal, now if we give the hidden class a transition it'll make a nice transition animation that'll happen every time. for yourself!

CSS

/*Centering the content*/
.cafe {
    display: grid;
    place-items: center;
    background-color: #ffcdb2;
}

/*Sizing the images*/
.cafe > div > img {
   width: 200px;
   border-radius: 5px;
   cursor: pointer;
}

/*Image grid*/
.food-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/*Giving each image different transition times
(for fun)
.cafe > div > img:nth-child(1){
    transition: 600ms;
 }
.cafe > div > img:nth-child(2){
    transition: 600ms;
 }
.cafe > div > img:nth-child(3){
    transition: 640ms;
 }
.cafe > div > img:nth-child(4){
    transition: 680ms;
 }
.cafe > div > img:nth-child(5){
    transition: 700ms;
 }
.cafe > div > img:nth-child(6){
    transition: 740ms;
 }

JS

var hidden = document.querySelectorAll('.hidden');


const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("show");
      } else {
        entry.target.classList.remove("show");
      }
    });
  });

//to observe the hidden class
hidden.forEach((el) => observer.observe(el));

Music Playlist

The music section is just a music playlist that I made to study and code, even though sometimes I get distracted because of the nice music lol.

Conclusion

It's been a great year for my progress in web development, but this year I hope to go beyond that by learning computer science, backend development, and much more. I hope you can complete your goals this year too! So happy new Year!