Skip to content

Commit 8ea988b

Browse files
pragmaticivanpragmaticivan
committed
feat: add About page
1 parent e61e644 commit 8ea988b

File tree

7 files changed

+100
-51
lines changed

7 files changed

+100
-51
lines changed

‎app/layout.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,8 @@ import '../styles/globals.css';
33

44
import React from 'react';
55
import { Metadata } from 'next';
6+
import { GoogleTagManager } from '@next/third-parties/google'
67
import { siteMetadata } from '../lib/site-metadata';
7-
import { GA_TRACKING_ID } from '../lib/google-analytics';
8-
import { GoogleAnalytics } from '@next/third-parties/google'
98

109
export const metadata: Metadata = {
1110
metadataBase: new URL(siteMetadata.siteUrl),
@@ -57,7 +56,8 @@ export default function RootLayout({
5756
<link rel="icon" href="/favicon.png" sizes="any" type="image/png" />
5857

5958
<body>{children}</body>
60-
<GoogleAnalytics gaId={GA_TRACKING_ID} />
59+
60+
<GoogleTagManager gtmId={siteMetadata.analytics.googleTagManager.googleTagManagerId} />
6161
</html>
6262
);
6363
}

‎components/GeneralDescription/index.tsx

Lines changed: 85 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,93 @@
11
import React from 'react';
2-
import styles from './styles.module.scss';
32
import Image from 'next/image';
4-
import FastReadText from '../FastReadText';
53

64
const GeneralDescription = () => (
7-
<div className={styles.description}>
8-
<div className={styles.picture}>
9-
<Image
10-
src="https://avatars2.githubusercontent.com/u/301291?s=400&v=4"
11-
alt="Ivan Santos"
12-
width={200}
13-
height={200}
14-
/>
5+
<main className="flex-auto">
6+
<div className="sm:px-8 mt-16 sm:mt-32">
7+
<div className="mx-auto w-full max-w-7xl lg:px-8">
8+
<div className="relative px-4 sm:px-8 lg:px-12">
9+
<div className="mx-auto max-w-2xl lg:max-w-5xl">
10+
<div className="grid grid-cols-1 gap-y-16 lg:grid-cols-2 lg:grid-rows-[auto_1fr] lg:gap-y-12">
11+
<div className="lg:pl-20">
12+
<div className="max-w-xs px-2.5 lg:max-w-none">
13+
<Image alt="Ivan Santos" loading="lazy" width="300"
14+
height="300" decoding="async" data-nimg="1"
15+
className="aspect-square rotate-6 rounded-2xl bg-zinc-100 object-cover dark:bg-zinc-800"
16+
src="https://avatars2.githubusercontent.com/u/301291?s=400&v=4" />
17+
</div>
18+
</div>
19+
<div className="lg:order-first lg:row-span-2">
20+
<h1 className="text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl dark:text-zinc-100">
21+
Software Engineering. Distributed Systems. Coffee
22+
</h1>
23+
<div className="mt-6 space-y-7 text-base text-zinc-600 dark:text-zinc-400">
24+
<p className='leading-7'>
25+
Howdy! I'm Ivan Santos, a software engineer with a passion for distributed systems and coffee.
26+
Born and raised in Brazil, I moved to the US to pursue my career in tech.
27+
I’ve loved taking things apart and putting them back together since I was a kid. Learning and
28+
improving my craft is what drives me every day.
29+
</p>
30+
<p>
31+
I'm currently exploring Platform Engineering at EverQuote where I had the opportunity to work on really awesome
32+
stuff such as Kubernetes, Observability, Terraform, Go, and more.
33+
</p>
34+
<p>
35+
When I'm not at my computer, I love to travel, geek about finance, coffee, dancing, and volleyball.
36+
</p>
37+
</div>
38+
</div>
39+
<div className="lg:pl-20">
40+
<ul>
41+
<li className="flex">
42+
<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">
43+
<svg viewBox="0 0 24 24" aria-hidden="true"
44+
className="h-6 w-6 flex-none fill-zinc-500 transition group-hover:fill-teal-500">
45+
<path
46+
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">
47+
</path>
48+
</svg>
49+
<span className="ml-4">Follow on X</span>
50+
</a>
51+
</li>
52+
<li className="mt-4 flex">
53+
<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/">
54+
<svg viewBox="0 0 24 24" aria-hidden="true"
55+
className="h-6 w-6 flex-none fill-zinc-500 transition group-hover:fill-teal-500">
56+
<path fill-rule="evenodd" clip-rule="evenodd"
57+
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">
58+
</path>
59+
</svg>
60+
<span className="ml-4">Follow on GitHub</span>
61+
</a>
62+
</li>
63+
<li className="mt-4 flex">
64+
<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/">
65+
<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">
66+
<path
67+
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">
68+
</path>
69+
</svg>
70+
<span className="ml-4">Follow on LinkedIn</span>
71+
</a>
72+
</li>
73+
<li className="mt-4 border-t border-zinc-100 dark:border-zinc-700/40 flex">
74+
<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]">
75+
<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">
76+
<path fill-rule="evenodd"
77+
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">
78+
</path>
79+
</svg>
80+
<span className="ml-4">[email protected]</span>
81+
</a>
82+
</li>
83+
</ul>
84+
</div>
85+
</div>
86+
</div>
87+
</div>
88+
</div>
1589
</div>
16-
<div className={styles.content}>
17-
<div>
18-
<p>
19-
<FastReadText text={'American citizen, born and raised in Brazil.'} />
20-
</p>
21-
<p>
22-
<FastReadText
23-
text={
24-
'I currently work on Platform Engineering and Developer Experience with Typescript, Go and Kubernetes.'
25-
}
26-
/>
27-
</p>
28-
<p>
29-
<FastReadText text={'I live in Austin-TX and work for Everquote.'} />
30-
</p>
31-
</div>
32-
<div>
33-
<p>
34-
<FastReadText
35-
text={`When I'm not at my computer, I love to travel, geek about finance, coffee, dancing, and volleyball.`}
36-
/>
37-
</p>
38-
<p>
39-
<FastReadText
40-
text={`I've been adventuring with a few dance styles in my free time, but my favorite is Lindy Hop!`}
41-
/>
42-
</p>
43-
</div>
44-
</div>
45-
</div>
90+
</main>
4691
);
4792

