Skip to content

Commit d5d0ea8

Browse files
retrozinndevretrozinndev
authored
Merge pull request #37 from retrozinndev/devel
💄 updated design to yellow, changed animations, refactoring
2 parents 1f06a0a + 93e5fc6 commit d5d0ea8

File tree

9 files changed

+130
-103
lines changed

9 files changed

+130
-103
lines changed

‎src/components/Footer.astro

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,25 @@
11
---
22
import { useTranslations } from "../i18n/utils";
3+
import "../styles/_colors.css";
34
45
const tr = useTranslations(Astro.params.lang as never);
56
---
67

78
<footer class="footer">
8-
<div class="container">
9-
{ tr("footer.txt1") } &hearts; { tr("footer.txt2") }
10-
· <a href="https://github.com/retrozinndev/retrozinndev.github.io">{ tr("footer.txt3") }</a>
11-
</div>
9+
{ tr("footer.txt1") } &hearts; { tr("footer.txt2") }
10+
· <a href="https://github.com/retrozinndev/retrozinn.dev">{ tr("footer.txt3") }</a>
1211
</footer>
1312

1413
<style>
1514
.footer {
16-
margin-left: 0px;
1715
color: lightgray;
1816
overflow: hidden;
1917
display: block;
2018
width: 100%;
2119
font-family: Free Sans, Open Sans, Segoe UI Alternative, Segoe UI, sans-serif;
22-
font-size: 12.8px;
20+
font-size: 13px;
2321
text-align: center;
24-
}
25-
26-
.container {
27-
width: auto;
28-
padding: 10px;
22+
padding-block: 10px;
2923
}
3024

3125
a {
@@ -34,6 +28,6 @@ const tr = useTranslations(Astro.params.lang as never);
3428
}
3529

3630
a:hover {
37-
color: rgb(91, 91, 185);
31+
color: var(--new-accent-color);
3832
}
39-
</style>
33+
</style>

‎src/components/LinkButton.astro

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
import "../styles/_colors.css";
3+
4+
interface Props {
5+
href: string;
6+
}
7+
8+
const { href } = Astro.props;
9+
---
10+
11+
<a class="link-button" href={ href }>
12+
<slot />
13+
</a>
14+
15+
<style>
16+
17+
a {
18+
display: inline-flex;
19+
margin-inline: 8px;
20+
font-size: normal;
21+
font-weight: 600;
22+
width: fit-content;
23+
box-sizing: content-box;
24+
color: white;
25+
26+
border: solid 0.032em var(--new-accent-color);
27+
padding: 2px 8px;
28+
border-radius: 12px;
29+
text-decoration: none;
30+
-webkit-tap-highlight-color: transparent;
31+
transition: 150ms linear;
32+
}
33+
34+
a:hover {
35+
color: var(--new-accent-color);
36+
background-color: var(--new-darker-background-color);
37+
}
38+
</style>
39+
40+

‎src/components/NavBar.astro

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { useTranslations } from "../i18n/utils.ts";
33
import "../styles/global.css";
44
5-
const lang = Astro.params.lang;
5+
const lang = Astro.params.lang || "en";
66
const tr = useTranslations(lang as never);
77
---
88

@@ -82,10 +82,10 @@ const tr = useTranslations(lang as never);
8282
color: white;
8383
text-decoration: none;
8484
font-weight: bold;
85-
transition: 250ms;
85+
transition: 250ms linear;
8686
}
8787

8888
a:hover {
89-
color: var(--link-color);
89+
color: var(--new-accent-color);
9090
}
91-
</style>
91+
</style>

‎src/components/SocialLinks.astro

Lines changed: 22 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,42 @@
11
---
2-
// Discord User Widget by vendicated (https://widgets.vendicated.dev/)
2+
// Discord User Widget by vendicated (https://vendicated.dev/)
3+
import LinkButton from "./LinkButton.astro";
34
---
45

5-
<iframe
6-
title="Discord user embed"
7-
width="340"
8-
height=120
9-
frameborder="0"
10-
src="https://widgets.vendicated.dev/user?id=568589231954591749&theme=dark&banner=true&full-banner=false&rounded-corners=false&discord-icon=true&badges=false&guess-nitro=false&background-color=%231b1b28&foreground-color=%23ffffff" />
6+
<iframe class="discord-embed"
7+
style="margin-left: 2px;"
8+
title="Discord user embed"
9+
width="340"
10+
height="120"
11+
sandbox="allow-scripts"
12+
frameborder=0
13+
src="https://widgets.vendicated.dev/user?id=568589231954591749&theme=dark&banner=true&full-banner=false&rounded-corners=false&discord-icon=true&badges=false&guess-nitro=true&background-color=%231b1b28&foreground-color=%23fff"
14+
/>
1115

