From 5c1148f7284465c816aa2f67e4e7793d7a5913a5 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 24 Feb 2024 18:22:44 +0100
Subject: [PATCH] theme & layout changes

---
 index.html                               |  2 +-
 src/components/Navbar.tsx                | 70 +++++++++---------------
 src/components/styles/Cursor.styled.ts   |  3 +-
 src/components/styles/Global.styled.ts   |  9 +++
 src/components/styles/Landing.styled.ts  |  3 +-
 src/components/styles/Navbar.styled.ts   |  3 +-
 src/components/styles/Projects.styled.ts | 23 +++++---
 src/locales/en.json                      |  2 +-
 src/locales/pl.json                      |  2 +-
 src/sections/LandingSection.tsx          |  2 +-
 src/theme.ts                             |  2 +-
 11 files changed, 60 insertions(+), 61 deletions(-)

diff --git a/index.html b/index.html
index a01e88d..fd8766c 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
 
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&family=Manrope:wght@300;500;700&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;700&family=Manrope:wght@300;500;700&display=swap" rel="stylesheet" />
 
     <title>Spythere:// portfolio</title>
   </head>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index fb96cce..37dd292 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -6,12 +6,33 @@ interface NavLink {
   href: string;
 }
 
-function scrollToSection(e: React.MouseEvent, href: string) {
-  e.preventDefault();
+const navlinks = [
+  {
+    title: 'about',
+    href: '#about',
+  },
+  {
+    title: 'projects',
+    href: '#projects',
+  },
+  {
+    title: 'contact',
+    href: '#contact',
+  },
+];
 
-  document.querySelector(href)!.scrollIntoView({
-    behavior: 'smooth',
-  });
+export default function Navbar() {
+  const { t } = useTranslation();
+
+  return (
+    <StyledNavbar>
+      <div className="navbar-content">
+        <StyledNavBrand href="#">{t('navbar.title')}</StyledNavBrand>
+
+        <Navlinks navlinks={navlinks} />
+      </div>
+    </StyledNavbar>
+  );
 }
 
 function Navlinks(props: { navlinks: NavLink[] }) {
@@ -22,9 +43,7 @@ function Navlinks(props: { navlinks: NavLink[] }) {
       <ul>
         {props.navlinks.map((navlink) => (
           <li key={navlink.title}>
-            <a href={navlink.href} onClick={(e) => scrollToSection(e, navlink.href)}>
-              {t(`navbar.${navlink.title}`)}
-            </a>
+            <a href={navlink.href}>{t(`navbar.${navlink.title}`)}</a>
           </li>
         ))}
       </ul>
@@ -47,38 +66,3 @@ function LanguageChoice() {
     </StyledLangButton>
   );
 }
-
-const navlinks = [
-  // {
-  //   title: 'home',
-  //   href: '#',
-  // },
-  {
-    title: 'about',
-    href: '#about',
-  },
-  {
-    title: 'projects',
-    href: '#projects',
-  },
-  {
-    title: 'contact',
-    href: '#contact',
-  },
-];
-
-export default function Navbar() {
-  const { t } = useTranslation();
-
-  return (
-    <StyledNavbar>
-      <div className="navbar-content">
-        <StyledNavBrand href="#" onClick={(e) => scrollToSection(e, '#landing')}>
-          {t('navbar.title')}
-        </StyledNavBrand>
-
-        <Navlinks navlinks={navlinks} />
-      </div>
-    </StyledNavbar>
-  );
-}
diff --git a/src/components/styles/Cursor.styled.ts b/src/components/styles/Cursor.styled.ts
index be9a106..6fb5e2d 100644
--- a/src/components/styles/Cursor.styled.ts
+++ b/src/components/styles/Cursor.styled.ts
@@ -7,7 +7,8 @@ export const StyledCursor = styled.span`
 
   width: 10px;
   height: 100%;
-  background-color: ${({ theme }) => theme.colors.accent};
+
+  background-color: ${({ theme }) => theme.colors['accent']};
 
   animation: blinking 1s infinite;
 `;
diff --git a/src/components/styles/Global.styled.ts b/src/components/styles/Global.styled.ts
index 5ce5ab4..4c88070 100644
--- a/src/components/styles/Global.styled.ts
+++ b/src/components/styles/Global.styled.ts
@@ -12,6 +12,8 @@ export const GlobalStyles = createGlobalStyle`
 
       font-synthesis: none;
       text-rendering: optimizeLegibility;
+
+      scroll-behavior: smooth;
    }
 
    * {
@@ -45,6 +47,13 @@ export const GlobalStyles = createGlobalStyle`
       &--accent {
          color: ${({ theme }) => theme.colors.accent};
       }
+
+      &--gradient {
+         background-image: linear-gradient(90deg, rgba(252, 70, 107, 1) 0%, rgba(30, 109, 204, 1) 50%, rgba(252, 70, 107, 1) 100%);
+         -webkit-background-clip: text;
+         background-clip: text;
+         color: transparent;
+      }
    }
 
    section {
diff --git a/src/components/styles/Landing.styled.ts b/src/components/styles/Landing.styled.ts
index 5a54dc5..ed0a01c 100644
--- a/src/components/styles/Landing.styled.ts
+++ b/src/components/styles/Landing.styled.ts
@@ -74,8 +74,9 @@ export const StyledBrandName = styled.div`
     height: 100%;
     top: 0;
     left: 0;
+
     background-color: ${({ theme }) => theme.colors['bg']};
-    border-left: 10px solid ${({ theme }) => theme.colors.accent};
+    border-left: 15px solid ${({ theme }) => theme.colors.accent};
 
     animation: typing 0.75s steps(11) forwards, blinking 1.5s infinite;
   }
diff --git a/src/components/styles/Navbar.styled.ts b/src/components/styles/Navbar.styled.ts
index be38f30..140774e 100644
--- a/src/components/styles/Navbar.styled.ts
+++ b/src/components/styles/Navbar.styled.ts
@@ -6,7 +6,7 @@ export const StyledNavbar = styled.nav`
   left: 0;
   z-index: 1000;
   width: 100%;
-  background-color: ${({ theme }) => theme.colors['500']};
+  background-color: black;
 
   .navbar-content {
     display: flex;
@@ -24,7 +24,6 @@ export const StyledNavbar = styled.nav`
 export const StyledNavBrand = styled.a`
   opacity: 0.85;
   font-weight: 700;
-  color: ${({ theme }) => theme.colors.accent};
   font-size: 1.3em;
 `;
 
diff --git a/src/components/styles/Projects.styled.ts b/src/components/styles/Projects.styled.ts
index 079f71e..e448ed0 100644
--- a/src/components/styles/Projects.styled.ts
+++ b/src/components/styles/Projects.styled.ts
@@ -8,7 +8,8 @@ export const StyledProjects = styled.section`
   }
 
   .showcase-container {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
     flex-direction: column;
     gap: 2em;
   }
@@ -17,19 +18,21 @@ export const StyledProjects = styled.section`
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 2em;
+
+    .project-card:first-child {
+      grid-column: 1 / 2 span;
+    }
   }
 
   .project-card {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+
     background-color: ${({ theme }) => theme.colors['600']};
     padding: 0.75em;
     border-radius: 1em;
 
-    &.showcase {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 3.5em;
-    }
-
     .project-thumbnail img,
     .project-badges img {
       border-radius: 1em;
@@ -44,11 +47,12 @@ export const StyledProjects = styled.section`
   .project-content {
     display: flex;
     flex-direction: column;
+    height: 100%;
   }
 
   hr {
     width: 100%;
-    border: 1px solid white;
+    border: 1px solid #aaa;
     margin: 0.5em 0;
   }
 
@@ -87,12 +91,13 @@ export const StyledProjects = styled.section`
     text-align: justify;
 
     height: 100%;
-    margin-bottom: 1em;
   }
 
   .project-actions {
     display: flex;
     gap: 1em;
+    align-self: flex-end;
+    margin-top: 2em;
 
     a {
       padding: 0.25em;
diff --git a/src/locales/en.json b/src/locales/en.json
index 0072346..93607d2 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,6 +1,6 @@
 {
   "navbar": {
-    "title": "Spythere Portfolio",
+    "title": "SPYTHERE://",
     "home": "HOME",
     "about": "ABOUT",
     "projects": "PROJECTS",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index a87e9c0..e873f8c 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -1,6 +1,6 @@
 {
   "navbar": {
-    "title": "Spythere Portfolio",
+    "title": "SPYTHERE://",
     "home": "",
     "about": "O MNIE",
     "projects": "PROJEKTY",
diff --git a/src/sections/LandingSection.tsx b/src/sections/LandingSection.tsx
index 54720ef..49ed9e2 100644
--- a/src/sections/LandingSection.tsx
+++ b/src/sections/LandingSection.tsx
@@ -20,7 +20,7 @@ export default function LandingSection() {
             <b className="greeting">Hello, I'm</b>
 
             <StyledBrandName>
-              <span className="text--accent">SPYTHERE</span>://
+              <b className="text--gradient">SPYTHERE://</b>
             </StyledBrandName>
 
             <div className="description">an amatour and self-taught front-end and back-end developer from Poland!</div>
diff --git a/src/theme.ts b/src/theme.ts
index 5a2f070..260d0f0 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -6,7 +6,7 @@ export const theme = {
     500: '#1b263b',
     600: '#111',
     bg: '#22252b',
-    accent: '#ffbd00',
+    accent: '#526fff',
   },
   fonts: {
     primary: 'Manrope, system-ui, Arial, sans-serif',