From d23e1ac0508039f7de3dfc15c643220c290fba6b Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Mon, 4 Sep 2023 17:39:31 +0200
Subject: [PATCH] design

---
 index.html                               |  2 +-
 public/question.svg                      |  6 +-
 src/App.tsx                              |  9 ++-
 src/components/AboutSection.tsx          | 25 ++----
 src/components/Navbar.tsx                | 10 ++-
 src/components/ProjectsSection.tsx       |  2 +-
 src/components/styles/About.styled.ts    | 96 +++++++++++++++---------
 src/components/styles/Button.styled.ts   |  6 +-
 src/components/styles/Cursor.styled.ts   |  2 +-
 src/components/styles/Global.styled.ts   | 16 +++-
 src/components/styles/Landing.styled.ts  |  6 +-
 src/components/styles/Navbar.styled.ts   | 24 +++---
 src/components/styles/Projects.styled.ts | 15 ++--
 src/theme.ts                             | 11 ++-
 14 files changed, 133 insertions(+), 97 deletions(-)

diff --git a/index.html b/index.html
index 09e1697..bee0cc6 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,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;700&family=Inter:wght@400;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&family=Manrope:wght@300;500;700&display=swap"
       rel="stylesheet"
     />
 
diff --git a/public/question.svg b/public/question.svg
index d6104e7..876ef1a 100644
--- a/public/question.svg
+++ b/public/question.svg
@@ -1,4 +1,4 @@
-<svg width="120" height="121" viewBox="0 0 120 121" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M60 0.5L120 60.5L60 120.5L0 60.5L60 0.5Z" fill="#20B2AA"/>
-<path d="M61.5871 71.4554H54.5352C54.5604 69.029 54.7753 67.0448 55.1797 65.503C55.6094 63.9359 56.3045 62.5078 57.2649 61.2188C58.2254 59.9297 59.5018 58.4637 61.0942 56.8208C62.2569 55.6328 63.3185 54.5207 64.279 53.4844C65.2647 52.4228 66.0609 51.2854 66.6675 50.0722C67.2741 48.8336 67.5774 47.355 67.5774 45.6363C67.5774 43.8922 67.2615 42.3883 66.6296 41.1245C66.023 39.8608 65.1131 38.8876 63.8998 38.2052C62.7119 37.5227 61.2332 37.1815 59.4639 37.1815C57.9979 37.1815 56.6078 37.4469 55.2934 37.9777C53.9791 38.5085 52.9175 39.33 52.1087 40.4421C51.2999 41.529 50.8828 42.957 50.8575 44.7263H43.8435C43.8941 41.8702 44.6018 39.4184 45.9667 37.3711C47.3568 35.3238 49.2273 33.7567 51.5779 32.6698C53.9285 31.583 56.5572 31.0395 59.4639 31.0395C62.6739 31.0395 65.4037 31.6209 67.6533 32.7835C69.9281 33.9462 71.6595 35.6144 72.8474 37.7881C74.0354 39.9366 74.6294 42.4894 74.6294 45.4467C74.6294 47.7215 74.1618 49.8194 73.2266 51.7404C72.3166 53.636 71.1413 55.418 69.7006 57.0862C68.2599 58.7544 66.7307 60.3467 65.1131 61.8633C63.7229 63.1523 62.7877 64.6057 62.3074 66.2233C61.8272 67.841 61.5871 69.585 61.5871 71.4554ZM54.2318 83.474C54.2318 82.3366 54.5857 81.3761 55.2934 80.5926C56.0011 79.8091 57.0248 79.4173 58.3644 79.4173C59.7293 79.4173 60.7656 79.8091 61.4733 80.5926C62.1811 81.3761 62.5349 82.3366 62.5349 83.474C62.5349 84.5609 62.1811 85.4961 61.4733 86.2796C60.7656 87.0632 59.7293 87.455 58.3644 87.455C57.0248 87.455 56.0011 87.0632 55.2934 86.2796C54.5857 85.4961 54.2318 84.5609 54.2318 83.474Z" fill="white"/>
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M60 0L120 60L60 120L0 60L60 0Z" fill="white"/>
+<path d="M61.5871 70.9554H54.5352C54.5604 68.529 54.7753 66.5448 55.1797 65.003C55.6094 63.4359 56.3045 62.0078 57.2649 60.7188C58.2254 59.4297 59.5018 57.9637 61.0942 56.3208C62.2569 55.1328 63.3185 54.0207 64.279 52.9844C65.2647 51.9228 66.0609 50.7854 66.6675 49.5722C67.2741 48.3336 67.5774 46.855 67.5774 45.1363C67.5774 43.3922 67.2615 41.8883 66.6296 40.6245C66.023 39.3608 65.1131 38.3876 63.8998 37.7052C62.7119 37.0227 61.2332 36.6815 59.4639 36.6815C57.9979 36.6815 56.6078 36.9469 55.2934 37.4777C53.9791 38.0085 52.9175 38.83 52.1087 39.9421C51.2999 41.029 50.8828 42.457 50.8575 44.2263H43.8435C43.8941 41.3702 44.6018 38.9184 45.9667 36.8711C47.3568 34.8238 49.2273 33.2567 51.5779 32.1698C53.9285 31.083 56.5572 30.5395 59.4639 30.5395C62.6739 30.5395 65.4037 31.1209 67.6533 32.2835C69.9281 33.4462 71.6595 35.1144 72.8474 37.2881C74.0354 39.4366 74.6294 41.9894 74.6294 44.9467C74.6294 47.2215 74.1618 49.3194 73.2266 51.2404C72.3166 53.136 71.1413 54.918 69.7006 56.5862C68.2599 58.2544 66.7307 59.8467 65.1131 61.3633C63.7229 62.6523 62.7877 64.1057 62.3074 65.7233C61.8272 67.341 61.5871 69.085 61.5871 70.9554ZM54.2318 82.974C54.2318 81.8366 54.5857 80.8761 55.2934 80.0926C56.0011 79.3091 57.0248 78.9173 58.3644 78.9173C59.7293 78.9173 60.7656 79.3091 61.4733 80.0926C62.1811 80.8761 62.5349 81.8366 62.5349 82.974C62.5349 84.0609 62.1811 84.9961 61.4733 85.7796C60.7656 86.5632 59.7293 86.955 58.3644 86.955C57.0248 86.955 56.0011 86.5632 55.2934 85.7796C54.5857 84.9961 54.2318 84.0609 54.2318 82.974Z" fill="black"/>
 </svg>
