Adds the 'About me' page

src/components/BulletList.vue

@@ -10,13 +10,15 @@ import bulmaConsts from '../js/bulma-constants';
 
 const { colors: bulmaColors } = bulmaConsts;
 
-const { iconClasses, hoverColor } = defineProps({
+const { iconClasses, hoverColor, iconColor } = defineProps({
     iconClasses: { type: String, required: false, default: 'fa-solid fa-angle-right' },
     hoverColor: { type: String, required: false, default: undefined },
+    iconColor: { type: String, required: false, default: undefined },
 });
 
 provide('iconClasses', iconClasses);
-provide('hoverColor', hoverColor || bulmaColors.green);
+provide('hoverColor', hoverColor || bulmaColors.link);
+provide('iconColor', iconColor || hoverColor || bulmaColors.link);
 </script>
 
 <style lang="scss">

src/components/BulletListAuto.vue

@@ -0,0 +1,27 @@
+<template>
+  <BulletList class="bullet-list-auto">
+    <BulletListItem
+      v-for="item in items"
+      :key="item.description"
+    >
+      <span v-if="item.title" class="bullet-title">{{ item.title }}</span>
+      <span class="bullet-description">{{ item.description }}</span>
+    </BulletListItem>
+  </BulletList>
+</template>
+
+<script setup>
+import BulletList from './BulletList.vue';
+import BulletListItem from './BulletListItem.vue';
+
+const { items: rawItems } = defineProps({
+    items: { type: Array, required: true },
+});
+
+const items = rawItems.map((item) => {
+    if (typeof item === 'string') {
+        return { description: item };
+    }
+    return item;
+});
+</script>

src/components/BulletListItem.vue

@@ -16,6 +16,7 @@ import { inject } from 'vue';
 
 const iconClasses = inject('iconClasses');
 const hoverColor = inject('hoverColor');
+const iconColor = inject('iconColor');
 </script>
 
 <style lang="scss">
@@ -36,11 +37,11 @@ const hoverColor = inject('hoverColor');
   }
 
   .icon, .icon span {
-    color: v-bind(hoverColor);
+    color: v-bind(iconColor);
   }
 
   @at-root .is-mouse &:hover {
-    .icon, .icon span, .icon-raw-text {
+    .icon-raw-text {
       color: v-bind(hoverColor);
     }
     .icon-raw-text {

src/data/site.yml

@@ -17,9 +17,8 @@ pages:
     isExternal: true
   - id: about-me
     subtitle: About Me
-    description: "Read a little bit about me and my journey."
-    path: '/about-me'
-    hidden: true
+    description: "Read a little bit about the person behind the code."
+    path: &aboutMeUrl '/about-me'
   - id: not-found
     subtitle: Page Not Found
     description: "Oops... Page not found!"
@@ -34,3 +33,6 @@ seeNext:
     description: Read more about my professional history
     url: *resumeUrl
     isExternal: true
+  - action: Know me better
+    description: Learn about me as a person and professional
+    url: *aboutMeUrl

src/js/bulma-constants.js

@@ -3,6 +3,7 @@ const bulmaDarklyThemeColors = {
     yellow: '#f1b70e',
     red: '#e74c3c',
     primary: '#375a7f',
+    link: 'rgb(49, 195, 166)',
 };
 
 export default {

src/pages/about-me/+Page.vue

@@ -1,15 +1,132 @@
 <template>
   <section class="about-me-page-section page-section">
     <h1 class="title page-section-title">
-      About Me
+      {{ title }}
     </h1>
-    <section class="block content-container">
-      <h2 class="title page-section-subtitle">
-        Introduction
-      </h2>
-      <p class="text">
-        TODO
-      </p>
-    </section>
+    <div class="about-me-sections">
+      <section class="intro-section content-container">
+        <h2 class="semantic-hide">
+          Introduction
+        </h2>
+        <p class="intro-text pre-photo">
+          <span
+            v-for="phrase in introText.prePhoto"
+            :key="phrase"
+          >
+            {{ phrase }}
+          </span>
+        </p>
+        <figure class="image is-128x128 intro-photo">
+          <img
+            class="is-rounded"
+            width="128"
+            height="128"
+            src="../../img/me-128-compressed.jpg"
+          >
+        </figure>
+        <p class="intro-text post-photo">
+          <span
+            v-for="phrase in introText.postPhoto"
+            :key="phrase"
+          >
+            {{ phrase }}
+          </span>
+        </p>
+      </section>
+
+      <section
+        v-for="section in sections"
+        :key="section.title"
+        :class="section.elementClasses"
+        class="content-container"
+      >
+        <h2 class="title page-section-subtitle">
+          {{ section.title }}
+        </h2>
+        <BulletListAuto
+          :items="section.items"
+          :icon-classes="section.iconClasses"
+          :icon-color="BULLET_TITLE_COLOR"
+          :hover-color="HOVER_COLOR"
+        />
+      </section>
+    </div>
   </section>
 </template>
+
+<script setup>
+import BulletListAuto from '../../components/BulletListAuto.vue';
+import data from './aboutDataProvider';
+
+const { title, introText, sections } = data;
+const BULLET_TITLE_COLOR = 'rgb(85, 231, 202)';
+const HOVER_COLOR = 'white';
+</script>
+
+<style lang="scss">
+@use 'sass:color';
+@import '../../css/bulma-custom.scss';
+
+.about-me-page-section {
+
+  .content-container {
+    max-width: 600px;
+  }
+
+  .about-me-sections {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    gap: 3rem;
+    margin: 0 0.5rem;
+
+    font-size: $size-5-l2;
+    word-spacing: 0.2rem;
+    color: $grey-lighter;
+  }
+
+  .intro-section {
+    .intro-text {
+      display: flex;
+      flex-flow: column nowrap;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .intro-photo {
+      margin-top: 0.5rem;
+      margin-bottom: 1rem;
+    }
+  }
+
+  .bullet-list {
+    gap: 2rem;
+
+    .bullet-list-item .icon-text {
+      line-height: 2rem;
+    }
+  }
+
+  .favorite-genres-section {
+    .bullet-list {
+      gap: 1rem;
+    }
+  }
+
+  .outside-work-section {
+    .bullet-list {
+      gap: 0.5rem;
+    }
+  }
+
+  .bullet-title {
+    color: v-bind(BULLET_TITLE_COLOR);
+    font-weight: bold;
+
+    &::after {
+      content: ':';
+      margin-right: 0.5rem;
+    }
+  }
+}
+</style>

src/pages/about-me/about-me.md

@@ -0,0 +1,19 @@
+Hi, I'm Hugo.  
+Thanks for being here! I hope you learn a little bit more about the person behind the code.
+
+## What I love in game development
+- Programming: I love to create new stuff with programming and even more to surpass technical challenges to bring something new to life.
+- Games: I love playing them and their power to impact people and how they experience the world.
+- Learning: I'm always trying to expand what I can create and how well I do it.
+- Creativity: I'm excited about all areas that involve the creation of a game, that includes game design, art, and narrative. (Although I'm way better at coding)
+
+## My favorite game genres
+- Platformers like Celeste, The Messenger, Shovel Knight, Metroid, Castlevania, and Megaman Serie.
+- Rhythm games like Guitar Hero, Beat Sabe, and Pump it Up.
+- Couch games like Super Smash Bros, Towerfall Ascension, and Skullgirls 2nd Encore.
+
+## Also, I love to...
+- Hike
+- Sing at the karaoke
+- Make my own tea herbs mix
+- Travel (Peru, Italy, Spain, Netherlands, Argentina, and within Brazil as well)

src/pages/about-me/about-me.yml

@@ -0,0 +1,41 @@
+introText:
+  prePhoto:
+    - Hi, I'm Hugo.
+  postPhoto:
+    - That's the person behind the code.
+    - Thanks for being here!
+
+sections:
+  - title: What I love in game development
+    iconClasses: 'fa-solid fa-star'
+    elementClasses: 'love-gamedev-section'
+    items:
+      - title: Programming
+        description: I love to create new stuff with programming and even more to surpass technical challenges to bring something new to life.
+      - title: Games
+        description: I love playing them and their power to impact people and how they experience the world.
+      - title: Learning
+        description: I'm always trying to expand what I can create and how well I do it.
+      - title: Creation
+        description: I'm excited about all areas that involve the creation of a game, that includes game design, art, and narrative. (Although I'm way better at coding)
+
+  - title: My favorite game genres
+    iconClasses: 'fa-solid fa-gamepad'
+    elementClasses: 'favorite-genres-section'
+    items:
+      - title: Platformers
+        description: Celeste, The Messenger, Shovel Knight, Metroid, Castlevania, and Megaman Serie.
+      - title: Rhythm Games
+        description: Guitar Hero, Beat Saber, and Pump it Up.
+      - title: Couch Games
+        description: Super Smash Bros, Towerfall Ascension, and Skullgirls 2nd Encore.
+
+  - title: Also, I love to...
+    iconClasses: 'fa-solid fa-guitar'
+    elementClasses: 'outside-work-section'
+    items:
+      - Play the guitar
+      - Hike
+      - Sing at the karaoke
+      - Make my own tea herbs mix
+      - Travel (Peru, Italy, Spain, Netherlands, Argentina, and within Brazil as well)

src/pages/about-me/aboutDataProvider.js

@@ -0,0 +1,10 @@
+import aboutMeData from './about-me.yml';
+import siteData from '../../data/site.yml';
+
+const PAGE_ID = 'about-me';
+const pageData = siteData.pages.find((page) => page.id === PAGE_ID);
+
+export default {
+    title: pageData.subtitle,
+    ...aboutMeData,
+};