Merge pull request #17 from MajorDroolz/project-list

Project list

404.html

@@ -13,4 +13,4 @@ layout: default
   </div>
   <hr class="lighter">
   <button type="button" class="nav-link white button" onclick="history.back(-1)">Go Back.</button>
-</section>
+</section>

_data/home.yml

@@ -0,0 +1,16 @@
+welcome:
+  Hey! 👋 I'm Max Hutz.
+
+status:
+  Software developer in New York.
+
+about:
+  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.
+
+email:
+  maximhutz@gmail.com
+
+featured:
+  [ malung, freshmanual, pollbuddy, rpi-crisis ]

_data/work.yml

@@ -0,0 +1,151 @@
+malung:
+  title:
+    Example
+
+  subtitle:
+    Just A Test
+  
+  stack:
+    [ PHP, JS, CSS, HTML, Docker, MariaDB, Azure ]
+
+  description:
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    Lorem Ipsum has been the industry's standard dummy text ever since the
+    1500s, when an unknown printer took a galley of type and scrambled it to
+    make a type specimen book. It has survived not only five centuries, but also
+    the leap into electronic typesetting, remaining essentially unchanged.
+  
+  outcomes:
+    - Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+
+    - Lorem Ipsum has been the industry's standard dummy text ever since the
+      1500s, when an unknown printer took a galley of type and scrambled it to
+      make a type specimen book.
+      
+    - It has survived not only five centuries, but also the leap into electronic
+      typesetting, remaining essentially unchanged.
+  
+  image:
+    /res/avatar.svg
+  
+  link:
+    /
+
+  color:
+    yellow
+
+#*----------------------------------------------------------------------------*#
+
+freshmanual:
+  title:
+    Example
+
+  subtitle:
+    Just A Test
+  
+  stack:
+    [ PHP, JS, CSS, HTML, Docker, MariaDB, Azure ]
+
+  description:
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    Lorem Ipsum has been the industry's standard dummy text ever since the
+    1500s, when an unknown printer took a galley of type and scrambled it to
+    make a type specimen book. It has survived not only five centuries, but also
+    the leap into electronic typesetting, remaining essentially unchanged.
+  
+  outcomes:
+    - Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+
+    - Lorem Ipsum has been the industry's standard dummy text ever since the
+      1500s, when an unknown printer took a galley of type and scrambled it to
+      make a type specimen book.
+      
+    - It has survived not only five centuries, but also the leap into electronic
+      typesetting, remaining essentially unchanged.
+  
+  image:
+    /res/avatar.svg
+  
+  link:
+    /
+  
+  color:
+    blue
+
+#*----------------------------------------------------------------------------*#
+
+pollbuddy:
+  title:
+    Example
+
+  subtitle:
+    Just A Test
+  
+  stack:
+    [ PHP, JS, CSS, HTML, Docker, MariaDB, Azure ]
+
+  description:
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    Lorem Ipsum has been the industry's standard dummy text ever since the
+    1500s, when an unknown printer took a galley of type and scrambled it to
+    make a type specimen book. It has survived not only five centuries, but also
+    the leap into electronic typesetting, remaining essentially unchanged.
+  
+  outcomes:
+    - Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+
+    - Lorem Ipsum has been the industry's standard dummy text ever since the
+      1500s, when an unknown printer took a galley of type and scrambled it to
+      make a type specimen book.
+      
+    - It has survived not only five centuries, but also the leap into electronic
+      typesetting, remaining essentially unchanged.
+  
+  image:
+    /res/avatar.svg
+  
+  link:
+    /
+  
+  color:
+    green
+
+#*----------------------------------------------------------------------------*#
+
+rpi-crisis:
+  title:
+    Example
+
+  subtitle:
+    Just A Test
+  
+  stack:
+    [ PHP, JS, CSS, HTML, Docker, MariaDB, Azure ]
+
+  description:
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    Lorem Ipsum has been the industry's standard dummy text ever since the
+    1500s, when an unknown printer took a galley of type and scrambled it to
+    make a type specimen book. It has survived not only five centuries, but also
+    the leap into electronic typesetting, remaining essentially unchanged.
+  
+  outcomes:
+    - Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+
+    - Lorem Ipsum has been the industry's standard dummy text ever since the
+      1500s, when an unknown printer took a galley of type and scrambled it to
+      make a type specimen book.
+      
+    - It has survived not only five centuries, but also the leap into electronic
+      typesetting, remaining essentially unchanged.
+  
+  image:
+    /res/avatar.svg
+  
+  link:
+    /
+  
+  color:
+    red
+
+#*----------------------------------------------------------------------------*#

_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>

experiences.html

@@ -0,0 +1,23 @@
+---
+title: Experiences
+description: A list of past and current work and projects from Maxim Voldman Hutz.
+layout: default
+---
+
+{% assign work = site.data.work %}
+
+<section id="projects" class="dark back">
+  <h2>My experiences.</h2>
+  <div id="project-list">
+    {% for item in work %}
+      {% assign id = item[0] %}
+      {% assign data = item[1] %}
+
+      <a class="{{ data.color }} project-item shadow" href="/experience/{{ id }}">
+        <div class="space"></div>
+        <div class="nav-link project-link r-icon" data-i="arrow_right">{{ data.title }}: {{ data.subtitle }}
+        </div>
+      </a>
+    {% endfor %}
+  </div>
+</section>

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;