added carosel and underlining current section

GeorgesCoding · Nov 27, 2024 · 2d3ff4c · 2d3ff4c
1 parent 67a2daa
commit 2d3ff4c
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 72 deletions.
diff --git a/index.html b/index.html
@@ -30,7 +30,7 @@
     <div id="navbar">
         <a class="logo" href="#top"> <img src=assets/favicon.ico>GeorgesCoding</a>
         <div class="right-header">
-            <a href="#about">About</a>
+            <a href="#overview">About</a>
             <a href="#experience">Work</a>
             <div id="dropdown">
                 <a href="#projects">Projects</a>
@@ -51,18 +51,21 @@
 
     <!--Introduction-->
     <div id="header">
-        <h1 id="typing"></h1>
+        <h1 id="typing" class="section"></h1>
         <h2>University of Waterloo | Electrical Engineering</h2>
+        <div id="marquee" class="wrapper section">
+            <div class="marquee"><span id="marqueeText"></span><span id="marqueeText2"></span></div>
+        </div>
         <div class="button"> <a href="#about"><button class="readmore">Read More</button></a>
             <a href="#contact"><button class="contactbutton">Contact</button></a>
         </div>
     </div>
-    <a id="about"></a>
+    <a id="overview"></a>
 
 
 
     <!--Overview-->
-    <div id="overview">
+    <div id="overview" class="section">
         <h3>About Me</h3>
         <div class="box">
             <p id="overviewText"></p>
@@ -72,7 +75,7 @@ <h3>About Me</h3>
 
 
     <!-- Work -->
-    <div id="experience">
+    <div id="experience" class="section">
 
         <div class="plangroup">
             <div class="left">
@@ -92,16 +95,15 @@ <h5>Date: Jan 2023 - Apr 2023</h5>
 
 
     <!-- Projects -->
-    <div id="projects">
+    <div id="projects" class="section">
 
         <h3>Projects</h3>
         <div class="grid">
 
             <div class="card" id="1">
                 <div class="front"><img src='/assets/pictures/projects-chess.png'>Chess App</div>
                 <div class="back" id="chessText">
-                    <div class="info"><a href="https://github.com/GeorgesCoding/Chess" target="_blank"
-                            class="fa fa-github"></a>
+                    <div class="info"><a href="https://github.com/GeorgesCoding/Chess" target="_blank" class="fa fa-github"></a>
                         <a href="/projects/chess"><button class="learnMore">Learn More</button></a>
                         <br>Python
                     </div>
@@ -111,8 +113,7 @@ <h3>Projects</h3>
             <div class="card" id="2">
                 <div class="front"><img src='/assets/pictures/projects-portfolio.png'>Portfolio Website</div>
                 <div class="back" id="portfolioText">
-                    <div class="info"><a href="https://github.com/GeorgesCoding/Portfolio" target="_blank"
-                            class="fa fa-github"></a>
+                    <div class="info"><a href="https://github.com/GeorgesCoding/Portfolio" target="_blank" class="fa fa-github"></a>
                         <a href="/projects/portfolio"><button class="learnMore">Learn More</button></a>
                         <br>HTML, CSS, JavaScript
                     </div>
@@ -122,8 +123,7 @@ <h3>Projects</h3>
             <div class="card" id="3">
                 <div class="front"><img src='/assets/pictures/projects-breathalyzer.jpg'>Breathalyzer</div>
                 <div class="back" id="breathalyzerText">
-                    <div class="info"><a href="https://github.com/GeorgesCoding/Breathalyzer" target="_blank"
-                            class="fa fa-github"></a>
+                    <div class="info"><a href="https://github.com/GeorgesCoding/Breathalyzer" target="_blank" class="fa fa-github"></a>
                         <a href="/projects/breathalyzer/index.html"><button class="learnMore">Learn
                                 More</button></a>
                         <br>C/C++, Arduino, STM32, AutoCAD
@@ -134,8 +134,7 @@ <h3>Projects</h3>
             <div class="card" id="4">
                 <div class="front"><img src='/assets/pictures/projects-blackjack.png'>Blackjack</div>
                 <div class="back" id="blackjackText">
