projects page

hugh5 · Apr 22, 2024 · fe63d19 · fe63d19
1 parent 8418c3f
commit fe63d19
Show file tree

Hide file tree

Showing 34 changed files with 625 additions and 15 deletions.
diff --git a/css/style.css b/css/style.css
@@ -6,6 +6,7 @@
     --accent-color: #9B70ff;
     --background-color: #141414;
     --secondary-background-color: #525252;
+--tertiary-background-color: #272727;
     --primary-text-color: #fff;
     --secondary-text-color: #ccc;
 }
@@ -92,6 +93,7 @@ footer a {
 .row {
     display: flex;
     flex-direction: row;
+    justify-content: center;
     align-items: center;
     width: 100%;
 }
@@ -127,7 +129,6 @@ h2 {
     font-weight: bold;
     font-size: 32px;
     text-transform: uppercase;
-    /* margin-top: 0; */
     margin-bottom: 10px;
     margin-left: 40px;
     align-self: flex-start;
@@ -184,7 +185,6 @@ ul {
 
 #home {
     max-width: 800px;
-    min-width: 100px;
 }
 
 /* Add your custom styles below */
@@ -218,33 +218,147 @@ ul {
 }
 
 #experience {
-    width: 800px;
+    max-width: 1000px;
 }
 
 .grid-container {
     display: grid;
     grid-template-columns: repeat(5, 90px);
-    /* 6 columns with equal width */
     grid-auto-rows: auto;
-    /* Automatically adjust row height based on content */
     gap: 30px 60px;
-    /* Adjust the gap between grid items as needed */
     padding: 20px;
+
+    .logo {
+        width: 60px;
+        height: 60px;
+    }
 }
 
 @media (max-width: 800px) {
     .grid-container {
-        align-self: flex-start;
         grid-template-columns: repeat(2, 90px);
         gap: 40px 20px;
     }
 }
 
-
-.grid-container img {
-    width: 60px;
-    height: 60px;
+.logo {
     object-fit: cover;
     display: block;
     padding-bottom: 10px;
+}
+
+#projects {
+    max-width: 1000px;
+
+    .logo {
+        width: 30px;
+        height: 30px;
+    }
+
+    h2 {
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+
+    a {
+        text-decoration: none;
+        color: var(--primary-text-color);
+        border-radius: 8px;
+    }
+
+    a:hover {
+        background-color: var(--tertiary-background-color);
+    }
+
+    .tech-stack {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        > .filler {
+            flex-grow: 1;
+        }
+
+        > *:not(.filler) {
+            padding: 10px 20px;
+            margin-left: 10px;
+            margin-right: 10px;
+        }
+    }
+}
+
+#projects > .column > :nth-child(3n+4) {
+    margin-top: 80px;
+}
+
+#project1 {
+    flex: 0.3;
+}
+
+.container {
+    --radius: 25px;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    margin: 0 60px;
+    margin-bottom: 50px;
+
+    .content {
+        border: none;
+        object-fit: cover;
+        max-width: 100%;
+        max-height: 80vh;
+        border-radius: var(--radius);
+    }
+
+    .arrow {
+        width: 40px;
+        aspect-ratio: 1/1;
+        position: absolute;
+        top: calc(50% - 40px);
+        cursor: pointer;
+
+        img {
+            border-radius: 50%;
+            width: 100%;
+        }
+    }
+
+    .left-arrow {
+        left: -50px;
+    }
+
+    .right-arrow {
+        right: -50px;
+    }
+
+    .arrow:hover * {
+        background-color: var(--accent-color);
+    }
+    .dots {
+        display: flex;
+        justify-content: center;
+        gap: 10px;
+        position: absolute;
+        bottom: -50px;
+        width: 100%;
+        padding: 20px 0;
+
+        .dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background-color: var(--secondary-background-color);
+            transition: all 200ms ease-in-out;
+        }
+
+        .active {
+            background-color: var(--primary-text-color);
+        }
+
+        .dot:hover {
+            cursor: pointer;
+            background-color: var(--accent-color);
+        }
+    }
 }
diff --git a/experience.html b/experience.html
@@ -5,7 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Hugh's Portfolio | Experience</title>
         <link rel="stylesheet" href="css/style.css" />
-        <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
+        <link rel="icon" type="image/x-icon" href="favicon.ico" />
         <script src="js/jquery.min.js"></script>
         <script src="js/script.js"></script>
     </head>

