feat: add About page

pragmaticivan · Jul 16, 2024 · 8ea988b · 8ea988b
1 parent e61e644
commit 8ea988b
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 51 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,9 +3,8 @@ import '../styles/globals.css';
 
 import React from 'react';
 import { Metadata } from 'next';
+import { GoogleTagManager } from '@next/third-parties/google'
 import { siteMetadata } from '../lib/site-metadata';
-import { GA_TRACKING_ID } from '../lib/google-analytics';
-import { GoogleAnalytics } from '@next/third-parties/google'
 
 export const metadata: Metadata = {
   metadataBase: new URL(siteMetadata.siteUrl),
@@ -57,7 +56,8 @@ export default function RootLayout({
       <link rel="icon" href="/favicon.png" sizes="any" type="image/png" />
 
       <body>{children}</body>
-      <GoogleAnalytics gaId={GA_TRACKING_ID} />
+
+      <GoogleTagManager gtmId={siteMetadata.analytics.googleTagManager.googleTagManagerId} />
     </html>
   );
 }
diff --git a/components/GeneralDescription/index.tsx b/components/GeneralDescription/index.tsx
@@ -1,48 +1,93 @@
 import React from 'react';
-import styles from './styles.module.scss';
 import Image from 'next/image';
-import FastReadText from '../FastReadText';
 
 const GeneralDescription = () => (
-  <div className={styles.description}>
-    <div className={styles.picture}>
-      <Image
-        src="https://avatars2.githubusercontent.com/u/301291?s=400&v=4"
-        alt="Ivan Santos"
-        width={200}
-        height={200}
-      />
+  <main className="flex-auto">
+    <div className="sm:px-8 mt-16 sm:mt-32">
+        <div className="mx-auto w-full max-w-7xl lg:px-8">
+            <div className="relative px-4 sm:px-8 lg:px-12">
+                <div className="mx-auto max-w-2xl lg:max-w-5xl">
+                    <div className="grid grid-cols-1 gap-y-16 lg:grid-cols-2 lg:grid-rows-[auto_1fr] lg:gap-y-12">
+                        <div className="lg:pl-20">
+                          <div className="max-w-xs px-2.5 lg:max-w-none">
+                            <Image alt="Ivan Santos" loading="lazy" width="300"
+                                  height="300" decoding="async" data-nimg="1"
+                                  className="aspect-square rotate-6 rounded-2xl bg-zinc-100 object-cover dark:bg-zinc-800"
+                                  src="https://avatars2.githubusercontent.com/u/301291?s=400&v=4" />
+                          </div>
+                        </div>
+                        <div className="lg:order-first lg:row-span-2">
+                          <h1 className="text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl dark:text-zinc-100">
+                              Software Engineering. Distributed Systems. Coffee
+                          </h1>
+                          <div className="mt-6 space-y-7 text-base text-zinc-600 dark:text-zinc-400">
+                            <p className='leading-7'>
+                              Howdy! I'm Ivan Santos, a software engineer with a passion for distributed systems and coffee.
+                              Born and raised in Brazil, I moved to the US to pursue my career in tech.
+                              I’ve loved taking things apart and putting them back together since I was a kid. Learning and
+                              improving my craft is what drives me every day.
+                            </p>
+                            <p>
+                              I'm currently exploring Platform Engineering at EverQuote where I had the opportunity to work on really awesome
+                              stuff such as Kubernetes, Observability, Terraform, Go, and more.
+                            </p>
+                            <p>
+                              When I'm not at my computer, I love to travel, geek about finance, coffee, dancing, and volleyball.
+                            </p>
+                          </div>
+                        </div>
+                        <div className="lg:pl-20">
+                          <ul>
+                            <li className="flex">
+                              <a className="group flex text-sm font-medium text-zinc-800 transition hover:text-teal-500 dark:text-zinc-200 dark:hover:text-teal-500" href="https://x.com/pragmaticivan">
+                                <svg viewBox="0 0 24 24" aria-hidden="true"
+                                  className="h-6 w-6 flex-none fill-zinc-500 transition group-hover:fill-teal-500">
+                                  <path
+                                      d="M13.3174 10.7749L19.1457 4H17.7646L12.7039 9.88256L8.66193 4H4L10.1122 12.8955L4 20H5.38119L10.7254 13.7878L14.994 20H19.656L13.3171 10.7749H13.3174ZM11.4257 12.9738L10.8064 12.0881L5.87886 5.03974H8.00029L11.9769 10.728L12.5962 11.6137L17.7652 19.0075H15.6438L11.4257 12.9742V12.9738Z">
+                                  </path>
+                                </svg>
+                                <span className="ml-4">Follow on X</span>
+                              </a>
+                            </li>
+                            <li className="mt-4 flex">
+                              <a className="group flex text-sm font-medium text-zinc-800 transition hover:text-teal-500 dark:text-zinc-200 dark:hover:text-teal-500" href="https://github.com/pragmaticivan/">
+                                <svg viewBox="0 0 24 24" aria-hidden="true"
+                                        className="h-6 w-6 flex-none fill-zinc-500 transition group-hover:fill-teal-500">
+                                  <path fill-rule="evenodd" clip-rule="evenodd"
+                                      d="M12 2C6.475 2 2 6.588 2 12.253c0 4.537 2.862 8.369 6.838 9.727.5.09.687-.218.687-.487 0-.243-.013-1.05-.013-1.91C7 20.059 6.35 18.957 6.15 18.38c-.113-.295-.6-1.205-1.025-1.448-.35-.192-.85-.667-.013-.68.788-.012 1.35.744 1.538 1.051.9 1.551 2.338 1.116 2.912.846.088-.666.35-1.115.638-1.371-2.225-.256-4.55-1.14-4.55-5.062 0-1.115.387-2.038 1.025-2.756-.1-.256-.45-1.307.1-2.717 0 0 .837-.269 2.75 1.051.8-.23 1.65-.346 2.5-.346.85 0 1.7.115 2.5.346 1.912-1.333 2.75-1.05 2.75-1.05.55 1.409.2 2.46.1 2.716.637.718 1.025 1.628 1.025 2.756 0 3.934-2.337 4.806-4.562 5.062.362.32.675.936.675 1.897 0 1.371-.013 2.473-.013 2.82 0 .268.188.589.688.486a10.039 10.039 0 0 0 4.932-3.74A10.447 10.447 0 0 0 22 12.253C22 6.588 17.525 2 12 2Z">
+                                  </path>
+                                </svg>
+                                <span className="ml-4">Follow on GitHub</span>
+                              </a>
+                            </li>
+                            <li className="mt-4 flex">
+                              <a className="group flex text-sm font-medium text-zinc-800 transition hover:text-teal-500 dark:text-zinc-200 dark:hover:text-teal-500" href="https://www.linkedin.com/in/pragmaticivan/">
+                                <svg viewBox="0 0 24 24" aria-hidden="true" className="h-6 w-6 flex-none fill-zinc-500 transition group-hover:fill-teal-500">
+                                  <path
+                                      d="M18.335 18.339H15.67v-4.177c0-.996-.02-2.278-1.39-2.278-1.389 0-1.601 1.084-1.601 2.205v4.25h-2.666V9.75h2.56v1.17h.035c.358-.674 1.228-1.387 2.528-1.387 2.7 0 3.2 1.778 3.2 4.091v4.715zM7.003 8.575a1.546 1.546 0 01-1.548-1.549 1.548 1.548 0 111.547 1.549zm1.336 9.764H5.666V9.75H8.34v8.589zM19.67 3H4.329C3.593 3 3 3.58 3 4.297v15.406C3 20.42 3.594 21 4.328 21h15.338C20.4 21 21 20.42 21 19.703V4.297C21 3.58 20.4 3 19.666 3h.003z">
+                                  </path>
+                                </svg>
+                                <span className="ml-4">Follow on LinkedIn</span>
+                              </a>
+                            </li>
+                            <li className="mt-4 border-t border-zinc-100 dark:border-zinc-700/40 flex">
+                              <a className="group flex text-sm font-medium text-zinc-800 transition hover:text-teal-500 dark:text-zinc-200 dark:hover:text-teal-500" href="mailto:[email protected]">
+                                <svg viewBox="0 0 24 24" aria-hidden="true" className="h-6 w-6 flex-none fill-zinc-500 transition group-hover:fill-teal-500">
+                                  <path fill-rule="evenodd"
+                                      d="M6 5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3H6Zm.245 2.187a.75.75 0 0 0-.99 1.126l6.25 5.5a.75.75 0 0 0 .99 0l6.25-5.5a.75.75 0 0 0-.99-1.126L12 12.251 6.245 7.187Z">
+                                  </path>
+                                </svg>
+                                <span className="ml-4">[email protected]</span>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
-    <div className={styles.content}>
-      <div>
-        <p>
-          <FastReadText text={'American citizen, born and raised in Brazil.'} />
-        </p>
-        <p>
-          <FastReadText
-            text={
-              'I currently work on Platform Engineering and Developer Experience with Typescript, Go and Kubernetes.'
-            }
-          />
-        </p>
-        <p>
-          <FastReadText text={'I live in Austin-TX and work for Everquote.'} />
-        </p>
-      </div>
-      <div>
-        <p>
-          <FastReadText
-            text={`When I'm not at my computer, I love to travel, geek about finance, coffee, dancing, and volleyball.`}
-          />
-        </p>
-        <p>
-          <FastReadText
-            text={`I've been adventuring with a few dance styles in my free time, but my favorite is Lindy Hop!`}
-          />
-        </p>
-      </div>
-    </div>
-  </div>
+</main>
 );
 
 export default GeneralDescription;
diff --git a/components/GeneralDescription/styles.module.scss b/components/GeneralDescription/styles.module.scss
@@ -30,6 +30,9 @@
   div {
     width: 50%;
   }
+  b {
+    font-weight: bold;
+  }
 }
 
 .GeneralDescription:after {

diff --git a/components/NavigationBar/index.tsx b/components/NavigationBar/index.tsx
@@ -26,6 +26,11 @@ const NavigationBar = (props: Props = { dark: false }) => {
       </h1>
       <nav className={styles.menu}>
         <ul>
+          <li>
+            <Link href="/about" title="About">
+              About
+            </Link>
+          </li>
           <li>
             <Link href="/blog" title="Blog">
               Blog
@@ -44,11 +49,6 @@ const NavigationBar = (props: Props = { dark: false }) => {
               Open Source
             </Link>
           </li>
-          <li>
-            <Link href="/about" title="About">
-              About
-            </Link>
-          </li>
         </ul>
       </nav>
     </div>

diff --git a/lib/google-analytics.ts b/lib/google-analytics.ts
diff --git a/lib/site-metadata.ts b/lib/site-metadata.ts
@@ -41,6 +41,9 @@ export const siteMetadata = {
     // googleAnalytics: {
     //   googleAnalyticsId: '', // e.g. G-XXXXXXX
     // },
+    googleTagManager: {
+      googleTagManagerId: 'G-7ZH9QQZZZ1'
+    }
   },
   newsletter: {
     // supports mailchimp, buttondown, convertkit, klaviyo, revue, emailoctopus

diff --git a/styles/home.module.scss b/styles/home.module.scss
@@ -1,5 +1,4 @@
 .header {
   background: url('../public/images/bg-home-header.png');
   height: 550px;
-}
-
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -30,6 +30,9 @@ @@
       div {
         width: 50%;
       }
+      b {
+        font-weight: bold;
+      }
     }
     .GeneralDescription:after {
@@ Expand Down @@