Skip to content

Commit 8a6eddb

Browse files
CoutoDevCoutoDev
committed
feat: update styles to use tailwind and change posts types
1 parent 5eebd9a commit 8a6eddb

19 files changed

+468
-437
lines changed

‎astro.config.mjs‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,19 @@
22
import { defineConfig } from 'astro/config';
33
import mdx from '@astrojs/mdx';
44
import sitemap from '@astrojs/sitemap';
5-
65
import react from '@astrojs/react';
6+
import tailwind from '@tailwindcss/vite';
77

88
// https://astro.build/config
99
export default defineConfig({
10-
site: 'https://coutodev.github.io',
11-
integrations: [mdx(), sitemap(), react()],
10+
site: 'https://coutodev.github.io',
11+
integrations: [mdx(), sitemap(), react()],
12+
13+
redirects: {
14+
'/': '/blog',
15+
},
16+
17+
vite: {
18+
plugins: [tailwind()]
19+
}
1220
});

‎package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@
1818
"astro": "^5.7.4",
1919
"react": "^19.1.0",
2020
"react-dom": "^19.1.0",
21-
"swiper": "^11.2.6"
21+
"swiper": "^11.2.6",
22+
"tailwindcss": "^4.1.4"
23+
},
24+
"devDependencies": {
25+
"@tailwindcss/vite": "^4.1.4"
2226
}
2327
}

‎src/components/BaseHead.astro‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,11 @@ import { SITE_TITLE } from '../consts';
77
interface Props {
88
title: string;
99
description: string;
10-
image?: string;
1110
}
1211
1312
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
1413
15-
const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props;
14+
const { title, description } = Astro.props;
1615
---
1716

1817
<!-- Global Metadata -->
@@ -44,13 +43,12 @@ const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props;
4443
<meta property="og:type" content="website" />
4544
<meta property="og:url" content={Astro.url} />
4645
<meta property="og:title" content={title} />
47-
<meta property="og:description" content={description} />
48-
<meta property="og:image" content={new URL(image, Astro.url)} />
46+
<!-- <meta property="og:description" content={description} /> -->
4947

5048
<!-- Twitter -->
5149
<meta property="twitter:card" content="summary_large_image" />
5250
<meta property="twitter:url" content={Astro.url} />
5351
<meta property="twitter:title" content={title} />
5452
<meta property="twitter:description" content={description} />
55-
<meta property="twitter:image" content={new URL(image, Astro.url)} />
53+
<!-- <meta property="twitter:image" content={new URL(image, Astro.url)} /> -->
5654

‎src/components/Footer.astro‎

Lines changed: 17 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,22 @@
22
const today = new Date();
33
---
44