diff --git a/images/favicon.ico → favicon.ico b/images/favicon.ico → favicon.ico
diff --git a/images/appstore.png b/images/appstore.png
diff --git a/images/c.png b/images/c.png
diff --git a/images/neuralnetwork/1.jpg b/images/neuralnetwork/1.jpg
diff --git a/images/neuralnetwork/2.jpg b/images/neuralnetwork/2.jpg
diff --git a/images/neuralnetwork/3.jpg b/images/neuralnetwork/3.jpg
diff --git a/images/neuralnetwork/4.jpg b/images/neuralnetwork/4.jpg
diff --git a/images/next.png b/images/next.png
diff --git a/images/pathfinding/1.jpg b/images/pathfinding/1.jpg
diff --git a/images/pathfinding/1.png b/images/pathfinding/1.png
diff --git a/images/pathfinding/2.jpg b/images/pathfinding/2.jpg
diff --git a/images/pathfinding/2.png b/images/pathfinding/2.png
diff --git a/images/pathfinding/3.jpg b/images/pathfinding/3.jpg
diff --git a/images/pathfinding/3.png b/images/pathfinding/3.png
diff --git a/images/playstore.png b/images/playstore.png
diff --git a/images/prev.png b/images/prev.png
diff --git a/images/snake/1.gif b/images/snake/1.gif
diff --git a/images/snake/2.jpg b/images/snake/2.jpg
diff --git a/images/snake/3.jpg b/images/snake/3.jpg
diff --git a/images/sorting/1.png b/images/sorting/1.png
diff --git a/images/sorting/2.png b/images/sorting/2.png
diff --git a/images/sorting/3.png b/images/sorting/3.png
diff --git a/images/timetable/1.png b/images/timetable/1.png
diff --git a/images/timetable/2.png b/images/timetable/2.png
diff --git a/images/timetable/3.png b/images/timetable/3.png
diff --git a/images/timetable/4.png b/images/timetable/4.png
diff --git a/images/timetable/5.png b/images/timetable/5.png
diff --git a/images/timetable/6.png b/images/timetable/6.png
diff --git a/images/website.png b/images/website.png
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Hugh's Portfolio</title>
         <link rel="stylesheet" href="css/style.css" />
-        <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
+        <link rel="icon" type="image/x-icon" href="favicon.ico" />
         <script src="js/jquery.min.js"></script>
         <script src="js/script.js"></script>
     </head>

diff --git a/js/script.js b/js/script.js
@@ -15,8 +15,6 @@ function loadNav() {
         });
     });
 
-    // Load the footer
-
     // On scroll, hide/show the navbar
     var lastScroll = 0;
     $(window).scroll(function (event) {
@@ -37,7 +35,93 @@ function loadFooter() {
     $("footer").load("_footer.html");
 }
 
+let counter = {
+    project1: 0,
+    project2: 0,
+    project3: 0,
+    project4: 0,
+    project5: 0,
+};
+
+const images = {
+    project1: [
+        "/images/timetable/1.png",
+        "/images/timetable/2.png",
+        "/images/timetable/3.png",
+        "/images/timetable/4.png",
+        "/images/timetable/5.png",
+        "/images/timetable/6.png",
+    ],
+    project2: [
+        "/images/pathfinding/1.png",
+        "/images/pathfinding/2.png",
+        "/images/pathfinding/3.png",
+    ],
+    project3: [
+        "/images/sorting/1.png",
+        "/images/sorting/2.png",
+        "/images/sorting/3.png",
+    ],
+    project4: [
+        "/images/neuralnetwork/1.jpg",
+        "/images/neuralnetwork/2.jpg",
+        "/images/neuralnetwork/3.jpg",
+        "/images/neuralnetwork/4.jpg",
+    ],
+    project5: [
+        "/images/snake/1.gif",
+        "/images/snake/2.jpg",
+        "/images/snake/3.jpg",
+    ],
+};
+
+function setContent(projectname) {
+    let selector = `#${projectname} > .content`;
+    $(selector).fadeOut(200, function () {
+        $(selector).attr("src", images[projectname][counter[projectname]]);
+        $(selector).fadeIn(200);
+    });
+    let dots = "";
+    for (let i = 0; i < images[projectname].length; i++) {
+        dots += `<span class="dot ${
+            i === counter[projectname] ? "active" : ""
+        }"></span>`;
+    }
+    $(`#${projectname} .dots`).html(dots);
+    $(`#${projectname} .dot`).on("click", function () {
+        counter[projectname] = $(this).index();
+        setContent(projectname);
+    });
+}
+
+function loadImageSliders() {
+    for (let projectname in counter) {
+        setContent(projectname);
+    }
+
+    $(".left-arrow").on("click", function () {
+        let projectname = $(this).parent().attr("id");
+        if (counter[projectname] === 0) {
+            counter[projectname] = images[projectname].length - 1;
+        } else {
+            counter[projectname]--;
+        }
+        setContent(projectname);
+    });
+
+    $(".right-arrow").on("click", function () {
+        let projectname = $(this).parent().attr("id");
+        if (counter[projectname] === images[projectname].length - 1) {
+            counter[projectname] = 0;
+        } else {
+            counter[projectname]++;
+        }
+        setContent(projectname);
+    });
+}
+
 $(function () {
     loadNav();
     loadFooter();
+    loadImageSliders();
 });