Update index.html

index.html

@@ -43,42 +43,42 @@
 
 
     <!-- Hero Section -->
-    <section class="bg-image">
+    <section class="bg-image" data-aos="fade-up">
         <div class="hero-text">
             <div class="container">
                 <div class="row">
                     <!-- Profile Picture Container (Right Side) -->
-                    <div class="col-md-6 order-md-2 text-center d-none d-md-block">
+                    <div class="col-md-6 order-md-2 text-center d-none d-md-block" data-aos="zoom-in">
                         <img src="jaya.jpg" alt="Profile Picture" class="profile-pic">
                     </div>
-                    <div class="col-md-6 order-md-2 text-center d-md-none">
+                    <div class="col-md-6 order-md-2 text-center d-md-none" data-aos="zoom-in">
                         <img src="jaya.jpg" alt="Profile Picture" class="profile-pic1">
                     </div>
                     <!-- Name & Description (Left Side) -->
-                    <div class="col-md-6 order-md-1">
+                    <div class="col-md-6 order-md-1" data-aos="fade-right">
                         <div style="margin-top: 68px;" class="d-none d-md-block">
-                        <h1>D Jayaswaroop</h1>
-                        <p>An aspiring B.Tech student deeply engaged in tech exploration, adept in coding and software development.
-                             I blend creativity with technical skills to drive innovative solutions and eagerly embrace continuous growth in the ever-evolving tech sphere.</p>
+                            <h1>D Jayaswaroop</h1>
+                            <p>An aspiring B.Tech student deeply engaged in tech exploration, adept in coding and software development.
+                                I blend creativity with technical skills to drive innovative solutions and eagerly embrace continuous growth in the ever-evolving tech sphere.</p>
                         </div>
-                        <div class="d-md-none mt-3">
+                        <div class="d-md-none mt-3" data-aos="fade-left">
                             <h1>D Jayaswaroop</h1>
                             <p>An aspiring B.Tech student deeply engaged in tech exploration, adept in coding and software development.
-                                 I blend creativity with technical skills to drive innovative solutions and eagerly embrace continuous growth in the ever-evolving tech sphere.</p>
-                            </div>
+                                I blend creativity with technical skills to drive innovative solutions and eagerly embrace continuous growth in the ever-evolving tech sphere.</p>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
     </section>
-
+    
 
     <!-- About Section -->
 
-    <section id="about" class="bg-light py-5">
+    <section id="about" class="bg-light py-5" data-aos="fade-up">
         <div class="container">
             <div class="row">
-                <div class="col-lg-6">
+                <div class="col-lg-6" data-aos="fade-right">
                     <div class="card p-4 mb-4">
                         <h2 class="card-title">About Me</h2>
                         <div class="card-body">
@@ -92,7 +92,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-lg-6">
+                <div class="col-lg-6" data-aos="fade-left">
                     <div class="card p-4">
                         <h2 class="card-title">My Approach</h2>
                         <div class="card-body">
@@ -110,14 +110,16 @@
     </section>
     
     
+    
 
     <!-- Projects Section -->
-    <section id="projects" class="py-5">
+
+    <section id="projects" class="py-5" data-aos="fade-up">
         <div class="container">
             <h2 class="text-center mb-5">Featured Projects</h2>
             <div class="row row-cols-1 row-cols-md-5 g-4">
                 <!-- Sample Project Cards -->
-                <div class="col">
+                <div class="col" data-aos="zoom-in">
                     <div class="card mb-4">
                         <img src="https://codingartistweb.com/wp-content/uploads/2021/02/To-Do-list-small-01-1024x576.png" class="card-img-top project" alt="Project 1">
                         <div class="card-body">
@@ -127,9 +129,9 @@
                         </div>
                     </div>
                 </div>
-                <div class="col">
+                <div class="col" data-aos="zoom-in">
                     <div class="card mb-4">
-                        <img src="https://www.knoplaw.newcastle.sch.uk/i/curric/music2.jpg" class="card-img-top project" alt="Project 1">
+                        <img src="https://www.knoplaw.newcastle.sch.uk/i/curric/music2.jpg" class="card-img-top project" alt="Project 2">
                         <div class="card-body">
                             <h5 class="card-title">Music Webpage</h5>
                             <p class="card-text">Explore Most Popular and Trending Songs</p>
@@ -137,20 +139,21 @@
                         </div>
                     </div>
                 </div>
-                
-                <div class="col">
+
+                <div class="col" data-aos="zoom-in">
                     <div class="card mb-4">
-                        <img src="https://www.itsitio.com/wp-content/uploads/2022/01/portada_Chatbots-780x470.png" class="card-img-top project" alt="Project 1">
+                        <img src="https://www.itsitio.com/wp-content/uploads/2022/01/portada_Chatbots-780x470.png" class="card-img-top project" alt="Project 2">
                         <div class="card-body">
                             <h5 class="card-title">Chatbot</h5>
                             <p class="card-text">Interactive AI: Your Friendly Chat Buddy</p>