1216
<ul class="stylish-list">
1317
<li>
14-
<img src="/icons/discord.svg" draggable="false"> Discord <a href="https://discord.com/users/568589231954591749">retrozinndev</a>
18+
<img src="/icons/discord.svg" draggable="false"> Discord <LinkButton href="https://discord.com/users/568589231954591749">retrozinndev</LinkButton>
1519
</li>
1620
<li>
17-
<img class="no-brightness" src="/icons/github.svg" draggable="false"> GitHub <a href="https://github.com/retrozinndev">retrozinndev</a>
21+
<img class="no-brightness" src="/icons/github.svg" draggable="false"> GitHub <LinkButton href="https://github.com/retrozinndev">retrozinndev</LinkButton>
1822
</li>
1923
<li>
20-
<img src="/icons/gitlab.svg" draggable="false"> GitLab <a href="https://gitlab.com/retrozinndev">retrozinndev</a>
24+
<img src="/icons/gitlab.svg" draggable="false"> GitLab <LinkButton href="https://gitlab.com/retrozinndev">retrozinndev</LinkButton>
2125
</li>
2226
<li>
23-
<img class="no-brightness" src="/icons/codeberg.svg" draggable="false"> CodeBerg<a href="https://codeberg.org/retrozinndev">retrozinndev</a>
27+
<img class="no-brightness" src="/icons/codeberg.svg" draggable="false"> CodeBerg <LinkButton href="https://codeberg.org/retrozinndev">retrozinndev</LinkButton>
2428
</li>
2529
<li>
26-
<img class="no-brightness" src="/icons/x.svg" draggable="false"> X/Twitter <a href="https://x.com/retrozinndev">@retrozinndev</a>
30+
<img class="no-brightness" src="/icons/x.svg" draggable="false"> X/Twitter <LinkButton href="https://x.com/retrozinndev">@retrozinndev</LinkButton>
2731
</li>
2832
<li>
29-
<img src="/icons/matrix.svg" draggable="false"> Matrix <a href="https://matrix.to/#/@retrozinndev:matrix.org">@retrozinndev:matrix.org</a>
33+
<img src="/icons/matrix.svg" draggable="false"> Matrix <LinkButton href="https://matrix.to/#/@retrozinndev:matrix.org">@retrozinndev:matrix.org</LinkButton>
3034
</li>
3135
<li>
32-
<img src="/icons/reddit.svg" draggable="false"> Reddit <a href="https://www.reddit.com/user/Much_Clue7037">Much_Clue7037</a>
36+
<img src="/icons/reddit.svg" draggable="false"> Reddit <LinkButton href="https://www.reddit.com/user/Much_Clue7037">Much_Clue7037</LinkButton>
3337
</li>
3438
<li>
35-
<img src="/icons/mail.svg" draggable="false"> Mail <a href="mailto:joaovodias@gmail.com">retrozinndev@gmail.com</a>
39+
<img src="/icons/mail.svg" draggable="false"> Mail <LinkButton href="mailto:joaovodias@gmail.com">retrozinndev@gmail.com</LinkButton>
3640
</li>
3741
</ul>
3842

@@ -44,7 +48,7 @@
4448
}
4549

4650
.stylish-list > li {
47-
display:flex;
51+
display: flex;
4852
width: fit-content;
4953
box-sizing: content-box;
5054
border-radius: 8px;
@@ -55,29 +59,14 @@
5559
justify-content: center;
5660
}
5761

58-
a {
59-
margin-left: 6px;
60-
text-decoration: none;
61-
color: white;
62-
border: 1px solid var(--primary-color);
63-
border-radius: 12px;
64-
background-color: var(--secondary-color);
65-
transition: ease-in 200ms;
66-
padding: 2px;
67-
padding-inline: 4px;
68-
}
69-
70-
a:hover {
71-
color: var(--link-color);
72-
}
73-
7462
img {
7563
width: 22px;
7664
height: 22px;
7765
border-radius: 4px;
7866
margin-right: 6px;
7967
}
68+
8069
img:not(.no-brightness) {
8170
filter: brightness(80000%);
8271
}
83-
</style>
72+
</style>

‎src/layouts/PageLayout.astro

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,21 @@ import "../styles/global.css";
66
interface Props {
77
title: string;
88
icon: string;
9-
lang: string;
109
}
11-
const { title, icon, lang } = Astro.props;
10+
const { title, icon } = Astro.props;
1211
---
1312

1413
<!doctype html>
15-
<html lang={ lang }>
14+
<html lang="en">
1615
<head>
1716
<meta charset="UTF-8">
1817
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1918
<title>{ title }</title>
2019
<link rel="icon" href={ icon }>
2120
</head>
2221
<NavBar />
23-
24-
<slot />
25-
22+
<body class="dark">
23+
<slot />
24+
</body>
2625
<Footer />
27-
</html>
26+
</html>

‎src/pages/[lang]/index.astro