-                    <div class="info"><a href="https://github.com/GeorgesCoding/Blackjack" target="_blank"
-                            class="fa fa-github"></a>
+                    <div class="info"><a href="https://github.com/GeorgesCoding/Blackjack" target="_blank" class="fa fa-github"></a>
                         <a href="/projects/blackjack/index.html"><button class="learnMore">Learn More</button></a>
                         <br>Java
                     </div>
@@ -145,8 +144,7 @@ <h3>Projects</h3>
             <div class="card" id="5">
                 <div class="front"><img src='/assets/pictures/projects-sensor.jpg'>pH-Sensor</div>
                 <div class="back" id="sensorText">
-                    <div class="info"><a href="https://github.com/GeorgesCoding/pH-Sensor" target="_blank"
-                            class="fa fa-github"></a>
+                    <div class="info"><a href="https://github.com/GeorgesCoding/pH-Sensor" target="_blank" class="fa fa-github"></a>
                         <a href="/projects/ph-sensor"><button class="learnMore">Learn More</button></a>
                         <br>C/C++, Arduino, STM32, AutoCAD
                     </div>
@@ -171,7 +169,7 @@ <h3>Projects</h3>
 
 
     <!-- Contact/Socials-->
-    <div id="contact">
+    <div id="contact" class="section">
         <h3>Contact</h3>
         <div class="grid">
 
@@ -180,17 +178,14 @@ <h4>Leave a Message</h4>
                 <form id="form">
 
                     <label for="name">Name:</label>
-                    <input id="name" type="name" name="name" placeholder="Your Name" autocomplete="on"
-                        aria-required="true"><br>
+                    <input id="name" type="name" name="name" placeholder="Your Name" autocomplete="on" aria-required="true"><br>
 
                     <label for="email">Email:</label>
-                    <input id="email" type="email" name="email" placeholder="Your Email" autocomplete="on"
-                        aria-required="true"><br>
+                    <input id="email" type="email" name="email" placeholder="Your Email" autocomplete="on" aria-required="true"><br>
 
                     <label for="message">Message:</label>
-                    <textarea id="message" name="message" placeholder="Your Message" rows="5"
-                        aria-required="true"></textarea>
-                    <div class="g-recaptcha" data-sitekey="6LfUxMQpAAAAANxEA_tNe3RvqT_d0iclalzDqmz8">
+                    <textarea id="message" name="message" placeholder="Your Message" rows="5" aria-required="true"></textarea>
+                    <div class="g-recaptcha" data-sitekey="6LfUxMQpAAAAANxEA_tNe3RvqT_d0iclalzDqmz8" data-size="compact">
 
                 </form>
             </div>
@@ -218,11 +213,9 @@ <h4>View My Resume</h4>
 
 
     <!--Copyright-->
-    <div class="copyright">
-        <p>Copyright ©
-            <script>document.write(new Date().getFullYear());</script> George Chen
-        </p>
-    </div>
+    <footer>
+        <p class="copyright">Copyright © George Chen 2024</p>
+    </footer>
 </body>
 
 </html>