-                            <a href="https://jayaswaroop-mygenaispeech.hf.space" class="btn btn-primary">View Project</a>
+                            <a href="https://jayaswaroop-mygenaispeech.static.hf.space" class="btn btn-primary">View Project</a>
                         </div>
                     </div>
                 </div>
-                <div class="col">
+
+                <div class="col" data-aos="zoom-in">
                     <div class="card mb-4">
-                        <img src="https://codingartistweb.com/wp-content/uploads/2023/05/Number-Guessing-Game-01.png" class="card-img-top project" alt="Project 1">
+                        <img src="https://codingartistweb.com/wp-content/uploads/2023/05/Number-Guessing-Game-01.png" class="card-img-top project" alt="Project 2">
                         <div class="card-body">
                             <h5 class="card-title">Cow & Bull</h5>
                             <p class="card-text">A Logical number guessing game</p>
@@ -158,9 +161,10 @@
                         </div>
                     </div>
                 </div>
-                <div class="col">
+
+                <div class="col" data-aos="zoom-in">
                     <div class="card mb-4">
-                        <img src="https://techcresendo.com/wp-content/uploads/2016/02/Wikipedia.jpg" class="card-img-top project" alt="Project 1">
+                        <img src="https://techcresendo.com/wp-content/uploads/2016/02/Wikipedia.jpg" class="card-img-top project" alt="Project 2">
                         <div class="card-body">
                             <h5 class="card-title">Wikipedia Search</h5>
                             <p class="card-text">Effortlessly explore knowledge with Wikipedia Search.</p>
@@ -168,18 +172,21 @@
                         </div>
                     </div>
                 </div>
-                <!-- Add more project cards here -->
+                
+
+
             </div>
         </div>
     </section>
 
 
     <!-- Skills Section -->
-    <section id="skills" class="bg-light py-5">
+
+    <section id="skills" class="bg-light py-5" data-aos="fade-up">
         <div class="container">
             <h2 class="text-center mb-5">Skills</h2>
             <div class="row row-cols-1 row-cols-md-3 g-4">
-                <div class="col">
+                <div class="col" data-aos="zoom-in">
                     <div class="card mb-4">
                         <div class="card-body">
                             <h5 class="card-title">HTML</h5>
@@ -187,7 +194,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="col">
+                <div class="col" data-aos="zoom-in">
                     <div class="card mb-4">
                         <div class="card-body">
                             <h5 class="card-title">CSS</h5>
@@ -195,7 +202,17 @@
                         </div>
                     </div>
                 </div>
-                <div class="col">
+                <!-- Add similar structures for other skills with the same data-aos="zoom-in" attribute -->
+                <div class="col" data-aos="zoom-in">
+                    <div class="card mb-4">
+                        <div class="card-body">
+                            <h5 class="card-title">Bootstrap</h5>
+                            <p class="card-text">Experience in utilizing Bootstrap for responsive web development.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col" data-aos="zoom-in">
                     <div class="card mb-4">
                         <div class="card-body">
                             <h5 class="card-title">JavaScript</h5>
@@ -203,15 +220,20 @@
                         </div>
                     </div>
                 </div>
-                <div class="col">
+
+
+
+                <div class="col" data-aos="zoom-in">
                     <div class="card mb-4">
                         <div class="card-body">
-                            <h5 class="card-title">Bootstrap</h5>
-                            <p class="card-text">Experience in utilizing Bootstrap for responsive web development.</p>
+                            <h5 class="card-title">Python</h5>
+                            <p class="card-text">Proficient in Python programming language for various applications.</p>
                         </div>
                     </div>
                 </div>
-                <div class="col">
+
+
+                <div class="col" data-aos="zoom-in">
                     <div class="card mb-4">
                         <div class="card-body">
                             <h5 class="card-title">C</h5>
@@ -219,7 +241,9 @@
                         </div>
                     </div>
                 </div>
-                <div class="col">
+
+
+                <div class="col" data-aos="zoom-in">
                     <div class="card mb-4">
                         <div class="card-body">
                             <h5 class="card-title">C++</h5>
@@ -227,15 +251,9 @@
                         </div>
                     </div>
                 </div>
-                <div class="col">
-                    <div class="card mb-4">
-                        <div class="card-body">
-                            <h5 class="card-title">Python</h5>
-                            <p class="card-text">Proficient in Python programming language for various applications.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col">
+
+
+                <div class="col" data-aos="zoom-in">
                     <div class="card mb-4">
                         <div class="card-body">
                             <h5 class="card-title">XPM 4.0</h5>
@@ -247,6 +265,7 @@
         </div>
     </section>
     
+    
 
     <!-- Education Section -->
    <section id="education" class="py-5">
@@ -340,5 +359,14 @@
 
 <!-- Bootstrap JS Bundle with Popper -->
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.js"></script>
+<script>
+    AOS.init({
+      duration: 800, // Duration of the animation
+      easing: 'ease', // Easing option
+      once: true // Only animate elements once
+    });
+  </script>  
 </body>
 </html>