Skip to content

Commit 0dea0cb

Browse files
pragmaticivanpragmaticivan
committed
feat: wrap up open source page
1 parent 529c0ce commit 0dea0cb

File tree

9 files changed

+175
-143
lines changed

9 files changed

+175
-143
lines changed

‎app/about/page.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,8 @@ export const metadata = genPageMetadata({
1111

1212
const AboutPage = () => (
1313
<>
14-
<header className="header__blog">
15-
<NavigationBar />
16-
</header>
14+
<NavigationBar />
15+
1716
<main className="flex-auto">
1817
<div className="mt-16 sm:mt-32 sm:px-8">
1918
<div className="mx-auto w-full max-w-7xl lg:px-8">

‎app/open-source/page.tsx

Lines changed: 82 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,97 @@
11
import React from 'react';
22
import NavigationBar from '../../components/NavigationBar';
33
import { genPageMetadata } from '../seo';
4-
import styles from './styles.module.scss';
5-
import FastReadText from '../../components/FastReadText';
4+
import Link from 'next/link';
5+
import Image from 'next/image';
6+
import { BsGithub, BsArrowUpRightSquare } from 'react-icons/bs';
7+
import SlideUp from '../../components/SlideUp';
68

79
export const metadata = genPageMetadata({
810
title: `Open Source ✍️`,
911
description: `I share anything that may help others, technologies I'm using and cool things I've made`,
1012
});
1113

14+
const projects = [
15+
{
16+
name: "nestjs-otel",
17+
description:
18+
"OpenTelemetry (Tracing + Metrics) module for Nest framework (node.js)",
19+
image: "/images/project-logo.png",
20+
github: "https://github.com/pragmaticivan/nestjs-otel",
21+
},
22+
{
23+
name: "nest-resend",
24+
description: "Injectable Resend client for your nestjs projects",
25+
image: "/images/project-logo.png",
26+
github: "https://github.com/pragmaticivan/nest-resend",
27+
},
28+
{
29+
name: "dotfiles",
30+
description:
31+
"Your dotfiles are how you personalize your system. These are mine",
32+
image: "/images/project-logo.png",
33+
github: "https://github.com/pragmaticivan/dotfiles",
34+
},
35+
{
36+
name: "nestjs-otel-prom-grafana-tempo",
37+
description:
38+
"Prometheus + Grafana + Tempo + Loki Observability Stack example",
39+
image: "/images/project-logo.png",
40+
github: "https://github.com/pragmaticivan/nestjs-otel-prom-grafana-tempo",
41+
},
42+
]
43+
1244
const OpenSourcePage = () => (
13-
<div>
14-
<header className="header__blog">
45+
<>
1546
<NavigationBar />
16-
</header>
1747

18-
<div className={styles.os}>
19-
<div className={styles.content}>
20-
<h1>Open Source</h1>
21-
<p>
22-
<FastReadText
23-
text={`There's something magical about solving problems and helping others through their journey.`}
24-
/>
25-
</p>
26-
<ul>
27-
<li>
28-
<a
29-
href="https://github.com/pragmaticivan/nestjs-otel"
30-
target="_blank"
31-
>
32-
<b>nestjs-otel</b>
33-
</a>{' '}
34-
- 🔭 OpenTelemetry (Tracing + Metrics) module for Nest framework
35-
(node.js)
36-
</li>
37-
<li>
38-
<a
39-
href="https://github.com/pragmaticivan/guia-do-trabalho-remoto"
40-
target="_blank"
41-
>
42-
<b>guia-do-trabalho-remoto</b>
43-
</a>{' '}
44-
- ✈️ Conjunto de informações, experiências e burocracias para poder
45-
trabalhar remotamente para empresas do mundo todo
46-
</li>
47-
</ul>
48-
</div>
49-
</div>
50-
</div>
48+
<section id="projects" className='mx-auto max-w-3xl px-4 sm:px-6 md:max-w-5xl'>
49+
<h1 className="my-20 text-center text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl dark:text-zinc-100">
50+
Open Source
51+
<hr className="w-6 h-1 mx-auto my-4 bg-cyan-700 border-0 rounded"></hr>
52+
</h1>
53+
54+
<div className="flex flex-col space-y-28 mb-32">
55+
{projects.map((project, idx) => {
56+
return (
57+
<div key={idx}>
58+
<div className="flex flex-col animate-slideUpCubiBezier animation-delay-2 md:flex-row md:space-x-12">
59+
<div className=" md:w-1/3">
60+
<Image
61+
src={project.image}
62+
alt=""
63+
width={500}
64+
height={500}
65+
className="rounded-xl shadow-xl hover:opacity-70"
66+
/>
67+
</div>
68+
<div className="mt-1 md:w-1/2">
69+
<h1 className="text-4xl font-bold mb-6">{project.name}</h1>
70+
<p className="text-xl leading-7 mb-4 text-neutral-600 dark:text-neutral-400">
71+
{project.description}
72+
</p>
73+
<div className="flex flex-row align-bottom space-x-4">
74+
<Link href={project.github} target="_blank">
75+
<BsGithub
76+
size={30}
77+
className="hover:-translate-y-1 transition-transform cursor-pointer"
78+
/>
79+
</Link>
80+
{project.link && <Link href={project.link} target="_blank">
81+
<BsArrowUpRightSquare
82+
size={30}
83+
className="hover:-translate-y-1 transition-transform cursor-pointer"
84+
/>
85+
</Link>}
86+
</div>
87+
</div>
88+
</div>
89+
</div>
90+
)
91+
})}
92+
</div>
93+
</section>
94+
</>
5195
);
5296

5397
export default OpenSourcePage;

‎app/open-source/styles.module.scss

Lines changed: 0 additions & 54 deletions
This file was deleted.

‎app/page.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import styles from '../styles/home.module.scss';
77
export default function Page() {
88
return (
99
<>
10-
<header
10+
<div
1111
className={clsx(
1212
'w-full',
1313
'relative',
@@ -22,7 +22,7 @@ export default function Page() {
2222
HOWDY!
2323
</div>
2424
</div>
25-
</header>
25+
</div>
2626
<section
2727
className={
2828
'container mx-auto max-w-screen-lg p-4 text-center text-2xl font-bold leading-10'

‎app/uses/page.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,7 @@ export const metadata = genPageMetadata({
1515

1616
const IndexPage = () => (
1717
<>
18-
<header className="header__blog">
19-
<NavigationBar />
20-
</header>
18+
<NavigationBar />
2119

2220
<main className="flex-auto">
2321
<div className="mt-16 sm:mt-32 sm:px-8">

‎components/NavigationBar/index.tsx

Lines changed: 42 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -9,49 +9,48 @@ interface Props {
99

1010
const NavigationBar = (props: Props = { dark: false }) => {
1111
return (
12-
<div className="flex flex-wrap justify-center px-10 pt-10 sm:justify-between">
13-
<h1>
14-
<Link href="/" passHref={true}>
15-
<Image
16-
src={
17-
props.dark
18-
? '/images/ivan-logo-white.png'
19-
: '/images/ivan-logo-black.png'
20-
}
21-
width={200}
22-
height={77}
23-
alt="Ivan Santos - Logo"
24-
/>
25-
</Link>
26-
</h1>
27-
<nav className={styles.menu}>
28-
<ul>
29-
<li>
30-
<Link href="/about" title="About">
31-
About
32-
</Link>
33-
</li>
34-
<li>
35-
<Link href="/uses" title="Uses">
36-
Uses
37-
</Link>
38-
</li>
39-
<li>
40-
<Link href="/blog" title="Blog">
41-
Blog
42-
</Link>
43-
</li>
44-
{/* <li>
45-
<Link href="/talks">Talks</Link>
46-
</li> */}
47-
<li>
48-
<Link href="/open-source" title="Open Source">
49-
Open Source
50-
</Link>
51-
</li>
52-
</ul>
53-
</nav>
54-
</div>
12+
<header>
13+
<div className="flex flex-wrap justify-center px-10 pt-10 sm:justify-between">
14+
<h1>
15+
<Link href="/" passHref={true}>
16+
<Image
17+
src={
18+
props.dark
19+
? '/images/ivan-logo-white.png'
20+
: '/images/ivan-logo-black.png'
21+
}
22+
width={200}
23+
height={77}
24+
alt="Ivan Santos - Logo"
25+
/>
26+
</Link>
27+
</h1>
28+
<nav className={styles.menu}>
29+
<ul>
30+
<li>
31+
<Link href="/about" title="About">
32+
About
33+
</Link>
34+
</li>
35+
<li>
36+
<Link href="/uses" title="Uses">
37+
Uses
38+
</Link>
39+
</li>
40+
<li>
41+
<Link href="/blog" title="Blog">
42+
Blog
43+
</Link>
44+
</li>
45+
<li>
46+
<Link href="/open-source" title="Open Source">
47+
Open Source
48+
</Link>
49+
</li>
50+
</ul>
51+
</nav>
52+
</div>
53+
</header>
5554
);
5655
};
5756

‎components/SlideUp/index.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
"use client"
2+
3+
import React, { useEffect, useRef, ReactNode } from "react"
4+
interface Props {
5+
offset?: string
6+
children?: ReactNode
7+
}
8+
9+
export default function SlideUp({ children, offset = "0px" }: Props) {
10+
const ref = useRef(null)
11+
12+
useEffect(() => {
13+
const observer = new IntersectionObserver(
14+
(entries) => {
15+
entries.forEach((entry) => {
16+
if (entry.isIntersecting) {
17+
entry.target.classList.remove("opacity-0")
18+
entry.target.classList.add("animate-slideUpCubiBezier")
19+
}
20+
})
21+
},
22+
{ rootMargin: offset }
23+
)
24+
25+
if (ref.current) {
26+
observer.observe(ref.current)
27+
}
28+
}, [ref])
29+
30+
return (
31+
<div ref={ref} className="relative opacity-0">
32+
{children}
33+
</div>
34+
)
35+
}

‎package-lock.json

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"nextjs-progressbar": "^0.0.16",
2020
"react": "^18.3.1",
2121
"react-dom": "^18.3.1",
22+
"react-icons": "^5.2.1",
2223
"remark": "^15.0.1",
2324
"remark-html": "^16.0.1",
2425
"remark-prism": "^1.3.6",

0 commit comments

Comments
 (0)