Project pages now auto-generated with jekyll data.

styles/404.css

@@ -1,6 +1,6 @@
 #notfound {
   --color: var(--dark) linear-gradient(#0000, #0003);
-  flex: 1;
+  flex: 99999999999999;
   display: flex;
   justify-content: center;
   align-items: center;

styles/default.css

@@ -171,7 +171,7 @@ nav {
 /*----------------------------------------------------------------------------*/
 
 #projects {
-  padding: 30px auto;
+  padding: 30px 0;
   position: relative;
   display: flex;
   flex-direction: column;

styles/experience.css

@@ -13,6 +13,12 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  text-align: justify;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
+  -o-hyphens: auto;
+  hyphens: auto;
 }
 
 #content {
@@ -20,14 +26,14 @@
   flex-wrap: wrap-reverse;
   align-items: flex-end;
   gap: 30px;
+  padding-bottom: 30px;
 }
 
 #image {
-  flex: 1;
   background-color: #ccc;
   border-radius: 10px;
   height: 300px;
-  min-width: min(500px, 100%);
+  width: 100%;
 }
 
 #description {
@@ -37,4 +43,28 @@
   flex-direction: column;
   align-items: flex-start;
   min-width: min(300px, 100%);
+}
+
+#image-side {
+  flex: 1;
+  gap: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: min(500px, 100%);
+}
+
+#stack {
+  display: flex;
+  gap: 20px;
+  flex-flow: row wrap;
+}
+
+#stack .chip {
+  flex: 1;
+}
+
+#stack::after {
+  content: "";
+  flex: 1000000;
 }

styles/global.css

@@ -31,8 +31,9 @@
 .white { --color: white }
 
 .flex-space, .flex, br { flex-grow: 1 }
-.flex.dark { background-color: var(--dark); }
+.flex.dark { background-color: var(--dark) }
 .space { flex: 1000 }
+.npad { padding: 0 !important }
 
 /*----------------------------------------------------------------------------*/
 

styles/tech.css

@@ -0,0 +1,24 @@
+---
+---
+
+.chip {
+  font-size: 15px;
+  font-family: "Open Sans";
+  font-weight: 900;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 5px 20px;
+  border-radius: 10px;
+  text-decoration: none;
+}
+
+{% for tech in site.data.techs %}
+  {% assign id = tech[0] %}
+  {% assign data = tech[1] %}
+
+  .chip.{{id}} {
+    background-color: {{data.back}};
+    color: {{data.fore}};
+  }
+{% endfor %}