Lines changed: 25 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -3,67 +3,51 @@ import { getStaticPaths } from "../../i18n/route.ts";
33
import { useTranslations } from "../../i18n/utils.ts";
44
import SocialLinks from '../../components/SocialLinks.astro';
55
import PageLayout from '../../layouts/PageLayout.astro';
6+
import LinkButton from "../../components/LinkButton.astro";
67
import "../../styles/_colors.css";
78
89
export { getStaticPaths };
910
const tr = useTranslations(Astro.params.lang as never);
1011
---
1112

12-
<PageLayout title={ "retrozinndev - Home" } icon="https://github.com/retrozinndev.png" lang="en-US">
13-
<body>
14-
<div class="container">
15-
<div class="about-section title">
16-
<h1>{ tr("about.title") } <span class="highlight">João!</span> </h1>
17-
</div>
18-
<div class="about" id="about">
19-
{ tr("about.description") }
20-
</div>
21-
<a class="projects-link" href={ `/${Astro.params.lang}/projects` }>
22-
<span id="projects">{ tr("about.projects") } &UpperRightArrow;</span>
23-
</a>
24-
<div class="socials ul" id="socials">
25-
<h2>{ tr("about.socials_title") }</h2>
26-
<SocialLinks />
27-
</div>
13+
<PageLayout title={ "retrozinndev - Home" } icon="https://github.com/retrozinndev.png">
14+
<div class="container">
15+
<div class="about-section title">
16+
<h1>{ tr("about.title") } <span class="highlight">João!</span> </h1>
2817
</div>
29-
</body>
18+
<div class="about" id="about">
19+
{ tr("about.description") }
20+
</div>
21+
<br>
22+
<LinkButton href=`/${Astro.params.lang}/projects`>
23+
{ tr("about.projects") } &UpperRightArrow;
24+
</LinkButton>
25+
<br>
26+
<div class="socials ul" id="socials">
27+
<h2>{ tr("about.socials_title") }</h2>
28+
<SocialLinks />
29+
</div>
30+
</div>
31+
3032
<style>
3133
.container {
32-
margin-left: 8%;
34+
padding-inline: 6%;
3335
width: fit-content;
3436
font-weight: 500;
3537
}
3638

3739
#projects {
3840
display: inline-flex;
39-
margin: 20px 0;
4041
font-size: larger;
4142
font-weight: 600;
42-
width: fit-content;
43-
box-sizing: border-box;
44-
background-color: var(--secondary-color-darker);
45-
border: solid 0.032em var(--secondary-color);
46-
padding: 2px 8px;
47-
border-radius: 12px;
48-
}
49-
50-
.projects-link {
51-
text-decoration: none;
52-
-webkit-tap-highlight-color: transparent;
53-
}
54-
55-
a {
56-
color: white;
57-
text-decoration-thickness: 2px;
58-
transition: ease-in 150ms;
59-
}
60-
61-
a:hover {
62-
color: var(--link-color);
6343
}
6444

6545
p {
6646
line-height: 1.2rem;
6747
}
48+
49+
h1 {
50+
font-size: 40px;
51+
}
6852
</style>
69-
</PageLayout>
53+
</PageLayout>

‎src/pages/[lang]/stack.astro

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
import PageLayout from "../../layouts/PageLayout.astro";
3+
4+
5+
---
6+
7+
<PageLayout title="Tech Stack" icon="https://github.com/retrozinndev.png">
8+
<div class="container">
9+
<>
10+
</div>
11+
12+
<style>
13+
14+
15+
16+
</style>
17+
</PageLayout>

‎src/styles/_colors.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11

22
:root {
33
--navbar-color: rgb(47, 49, 54);
4+
--new-background-color: #1c1c15;
5+
--new-darker-background-color: #5c5c16;
6+
--new-accent-color: #e0c82b;
7+
--new-darker-accent-color: #ad9c2a;
48
--background-color: #1e1e1f;
59
--primary-color: #3a4750;
610
--secondary-color: #343c42;
711
--secondary-color-darker: #1f2931;
812
--link-color: #2f82c2;
913
--text-emphasis-color: #2c73a5;
10-
}
14+
}

‎src/styles/global.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ body {
2323
overflow-inline: clip;
2424
color-scheme: dark;
2525
color: white;
26-
background-color: var(--background-color);
26+
background-color: var(--new-background-color);
2727
margin: auto;
2828
}
2929

@@ -43,15 +43,15 @@ h3 {
4343
position: flex;
4444
font-style: bolder;
4545
font-weight: bolder;
46-
color: var(--text-emphasis-color);
46+
color: var(--new-accent-color);
4747
transition: ease-in-out 500ms;
4848
}
4949

5050
.highlight:hover {
51-
color: wheat;
51+
color: var(--new-accent-color);
5252
}
5353

5454
iframe {
55-
background-color: var(--background-color);
55+
border: 0.005em solid white;
5656
border-radius: 12px;
5757
}

0 commit comments

Comments
 (0)