theme & layout changes

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>

src/components/Navbar.tsx

@@ -6,12 +6,33 @@ interface NavLink {
   href: string;
 }
 
-function scrollToSection(e: React.MouseEvent, href: string) {
+const navlinks = [
-  e.preventDefault();
+  {
+    title: 'about',
+    href: '#about',
+  },
+  {
+    title: 'projects',
+    href: '#projects',
+  },
+  {
+    title: 'contact',
+    href: '#contact',
+  },
+];
 
-  document.querySelector(href)!.scrollIntoView({
+export default function Navbar() {
-    behavior: 'smooth',
+  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)}>
+            <a href={navlink.href}>{t(`navbar.${navlink.title}`)}</a>
-              {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>
-  );
-}

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;
 `;

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 {

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;
   }

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;
 `;
 

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;

src/locales/en.json

@@ -1,6 +1,6 @@
 {
   "navbar": {
-    "title": "Spythere Portfolio",
+    "title": "SPYTHERE://",
     "home": "HOME",
     "about": "ABOUT",
     "projects": "PROJECTS",

src/locales/pl.json

@@ -1,6 +1,6 @@
 {
   "navbar": {
-    "title": "Spythere Portfolio",
+    "title": "SPYTHERE://",
     "home": "",
     "about": "O MNIE",
     "projects": "PROJEKTY",

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>

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',