Skip to content

Commit 1f6c0b5

Browse files
lucsmachadolucsmachado
committed
feat: add nav with active link indication
1 parent 7bfb9a8 commit 1f6c0b5

File tree

6 files changed

+199
-166
lines changed

6 files changed

+199
-166
lines changed

‎src/components/Footer.astro

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
import { Icon } from "astro-icon";
3+
---
4+
5+
<footer class="pt-8 flex flex-col items-center gap-8">
6+
<p class="text-center">
7+
Made with <Icon
8+
name="mdi:heart"
9+
class="text-white-500 w-4 inline-block hover:animate-pulse hover:text-red-500 ease-in duration-300"
10+
/> by yours truly.
11+
<br />
12+
Built with free and open-source software.
13+
</p>
14+
<section class="w-fit grayscale hover:grayscale-0 ease-in duration-200">
15+
<ul class="flex justify-center items-center gap-8">
16+
<li title="React">
17+
<Icon class="w-8" name="logos:react" />
18+
</li>
19+
<li title="Tailwind CSS">
20+
<Icon class="w-8" name="logos:tailwindcss-icon" />
21+
</li>
22+
<li title="Astro">
23+
<Icon class="w-8" name="vscode-icons:file-type-astro" />
24+
</li>
25+
<li title="Neovim">
26+
<Icon class="w-24" name="logos:neovim" />
27+
</li>
28+
</ul>
29+
</section>
30+
</footer>

‎src/components/Header.astro

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
import Nav from "../components/Nav.astro";
3+
import SocialMedia from "../components/SocialMedia.astro";
4+
5+
const socialMedia = [
6+
{
7+
label: "GitHub",
8+
icon: "mdi:github",
9+
url: "https://github.com/lucsmachado/",
10+
},
11+
{
12+
label: "LinkedIn",
13+
icon: "mdi:linkedin",
14+
url: "https://www.linkedin.com/in/lucascarmac/",
15+
},
16+
{
17+
label: "YouTube",
18+
icon: "mdi:youtube",
19+
url: "https://www.youtube.com/@lucasmachado6447/videos",
20+
},
21+
];
22+
---
23+
24+
<header
25+
class="lg:py-24 lg:sticky lg:top-0 lg:max-h-screen lg:w-1/2 lg:flex lg:flex-col lg:justify-between"
26+
>
27+
<section class="flex flex-col gap-8">
28+
<img
29+
src="https://avatars.githubusercontent.com/u/73367620?v=4"
30+
alt="A picture of Lucas, a young man with glasses, a beard and a black t-shirt, smiling on a bright day outside"
31+
class="rounded-full aspect-square w-64"
32+
/>
33+
<div class="flex flex-col gap-2">
34+
<h1 class="text-4xl sm:text-5xl font-bold tracking-tight text-slate-200">
35+
Lucas Machado
36+
</h1>
37+
<h2 class="text-lg sm:text-xl font-medium tracking-tight text-slate-200">
38+
Junior Developer
39+
</h2>
40+
<p class="max-w-sm leading-normal">
41+
Computer Science major and full-time front-end developer. I love
42+
building interactive and accessible user experiences for the web.
43+
</p>
44+
<Nav />
45+
</div>
46+
</section>
47+
<div class="pt-8">
48+
<ul class="flex flex-wrap gap-8">
49+
{
50+
socialMedia.map((item) => (
51+
<li>
52+
<SocialMedia label={item.label} icon={item.icon} url={item.url} />
53+
</li>
54+
))
55+
}
56+
</ul>
57+
</div>
58+
</header>

‎src/components/Nav.astro

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
const pathname = new URL(Astro.request.url).pathname;
3+
4+
const navLinks = [
5+
{
6+
label: "Home",
7+
url: "/",
8+
},
9+
{
10+
label: "Blog",
11+
url: "/blog",
12+
},
13+
];
14+
---
15+
16+
<nav class="pt-8 w-max">
17+
<ul>
18+
{
19+
navLinks.map((item) => (
20+
<li class="py-3">
21+
<a
22+
href={item.url}
23+
class={`${
24+
pathname === item.url ? "active" : ""
25+
} text-sm font-bold uppercase tracking-widest text-slate-500 hover:text-slate-200 focus-visible:text-slate-200 transition-all motion-reduce:transition-none`}
26+
>
27+
{item.label}
28+
</a>
29+
</li>
30+
))
31+
}
32+
</ul>
33+
</nav>
34+
<style>
35+
.active {
36+
@apply text-slate-200;
37+
}
38+
</style>

‎src/layouts/Layout.astro

