Animated Portfolio With Dark Mode Toggle || HTML, CSS and JavaScript - ramCoder

byramCoder -
0

 Hello coders, in this article you will get to know how to create an awesome animated portfolio landing page with dark mode toggle using just HTML, CSS and a little bit of JavaScript. This is the written version of the video uploaded in the ramCoder YouTube Channel. Creating this awesome animated portfolio homepage is not a big headache, anyone can understand the source code easily. I have uploaded the source code file in the GitHub repository with the download link at the end of this article. Also, I have embedded the code in the code box in this article also.

I have used fonts from Google Fonts, and just vanilla CSS and JavaScript. The data of the theme either it's dark or light is added to the local storage of the user enabling, to set the theme previously selected even after refreshing the page.


In order to create this awesome animated portfolio homepage, you will need to follow couple of steps mentioned below.

Step 1:

First of all, you will need to create an index.html file in the parent directory and add the following source code and save changes to take the effect.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Animated Portfolio Homepage With DarkMode Toggle - ramCoder</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="boxes">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <nav>
      <div class="logo">John</div>
      <div class="links">
        <ul>
          <li class="home-link">Home</li>
          <li>About</li>
          <li>Services</li>
          <li>Contact</li>
        </ul>
        <input type="checkbox" name="" id="themeswitch" class="checkbox" />
      </div>
    </nav>
    <section class="home">
      <div class="content">
        <h2>Explore the programming beauty!</h2>
        <p>with <span>John Doe</span></p>
        <button class="contact-btn">Contact</button>
      </div>
      <div class="image"><img src="./profile.png" alt="" /></div>
    </section>
    <script src="./script.js"></script>
  </body>
</html>{codeBox}

Step 2:

After finishing up with index.html, you will need to create style.css in the same directory and paste the following source code in order to take the changes. If you want the separate article for the dark mode toggle or the animated hover on the button, you can even get those in our blog.

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}
:root {
  --bg-color: rgb(226, 226, 226);
  --text-color: rgb(36, 34, 34);
  --highlighted-color: rgb(240, 68, 32);
}
[data-theme="dark"] {
  --bg-color: rgb(36, 34, 34);
  --text-color: rgb(226, 226, 226);
  --highlighted-color: rgb(240, 68, 31);
}
body {
  height: 100vh;
  width: 100vw;
  background-color: var(--bg-color);
}
/* navbar styles */
nav {
  height: 60px;
  width: 100vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.logo {
  font-size: 2rem;
  color: var(--highlighted-color);
  font-weight: bolder;
  cursor: pointer;
}
.home-link {
  color: var(--highlighted-color);
  position: relative;
}
.links {
  width: 40%;
  display: flex;
  justify-content: space-around;
  font-size: 1.2rem;
  color: var(--text-color);
}
.links ul {
  display: flex;
  list-style: none;
  width: 80%;
  justify-content: space-around;
}
.links ul li {
  position: relative;
  cursor: pointer;
}
.links ul li:hover {
  color: var(--highlighted-color);
}
.links ul li::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 2px;
  height: 2px;
  width: 0%;
  background-color: var(--highlighted-color);
  transition: 0.3s ease;
}
.links ul li:hover::after {
  width: 70%;
}
.checkbox {
  height: 30px;
  width: 70px;
  appearance: none;
  background-color: var(--text-color);
  border-radius: 50px;
  position: relative;
  transition: 0.4s ease;
  cursor: pointer;
}
.checkbox::before {
  content: "";
  width: 30px;
  height: 30px;
  background-color: var(--highlighted-color);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(1.1);
  transition: 0.3s ease;
}
.checkbox:checked::before {
  left: calc(70px - 30px);
}
/* hero section  */
.home {
  height: calc(100vh - 60px);
  width: 100vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.content {
  color: var(--text-color);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.content h2 {
  font-size: 3rem;
  margin-bottom: 40px;
  position: relative;
}
.content h2::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 2px;
  height: 2px;
  width: 40%;
  background-color: var(--highlighted-color);
}
.content p {
  font-size: 1.5rem;
  margin-bottom: 40px;
}
.content p span {
  color: var(--highlighted-color);
  font-size: 2rem;
}
.contact-btn {
  height: 40px;
  width: 100px;
  outline: none;
  border: 2px solid var(--highlighted-color);
  background-color: transparent;
  color: var(--text-color);
  font-size: 1.1rem;
  border-radius: 10px;
  box-shadow: inset 0 0 0 0 var(--highlighted-color);
  transition: 0.3s ease;
  cursor: pointer;
}
.contact-btn:hover {
  box-shadow: inset 100px 0 0 0 var(--highlighted-color);
  color: rgb(226, 226, 226);
}
.image img {
  width: 500px;
  height: auto;
  background-color: transparent;
  position: relative;
  border-radius: 50%;
  box-shadow: inset 500px 0 0 0 var(--highlighted-color);
  transition: all 0.3s ease;
  cursor: pointer;
}
.image img:hover {
  transform: scale(1.01);
}
/* background box animation  */
.boxes div {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: transparent;
  border: 3px solid var(--text-color);
  border-radius: 5px;
}
.boxes div:nth-child(1) {
  top: 70%;
  left: 10%;
  animation: box-animate 10s infinite;
}
.boxes div:nth-child(2) {
  top: 20%;
  left: 80%;
  animation: box-animate 9s infinite;
}
.boxes div:nth-child(3) {
  top: 50%;
  left: 50%;
  animation: box-animate 6s infinite;
}
.boxes div:nth-child(4) {
  top: 80%;
  left: 60%;
  animation: box-animate 15s infinite;
}
.boxes div:nth-child(5) {
  top: 30%;
  left: 30%;
  animation: box-animate 9s infinite;
}
.boxes div:nth-child(6) {
  top: 90%;
  left: 90%;
  animation: box-animate 12s infinite;
}
.boxes div:nth-child(7) {
  top: 80%;
  left: 30%;
  animation: box-animate 2s infinite;
}
.boxes div:nth-child(8) {
  top: 40%;
  left: 20%;
  animation: box-animate 2s infinite;
}
.boxes div:nth-child(9) {
  top: 50%;
  left: 80%;
  animation: box-animate 2s infinite;
}

@keyframes box-animate {
  0% {
    transform: scale(0) translateY(0) rotate(0);
    opacity: 1;
  }
  100% {
    transform: scale(1.3) translateY(-90px) rotate(360deg);
    opacity: 0;
  }
}{codeBox}

Step 3:

After completing with the style.css, you will need to create an script.js file and add the following code in the file and save changes to take the effect.

var themeSwitcher = document.querySelector(".checkbox");
var currentTheme = localStorage.getItem("theme");

if (currentTheme) {
  document.documentElement.setAttribute("data-theme", currentTheme);
  if (currentTheme === "dark") {
    themeSwitcher.checked = true;
  }
}

function switchTheme(e) {
  if (e.target.checked) {
    document.documentElement.setAttribute("data-theme", "dark");
    localStorage.setItem("theme", "dark");
  } else {
    document.documentElement.setAttribute("data-theme", "light");
    localStorage.setItem("theme", "light");
  }
}

themeSwitcher.addEventListener("change", switchTheme, false);{codeBox}

So, this is it, congratulations you just created an amazing website homepage design within 3 minutes.

Tags:

Post a Comment

Previous Post Next Post