about me

Author: androettop

src/components/AboutMe/AboutMe.module.css

@@ -0,0 +1,4 @@
+.about {
+  color: var(--color-light);
+  line-height: 28px;
+}

src/components/AboutMe/AboutMe.tsx

@@ -0,0 +1,34 @@
+import * as React from "react"
+import * as styles from "./AboutMe.module.css"
+import Link from "../Link/Link"
+
+const AboutMe = () => {
+  return (
+    <div className={styles.about}>
+      <p>
+        Hi! I'm Pablo Androetto, and for over 10 years, I've been building,
+        experimenting, and bringing ideas to life.
+      </p>
+      <p>
+        Since childhood, I've been passionate about technology, starting by
+        creating simple games, graphic and web design, tinkering with
+        electronics, embedded systems, and reverse engineering. Over time, I
+        realized that what I really love is to create software that solves real
+        problems.
+      </p>
+      <p>
+        I firmly believe that no matter how complex a problem is, the best
+        solution is always the simplest one. Finding it is not always easy, but
+        that's the part I enjoy the most.
+      </p>
+      <p>
+        On this website, I share my experiences, projects, and technical
+        explorations. If you're curious about what I do, check out my{" "}
+        <Link to="/blog">blog</Link>, where I document my work, insights,
+        experiments, and beyond.
+      </p>
+    </div>
+  )
+}
+
+export default AboutMe

src/components/Container/Container.module.css

@@ -0,0 +1,5 @@
+.container {
+  max-width: 1100px;
+  width: 100%;
+  padding: 0 24px;
+}

src/components/Container/Container.tsx

@@ -0,0 +1,12 @@
+import * as React from "react"
+import * as styles from "./Container.module.css"
+
+interface ContainerProps {
+  children: React.ReactNode | React.ReactNode[]
+}
+
+const Container = ({ children }: ContainerProps) => {
+  return <div className={styles.container}>{children}</div>
+}
+
+export default Container

src/components/Layout/Layout.module.css

@@ -11,4 +11,6 @@
     background-size: 1440px 280px, auto, auto;
     min-height: 100%;
     background-blend-mode: normal, luminosity, normal;
+  display: flex;
+  justify-content: center;
 }

src/components/Layout/Layout.tsx

@@ -2,6 +2,7 @@ import { Link } from "gatsby"
 import * as React from "react"
 import * as styles from "./Layout.module.css"
 import Navbar from "../Navbar/Navbar"
+import Container from "../Container/Container"
 
 interface LayoutProps {
   location: Location
@@ -15,8 +16,10 @@ const Layout = ({ location, title, children }: LayoutProps) => {
 
   return (
     <div className={styles.wrapper} data-is-root-path={isRootPath}>
-      <Navbar location={location} />
-      <main>{children}</main>
+      <Container>
+        <Navbar location={location} />
+        <main>{children}</main>
+      </Container>
     </div>
   )
 }

src/components/Section/Section.module.css

@@ -0,0 +1,3 @@
+.section {
+    
+}

src/components/Section/Section.tsx

@@ -0,0 +1,12 @@
+import * as React from "react"
+import * as styles from "./Section.module.css"
+
+const Section = () => {
+  return (
+    <div className={styles.section}>
+     
+    </div>
+  )
+}
+
+export default Section

src/global.css

@@ -19,10 +19,10 @@ body,
 
   /* Palette */
   --color-white: #fff;
-  --color-dark: hsl(var(--color-hue), calc(var(--color-lightness) * 0.17), calc(var(--color-lightness) * 0.18));
-  --color-light: hsl(var(--color-hue), calc(var(--color-lightness) * 0.11), calc(var(--color-lightness) * 1.52));
+  --color-dark: hsl(var(--color-hue), calc(var(--color-saturation) * 0.17), calc(var(--color-lightness) * 0.18));
+  --color-light: hsl(var(--color-hue), calc(var(--color-saturation) * 0.11), calc(var(--color-lightness) * 1.26));
   --color-primary: hsl(var(--color-base-primary));
-  --color-secondary: hsl(var(--color-hue), calc(var(--color-lightness) * 0.23), calc(var(--color-saturation) * 0.62))
+  --color-secondary: hsl(var(--color-hue), calc(var(--color-saturation) * 0.23), calc(var(--color-lightness) * 0.62))
 }
 
 body {

src/pages/index.tsx

@@ -4,6 +4,7 @@ import { Link, graphql } from "gatsby"
 import Seo from "../components/Seo/Seo"
 import Layout from "../components/Layout/Layout"
 import Bio from "../components/Bio/Bio"
+import AboutMe from "../components/AboutMe/AboutMe"
 
 interface BlogIndexProps {
   data: {
@@ -59,6 +60,7 @@ const BlogIndex = ({ data, location }: BlogIndexProps) => {
   return (
     <Layout location={location} title={siteTitle}>
       <Bio />
+      <AboutMe />
       <ol style={{ listStyle: `none` }}>
         {posts.map(post => {
           const title = post.frontmatter.title || post.fields.slug
@@ -77,7 +79,13 @@ const BlogIndex = ({ data, location }: BlogIndexProps) => {
                     </Link>
                   </h2>
                   <small>{post.frontmatter.date}</small>
-                  <img src={post.frontmatter.thumbnail.childImageSharp.gatsbyImageData.images.fallback.src} alt={title} />
+                  <img
+                    src={
+                      post.frontmatter.thumbnail.childImageSharp.gatsbyImageData
+                        .images.fallback.src
+                    }
+                    alt={title}
+                  />
                 </header>
                 <section>
                   <p