4893
export default GeneralDescription;

‎components/GeneralDescription/styles.module.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,9 @@
3030
div {
3131
width: 50%;
3232
}
33+
b {
34+
font-weight: bold;
35+
}
3336
}
3437

3538
.GeneralDescription:after {

‎components/NavigationBar/index.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,11 @@ const NavigationBar = (props: Props = { dark: false }) => {
2626
</h1>
2727
<nav className={styles.menu}>
2828
<ul>
29+
<li>
30+
<Link href="/about" title="About">
31+
About
32+
</Link>
33+
</li>
2934
<li>
3035
<Link href="/blog" title="Blog">
3136
Blog
@@ -44,11 +49,6 @@ const NavigationBar = (props: Props = { dark: false }) => {
4449
Open Source
4550
</Link>
4651
</li>
47-
<li>
48-
<Link href="/about" title="About">
49-
About
50-
</Link>
51-
</li>
5252
</ul>
5353
</nav>
5454
</div>

‎lib/google-analytics.ts

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎lib/site-metadata.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,9 @@ export const siteMetadata = {
4141
// googleAnalytics: {
4242
// googleAnalyticsId: '', // e.g. G-XXXXXXX
4343
// },
44+
googleTagManager: {
45+
googleTagManagerId: 'G-7ZH9QQZZZ1'
46+
}
4447
},
4548
newsletter: {
4649
// supports mailchimp, buttondown, convertkit, klaviyo, revue, emailoctopus

‎styles/home.module.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
.header {
22
background: url('../public/images/bg-home-header.png');
33
height: 550px;
4-
}
5-
4+
}

0 commit comments

Comments
 (0)