FEAT: New projects page, Jekyllified home page too.

_includes/header.html

@@ -3,10 +3,10 @@
 <header class="light back shadow">
   <a href="/" class="nav-link dark">MAX HUTZ</a>
   <div class="flex"></div>
-  <a href="/experience" class="nav-link dark icon nav3" data-i="work">Experience</a>
+  <a href="/experiences" class="nav-link dark icon nav3" data-i="work">Experience</a>
   <a href="/resume" class="nav-link dark icon nav3" data-i="clinical_notes">Resume</a>
   <a href="mailto:maximhutz@gmail.com" class="nav-link dark icon nav3" data-i="mail">Contact</a>
-  <a href="/experience" class="nav-link dark icon nav2" data-i="work" aria-label="Experience"></a>
+  <a href="/experiences" class="nav-link dark icon nav2" data-i="work" aria-label="Experience"></a>
   <a href="/resume" class="nav-link dark icon nav2" data-i="clinical_notes" aria-label="Resume"></a>
   <a href="mailto:maximhutz@gmail.com" class="nav-link dark icon nav2" data-i="mail" aria-label="Contact"></a>
   <button class="nav-link dark icon nav1" data-i="menu" aria-label="Menu" onclick="document.getElementById('menu')?.showModal()"></button>
@@ -22,7 +22,7 @@
           <button class="nav-link dark icon" data-i="close" aria-label="Close"></button>
         </form>
       </div>
-      <a href="/experience" class="nav-link dark icon" data-i="work">Experience</a>
+      <a href="/experiences" class="nav-link dark icon" data-i="work">Experience</a>
       <a href="/resume" class="nav-link dark icon" data-i="clinical_notes">Resume</a>
       <a href="mailto:maximhutz@gmail.com" class="nav-link dark icon" data-i="mail">Contact</a>
     </div>

index.html

@@ -4,22 +4,21 @@ description: This is the home page of Maxim Voldman Hutz's personal website.
 layout: default
 ---
 
+{% assign home = site.data.home %}
+{% assign work = site.data.work %}
+
 <section id="about" class="light back">
   <div class="flex"></div>
   <div class="flex"></div>
   <div>
-    <h1>Hey! 👋 <span class="pre">I'm Max Hutz.</span></h1>
+    <h1>{{ home.welcome }}</h1>
-    <i>Software engineer in New York.</i>
+    <i>{{ home.status }}</i>
   </div>
-  <p id="about-me">
+  <p id="about-me">{{ home.about }}</p>
-    I’m a passionate computer science student skilled in building responsive,
-    full-stack applications. I love learning from colleagues and teaching future
-    developers. I thrive where teamwork and creativity are key.
-  </p>
   <hr class="darker">
   <nav>
     <div id="inner-nav">
-      <a href="mailto:maximhutz@gmail.com" class="nav-link blue button flex">maximhutz@gmail.com</a>
+      <a href="mailto:{{ home.email }}" class="nav-link blue button flex">{{ home.email }}</a>
       <a href="/resume" class="nav-link red button r-icon flex" data-i="arrow_right" target="_blank">View Resume</a>
     </div>
     <div class="space"></div>
@@ -27,26 +26,19 @@ layout: default
   <div class="flex"></div>
 </section>
 
+<!-- ----------------------------------------------------------------------- -->
+
 <section id="projects" class="dark back">
   <h2>Worked on:</h2>
   <div id="project-list">
-    <a class="yellow project-item shadow" href="/experience/malung">
+    {% for project in home.featured %}
-      <div class="space"></div>
+      <a class="{{ work[project].color }} project-item shadow" href="/experience/{{ project }}">
-      <div class="nav-link project-link r-icon" data-i="arrow_right">Malung: COVID-19 Classifier</div>
+        <div class="space"></div>
-    </a>
+        <div class="nav-link project-link r-icon" data-i="arrow_right">{{ work[project].title }}: {{ work[project].subtitle }}
-    <a class="blue project-item shadow" href="/experience/freshmanual">
+        </div>
-      <div class="space"></div>
+      </a>
-      <div class="nav-link project-link r-icon" data-i="arrow_right">Freshmanual: Mobile App</div>
+    {% endfor %}
-    </a>
-    <a class="green project-item shadow" href="/experience/pollbuddy">
-      <div class="space"></div>
-      <div class="nav-link project-link r-icon" data-i="arrow_right">Poll Buddy</div>
-    </a>
-    <a class="red project-item shadow" href="/experience/rpi-crisis">
-      <div class="space"></div>
-      <div class="nav-link project-link r-icon" data-i="arrow_right">CRISIS</div>
-    </a>
   </div>
   <hr class="lighter">
-  <a href="/experience" id="experience-button" class="nav-link white button">View all experiences.</a>
+  <a href="/experiences" id="experience-button" class="nav-link white button">View all experiences.</a>
 </section>

styles/default.css

@@ -1,5 +1,7 @@
 html {
   scroll-behavior: smooth;
+  background-image: linear-gradient(#0003 0% 50%, #0000 50% 100%),
+                    linear-gradient(var(--dark) 0% 50%, var(--light) 50% 100%);
 }
 
 body {
@@ -159,7 +161,7 @@ nav {
 /*----------------------------------------------------------------------------*/
 
 #projects {
-  margin: 30px auto;
+  padding: 30px auto;
   position: relative;
   display: flex;
   flex-direction: column;