finalized landing page with about section

4darsh-Dev · Apr 16, 2024 · eab7423 · eab7423
1 parent 23b2d22
commit eab7423
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 29 deletions.
diff --git a/index.html b/index.html
@@ -125,19 +125,19 @@ <h3>And I'm a <span class="dynamic-txt"></span></h3>
                 </div>
                 <div class="s-box-2">
                     <div class="img-box">
-                        <img class="prof-img" src="/img/web-dev-2.gif"
+                        <img class="prof-img" src="/img/home-gif.gif"
                             alt="Adarsh Maurya - Web Developer and Programmer">
                     </div>
                 </div>
             </div>
             <section class="about" id="about">
                 <div class="about-img">
-                    <img src="/img/adarsh-maurya-new-final.jpg" alt="Adarsh Maurya - Web Developer and Programmer">
+                    <img src="/img/adarsh-maurya-new-final-main.jpg" alt="Adarsh Maurya - Web Developer and Programmer">
 
                 </div>
                 <div class="about-text">
                     <h2 class="font-head">About <span>Me</span></h2>
-                    <h4>Web Developer!</h4>
+                    <h4>Web Developer</h4>
                     <p class="about-para">
                         Welcome to the world of innovation and collaboration! <br>
                         I'm Adarsh Maurya, a passionate web developer, programmer, and blogger with
@@ -477,7 +477,7 @@ <h4>Let's work Together</h4>
     </main>
     <footer>
         <div class="last-text main-bg-1">
-            <p class="font-ss">Developed with <i id="heart" class=' bx bxs-heart'></i> Love by Adarsh Maurya &copy; 2024
+            <p class="font-ss">Designed & Developed with <i id="heart" class=' bx bxs-heart'></i> Love by Adarsh Maurya &copy; 2024
             </p>
         </div>
     </footer>

