Merge pull request #17 from MajorDroolz/project-list

Project list
2023-01-04 02:36:26 -05:00
parent fe013e056b 77991356f4
commit e011480ad1
7 changed files with 214 additions and 30 deletions
--- a/_data/home.yml
+++ b/_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 ]
--- a/_data/work.yml
+++ b/_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
+
+#*----------------------------------------------------------------------------*#
--- a/_includes/header.html
+++ b/_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>
--- a/experiences.html
+++ b/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>
--- a/index.html
+++ b/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>
-    <i>Software engineer in New York.</i>
+    <h1>{{ home.welcome }}</h1>
+    <i>{{ home.status }}</i>
  </div>
-  <p id="about-me">
-    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>
+  <p id="about-me">{{ home.about }}</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">
-      <div class="space"></div>
-      <div class="nav-link project-link r-icon" data-i="arrow_right">Malung: COVID-19 Classifier</div>
-    </a>
-    <a class="blue project-item shadow" href="/experience/freshmanual">
-      <div class="space"></div>
-      <div class="nav-link project-link r-icon" data-i="arrow_right">Freshmanual: Mobile App</div>
-    </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>
+    {% for project in home.featured %}
+      <a class="{{ work[project].color }} project-item shadow" href="/experience/{{ project }}">
+        <div class="space"></div>
+        <div class="nav-link project-link r-icon" data-i="arrow_right">{{ work[project].title }}: {{ work[project].subtitle }}
+        </div>
+      </a>
+    {% endfor %}
  </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>
--- a/styles/default.css
+++ b/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;