change background

anviik · Jul 28, 2024 · 4de2b07 · 4de2b07
1 parent 827fae7
commit 4de2b07
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 63 deletions.
diff --git a/flower.jpeg b/flower.jpeg
diff --git a/index.html b/index.html
@@ -24,7 +24,7 @@
     <!-- header design -->
     <header class="header">
         <nav class="navbar">
-            <a href="#home">HOME</a>
+            <a href="#home" class="active">HOME</a>
             <a href="#about">ABOUT</a>
             <a href="#resume">RESUME</a>
             <a href="#portfolio">PORTFOLIO</a>
@@ -57,12 +57,11 @@ <h3>Anvi Kudaraya</h3>
     <section class="about" id="about">
         <div class="aboutmeClass">
         <h2 class="heading"> About me</h2>
-        <p class="aboutMe">Hi my name is Anvi Kudaraya and I am a first year at the 
-            University of California, Merced. I am majoring in Computer Science + Engineering 
-            and am looking for any open oppurtunities for internships. I enjoy programming especially
-            the desing aspect of it as I get to work with new aesthetics. I also like to 
-            explore new coding lanaguges and finding ways algorithms can solve problems around us. 
-
+        <p class="aboutMe">Hi my name is Anvi Kudaraya and I am a second year (junior standing) at the 
+            University of California, Merced. I am majoring in Computer Science + Engineering and minoring
+            in Cognitive Science. My interest in cognitive science has grown throughout the past year as I 
+            learned more about its intersection with technology, especially with AI/ML, as well as UI/UX design.  
+            I also like to explore new coding lanaguges and finding ways algorithms can solve problems around us. 
             Outside of coding, I enjoy going out with my friends, doing art, trying new things 
             (especially food) and meeting new people. I hope to find internships based on my 
             interest of software engineering/product designing and ui/ux desingning
@@ -168,11 +167,39 @@ <h3 class="heading">Projects</h3>
             </div>
         </div>
 
-    <!-- </section>
-
-    <section class="contact" id="contact">
-        
-    </section> -->
+        <section class="contact" id="contact">
+            <div class="feedback-form">
+              <form action="https://formspree.io/f/mbjnkkgb" method="POST">
+                <label for="name">Name:</label>
+                <input type="text" id="name" name="name" required>
+                <label for="email">Email:</label>
+                <input type="email" id="email" name="_replyto" required>
+                <label for="message">Questions or comments:</label>
+                <textarea id="message" name="message" required></textarea>
+                <button type="submit">Send</button>
+              </form>
+            </div>
+          </section>
+
+          <script src="script.js"></script>
+          <!-- <script>
+            document.addEventListener('DOMContentLoaded', function() {
+              var scrollLinks = document.querySelectorAll('.nav-link');
+              scrollLinks.forEach(function(link) {
+                link.addEventListener('click', function(event) {
+                  event.preventDefault();
+                  var targetId = this.getAttribute('href').substring(1);
+                  var targetSection = document.getElementById(targetId);
+                  if (targetSection) {
+                    targetSection.scrollIntoView({
+                      behavior: 'smooth',
+                      block: 'start'
+                    });
+                  }
+                });
+              });
+            });
+          </script> -->
 
 
     <!-- services -->

diff --git a/leaf.png b/leaf.png
diff --git a/leafback.png b/leafback.png
diff --git a/script.js b/script.js
@@ -1,30 +1,23 @@
-document.addEventListener('DOMContentLoaded', function () {
-    var timeline = document.querySelector('.timeline');
-    var timelinePosition = timeline.offsetTop - window.innerHeight + 100; // Adjust this value if needed
-    var animationTriggered = false;
+let navLinks = document.querySelectorAll('header nav a');
 
-    function checkTimelineVisibility() {
-        if (window.scrollY > timelinePosition && !animationTriggered) {
-            timeline.classList.add('animate-timeline');
-            animationTriggered = true;
-            window.removeEventListener('scroll', checkTimelineVisibility);
-        }
-    }
-
-    window.addEventListener('scroll', checkTimelineVisibility);
-    checkTimelineVisibility(); // Check visibility on page load
-});
+window.addEventListener('scroll', () => {
+    let scrollPosition = window.scrollY;
 
+    document.querySelectorAll('section').forEach(sec => {
+        let top = sec.offsetTop;
+        let height = sec.offsetHeight;
+        let id = sec.getAttribute('id');
 
+        if (scrollPosition >= top && scrollPosition < top + height) {
+            navLinks.forEach(link => {
+                link.classList.remove('active');
+            });
+            console.log("id", id)
+            document.querySelector('header nav a[href="#' + id + '"]').classList.add('active');
+        } else {
+            document.querySelector('header nav a[href="#' + id + '"]').classList.remove('active');
+        }
+    });
+});
 
