scripts and last styles and project finished

css/style.css

@@ -60,6 +60,7 @@ section {
 #menu-icon {
  font-size: 3.6rem;
  color: var(--text-color);
+ display: none;
 }
 
 .home {
@@ -74,6 +75,20 @@ section {
  border: 1px solid var(--main-color);
  box-shadow: 0 0 5rem var(--main-color);
 }
+.home-img img {
+ animation: floatImage 2.5s ease-in-out infinite;
+}
+@keyframes floatImage {
+ 0% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-2.5rem);
+ }
+ 100% {
+ transform: translateY(0);
+ }
+}
 .home-content h3 {
  font-size: 3.2rem;
  font-weight: 700;
@@ -318,3 +333,110 @@ span {
 .footer-iconTop a:hover {
  box-shadow: 0 0 1rem var(--main-color);
 }
+.header.sticky {
+ border-bottom: 0.1rem solid rgba(0, 0, 0, 0.2);
+}
+
+/* Responsive Design */
+
+@media (max-width: 1200px) {
+ html {
+ font-size: 55%;
+ }
+}
+@media (max-width: 991px) {
+ .header {
+ padding: 2rem 3%;
+ }
+ section {
+ padding: 10rem 3% 2rem;
+ }
+ .services {
+ padding-bottom: 7rem;
+ }
+ .portfolio {
+ padding-bottom: 7rem;
+ }
+ .contact {
+ min-height: auto;
+ }
+ footer {
+ padding: 2rem 3%;
+ }
+}
+@media (max-width: 768px) {
+ #menu-icon {
+ display: block;
+ }
+ .navBar {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ padding: 1rem 3%;
+ background: var(--bg-color);
+ border-top: 0.1rem solid rgba(0, 0, 0, 0.2);
+ box-shadow: 0 0.5rem 1 rgba(0, 0, 0, 0.2);
+ display: none;
+ }
+ .navBar.active {
+ display: block;
+ }
+ .navBar a {
+ display: block;
+ font-size: 2rem;
+ margin: 3rem 0;
+ }
+ .home {
+ flex-direction: column;
+ }
+ .home-content h3 {
+ font-size: 2.6rem;
+ }
+ .home-content h1 {
+ font-size: 5rem;
+ }
+ .home-img img,
+ .about-img img {
+ width: 50vw;
+ margin-top: 4rem;
+ }
+ .about {
+ flex-direction: column-reverse;
+ }
+ .services h2 {
+ margin-bottom: 3rem;
+ }
+ .portfolio h2 {
+ margin-bottom: 3rem;
+ }
+ .portfolio-container {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+@media (max-width: 617px) {
+ .portfolio-container {
+ grid-template-columns: 1fr;
+ }
+}
+@media (max-width: 450px) {
+ html {
+ font-size: 50%;
+ }
+ .contact form .input-box input {
+ width: 100%;
+ }
+}
+@media (max-width: 365px) {
+ .home-img img,
+ .about-img img {
+ width: 90vw;
+ }
+ .footer {
+ flex-direction: column-reverse;
+ }
+ .footer p {
+ text-align: center;
+ margin-top: 2rem;
+ }
+}

index.html

@@ -34,7 +34,7 @@
  <div class="home-content">
  <h3>Hello, Its Me</h3>
  <h1>Saleh</h1>
- <h3>And I'm a <span>Front Developer</span></h3>
+ <h3>And I'm <span class="multiple-text"></span></h3>
  <p>Athlete elementary Teacher who loves Coding...</p>
  <div class="social-media">
  <a href="#"><i class="bx bxl-telegram"></i></a>
@@ -46,14 +46,14 @@ <h3>And I'm a <span>Front Developer</span></h3>
  </div>
 
  <div class="home-img">
- <img src="images/IMG_0238.JPG" alt="home-img" />
+ <img src="images/me1.png" alt="home-img" />
  </div>
  </section>
 
  <!-- About Section Design -->
  <section class="about" id="about">
  <div class="about-img">
- <img src="images/sadasdsadasd.jpg" alt="about" />
+ <img src="images/me2.png" alt="about" />
  </div>
 
  <div class="about-content">
@@ -207,6 +207,9 @@ <h2 class="heading">Contact <span>Me!</span></h2>
  </div>
  </footer>
  <!-- Js -->
+ <script src="https://unpkg.com/scrollreveal"></script>
+ <script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
+
  <script src="./js/app.js"></script>
  </body>
 </html>

js/app.js

@@ -0,0 +1,57 @@
+const $ = document;
+let sections = $.querySelectorAll("section");
+let navLinks = $.querySelectorAll("header nav a");
+let header = $.querySelector("header");
+let menuIcon = $.querySelector("#menu-icon");
+let navBar = $.querySelector(".navBar");
+window.addEventListener("scroll", () => {
+ sections.forEach((section) => {
+ let top = window.scrollY;
+ let offset = section.offsetTop - 150;
+ let height = section.offsetHeight;
+ let id = section.getAttribute("id");
+
+ if (top >= offset && top < offset + height) {
+ navLinks.forEach((link) => {
+ link.classList.remove("active");
+ $.querySelector("header nav a[href*=" + id + " ]").classList.add(
+ "active"
+ );
+ });
+ }
+ });
+ menuIcon.classList.remove("bx-x");
+ navBar.classList.remove("active");
+});
+
+header.classList.toggle("sticky", window.scrollY > 100);
+
+menuIcon.addEventListener("click", () => {
+ menuIcon.classList.toggle("bx-x");
+ navBar.classList.toggle("active");
+});
+
+ScrollReveal({
+ reset: true,
+ distance: "80px",
+ duration: 2000,
+ delay: 200,
+});
+
+ScrollReveal().reveal(".home-content, .heading", { origin: "top" });
+ScrollReveal().reveal(
+ ".home-img, .services-container, .portfolio-box, .contact form",
+ {
+ origin: "bottom",
+ }
+);
+ScrollReveal().reveal(".home-content h1, .about-img", { origin: "left" });
+ScrollReveal().reveal(".home-content p, .about-content", { origin: "right" });
+
+const typed = new Typed(".multiple-text", {
+ strings: ["Frontend Developer", "Teacher", "Athlete"],
+ typeSpeed: 100,
+ backSpeed: 100,
+ backDelay: 1000,
+ loop: true,
+});