💄 updated design to yellow, changed animations

retrozinndev · Jul 17, 2024 · e722d58 · e722d58
1 parent a545409
commit e722d58
Show file tree

Hide file tree

Showing 9 changed files with 123 additions and 99 deletions.
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -1,31 +1,25 @@
 ---
 import { useTranslations } from "../i18n/utils";
+import "../styles/_colors.css";
 
 const tr = useTranslations(Astro.params.lang as never);
 ---
 
 <footer class="footer">
-    <div class="container">
-        { tr("footer.txt1") } &hearts; { tr("footer.txt2") }
-         · <a href="https://github.com/retrozinndev/retrozinndev.github.io">{ tr("footer.txt3") }</a>
-    </div>
+    { tr("footer.txt1") } &hearts; { tr("footer.txt2") }
+     · <a href="https://github.com/retrozinndev/retrozinn.dev">{ tr("footer.txt3") }</a>
 </footer>
 
 <style>
     .footer {
-        margin-left: 0px;
         color: lightgray;
         overflow: hidden;
         display: block;
         width: 100%;
         font-family: Free Sans, Open Sans, Segoe UI Alternative, Segoe UI, sans-serif;
-        font-size: 12.8px;
+        font-size: 13px;
         text-align: center;
-    }
-
-    .container {
-        width: auto;
-        padding: 10px;
+        padding-block: 10px;
     }
 
     a {
@@ -34,6 +28,6 @@ const tr = useTranslations(Astro.params.lang as never);
     }
 
     a:hover {
-        color: rgb(91, 91, 185);
+        color: var(--new-accent-color);
     }
-</style>
+</style>
diff --git a/src/components/LinkButton.astro b/src/components/LinkButton.astro
@@ -0,0 +1,40 @@
+---
+import "../styles/_colors.css";
+
+interface Props {
+    href: string;
+}
+
+const { href } = Astro.props;
+---
+
+<a class="link-button" href={ href }>
+    <slot />
+</a>
+
+<style>
+
+    a {
+        display: inline-flex;
+        margin-inline: 8px;
+        font-size: normal;
+        font-weight: 600;
+        width: fit-content;
+        box-sizing: content-box;
+        color: white;
+
+        border: solid 0.032em var(--new-accent-color);
+        padding: 2px 8px;
+        border-radius: 12px;
+        text-decoration: none;
+        -webkit-tap-highlight-color: transparent;
+        transition: 150ms linear;
+    }
+
+    a:hover {
+        color: var(--new-accent-color);
+        background-color: var(--new-darker-background-color);
+    }
+</style>
+
+
diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
@@ -2,7 +2,7 @@
 import { useTranslations } from "../i18n/utils.ts";
 import "../styles/global.css";
 
-const lang = Astro.params.lang;
+const lang = Astro.params.lang || "en";
 const tr = useTranslations(lang as never);
 ---
 
@@ -82,10 +82,10 @@ const tr = useTranslations(lang as never);
         color: white;
         text-decoration: none;
         font-weight: bold;
-        transition: 250ms;
+        transition: 250ms linear;
     }
 
     a:hover {
-        color: var(--link-color);
+        color: var(--new-accent-color);
     }
-</style>
+</style>
diff --git a/src/components/SocialLinks.astro b/src/components/SocialLinks.astro
@@ -1,40 +1,41 @@
 ---
 // Discord User Widget by vendicated (https://vendicated.dev/)
+import LinkButton from "./LinkButton.astro";
 ---
 
 <iframe class="discord-embed"
-        style="margin-left: 1em;"
+        style="margin-left: 2px;"
         title="Discord user embed"
         width="340"
         height="120"
         sandbox="allow-scripts"
-        frameborder="0"
-        src="https://widgets.vendicated.dev/user?id=568589231954591749&theme=dark&banner=true&full-banner=false&rounded-corners=true&discord-icon=true&badges=false&guess-nitro=true&background-color=%23000000&foreground-color=%23fff" />
+        frameborder=0
+        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" />
 
 <ul class="stylish-list">
     <li>
-        <img src="/icons/discord.svg" draggable="false"> Discord <a href="https://discord.com/users/568589231954591749">retrozinndev</a>
+        <img src="/icons/discord.svg" draggable="false"> Discord <LinkButton href="https://discord.com/users/568589231954591749">retrozinndev</LinkButton>
     </li>
     <li>