diff --git a/script.js b/script.js
@@ -2,7 +2,7 @@ console.log("I am working! ");
 const author = "Adarsh Maurya!";
 console.log(`Developer ${author}`);
 var typed = new Typed(".dynamic-txt", {
-  strings: ["Web Developer!", "Programmer!", "Blogger!"],
+  strings: ["Web Developer!",  "Programmer!", "Entrepreneur!"],
   typeSpeed: 100,
   backSpeed: 100,
   backDelay: 1e3,
@@ -55,3 +55,28 @@ document.addEventListener("DOMContentLoaded", function() {
 });
 
 
+
+document.addEventListener("DOMContentLoaded", function() {
+  const image = document.querySelector(".about-img img");
+
+  // Function to add bouncing class to the image
+  function startBouncing() {
+    image.classList.add("bouncing");
+  }
+
+  // Function to remove bouncing class from the image
+  function stopBouncing() {
+    image.classList.remove("bouncing");
+  }
+
+  // Start bouncing animation when the page loads
+  startBouncing();
+
+  // Continuously toggle bouncing animation
+  setInterval(function() {
+    stopBouncing();
+    setTimeout(startBouncing, 50); // Wait for a short delay before starting again
+  }, 2000); // Adjust the delay based on the duration of the animation (2s in this case)
+});
+
+
diff --git a/style.css b/style.css
@@ -85,6 +85,7 @@ header {
 }
 .menu-list li a:hover {
   color: var(--blue);
+  border-bottom: 2px solid var(--blue);
 }
 body {
   background-color: var(--white);
@@ -112,12 +113,13 @@ body {
   /* background-color: blue; */
 }
 .s-box-1-ins {
-  padding: 12vw 6vw;
+  padding: 10vw 6vw;
   color: var(--black);
 }
 .s-box-1-ins h1 {
-  font-size: 34px;
-  font-family: sans-serif, monospace;
+  font-size: 42px;
+  font-family: var(--sans);
+  /* font-weight: 600; */
 }
 .s-box-1-ins h3 {
   font-size: 22px;
@@ -128,6 +130,7 @@ body {
 }
 .s-box-1-ins h3:nth-of-type(2) {
   margin-bottom: 20px;
+  font-family: var(--mono-head);
 }
 
 .s-box-2 {
@@ -136,16 +139,16 @@ body {
   /* background-color: greenyellow; */
 }
 .prof-img {
-  max-width: 30vw;
+  max-width: 40vw;
   width: 100%;
-  border-radius: 50%;
-  border: 8px solid var(--blue);
+  /* border-radius: 50%; */
+  /* border: 8px solid var(--blue); */
   height: auto;
   /* padding: 5vw; */
   position: relative;
-  top: 15vh;
+  top: 0vh;
   left: 8vw;
-  box-shadow: 0 0 12rem var(--blue);
+  /* box-shadow: 0 0 12rem var(--blue); */
 }
 
 .contact-links {
@@ -202,40 +205,49 @@ body {
   color: var(--black);
   padding-bottom: 10%;
 }
+
+
 .about-img img {
-  max-width: 20rem;
+  max-width: 22rem;
   width: 100%;
   height: auto;
   /* padding-bottom: 20%; */
   border-radius: 8px;
   position: relative;
   top: 2rem;
   left: 5rem;
-
+  
   border-radius: 50%;
-  border: 8px solid var(--blue);
-  box-shadow: 0 0 12rem var(--blue);
+  /* box-shadow: 0 0 12rem var(--blue); */
 }
 
 .font-head {
   font-family: Montserrat, "Franklin Gothic Medium", "Arial Narrow", Arial,
     sans-serif;
 }
+.font-head span{
+  color: var(--blue);
+
+}
 #about {
   margin-top: 70px;
 }
+.about-text{
+  padding-right: 55px;
 
+}
 .about-text h2 {
-  font-size: 52px;
+  font-size: 2.5rem;
 }
 .about-text h2 span {
   color: var(--blue);
 }
 .about-text h4 {
-  font-size: 29px;
+  font-size: 24px;
   font-weight: 600;
   line-height: 1.7;
   margin: 15px 0 30px;
+  font-family: var(--mono-head);
 }
 .about-text p {
   font-family: sans-serif, monospace;
@@ -258,9 +270,9 @@ body {
 
 .sub-title {
   text-align: center;
-  font-size: 52px;
+  font-size: 2.5rem;
   padding-bottom: 20px;
-  color: var(--white);
+  color: var(--black);
 }
 
 .sub-title span {
@@ -519,7 +531,7 @@ section {
 }
 
 .main-text h2 {
-  font-size: 52px;
+  font-size: 2.5rem;
   line-height: 1px;
   text-align: center;
   color: var(--black);
@@ -611,13 +623,13 @@ section {
   grid-template-columns: repeat(2, 1fr);
   align-items: center;
   gap: 3rem;
-  padding-left: 30px;
+  padding-left: 90px;
   margin-top: 130px;
   padding-bottom: 70px;
 }
 
 .contact-text h2 {
-  font-size: 52px;
+  font-size: 2.5rem;
   line-height: 1;
   text-align: center;
   color: var(--black);
@@ -769,13 +781,15 @@ form textarea {
 
 .projects {
   text-align: center;
-  padding: 50px 0;
+  padding: 90px;
 }
 
 .projects h2 {
   font-size: 2.5rem;
-  margin-bottom: 20px;
+  margin-bottom: 3rem;
   color: var(--black);
+  width: 100%;
+  text-align: center;
 }
 
 .projects p {
@@ -872,13 +886,16 @@ form textarea {
 /* cetifcations css style sheets */
 .certifications {
   text-align: center;
-  padding: 50px 0;
+  padding: 90px
 }
 
 .certifications h2 {
   font-size: 2.5rem;
-  margin-bottom: 20px;
-  color: #333;
+  margin-bottom: 3rem;
+  color: var(--black);
+  width: 100%;
+  text-align: center;
+
 }
 
 .certifications p {