Refactor home

I'm just going to copy the styles rather than migrate everything for now

Author: NoelDeMartin

content/collections/pages/blog.md

@@ -2,6 +2,7 @@
 id: blog
 title: Blog
 icon: blog
+show_title: false
 ---
 
 TODO

content/collections/pages/home.md

@@ -2,59 +2,83 @@
 id: home
 title: 'About me'
 icon: home
+show_title: false
 ---
 
 <h1 class="sr-only">Noel De Martin</h1>
 
-<span class="mb-4 text-3xl font-medium text-blue-darkest tracking-wide">
+<span class="h1">
     Hi there!
 </span>
 
+<div class="text-xl">
+
 My name is Noel. I am a developer and entrepreneur who loves to learn, solve problems, and build products that make an impact.
 
 Welcome to my personal website. Take your time to look around, and if you want to talk with me don't hesitate on <a href="mailto:{{contact:email}}?subject=Hi+there!">sending an email</a>.
 
+</div>
+
 <span class="block my-4 text-2xl text-center font-medium text-blue-darkest w-full">
     If you want to learn how I...
 </span>
 
 <div class="flex flex-col md:flex-row">
 
-{{ partial:home/cta title="Am" }}
-Keep reading!
-{{ /partial:home/cta }}
+{{ partial:home/cta title="Am" }}Keep reading!{{ /partial:home/cta }}
 
-{{ partial:home/cta title="Think" }}
-Read my [Blog](/blog)
-{{ /partial:home/cta }}
+{{ partial:home/cta title="Think" }}Read my [Blog](/blog){{ /partial:home/cta }}
 