diff --git a/src/data/home-text.json b/src/data/home-text.json
@@ -1,4 +1,5 @@
 {
     "overview": "Hey there! I’m George Chen, an Electrical Engineering student at the University of Waterloo, experienced with various programming languages and currently learning electrical hardware. I love challenging myself and broadening my knowledge of new technologies in building relevant projects to evaluate my understanding. Recently I delved into artificial intelligence by creating my chess engine and web development while designing a custom portfolio website, both completely new programming applications I self-taught myself. The next big project I wish to undertake will primarily focus on circuits and electrical systems, something I want to concentrate on as I progress further in my academic career. Some personal interests that are non-technology related are dragon & lion dance, classical piano, mechanical keyboards and camping, all of which I've been doing for over ten years.",
-    "plangroup": "My time at Plan Group began with Project ALICE, an initiative to help improve the productivity of CAD design by developing custom tools for designers. I developed 5 different optimization tools in C# for Revit design. Subsequently, I transitioned to help with quality inspection control for electrical floor plan layouts in Revit for Sick Kids Hospital. In total, I examined over 40 layouts across two buildings, aiding in a 70% reduction in completion time per layout. Lastly, I designed plumbing and electrical fixtures in Revit for TD Bank electrical floor plan layouts and helped fix faulty conduit placements."
+    "plangroup": "My time at Plan Group began with Project ALICE, an initiative to help improve the productivity of CAD design by developing custom tools for designers. I developed 5 different optimization tools in C# for Revit design. Subsequently, I transitioned to help with quality inspection control for electrical floor plan layouts in Revit for Sick Kids Hospital. In total, I examined over 40 layouts across two buildings, aiding in a 70% reduction in completion time per layout. Lastly, I designed plumbing and electrical fixtures in Revit for TD Bank electrical floor plan layouts and helped fix faulty conduit placements.",
+    "marqueeText": "Python ┃ JavaScript ┃ C++ ┃ C ┃ C# ┃ VHDL ┃ Java ┃ HTML ┃ CSS ┃ Altium Designer ┃ AutoCAD ┃ Fusion 360 ┃ LT Spice ┃&nbsp"
 }