diff --git a/src/App.tsx b/src/App.tsx
index 8cf4640..24ccbf2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,9 +13,12 @@ function App() {
       <>
         <GlobalStyles />
         <Navbar />
-        <LandingSection />
-        <AboutSection />
-        <ProjectsSection />
+
+        <div className="site-content">
+          <LandingSection />
+          <AboutSection />
+          <ProjectsSection />
+        </div>
       </>
     </ThemeProvider>
   );
diff --git a/src/components/AboutSection.tsx b/src/components/AboutSection.tsx
index ce59a81..088f23d 100644
--- a/src/components/AboutSection.tsx
+++ b/src/components/AboutSection.tsx
@@ -1,11 +1,4 @@
-import {
-  StyledAbout,
-  StyledAboutContentWrapper,
-  StyledAboutDescription,
-  StyledAboutImageWrapper,
-  StyledAboutItem,
-  StyledAboutTitle,
-} from './styles/About.styled';
+import { StyledAbout } from './styles/About.styled';
 import { StyledCursor } from './styles/Cursor.styled';
 import { StyledSectionHeader } from './styles/SectionHeader.styled';
 
@@ -39,18 +32,12 @@ function AboutSection() {
         </span>
       </StyledSectionHeader>
 
-      <ul>
+      <ul className="about-list">
         {aboutInfo.map((about) => (
-          <StyledAboutItem>
-            <StyledAboutImageWrapper>
-              <img src="question.svg" alt="question" />
-            </StyledAboutImageWrapper>
-
-            <StyledAboutContentWrapper>
-              <StyledAboutTitle>{about.title}</StyledAboutTitle>
-              <StyledAboutDescription>{about.desc}</StyledAboutDescription>
-            </StyledAboutContentWrapper>
-          </StyledAboutItem>
+          <li>
+            <h2>{about.title}</h2>
+            <p>{about.desc}</p>
+          </li>
         ))}
       </ul>
     </StyledAbout>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 982d946..fb96cce 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -72,11 +72,13 @@ export default function Navbar() {
 
   return (
     <StyledNavbar>
-      <StyledNavBrand href="#" onClick={(e) => scrollToSection(e, '#landing')}>
-        {t('navbar.title')}
-      </StyledNavBrand>
+      <div className="navbar-content">
+        <StyledNavBrand href="#" onClick={(e) => scrollToSection(e, '#landing')}>
+          {t('navbar.title')}
+        </StyledNavBrand>
 
-      <Navlinks navlinks={navlinks} />
+        <Navlinks navlinks={navlinks} />
+      </div>
     </StyledNavbar>
   );
 }
diff --git a/src/components/ProjectsSection.tsx b/src/components/ProjectsSection.tsx
index ef0369e..57152c2 100644
--- a/src/components/ProjectsSection.tsx
+++ b/src/components/ProjectsSection.tsx
@@ -37,7 +37,7 @@ function ProjectsSection() {
         </span>
       </StyledSectionHeader>
 
-      <h1>ROZWIJANE PROJEKTY</h1>
+      <h3 className="sub-header">ROZWIJANE PROJEKTY</h3>
 
       <div className="projects-grid">
         <div className="project-card">
diff --git a/src/components/styles/About.styled.ts b/src/components/styles/About.styled.ts
index 36c8863..e927a6f 100644
--- a/src/components/styles/About.styled.ts
+++ b/src/components/styles/About.styled.ts
@@ -4,52 +4,74 @@ export const StyledAbout = styled.section`
   img {
     max-width: 90px;
   }
-`;
 
-export const StyledAboutItem = styled.li`
-  display: flex;
-  justify-content: flex-start;
+  ul.about-list {
+    display: flex;
+    flex-wrap: wrap;
 
-  gap: 1em;
-  margin-top: 50px;
+    li {
+      margin: 0.5em 0;
+    }
 
-  h2 {
-    margin: 0;
+    h2 {
+      display: inline-block;
+      background-color: ${({ theme }) => theme.colors['600']};
+      padding: 0.25em;
+      margin: 0;
+    }
+
+    p {
+      background-color: ${({ theme }) => theme.colors['400']};
+      padding: 1em;
+      margin: 0;
+    }
   }
 `;
 
-export const StyledAboutImageWrapper = styled.div`
-  display: inline-block;
-  position: relative;
+// export const StyledAboutItem = styled.li`
+//   display: flex;
+//   background-color: ${({ theme }) => theme.colors['400']};
 
-  &::before {
-    position: absolute;
-    top: -25px;
-    left: 50%;
-    height: calc(100% + 52px);
-    
-    content: '';
-    width: 5px;
-    background-color: ${({ theme }) => theme.colors.primary};
-    border-radius: 2px;
+//   gap: 1em;
+//   margin-top: 50px;
 
-    z-index: -1;
-    transform: translateX(-50%);
-  }
-`;
+//   h2 {
+//     margin: 0;
+//   }
+// `;
 
-export const StyledAboutContentWrapper = styled.div``;
+// export const StyledAboutImageWrapper = styled.div`
+//   display: inline-block;
+//   position: relative;
 
-export const StyledAboutTitle = styled.h2`
-  display: inline-block;
-  margin: 1em 0;
-  padding: 0.1em 2em 0.1em 0.5em;
+//   &::before {
+//     position: absolute;
+//     top: -25px;
+//     left: 50%;
+//     height: calc(100% + 52px);
 
-  background-color: ${({ theme }) => theme.colors.primary};
-`;
+//     content: '';
+//     width: 5px;
+//     background-color: ${({ theme }) => theme.colors['400']};
+//     border-radius: 2px;
 
-export const StyledAboutDescription = styled.p`
-  margin: 0;
-  margin-top: 1em;
-  text-align: justify;
-`;
+//     z-index: -1;
+//     transform: translateX(-50%);
+//   }
+// `;
+
+// export const StyledAboutContentWrapper = styled.div``;
+
+// export const StyledAboutTitle = styled.h2`
+//   display: inline-block;
+//   margin: 1em 0;
+//   padding: 0.1em 2em 0.1em 0.5em;
+
+//   background-color: ${({ theme }) => theme.colors['600']};
+// `;
+
+// export const StyledAboutDescription = styled.p`
+//   margin: 0;
+//   margin-top: 1em;
+//   text-align: justify;
+// `;
diff --git a/src/components/styles/Button.styled.ts b/src/components/styles/Button.styled.ts
index 2126f5d..9f8be91 100644
--- a/src/components/styles/Button.styled.ts
+++ b/src/components/styles/Button.styled.ts
@@ -3,10 +3,10 @@ import styled from 'styled-components';
 const StyledButton = styled.button<{ $primary?: boolean }>`
   font-size: 1em;
   padding: 0.25em 1em;
-  border: 2px solid ${({ theme }) => theme.colors.primary};
+  border: 2px solid ${({ theme }) => theme.colors.accent};
 
-  background: ${({ $primary, theme }) => ($primary ? theme.colors.primary : 'white')};
-  color: ${({ $primary, theme }) => ($primary ? 'white' : theme.colors.primary)};
+  background: ${({ $primary, theme }) => ($primary ? theme.colors.accent : 'white')};
+  color: ${({ $primary, theme }) => ($primary ? 'white' : theme.colors.accent)};
 `;
 
 export default StyledButton;
diff --git a/src/components/styles/Cursor.styled.ts b/src/components/styles/Cursor.styled.ts
index f54ec42..dfb4e5b 100644
--- a/src/components/styles/Cursor.styled.ts
+++ b/src/components/styles/Cursor.styled.ts
@@ -7,7 +7,7 @@ export const StyledCursor = styled.span`
 
   width: 15px;
   height: 100%;
-  background-color: ${({ theme }) => theme.colors.primary};
+  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 dbd5d76..2f01993 100644
--- a/src/components/styles/Global.styled.ts
+++ b/src/components/styles/Global.styled.ts
@@ -8,7 +8,7 @@ export const GlobalStyles = createGlobalStyle`
 
       color-scheme: light dark;
       color: white;
-      background-color: ${({ theme }) => theme.colors.bg};
+      background-color: ${({ theme }) => theme.colors['500']};
 
       font-synthesis: none;
       text-rendering: optimizeLegibility;
@@ -23,17 +23,25 @@ export const GlobalStyles = createGlobalStyle`
       min-height: 100vh;
       width: 100%;
       overflow-x: hidden;
+      position: relative;
+   }
+   
+   
+   #root > .site-content {
+      margin: 0 auto;
+      max-width: 1500px;
+      padding: 0 2em;
    }
 
    .text {
       &--accent {
-         color: ${({ theme }) => theme.colors.primary};
+         color: ${({ theme }) => theme.colors.accent};
       }
    }
 
    section {
       min-height: 100vh;
-      padding: 3.5em 2em;
+      padding: 3.5em 0;
    }
 
    a {
@@ -43,7 +51,7 @@ export const GlobalStyles = createGlobalStyle`
       transition: all 0.25s;
 
       &:hover {
-         color: ${({ theme }) => theme.colors.primary};
+         color: ${({ theme }) => theme.colors.accent};
       }
    }
 
diff --git a/src/components/styles/Landing.styled.ts b/src/components/styles/Landing.styled.ts
index 2a8d7e5..d863087 100644
--- a/src/components/styles/Landing.styled.ts
+++ b/src/components/styles/Landing.styled.ts
@@ -47,7 +47,7 @@ export const StyledBrandName = styled.div`
     height: 100%;
     top: 0;
     left: 0;
-    background-color: ${({ theme }) => theme.colors.bg};
+    background-color: ${({ theme }) => theme.colors['500']};
 
     animation: typing 0.75s steps(11) forwards;
   }
@@ -61,8 +61,8 @@ export const StyledBrandName = styled.div`
     height: 100%;
     top: 0;
     left: 0;
-    background-color: ${({ theme }) => theme.colors.bg};
-    border-left: 10px solid ${({ theme }) => theme.colors.primary};
+    background-color: ${({ theme }) => theme.colors['500']};
+    border-left: 10px 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 9cf0001..7f5a866 100644
--- a/src/components/styles/Navbar.styled.ts
+++ b/src/components/styles/Navbar.styled.ts
@@ -3,22 +3,28 @@ import { styled } from 'styled-components';
 export const StyledNavbar = styled.nav`
   position: sticky;
   top: 0;
+  left: 0;
   z-index: 1000;
+  width: 100%;
+  background-color: ${({ theme }) => theme.colors['600']};
 
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 3.5em;
+  .navbar-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 3.5em;
+    margin: 0 auto;
 
-  color: white;
-  background-color: ${({ theme }) => theme.colors.nav};
-  padding: 0.75em 2em;
+    color: white;
+    padding: 0.75em 2em;
+    max-width: 1500px;
+  }
 `;
 
 export const StyledNavBrand = styled.a`
   opacity: 0.85;
   font-weight: 700;
-  color: ${({ theme }) => theme.colors.primary};
+  color: ${({ theme }) => theme.colors.accent};
   font-size: 1.3em;
 `;
 
@@ -45,6 +51,6 @@ export const StyledLangButton = styled.button`
   text-transform: uppercase;
   cursor: pointer;
 
-  border: 1px solid ${({ theme }) => theme.colors.primary};
+  border: 1px solid ${({ theme }) => theme.colors.accent};
   background: none;
 `;
diff --git a/src/components/styles/Projects.styled.ts b/src/components/styles/Projects.styled.ts
index 8c505f9..1f39999 100644
--- a/src/components/styles/Projects.styled.ts
+++ b/src/components/styles/Projects.styled.ts
@@ -1,6 +1,11 @@
 import { styled } from 'styled-components';
 
 export const StyledProjects = styled.section`
+  .sub-header {
+    letter-spacing: 0.1em;
+    color: ${({ theme }) => theme.colors['200']};
+  }
+
   .projects-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
@@ -8,9 +13,9 @@ export const StyledProjects = styled.section`
   }
 
   .project-card {
-    padding: 0.5em;
-    background-color: #3b3b3b;
-    box-shadow: #333 10px 7px 11px 0px;
+    padding: 1em;
+    background-color: ${({ theme }) => theme.colors['600']};
+    /* box-shadow: #333 10px 7px 11px 0px; */
 
     h2,
     h3 {
@@ -18,11 +23,11 @@ export const StyledProjects = styled.section`
     }
 
     h2 {
-      color: ${({ theme }) => theme.colors.primary};
+      color: ${({ theme }) => theme.colors.accent};
     }
 
     h3 {
-      color: #ddd;
+      color: ${({ theme }) => theme.colors['300']};
     }
   }
 
diff --git a/src/theme.ts b/src/theme.ts
index 3b52455..af5ad6e 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -1,11 +1,14 @@
 export const theme = {
   colors: {
-    primary: 'lightseagreen',
-    bg: '#242424',
-    nav: '#1b1b1b',
+    200: '#e0e1dd',
+    300: '#778da9',
+    400: '#415a77',
+    500: '#1b263b',
+    600: '#0d1b2a',
+    accent: '#ffbd00',
   },
   fonts: {
-    primary: 'Inter, system-ui, Arial, sans-serif',
+    primary: 'Manrope, system-ui, Arial, sans-serif',
     monospace: 'IBM Plex Mono, monospace',
   },
 };