Bio

Author: androettop

gatsby-browser.ts

@@ -1,4 +1,5 @@
 // custom typefaces
+import "@fontsource/jetbrains-mono/600.css"
 import "@fontsource/jetbrains-mono/400.css"
 import "@fontsource/jetbrains-mono/200.css"
 // normalize CSS across browsers

src/components/Bio/Bio.module.css

@@ -0,0 +1,33 @@
+.bio {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 32px 0;
+}
+
+.bio__ring {
+  display: flex;
+  border: 2px solid var(--color-primary);
+  border-radius: 50%;
+  padding: 2px;
+  filter: drop-shadow(0px 1px 8px hsla(var(--color-base-primary), 0.56));
+  margin-bottom: 16px;
+}
+
+.bio__ring img{
+  border-radius: 50%;
+}
+
+.bio__name {
+  filter: drop-shadow(0px 1px 8px hsla(var(--color-base-primary), 0.56));
+  font-size: 32px;
+  font-weight: 200;
+  margin: 0;
+  margin-bottom: 16px;
+}
+
+.bio__profiles {
+  display: flex;
+  gap: 12px;
+  margin-top: 6px;
+}

src/components/Bio/Bio.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as styles from "./Bio.module.css"
+import { StaticImage } from "gatsby-plugin-image"
+import classNames from "classnames"
+import Link from "../Link/Link"
+
+const Bio = () => {
+  return (
+    <div className={styles.bio}>
+      <div className={styles["bio__ring"]}>
+        <StaticImage
+          quality={100}
+          src="../../images/icon.png"
+          alt="Pablo Androetto"
+          width={120}
+          height={120}
+          placeholder="blurred"
+        />
+      </div>
+      <h1 className={styles["bio__name"]}>Pablo Androetto</h1>
+      <Link to="mailto:pablo@androetto.dev">pablo@androett.dev</Link>
+      <div className={styles["bio__profiles"]}>
+        <Link to="https://github.com/androettop">GitHub</Link>
+        <Link to="https://linkedin.com/in/androettop">LinkedIn</Link>
+      </div>
+    </div>
+  )
+}
+
+export default Bio

src/components/Link/Link.module.css

@@ -0,0 +1,18 @@
+.link {
+  color: var(--color-primary);
+  font-weight: 600;
+  text-decoration: none;
+}
+.link:hover,
+.link:focus,
+link:active {
+  opacity: 0.8;
+}
+
+.link::before {
+  content: "[";
+}
+
+.link::after {
+  content: "]";
+}

src/components/Link/Link.tsx

@@ -0,0 +1,14 @@
+import * as React from "react"
+import * as styles from "./Link.module.css"
+import { Link as GastbyLink } from "gatsby"
+
+interface LinkProps {
+  to: string
+  children: React.ReactNode
+}
+
+const Link = ({ to, children }: LinkProps) => {
+  return <GastbyLink className={styles.link} to={to}>{children}</GastbyLink>
+}
+
+export default Link

src/components/Navbar/Navbar.module.css

@@ -23,9 +23,17 @@
   font-weight: 200;
 }
 
+.navbar li a:hover,
+.navbar li a:focus,
+.navbar li a:active {
+  opacity: 0.8;
+}
+
+.navbar li a:hover,
+.navbar li a:focus,
+.navbar li a:active,
 .navbar li a.active {
   text-decoration: underline;
   text-decoration-color: var(--color-primary);
   text-underline-offset: 3px;
 }
-

src/global.css

@@ -11,9 +11,9 @@ body,
 
 :root {
   /* All the palette is based on the primary HSL color */
-  --color-hue: 287;
+  --color-hue: 270;
   --color-saturation: 100%;
-  --color-lightness: 50%;
+  --color-lightness: 60%;
 
   --color-base-primary: var(--color-hue), var(--color-saturation), var(--color-lightness);
 

src/pages/index.tsx

@@ -3,6 +3,7 @@ import { Link, graphql } from "gatsby"
 
 import Seo from "../components/Seo/Seo"
 import Layout from "../components/Layout/Layout"
+import Bio from "../components/Bio/Bio"
 
 interface BlogIndexProps {
   data: {
@@ -57,6 +58,7 @@ const BlogIndex = ({ data, location }: BlogIndexProps) => {
 
   return (
     <Layout location={location} title={siteTitle}>
+      <Bio />
       <ol style={{ listStyle: `none` }}>
         {posts.map(post => {
           const title = post.frontmatter.title || post.fields.slug