-// window.onscroll = () => {
-// let header = document.querySelector('.header');
-// header.classList.toggle('sticky', window.scrollY > 100);
-// };
-
-// let darkModeIcon = document.querySelector('#darkMode-icon');
 
-// darkModeIcon.oneclick = () => { 
-//     darkModeIcon.classList.toggle('bx-sun');
-//     document.body.classList.toggle('dark-mode');
-// } 
diff --git a/styles.css b/styles.css
@@ -11,12 +11,12 @@ html, body {
     border: none;
     outline: none;
     scroll-behavior: smooth;
-    font-family: Arial, sans-serif; 
-    /* font-weight: 600;  */
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 
     font-size: 15px;
     color:rgb(0, 0, 0)
 }
-
+
+
 /* Anvi Kudaraya */
 .home-content h3{ 
     font-size: 75px;;
@@ -41,7 +41,6 @@ body {
     color: #b48a8a;
 }
 
-/* nav bar */
 .header {
     display: flex;
     justify-content: center; 
@@ -53,13 +52,12 @@ body {
     left: 0;
     width: 100%;
     z-index: 999;
+    transition: background-color 0.3s; /* Add transition for smooth color change */
 }
 
-/* .navbar {
-    display: flex;
-    justify-content: center; 
-    align-items: center; 
-} */
+.header.scrolled {
+    background-color: black; /* Change the background color when scrolled */
+}
 
 .navbar a {
     text-decoration: none;
@@ -74,15 +72,10 @@ body {
     font-weight: 700;  */
 }
 
-.navbar a:hover {
-    color: white;
-}
-
-
-.navbar a:hover {
-    color: white;
-}
-
+.navbar a:hover, 
+.navbar a.active {
+    color: #ffffff;
+} 
 
 #darkMode-icon {
     color: #ffffff;
@@ -100,11 +93,6 @@ body {
     background: transparent;
 }
 
-.header.sticky .navbar a::before{
-    background: #c148df;
-    opacity: 1;
-
-}
 
 #darkMode-icon {
     font-size: 2.4rem;
@@ -126,7 +114,7 @@ section {
 .home {
     display: flex;
     align-items: center;
-    background-image: url('city.jpeg');
+    background-image: url('flower.jpeg');
   background-size: cover; 
   background-repeat: no-repeat; 
   position: relative;
@@ -410,14 +398,18 @@ section {
 }
 
 .text-box h2 {
-    font-weight: 300;
+    font-weight: 800;
     color: black;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    font-size: larger;
+
 }
 
 .text-box small {
     display: inline-block;
     margin-bottom: 15px;
     color: black;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 }
 
 .left-container-arrow {
@@ -461,7 +453,59 @@ section {
     animation-delay: 3s;
 }
 
-
+/* contact  */
+.contact {
+    /* background-color: lavenderblush; */
+    background-size: cover; 
+    background-repeat: no-repeat; 
+
+}
+.feedback-form  {
+    width: 300%; 
+    background: #f5ebeb;
+    padding: 20px;
+    border-radius: 20px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+
+}
+.feedback-form label {
+    display: block;
+    margin-bottom: 5px;
+    width: 94%; /* Matches the input width */
+    margin-left: auto;
+    margin-right: auto;
+}
+.feedback-form input[type="text"],
+.feedback-form input[type="email"],
+.feedback-form textarea {
+    width: 90%; 
+    padding: 10px;
+    margin-bottom: 20px; 
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    display: block; 
+    margin-left: auto; 
+    margin-right: auto;
+}
+.feedback-form textarea {
+    height: 150px;
+    resize: vertical;
+}
+.feedback-form button {
+    padding: 10px 20px;
+    background-color: #333;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    align-self: center; /* Centers the button within the flex container */
+}
+.feedback-form button:hover {
+    background-color: #555;
+}
 
 /* 
 .services{