-        <img class="no-brightness" src="/icons/github.svg" draggable="false"> GitHub <a href="https://github.com/retrozinndev">retrozinndev</a>
+        <img class="no-brightness" src="/icons/github.svg" draggable="false"> GitHub <LinkButton href="https://github.com/retrozinndev">retrozinndev</LinkButton>
     </li>
     <li>
-        <img src="/icons/gitlab.svg" draggable="false"> GitLab <a href="https://gitlab.com/retrozinndev">retrozinndev</a>
+        <img src="/icons/gitlab.svg" draggable="false"> GitLab <LinkButton href="https://gitlab.com/retrozinndev">retrozinndev</LinkButton>
     </li>
     <li>
-        <img class="no-brightness" src="/icons/codeberg.svg" draggable="false"> CodeBerg<a href="https://codeberg.org/retrozinndev">retrozinndev</a>
+        <img class="no-brightness" src="/icons/codeberg.svg" draggable="false"> CodeBerg <LinkButton href="https://codeberg.org/retrozinndev">retrozinndev</LinkButton>
     </li>
     <li>
-        <img class="no-brightness" src="/icons/x.svg" draggable="false"> X/Twitter <a href="https://x.com/retrozinndev">@retrozinndev</a>
+        <img class="no-brightness" src="/icons/x.svg" draggable="false"> X/Twitter <LinkButton href="https://x.com/retrozinndev">@retrozinndev</LinkButton>
     </li>
     <li>
-        <img src="/icons/matrix.svg" draggable="false"> Matrix <a href="https://matrix.to/#/@retrozinndev:matrix.org">@retrozinndev:matrix.org</a>
+        <img src="/icons/matrix.svg" draggable="false"> Matrix <LinkButton href="https://matrix.to/#/@retrozinndev:matrix.org">@retrozinndev:matrix.org</LinkButton>
     </li>
     <li>
-        <img src="/icons/reddit.svg" draggable="false"> Reddit <a href="https://www.reddit.com/user/Much_Clue7037">Much_Clue7037</a>
+        <img src="/icons/reddit.svg" draggable="false"> Reddit <LinkButton href="https://www.reddit.com/user/Much_Clue7037">Much_Clue7037</LinkButton>
     </li>
     <li>
-        <img src="/icons/mail.svg" draggable="false"> Mail <a href="mailto:joaovodias@gmail.com">retrozinndev@gmail.com</a>
+        <img src="/icons/mail.svg" draggable="false"> Mail <LinkButton href="mailto:joaovodias@gmail.com">retrozinndev@gmail.com</LinkButton>
     </li>
 </ul>
 
@@ -46,7 +47,7 @@
     }
 
     .stylish-list > li {
-        display:flex;
+        display: flex;
         width: fit-content;
         box-sizing: content-box;
         border-radius: 8px;
@@ -57,29 +58,14 @@
         justify-content: center;
     }
 
-    a {
-        margin-left: 6px;
-        text-decoration: none;
-        color: white;
-        border: 1px solid var(--primary-color);
-        border-radius: 12px;
-        background-color: var(--secondary-color);
-        transition: ease-in 200ms;
-        padding: 2px;
-        padding-inline: 4px;
-    }
-
-    a:hover {
-        color: var(--link-color);
-    }
-
     img {
         width: 22px;
         height: 22px;
         border-radius: 4px;
         margin-right: 6px;
     }
+
     img:not(.no-brightness) {
         filter: brightness(80000%);
     }
-</style>
+</style>
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
@@ -6,22 +6,21 @@ import "../styles/global.css";
 interface Props {
     title: string;
     icon: string;
-    lang: string;
 }
-const { title, icon, lang } = Astro.props;
+const { title, icon } = Astro.props;
 ---
 
 <!doctype html>
-<html lang={ lang }>
+<html lang="en">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>{ title }</title>
         <link rel="icon" href={ icon }>
     </head>
     <NavBar />
-
-    <slot />
-
+    <body class="dark">
+        <slot />
+    </body>
     <Footer />
-</html>
+</html>
diff --git a/src/pages/[lang]/index.astro b/src/pages/[lang]/index.astro
@@ -3,67 +3,51 @@ import { getStaticPaths } from "../../i18n/route.ts";
 import { useTranslations }  from "../../i18n/utils.ts";
 import SocialLinks from '../../components/SocialLinks.astro';
 import PageLayout from '../../layouts/PageLayout.astro';