5-
<footer>
6-
&copy; {today.getFullYear()} Vitor Coutinho Fernandes. All rights reserved.
7-
<div class="social-links">
8-
<a href="https://github.com/CoutoDev" target="_blank">
9-
<span class="sr-only">Go to CoutoDev GitHub profile</span>
10-
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/github"
11-
><path
12-
fill="currentColor"
13-
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
14-
></path></svg
15-
>
16-
</a>
17-
<a href="https://www.linkedin.com/in/vitor-coutinho-fernandes" target="_blank">
18-
<span class="sr-only">Visit Vitor Coutinho Fernandes LinkedIn Profile</span>
19-
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/linkedin">
20-
<path
21-
fill="currentColor"
22-
d="M1.5 0a1.5 1.5 0 0 0-1.5 1.5v13a1.5 1.5 0 0 0 1.5 1.5h13a1.5 1.5 0 0 0 1.5-1.5v-13A1.5 1.5 0 0 0 14.5 0h-13zm4.75 12.5H3.75v-7h2.5v7zm-1.25-8.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm9 8.25h-2.5v-3.25c0-.69-.56-1.25-1.25-1.25s-1.25.56-1.25 1.25v3.25h-2.5v-7h2.5v1.031c.45-.623 1.17-1.031 2-1.031 1.38 0 2.5 1.12 2.5 2.5v4.5z"
23-
></path>
24-
</svg>
25-
</a>
5+
<footer class="bg-gray-900 border-t border-green-500/20 py-8">
6+
<div class="container mx-auto px-4">
7+
<p class="text-center text-gray-400 font-atkinson">
8+
&copy; {today.getFullYear()} Vitor Coutinho Fernandes. All rights reserved.
9+
</p>
10+
<div class="flex justify-center gap-6 mt-4">
11+
<a href="https://github.com/CoutoDev" target="_blank" class="text-gray-400 hover:text-green-400 transition-colors" aria-label="Go to CoutoDev GitHub profile">
12+
<svg viewBox="0 0 16 16" width="32" height="32" class="fill-current">
13+
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
14+
</svg>
15+
</a>
16+
<a href="https://www.linkedin.com/in/vitor-coutinho-fernandes" target="_blank" class="text-gray-400 hover:text-green-400 transition-colors" aria-label="Visit Vitor Coutinho Fernandes LinkedIn Profile">
17+
<svg viewBox="0 0 16 16" width="32" height="32" class="fill-current">
18+
<path d="M1.5 0a1.5 1.5 0 0 0-1.5 1.5v13a1.5 1.5 0 0 0 1.5 1.5h13a1.5 1.5 0 0 0 1.5-1.5v-13A1.5 1.5 0 0 0 14.5 0h-13zm4.75 12.5H3.75v-7h2.5v7zm-1.25-8.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm9 8.25h-2.5v-3.25c0-.69-.56-1.25-1.25-1.25s-1.25.56-1.25 1.25v3.25h-2.5v-7h2.5v1.031c.45-.623 1.17-1.031 2-1.031 1.38 0 2.5 1.12 2.5 2.5v4.5z"/>
19+
</svg>
20+
</a>
21+
</div>
2622
</div>
2723
</footer>
28-
<style>
29-
footer {
30-
padding: 2em 1em 6em 1em;
31-
background: linear-gradient(var(--gray-gradient)) no-repeat;
32-
color: rgb(var(--gray));
33-
text-align: center;
34-
}
35-
.social-links {
36-
display: flex;
37-
justify-content: center;
38-
gap: 1em;
39-
margin-top: 1em;
40-
}
41-
.social-links a {
42-
text-decoration: none;
43-
color: rgb(var(--gray));
44-
}
45-
.social-links a:hover {
46-
color: rgb(var(--gray-dark));
47-
}
48-
</style>

‎src/components/Header.astro‎

Lines changed: 15 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,25 @@
11
---
2-
import HeaderLink from './HeaderLink.astro';
32
import { SITE_TITLE } from '../consts';
43
---
54