diff --git a/src/main.js b/src/main.js
@@ -22,6 +22,9 @@ if (window.location.pathname == "/") {
     import("./modules/load-data.js").then((loadText) => {
         loadText.loadHome();
         loadText.loadSummary(true);
+        window.addEventListener("load", (event) => {
+            loadText.createObserver();
+        }, false);
     });
     import("./modules/send-email.js").then((email) => {
         let button = document.getElementById("sendButton");

diff --git a/src/modules/load-data.js b/src/modules/load-data.js
@@ -6,17 +6,18 @@ import wait from './wait.js';
 
 
 
-
 //////////////////////////////////////////////
 ///// load data from json into HTML file /////
 //////////////////////////////////////////////
 
 
 
-// loads contents of the home page
+// loads contents of the home page and adds event listeners
 export function loadHome() {
     document.getElementById("overviewText").innerHTML = home.overview;
     document.getElementById("workText").innerHTML = home.plangroup;
+    document.getElementById("marqueeText").innerHTML = home.marqueeText;
+    document.getElementById("marqueeText2").innerHTML += home.marqueeText;
 
     var prev = document.getElementById("prevSection"),
         next = document.getElementById("nextSection");
@@ -25,55 +26,76 @@ export function loadHome() {
     next.addEventListener("click", function () { toggleSection(2) })
 }
 
+
+// scrolls to the next or previous section of main page
 function toggleSection(selector) {
-    /* have to somehow find out what the next and previous section is, get the string and  */
-    var header = document.getElementById("header"),
-        typing = document.getElementById("typing"),
+    var typing = document.getElementById("typing"),
         overview = document.getElementById("overview"),
         experience = document.getElementById("experience"),
         projects = document.getElementById("projects"),
         contact = document.getElementById("contact"),
-        elements = [header, typing, overview, experience, projects, contact];
+        top = document.getElementById("top"),
+        navbar = document.getElementById("navbar"),
+        elements = [typing, overview, experience, projects, contact];
 
-    for (var i = 0, max = elements.length; i < max; i++) {
-        if (isInViewport(elements[i])) {
-            if ((i == 0 || i == 1) && selector == 2) {
-                document.getElementById("overview").scrollIntoView()
-            }
-            else if ((i == 0 || i == 1) && selector == 1) {
-                alert("no")
-            }
-            else if (i == 5 && selector == 2) {
-                alert("also no")
-            }
-            else if (i > 1 && i < 5 && selector == 1) {
-                alert(elements[i-1])
-                elements[i - 1].scrollIntoView();
-            }
-            else if (i > 1 && i < 5 && selector == 2) {
-                elements[i + 1].scrollIntoView();
-                alert('hi')
+}
+
+
+
+export function createObserver() {
+    let observer;
+    let options = {
+        root: null,
+        rootMargin: "75% 0% 0%",
+        threshold: 0.3
+    };
+    observer = new IntersectionObserver(handleIntersect, options);
+    let target = document.querySelectorAll(".section")
+    target.forEach(section => {
+        observer.observe(section)
+    })
+}
+
+
+function handleIntersect(entries) {
+    entries.forEach((entry) => {
+        if (entry.intersectionRatio > 0) {
+            let href;
+            if (entry.target.id === "typing" || entry.target.id === "marquee") {
+                href = "#top";
             }
             else {
-                alert("catestrophic failure")
+                href = "#" + entry.target.id;
             }
+            removeUnderline();
+            document.querySelector("a[href='" + href + "']").style.textDecoration = "underline"
         }
-    }
+    })
 }
 
-/* currenty the whole element needs to be visivle, need it to change so that partials can work
-do so ifv 50% of element is visible, then it is that section */
-function isInViewport(element) {
-    const rect = element.getBoundingClientRect();
-    return (
-        rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
-    );
+
+// removes underline from navbar sections
+function removeUnderline() {
+    var top = document.querySelector("a[href='#top']"),
+        about = document.querySelector("a[href='#overview']"),
+        work = document.querySelector("a[href='#experience']"),
+        projects = document.querySelector("a[href='#projects']"),
+        contact = document.querySelector("a[href='#contact']"),
+        navbar = [top, about, work, projects, contact];
+
+    navbar.forEach((section) => {
+        section.style.textDecoration = "none";
+    })
 }
 
 
+/* problem is that the handleIntersect function only triggers when there is a change in section, so if the section stays the same, it will not trigger
+    need something to remember the last section that is passed through to toggleSection */
+
+
+
+
+
 
 
 // loads each the project summary for each card

diff --git a/style.css b/style.css
@@ -59,7 +59,7 @@ body {
     box-shadow: none;
 }
 
-#prevSection{
+#prevSection {
     margin-bottom: 2.65vw;
 }
 
@@ -208,9 +208,44 @@ cursor width is 1/2 border width */
     animation-delay: 1.8s;
     animation-fill-mode: both;
     position: relative;
+    padding-bottom: 15px;
+}
+
+
+.wrapper {
+    overflow: hidden;
+    max-width: 45%;
+    margin-left: 10%;
+    font-size: 1.75vw;
+    animation: fade 2s linear;
+    animation-delay: 1.8s;
+    animation-fill-mode: both;
+    position: relative;
     padding-bottom: 20px;
 }
 
+.marquee:hover {
+    animation-play-state: paused;
+}
+
+.marquee {
+    overflow: hidden;
+    white-space: nowrap;
+    animation: marquee 35s linear infinite;
+    display: inline-block;
+}
+
+
+@keyframes marquee {
+    0% {
+        transform: translate3d(0, 0, 0);
+    }
+
+    100% {
+        transform: translate3d(-50%, 0, 0);
+    }
+}
+
 @keyframes blink {
     0% {
         border-color: transparent;
@@ -581,7 +616,6 @@ textarea {
 .g-recaptcha {
     margin-left: 2vw;
     margin-bottom: 1vw;
-    font-size: 0.95vw;
 }
 
 .grid .socials {
@@ -600,7 +634,7 @@ a:focus {
 
 .socials a {
     text-decoration: none;
-    font-size: 60px;
+    font-size: 3.5vw;
     transition: all 0.3s linear;
     height: 32px;
     margin-top: 25px;
@@ -629,7 +663,7 @@ a:focus {
     background-color: rgb(62, 105, 121);
     border-radius: 25px;
     height: 110%;
-    padding-bottom: 1vw;
+
 }
 
 
@@ -653,9 +687,10 @@ button {
 
 /* Copyright */
 .copyright {
-    margin-bottom: 10px;
     font-size: 1vw;
-    margin-top: 20vh;
     text-align: center;
     width: 100%;
+    padding-top: 15vw;
+    padding-bottom: 15px;
+    bottom: 0;
 }