+import LinkButton from "../../components/LinkButton.astro";
 import "../../styles/_colors.css";
 
 export { getStaticPaths };
 const tr = useTranslations(Astro.params.lang as never);
 ---
 
-<PageLayout title={ "retrozinndev - Home" } icon="https://github.com/retrozinndev.png" lang="en-US">
-    <body>
-        <div class="container">
-            <div class="about-section title">
-                    <h1>{ tr("about.title")  } <span class="highlight">João!</span> </h1>
-            </div>
-            <div class="about" id="about">
-                { tr("about.description") }
-            </div>
-            <a class="projects-link" href={ `/${Astro.params.lang}/projects` }>
-                <span id="projects">{ tr("about.projects") } &UpperRightArrow;</span>
-            </a>
-            <div class="socials ul" id="socials">
-                <h2>{ tr("about.socials_title") }</h2>
-                <SocialLinks />
-            </div>
+<PageLayout title={ "retrozinndev - Home" } icon="https://github.com/retrozinndev.png">
+    <div class="container">
+        <div class="about-section title">
+            <h1>{ tr("about.title")  } <span class="highlight">João!</span> </h1>
         </div>
-    </body>
+        <div class="about" id="about">
+            { tr("about.description") }
+        </div>
+        <br>
+        <LinkButton href=`/${Astro.params.lang}/projects`>
+            { tr("about.projects") } &UpperRightArrow;
+        </LinkButton>
+        <br>
+        <div class="socials ul" id="socials">
+            <h2>{ tr("about.socials_title") }</h2>
+            <SocialLinks />
+        </div>
+    </div>
+
     <style>
         .container {
-            margin-left: 8%;
+            padding-inline: 6%;
             width: fit-content;
             font-weight: 500;
         }
 
         #projects {
             display: inline-flex;
-            margin: 20px 0;
             font-size: larger;
             font-weight: 600;
-            width: fit-content;
-            box-sizing: border-box;
-            background-color: var(--secondary-color-darker);
-            border: solid 0.032em var(--secondary-color);
-            padding: 2px 8px;
-            border-radius: 12px;
-        }
-
-        .projects-link {
-            text-decoration: none;
-            -webkit-tap-highlight-color: transparent;
-        }
-
-        a {
-            color: white;
-            text-decoration-thickness: 2px;
-            transition: ease-in 150ms;
-        }
-
-        a:hover {
-            color: var(--link-color);
         }
 
         p {
             line-height: 1.2rem;
         }
+
+        h1 {
+            font-size: 40px;
+        }
     </style>
-</PageLayout>
+</PageLayout>
diff --git a/src/pages/[lang]/stack.astro b/src/pages/[lang]/stack.astro
@@ -0,0 +1,17 @@
+---
+import PageLayout from "../../layouts/PageLayout.astro";
+
+
+---
+
+<PageLayout title="Tech Stack" icon="https://github.com/retrozinndev.png">
+    <div class="container">
+        <>
+    </div>
+
+    <style>
+
+
+
+    </style>
+</PageLayout>
diff --git a/src/styles/_colors.css b/src/styles/_colors.css
@@ -1,10 +1,14 @@
 
 :root {
     --navbar-color: rgb(47, 49, 54);
+    --new-background-color: #1c1c15;
+    --new-darker-background-color: #5c5c16;
+    --new-accent-color: #e0c82b;
+    --new-darker-accent-color: #ad9c2a;
     --background-color: #1e1e1f;
     --primary-color: #3a4750;
     --secondary-color: #343c42;
     --secondary-color-darker: #1f2931; 
     --link-color: #2f82c2;
     --text-emphasis-color: #2c73a5;
-}
+}
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -23,7 +23,7 @@ body {
     overflow-inline: clip;
     color-scheme: dark;
     color: white;
-    background-color: var(--background-color);
+    background-color: var(--new-background-color);
     margin: auto;
 }
 
@@ -43,15 +43,15 @@ h3 {
     position: flex;
     font-style: bolder;
     font-weight: bolder;
-    color: var(--text-emphasis-color);
+    color: var(--new-accent-color);
     transition: ease-in-out 500ms;
 }
 
 .highlight:hover {
-    color: wheat;
+    color: var(--new-accent-color);
 }
 
 iframe {
-    background-color: var(--background-color);
+    border: 0.005em solid white;
     border-radius: 12px;
 }