6-
<header>
7-
<nav>
8-
<h2><a href="/">{SITE_TITLE}</a></h2>
9-
<div class="internal-links">
10-
<HeaderLink href="/">Home</HeaderLink>
11-
<HeaderLink href="/blog">Blog</HeaderLink>
12-
<HeaderLink href="/about">About</HeaderLink>
13-
</div>
14-
<div class="social-links">
15-
<a href="https://github.com/CoutoDev" target="_blank">
16-
<span class="sr-only">Go to CoutoDev GitHub profile</span>
17-
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/github"
18-
><path
19-
fill="currentColor"
20-
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
21-
></path></svg
22-
>
5+
<header class="bg-gray-900 border-b border-green-500/20">
6+
<nav class="container mx-auto px-4 py-4 flex justify-between items-center">
7+
<h2>
8+
<a class="text-2xl font-atkinson font-bold text-green-400 hover:text-green-300 transition-colors" href="/">
9+
{SITE_TITLE}
10+
</a>
11+
</h2>
12+
<div class="flex gap-6">
13+
<a href="https://github.com/CoutoDev" target="_blank" class="text-green-400 hover:text-green-300 transition-colors" aria-label="Go to CoutoDev GitHub profile">
14+
<svg viewBox="0 0 16 16" width="32" height="32" class="fill-current">
15+
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
16+
</svg>
2317
</a>
24-
<a href="https://www.linkedin.com/in/vitor-coutinho-fernandes" target="_blank">
25-
<span class="sr-only">Visit Vitor Coutinho Fernandes LinkedIn Profile</span>
26-
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/linkedin">
27-
<path
28-
fill="currentColor"
29-
d="M1.5 0a1.5 1.5 0 0 0-1.5 1.5v13a1.5 1.5 0 0 0 1.5 1.5h13a1.5 1.5 0 0 0 1.5-1.5v-13A1.5 1.5 0 0 0 14.5 0h-13zm4.75 12.5H3.75v-7h2.5v7zm-1.25-8.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm9 8.25h-2.5v-3.25c0-.69-.56-1.25-1.25-1.25s-1.25.56-1.25 1.25v3.25h-2.5v-7h2.5v1.031c.45-.623 1.17-1.031 2-1.031 1.38 0 2.5 1.12 2.5 2.5v4.5z"
30-
></path>
18+
<a href="https://www.linkedin.com/in/vitor-coutinho-fernandes" target="_blank" class="text-green-400 hover:text-green-300 transition-colors" aria-label="Visit Vitor Coutinho Fernandes LinkedIn Profile">
19+
<svg viewBox="0 0 16 16" width="32" height="32" class="fill-current">
20+
<path d="M1.5 0a1.5 1.5 0 0 0-1.5 1.5v13a1.5 1.5 0 0 0 1.5 1.5h13a1.5 1.5 0 0 0 1.5-1.5v-13A1.5 1.5 0 0 0 14.5 0h-13zm4.75 12.5H3.75v-7h2.5v7zm-1.25-8.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm9 8.25h-2.5v-3.25c0-.69-.56-1.25-1.25-1.25s-1.25.56-1.25 1.25v3.25h-2.5v-7h2.5v1.031c.45-.623 1.17-1.031 2-1.031 1.38 0 2.5 1.12 2.5 2.5v4.5z"/>
3121
</svg>
3222
</a>
3323
</div>
3424
</nav>
3525
</header>
36-
<style>
37-
header {
38-
margin: 0;
39-
padding: 0 1em;
40-
background: white;
41-
box-shadow: 0 2px 8px rgba(var(--black), 5%);
42-
}
43-
h2 {
44-
margin: 0;
45-
font-size: 1em;
46-
}
47-
48-
h2 a,
49-
h2 a.active {
50-
text-decoration: none;
51-
}
52-
nav {
53-
display: flex;
54-
align-items: center;
55-
justify-content: space-between;
56-
}
57-
nav a {
58-
padding: 1em 0.5em;
59-
color: var(--black);
60-
border-bottom: 4px solid transparent;
61-
text-decoration: none;
62-
}
63-
nav a.active {
64-
text-decoration: none;
65-
border-bottom-color: var(--accent);
66-
}
67-
.social-links,
68-
.social-links a {
69-
display: flex;
70-
}
71-
@media (max-width: 720px) {
72-
.social-links {
73-
display: none;
74-
}
75-
}
76-
</style>

‎src/components/HeaderLink.astro‎

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

‎src/content.config.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ const blog = defineCollection({
1111
// Transform string to Date object
1212
pubDate: z.coerce.date(),
1313
updatedDate: z.coerce.date().optional(),
14-
heroImage: z.string().optional(),
1514
carouselImages: z.array(z.string()).optional(),
1615
}),
1716
});

‎src/content/blog/using-mdx copy 2.mdx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
title: 'Using MDX'
3+
description: 'Lorem ipsum dolor sit amet'
4+
pubDate: 'Jun 01 2024'
5+
carouselImages: ['/blog-placeholder-1.jpg', '/blog-placeholder-2.jpg', '/blog-placeholder-3.jpg']
6+
---
7+
8+
## Teste
9+

‎src/content/blog/using-mdx copy 3.mdx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
title: 'Using MDX'
3+
description: 'Lorem ipsum dolor sit amet'
4+
pubDate: 'Jun 01 2024'
5+
carouselImages: ['/blog-placeholder-1.jpg', '/blog-placeholder-2.jpg', '/blog-placeholder-3.jpg']
6+
---
7+
8+
## Teste
9+

‎src/content/blog/using-mdx copy 4.mdx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
title: 'Using MDX'
3+
description: 'Lorem ipsum dolor sit amet'
4+
pubDate: 'Jun 01 2024'
5+
carouselImages: ['/blog-placeholder-1.jpg', '/blog-placeholder-2.jpg', '/blog-placeholder-3.jpg']
6+
---
7+
8+
## Teste
9+

0 commit comments

Comments
 (0)