-{{ partial:home/cta title="Work" }}
-Check out my [Projects](/projects)
-or [What I'm doing now](/now)
-{{ /partial:home/cta }}
+{{ partial:home/cta title="Work" }}Check out my [Projects](/projects)<br/>or [What I'm doing now](/now){{ /partial:home/cta }}
 
 </div>
 
-## My values
+<h2 class="text-center text-3xl !mt-10 md:text-2xl md:text-left" id="my-values">My values</h2>
+
+<div class="flex flex-col-reverse w-full md:flex-row">
+
+<div class="max-w-readable [&>p:first-of-type]:!mt-0 [&>p:last-of-type]:!mb-0">
 
 Values are abstract concepts, and sometimes they are perceived as buzzwords. But values are important to me and I try to embed them in my actions.
 
 These are my values:
 
-- Autonomy
-- Awareness
-- Continuous improvement
-- Creativity
-- Education
-- Joy
-- Openness
-- Privacy
-- Quality > Quantity
-- Simplicity > Complexity
-- Sustainability
-- Work-life balance
-
-## My background
+<ul class="flex flex-wrap mt-2">
+    <li class="my-1 w-full md:w-1/2"><strong class="font-medium">Autonomy</strong></li>
+    <li class="my-1 w-full md:w-1/2"><strong class="font-medium">Awareness</strong></li>
+    <li class="my-1 w-full md:w-1/2"><strong class="font-medium">Continuous improvement</strong></li>
+    <li class="my-1 w-full md:w-1/2"><strong class="font-medium">Creativity</strong></li>
+    <li class="my-1 w-full md:w-1/2"><strong class="font-medium">Education</strong></li>
+    <li class="my-1 w-full md:w-1/2"><strong class="font-medium">Joy</strong></li>
+    <li class="my-1 w-full md:w-1/2"><strong class="font-medium">Openness</strong></li>
+    <li class="my-1 w-full md:w-1/2"><strong class="font-medium">Privacy</strong></li>
+    <li class="my-1 w-full md:w-1/2"><strong class="font-medium">Quality > Quantity</strong></li>
+    <li class="my-1 w-full md:w-1/2"><strong class="font-medium">Simplicity > Complexity</strong></li>
+    <li class="my-1 w-full md:w-1/2 md:mb-0"><strong class="font-medium">Sustainability</strong></li>
+    <li class="my-1 w-full md:w-1/2 md:mb-0"><strong class="font-medium">Work-life balance</strong></li>
+</ul>
+
+</div>
+
+<div class="relative flex flex-grow self-stretch justify-center mb-4 md:mb-0 md:ml-4">
+    <div class="flex items-center justify-center w-32 h-32 md:absolute md:inset-0 md:m-8 md:w-auto md:h-auto">
+        {{ partial:icons/my-values class="w-full" }}
+    </div>
+</div>
+
+</div>
+
+<h2 class="text-center text-3xl !mt-10 md:text-2xl md:text-left" id="my-background">My background</h2>
+
+<div class="flex flex-col w-full md:flex-row">
+
+<div class="relative flex flex-grow self-stretch justify-center mb-4 md:mb-0 md:mr-4">
+    <div class="flex items-center justify-center w-32 h-32 md:absolute md:inset-0 md:m-8 md:w-auto md:h-auto">
+        {{ partial:icons/my-background class="w-full" }}
+    </div>
+</div>
+
+<div class="max-w-readable [&>p:first-of-type]:!mt-0 [&>p:last-of-type]:!mb-0">
 
 I have been working in the software industry since 2011. I enjoy programming in and of itself, but I've always cared about the impact of my code. That's what led me to **entrepreneurship**, and I was involved in startups and bootstrapped projects for a while. In 2019 I migrated into **mission-driven organizations**, but now [I'm thinking of doing entrepreneurship again](/blog/the-end-of-the-chapter#here-we-go-again).
 
@@ -64,7 +88,15 @@ If you want to know more, some years ago I wrote a summary of my career in my bl
 
 Or, if you prefer, you can just read [my CV](/cv.pdf){:target="\_blank"}.
 
-## Beyond the code
+</div>
+
+</div>
+
+<h2 class="text-center text-3xl !mt-10 md:text-2xl md:text-left" id="beyond-the-code">Beyond the code</h2>
+
+<div class="flex flex-col-reverse w-full md:flex-row">
+
+<div class="max-w-readable [&>p:first-of-type]:!mt-0 [&>p:last-of-type]:!mb-0">
 
 This website and my online persona are mostly about my career and professional life. But maybe you'd like to see a little bit behind the curtain.
 
@@ -73,3 +105,13 @@ I am an avid Manga reader and I occasionally watch Anime as well. I also watch M
 I also enjoy cooking (and eating, of course!). I specially like spicy food and craft beer, and I recently started growing plants at home. Eventually it would be nice to have a small vegetable garden, but for now I'm just learning to keep plants alive.
 
 On occasion I like going for a hike, and I love traveling and learning about other cultures. You may like to know that my two favorite novels are [The Sherlock Holmes Anthology](https://en.wikipedia.org/wiki/Canon_of_Sherlock_Holmes){:target="\_blank"} and [Musashi](/blog/lessons-learned-musashi-by-eiji-yoshikawa). I enjoy many art forms, and I have more content pending to consume than I'll be able in my life-time. Which makes for a very fun ride :).
+
+</div>
+
+<div class="relative flex flex-grow self-stretch justify-center mb-4 md:mb-0 md:ml-4">
+    <div class="flex items-center justify-center w-32 h-32 md:absolute md:inset-0 md:m-8 md:w-auto md:h-auto">
+        {{ partial:icons/beyond-the-code class="w-full" }}
+    </div>
+</div>
+
+</div>

content/collections/pages/projects.md

@@ -0,0 +1,9 @@
+---
+id: projects
+title: Projects
+icon: projects
+---
+
+In this page, you can find what I've been working on throughout my career. This only includes personal projects though, if you're curious about my professional experience you can look at [my CV](/cv.pdf).
+
+I've also given [some talks](/talks) you may want to check out.

content/trees/collections/pages.yaml

@@ -1,3 +1,4 @@
 tree:
   - entry: home
   - entry: blog
+  - entry: projects