+19-28
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
---
2+
import Header from "../components/Header.astro";
3+
import Footer from "../components/Footer.astro";
4+
25
interface Props {
36
title: string;
47
description: string;
@@ -18,37 +21,25 @@ const { title, description } = Astro.props;
1821
<title>{title}</title>
1922
</head>
2023
<body
21-
class="bg-slate-900 leading-relaxed text-slate-400 antialiased selection:bg-teal-300 selection:text-teal-900"
24+
class="bg-slate-900 leading-relaxed text-slate-400 antialiased selection:bg-teal-300 selection:text-teal-900 mx-auto min-h-screen max-w-screen-xl px-6 py-12 md:px-12 md:py-20 lg:px-24 lg:py-0 lg:flex lg:justify-between lg:gap-4"
2225
>
23-
<slot />
26+
<Header />
27+
<main
28+
class="pt-24 lg:w-1/2 lg:py-24 lg:flex lg:flex-col lg:justify-between"
29+
>
30+
<slot />
31+
<Footer />
32+
</main>
2433
</body>
2534
</html>
2635
<style is:global>
27-
:root {
28-
--accent: 136, 58, 234;
29-
--accent-light: 224, 204, 250;
30-
--accent-dark: 49, 10, 101;
31-
--accent-gradient: linear-gradient(
32-
45deg,
33-
rgb(var(--accent)),
34-
rgb(var(--accent-light)) 30%,
35-
white 60%
36-
);
37-
}
38-
html {
39-
font-family: system-ui, sans-serif;
40-
background: #13151a;
41-
background-size: 224px;
42-
}
43-
code {
44-
font-family:
45-
Menlo,
46-
Monaco,
47-
Lucida Console,
48-
Liberation Mono,
49-
DejaVu Sans Mono,
50-
Bitstream Vera Sans Mono,
51-
Courier New,
52-
monospace;
36+
@tailwind base;
37+
@tailwind components;
38+
@tailwind utilities;
39+
40+
@layer base {
41+
html {
42+
@apply bg-slate-900 text-slate-400 font-sans;
43+
}
5344
}
5445
</style>

‎src/pages/blog.astro

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
import Layout from "../layouts/Layout.astro";
3+
4+
const metadata = {
5+
title: "The Lucas Machado Blog",
6+
description: "Lucas Machado's personal blog.",
7+
};
8+
---
9+
10+
<Layout {...metadata}>
11+
<h1>Blog</h1>
12+
</Layout>

‎src/pages/index.astro

+42-138
Original file line numberDiff line numberDiff line change
@@ -1,151 +1,55 @@
11
---
22
import Layout from "../layouts/Layout.astro";
33
import Experience from "../components/Experience.astro";
4-
import SocialMedia from "../components/SocialMedia.astro";
5-
import { Icon } from "astro-icon";
64
75
const metadata = {
86
title: "Lucas Machado",
97
description:
108
"Lucas Machado is a software engineer who builds accessible and interactive user experiences for the web.",
119
};
12-
13-
const socialMedia = [
14-
{
15-
label: "GitHub",
16-
icon: "mdi:github",
17-
url: "https://github.com/lucsmachado/",
18-
},
19-
{
20-
label: "LinkedIn",
21-
icon: "mdi:linkedin",
22-
url: "https://www.linkedin.com/in/lucascarmac/",
23-
},
24-
{
25-
label: "YouTube",
26-
icon: "mdi:youtube",
27-
url: "https://www.youtube.com/@lucasmachado6447/videos",
28-
},
29-
];
3010
---
3111

3212
<Layout {...metadata}>
33-
<div
34-
class="mx-auto min-h-screen max-w-screen-xl px-6 py-12 md:px-12 md:py-20 lg:px-24 lg:py-0 lg:flex lg:justify-between lg:gap-4"
35-
>
36-
<header
37-
class="lg:py-24 lg:sticky lg:top-0 lg:max-h-screen lg:w-1/2 lg:flex lg:flex-col lg:justify-between"
38-
>
39-
<section class="flex flex-col gap-8">
40-
<img
41-
src="https://avatars.githubusercontent.com/u/73367620?v=4"
42-
alt="A picture of Lucas, a young man with glasses, a beard and a black t-shirt, smiling on a bright day outside"
43-
class="rounded-full aspect-square w-64"
44-
/>
45-
<div class="flex flex-col gap-2">
46-
<h1
47-
class="text-4xl sm:text-5xl font-bold tracking-tight text-slate-200"
48-
>
49-
Lucas Machado
50-
</h1>
51-
<h2
52-
class="text-lg sm:text-xl font-medium tracking-tight text-slate-200"
53-
>
54-
Junior Developer
55-
</h2>
56-
<p class="max-w-sm leading-normal">
57-
Computer Science major and full-time front-end developer. I love
58-
building interactive and accessible user experiences for the web.
59-
</p>
60-
</div>
61-
</section>
62-
<div class="pt-8">
63-
<ul class="flex flex-wrap gap-8">
64-
{
65-
socialMedia.map((item) => (
66-
<li>
67-
<SocialMedia
68-
label={item.label}
69-
icon={item.icon}
70-
url={item.url}
71-
/>
72-
</li>
73-
))
74-
}
75-
</ul>
76-
</div>
77-
</header>
78-
<main
79-
class="pt-24 lg:w-1/2 lg:py-24 lg:flex lg:flex-col lg:justify-between"
80-
>
81-
<ol class="flex flex-col gap-8">
82-
<li>
83-
<Experience
84-
position="Junior Front-End Developer"
85-
company={{ name: "Onyma", website: "https://www.onyma.digital/" }}
86-
duration={{ start: "SEP 2023", end: "PRESENT" }}
87-
description="Promoted to a full-time developer position. Currently working on delivering new features for the company's many web apps. Recent projects include an AI-powered chatbot."
88-
skills={[
89-
"React",
90-
"JavaScript",
91-
"TypeScript",
92-
"Next",
93-
"Redux",
94-
"Jest",
95-
"React Router",
96-
"Vite",
97-
"Scrum",
98-
"Linux",
99-
]}
100-
/>
101-
</li>
102-
<li>
103-
<Experience
104-
position="Front-End Developer Intern"
105-
company={{ name: "Onyma", website: "https://www.onyma.digital/" }}
106-
duration={{ start: "MAR 2022", end: "AUG 2023" }}
107-
description="Started developing, maintaining, and shipping production code for a health-tech startup. Acquired hands-on experience while working on multiple projects, ranging from landing pages to interactive dashboards."
108-
skills={[
109-
"HTML",
110-
"CSS",
111-
"JavaScript",
112-
"TypeScript",
113-
"React",
114-
"Next",
115-
"Context API",
116-
"Styled Components",
117-
"Git",
118-
"GitHub",
119-
]}
120-
/>
121-
</li>
122-
</ol>
123-
<footer class="pt-8 flex flex-col items-center gap-8">
124-
<p class="text-center">
125-
Made with <Icon
126-
name="mdi:heart"
127-
class="text-white-500 w-4 inline-block hover:animate-pulse hover:text-red-500 ease-in duration-300"
128-
/> by yours truly.
129-
<br />
130-
Built with free and open-source software.
131-
</p>
132-
<section class="w-fit grayscale hover:grayscale-0 ease-in duration-200">
133-
<ul class="flex justify-center items-center gap-8">
134-
<li title="React">
135-
<Icon class="w-8" name="logos:react" />
136-
</li>
137-
<li title="Tailwind CSS">
138-
<Icon class="w-8" name="logos:tailwindcss-icon" />
139-
</li>
140-
<li title="Astro">
141-
<Icon class="w-8" name="vscode-icons:file-type-astro" />
142-
</li>
143-
<li title="Neovim">
144-
<Icon class="w-24" name="logos:neovim" />
145-
</li>
146-
</ul>
147-
</section>
148-
</footer>
149-
</main>
150-
</div>
13+
<ol class="flex flex-col gap-8">
14+
<li>
15+
<Experience
16+
position="Junior Front-End Developer"
17+
company={{ name: "Onyma", website: "https://www.onyma.digital/" }}
18+
duration={{ start: "SEP 2023", end: "PRESENT" }}
19+
description="Promoted to a full-time developer position. Currently working on delivering new features for the company's many web apps. Recent projects include an AI-powered chatbot."
20+
skills={[
21+
"React",
22+
"JavaScript",
23+
"TypeScript",
24+
"Next",
25+
"Redux",
26+
"Jest",
27+
"React Router",
28+
"Vite",
29+
"Scrum",
30+
"Linux",
31+
]}
32+
/>
33+
</li>
34+
<li>
35+
<Experience
36+
position="Front-End Developer Intern"
37+
company={{ name: "Onyma", website: "https://www.onyma.digital/" }}
38+
duration={{ start: "MAR 2022", end: "AUG 2023" }}
39+
description="Started developing, maintaining, and shipping production code for a health-tech startup. Acquired hands-on experience while working on multiple projects, ranging from landing pages to interactive dashboards."
40+
skills={[
41+
"HTML",
42+
"CSS",
43+
"JavaScript",
44+
"TypeScript",
45+
"React",
46+
"Next",
47+
"Context API",
48+
"Styled Components",
49+
"Git",
50+
"GitHub",
51+
]}
52+
/>
53+
</li>
54+
</ol>
15155
</Layout>

0 commit comments

Comments
 (0)