Update project description, fix responsive layout, update font

jeffreyAaron · Jun 21, 2024 · 2a3c980 · 2a3c980
1 parent 54175e9
commit 2a3c980
Show file tree

Hide file tree

Showing 9 changed files with 152 additions and 16 deletions.
diff --git a/home.css b/home.css
@@ -2,6 +2,7 @@
 
     background-image: url("assets/home/background-01.svg");
     background-size: cover;
+    background-color: #222;
     width: 100%;
     height: 100vh;
     color: white;

diff --git a/mainStyle.css b/mainStyle.css
@@ -1,13 +1,13 @@
 @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');
-
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 body{
     margin: 0;
 }
 
 .mainContent {
     margin: 0;
     padding: 0;
-    font-family: "Source Sans Pro", sans-serif;
+    font-family: "Poppins", sans-serif;
     color: white;
     width: 100%;
     height: 100vh;

diff --git a/navbar.css b/navbar.css
@@ -1,4 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');
 nav {
     margin: 0;
     padding-left: 10px;
@@ -27,7 +26,6 @@ nav {
     padding: 10px;
     font-size: 14px;
     font-weight: 400;
-    font-family: 'Source Sans Pro', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
 }
 
 .navbarButton a{

diff --git a/projects/car.bmp → projects/carFrameRendered.bmp b/projects/car.bmp → projects/carFrameRendered.bmp
diff --git a/projects/project_pages/carFrame.html b/projects/project_pages/carFrame.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- CSS Files -->
+    <link rel="stylesheet" href="../../mainStyle.css">
+    <link rel="stylesheet" href="../../navbar.css">
+    <link rel="stylesheet" href="../../projectPage.css">
+
+    <title>Car Frame</title>
+</head>
+<body>
+    <div class="mainContent">
+
+        <nav>
+            <ul id="navbarList">
+                <li class="navbarButton logo animatedUnderline"><a href="../../index.html">Jeffrey Aaron</a></li>
+                <div class="navbarButtonRight">
+                    <li class="navbarButton animatedUnderline"><a>About</a></li>
+                    <li class="navbarButton animatedUnderline"><a href="../projects.html">Projects</a></li>
+                    <li class="navbarButton animatedUnderline"><a>My Experience</a></li>
+                </div>
+            </ul>
+        </nav>
+
+        <div id="textContent">
+            <h1>Mini Watch</h1>
+            <img src="../carFrameRendered.bmp" width="50%">
+            <p>Made in Autodesk Inventor with 3D sketches and frame generator.</p>
+
+            <!-- <img src="boatTelemetrySystemImages/electronics.jpg" width="50%">
+            <figcaption>Caption here</figcaption>
+            <br>
+
+            <img src="boatTelemetrySystemImages/ESBlockDiagram.png" width="100%"> -->
+
+
+        </div>
+
+    </div>
+
+</body>
+</html>
diff --git a/projects/project_pages/differentialDriveRobot.html b/projects/project_pages/differentialDriveRobot.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- CSS Files -->
+    <link rel="stylesheet" href="../../mainStyle.css">
+    <link rel="stylesheet" href="../../navbar.css">
+    <link rel="stylesheet" href="../../projectPage.css">
+
+    <title>Differential Drive Robot</title>
+</head>
+<body>
+    <div class="mainContent">
+
+        <nav>
+            <ul id="navbarList">
+                <li class="navbarButton logo animatedUnderline"><a href="../../index.html">Jeffrey Aaron</a></li>
+                <div class="navbarButtonRight">
+                    <li class="navbarButton animatedUnderline"><a>About</a></li>
+                    <li class="navbarButton animatedUnderline"><a href="../projects.html">Projects</a></li>
+                    <li class="navbarButton animatedUnderline"><a>My Experience</a></li>
+                </div>
+            </ul>
+        </nav>
+
+        <div id="textContent">
+            <h1>Differntial Drive Robot</h1>
+            <img src="../differentialRobot.png" width="50%">
+            <p>This robot was initially designed for Robot Tour, a building event at Science Olympiad. The car is powered by 8 AA rechargable batteries.
+                 In order to accurately travel in a straight line a PID algorithm is run on both wheels using the input of a rotary encoder on both drive motors.</p>
+            <!-- <img src="boatTelemetrySystemImages/electronics.jpg" width="50%">
+            <figcaption>Caption here</figcaption>
+            <br>
+
+            <img src="boatTelemetrySystemImages/ESBlockDiagram.png" width="100%"> -->
+
+
+        </div>
+
+    </div>
+
+</body>
+</html>
diff --git a/projects/project_pages/miniWatch.html b/projects/project_pages/miniWatch.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- CSS Files -->
+    <link rel="stylesheet" href="../../mainStyle.css">
+    <link rel="stylesheet" href="../../navbar.css">
+    <link rel="stylesheet" href="../../projectPage.css">
+
+    <title>Mini Watch</title>
+</head>
+<body>
+    <div class="mainContent">
+
+        <nav>
+            <ul id="navbarList">
+                <li class="navbarButton logo animatedUnderline"><a href="../../index.html">Jeffrey Aaron</a></li>
+                <div class="navbarButtonRight">
+                    <li class="navbarButton animatedUnderline"><a>About</a></li>
+                    <li class="navbarButton animatedUnderline"><a href="../projects.html">Projects</a></li>
+                    <li class="navbarButton animatedUnderline"><a>My Experience</a></li>
+                </div>
+            </ul>
+        </nav>
+
+        <div id="textContent">
+            <h1>Mini Watch</h1>
+            <img src="../miniWatch.jpg" width="50%">
+            <p>My desire to make a watch on par with the Apple Watch led me to this project. Did I fulfill my goal? Not quite, 
+                but it made me realize the progress in low-cost microcontrollers over the years and opened my eyes to intense amount of engineering and R&D Apple undertakes in order to create the Apple Watch.</p>
+
+            <!-- <img src="boatTelemetrySystemImages/electronics.jpg" width="50%">
+            <figcaption>Caption here</figcaption>
+            <br>
+
+            <img src="boatTelemetrySystemImages/ESBlockDiagram.png" width="100%"> -->
+
+
+        </div>
+
+    </div>
+
+</body>
+</html>
diff --git a/projects/projects.css b/projects/projects.css
@@ -7,19 +7,25 @@
 
 @media only screen and (max-width: 620px) {
     /* For mobile phones: */
-    img{
+    .card{
       width: 100%;
     }
   }
 
+#projectsContent {
+    margin-right: 16px;
+}
+
 .cardContent {
     margin: 16px;
+    margin-right: 0;
     padding: 16px;
-    background: #333;
+    background: #ddd;
     border-radius: 16px;
     border: #666;
     border-width: 2px;
     display: block;
+    color: #000;
     transition: 0.3s box-shadow;
 }
 
@@ -30,12 +36,7 @@
 }
 
 .cardContent:hover {
-    margin: 16px;
-    padding: 16px;
-    background: #444;
-    border-radius: 16px;
+    background: #eee;
     border: #666;
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.5);
-    border-width: 2px;
-    display: block;
 }
diff --git a/projects/projects.js b/projects/projects.js
@@ -25,19 +25,19 @@ data.push({
     title: "Differential Drive Robot",
     organization: "",
     img: "differentialRobot.png",
-    href: "project_pages/boatTelemetrySystemProject.html"
+    href: "project_pages/differentialDriveRobot.html"
 });
 data.push({
     title: "Mini Watch",
     organization: "",
     img: "miniWatch.jpg",
-    href: "project_pages/boatTelemetrySystemProject.html"
+    href: "project_pages/miniWatch.html"
 });
 data.push({
     title: "Car",
     organization: "",
-    img: "car.bmp",
-    href: "project_pages/boatTelemetrySystemProject.html"
+    img: "carFrameRendered.bmp",
+    href: "project_pages/carFrame.html"
 });
 // data.push({
 //     title: "Boat Telej",