general styling & design

src/App.tsx

@@ -2,10 +2,10 @@ import { ThemeProvider } from 'styled-components';
 import { theme } from './theme';
 import { GlobalStyles } from './components/styles/Global.styled';
 import Navbar from './components/Navbar';
-import LandingSection from './components/LandingSection';
+import LandingSection from './sections/LandingSection';
 import './i18n';
-import AboutSection from './components/AboutSection';
-import ProjectsSection from './components/ProjectsSection';
+import ProjectsSection from './sections/ProjectsSection';
+import AboutSection from './sections/AboutSection';
 
 function App() {
   return (
@@ -25,4 +25,3 @@ function App() {
 }
 
 export default App;
-

src/components/AboutSection.tsx

@@ -1,47 +0,0 @@
-import { StyledAbout } from './styles/About.styled';
-import { StyledCursor } from './styles/Cursor.styled';
-import { StyledSectionHeader } from './styles/SectionHeader.styled';
-
-const aboutInfo = [
-  {
-    title: 'MYSELF',
-    desc: 'My name is Daniel Pająk, but on the internet, I am better known as Spythere. I was born in 1999 and since I got my first computer at my 11th birthday I was amazed by its complexity, functioning and ability to create my own products of imagination. Computers were always my way to relieve stress and distance myself from overwhelming situations. Coding various things and delving into more and more knowledge about ways I can virtually build things became my passion and it lasts since I have opened my Notepad++ for the first time.',
-  },
-  {
-    title: 'MY JOURNEY',
-    desc: 'Miłością do programowania zaraził mnie mój przyjaciel, który pokazał mi jak robić proste aplikacje okienkowe w Javie. Potem przerodziło się to w hobby, gdy odkryłem, że za pomocą tego języka mogę tworzyć m.in. pluginy na serwery Minecraft. W technikum bardziej zainteresowałem się web developmentem, zaprojektowałem kilka stron dla mojej szkoły, a w wolnym czasie szlifowałem umiejętności z podstawowych technologii takich jak HTML, CSS i JS.',
-  },
-  {
-    title: 'EXPERIENCE',
-    desc: ' Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure quia natus molestias doloremque voluptas quaerat earum necessitatibus! Iusto sapiente, soluta earum itaque perferendis placeat eligendi. Voluptas odio tenetur placeat quidem eveniet illo sunt ducimus distinctio corrupti. Velit tempore impedit eaque nihil exercitationem ipsa neque minus atque et, hic quae dolores!',
-  },
-  {
-    title: 'FUTURE',
-    desc: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti neque sed aut, nostrum, et laboriosam cupiditate repellat nihil magnam, ratione enim illo culpa odit aperiam porro? Fugiat, repellendus repudiandae cupiditate perferendis veritatis ea corrupti cum, perspiciatis reiciendis sit adipisci. Obcaecati magnam quisquam velit nobis dolorem, tempora beatae! Nobis eos cupiditate praesentium cumque? Possimus perspiciatis, maiores, rerum unde quo quas neque, sequi porro doloremque minima temporibus!',
-  },
-];
-
-function AboutSection() {
-  return (
-    <StyledAbout id="about">
-      <StyledSectionHeader>
-        ABOUT{' '}
-        <span className="text--accent" style={{ position: 'relative' }}>
-          ME
-          <StyledCursor />
-        </span>
-      </StyledSectionHeader>
-
-      <ul className="about-list">
-        {aboutInfo.map((about) => (
-          <li>
-            <h2>{about.title}</h2>
-            <p>{about.desc}</p>
-          </li>
-        ))}
-      </ul>
-    </StyledAbout>
-  );
-}
-
-export default AboutSection;

src/components/LandingSection.tsx

@@ -1,16 +0,0 @@
-import Logo from './Logo';
-import { StyledBrandName, StyledLanding, StyledLandingWrapper } from './styles/Landing.styled';
-
-export default function LandingSection() {
-  return (
-    <StyledLanding id="landing">
-      <StyledLandingWrapper>
-        <Logo />
-
-        <StyledBrandName>
-          <span className="text--accent">SPYTHERE</span>://
-        </StyledBrandName>
-      </StyledLandingWrapper>
-    </StyledLanding>
-  );
-}

src/components/ProjectsSection.tsx

@@ -1,114 +0,0 @@
-import { StyledCursor } from './styles/Cursor.styled';
-import { StyledProjects } from './styles/Projects.styled';
-import { StyledSectionHeader } from './styles/SectionHeader.styled';
-
-const badges = {
-  HTML: ' https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white',
-  CSS: ' https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white',
-  JS: ' https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E',
-  SASS: ' https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white',
-  TS: ' https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white',
-  Node: ' https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white',
-  Vue: ' https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vue.js&logoColor=4FC08D',
-  Express: ' https://img.shields.io/badge/Express.js-404D59?style=for-the-badge',
-  Mongo: ' https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge&logo=mongodb&logoColor=white',
-  React: ' https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB',
-  Flutter: ' https://img.shields.io/badge/Flutter-02569B?style=for-the-badge&logo=flutter&logoColor=white',
-  NET: ' https://img.shields.io/badge/.NET-5C2D91?style=for-the-badge&logo=.net&logoColor=white',
-  Python: ' https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=python&logoColor=white',
-  Java: ' https://img.shields.io/badge/Java-ED8B00?style=for-the-badge&logo=java&logoColor=white',
-  AWS: ' https://img.shields.io/badge/Amazon_AWS-232F3E?style=for-the-badge&logo=amazon-aws&logoColor=white',
-  Heroku: ' https://img.shields.io/badge/Heroku-430098?style=for-the-badge&logo=heroku&logoColor=white',
-  NestJS: 'https://img.shields.io/badge/nestjs-red?style=for-the-badge&logo=nestjs&logoColor=white',
-  Discord: ' https://img.shields.io/badge/discord.js-white?style=for-the-badge&logo=discord&logoColor=blue',
-  Postgresql: ' https://img.shields.io/badge/postgresql-blue?style=for-the-badge&logo=postgresql&logoColor=white',
-  CSharp: ' https://img.shields.io/badge/C%20SHARP-orange?style=for-the-badge&logo=csharp&logoColor=white',
-  Dotnet: ' https://img.shields.io/badge/.NET-5C2D91?style=for-the-badge&logo=.net&logoColor=white',
-};
-
-function ProjectsSection() {
-  return (
-    <StyledProjects id="projects">
-      <StyledSectionHeader>
-        MY{' '}
-        <span className="text--accent" style={{ position: 'relative' }}>
-          PROJECTS
-          <StyledCursor />
-        </span>
-      </StyledSectionHeader>
-
-      <h3 className="sub-header">ROZWIJANE PROJEKTY</h3>
-
-      <div className="projects-grid">
-        <div className="project-card">
-          <h2>Stacjownik</h2>
-          <h3>Lorem ipsum dolor sit amet.</h3>
-
-          <div className="project-badges">
-            <img src={badges.TS} alt="typescript"></img>
-            <img src={badges.Vue} alt="vue.js"></img>
-            <img src={badges.SASS} alt="sass/scss"></img>
-          </div>
-
-          <p>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, sunt fugiat vero modi excepturi ratione
-            ipsum inventore quidem unde dolore.
-          </p>
-
-          <div className="project-actions">
-            <button>
-              <a href="#">GITHUB REPO</a>
-            </button>
-            <button>
-              <a href="#">STRONA</a>
-            </button>
-          </div>
-        </div>
-
-        <div className="project-card">
-          <h2>Pojazdownik</h2>
-          <h3>Lorem ipsum dolor sit amet.</h3>
-          <div className="project-badges">
-            <img src={badges.TS} alt="typescript"></img>
-            <img src={badges.Vue} alt="vue.js"></img>
-            <img src={badges.SASS} alt="sass/scss"></img>
-          </div>
-          <p>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, sunt fugiat vero modi excepturi ratione
-            ipsum inventore quidem unde dolore.
-          </p>
-        </div>
-
-        <div className="project-card">
-          <h2>GeneraTOR</h2>
-          <h3>Lorem ipsum dolor sit amet.</h3>
-          <div className="project-badges">
-            <img src={badges.TS} alt="typescript"></img>
-            <img src={badges.Vue} alt="vue.js"></img>
-            <img src={badges.SASS} alt="sass/scss"></img>
-          </div>
-          <p>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, sunt fugiat vero modi excepturi ratione
-            ipsum inventore quidem unde dolore.
-          </p>
-        </div>
-
-        <div className="project-card">
-          <h2>Stacjobot</h2>
-          <h3>Lorem ipsum dolor sit amet.</h3>
-          <div className="project-badges">
-            <img src={badges.TS} alt="typescript"></img>
-            <img src={badges.Vue} alt="vue.js"></img>
-            <img src={badges.SASS} alt="sass/scss"></img>
-          </div>
-          <p>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, sunt fugiat vero modi excepturi ratione
-            ipsum inventore quidem unde dolore.
-          </p>
-        </div>
-      </div>
-    </StyledProjects>
-  );
-}
-
-export default ProjectsSection;

src/components/styles/About.styled.ts

@@ -1,77 +1,33 @@
 import { styled } from 'styled-components';
 
 export const StyledAbout = styled.section`
-  img {
-    max-width: 90px;
-  }
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 
-  ul.about-list {
-    display: flex;
-    flex-wrap: wrap;
+  .about-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 3em;
+    margin-top: 100px;
 
-    li {
-      margin: 0.5em 0;
+    img {
+      border-radius: 1em;
+      max-width: 100%;
     }
 
-    h2 {
-      display: inline-block;
-      background-color: ${({ theme }) => theme.colors['600']};
-      padding: 0.25em;
-      margin: 0;
-    }
+    .about-content {
+      h2 {
+        font-size: 1.5em;
+        color: ${({ theme }) => theme.colors['200']};
+      }
 
-    p {
-      background-color: ${({ theme }) => theme.colors['400']};
-      padding: 1em;
-      margin: 0;
+      p {
+        color: ${({ theme }) => theme.colors['300']};
+        margin-top: 2em;
+        text-align: justify;
+        line-height: 1.7;
+      }
     }
   }
 `;
-
-// export const StyledAboutItem = styled.li`
-//   display: flex;
-//   background-color: ${({ theme }) => theme.colors['400']};
-
-//   gap: 1em;
-//   margin-top: 50px;
-
-//   h2 {
-//     margin: 0;
-//   }
-// `;
-
-// export const StyledAboutImageWrapper = styled.div`
-//   display: inline-block;
-//   position: relative;
-
-//   &::before {
-//     position: absolute;
-//     top: -25px;
-//     left: 50%;
-//     height: calc(100% + 52px);
-
-//     content: '';
-//     width: 5px;
-//     background-color: ${({ theme }) => theme.colors['400']};
-//     border-radius: 2px;
-
-//     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;
-// `;

src/components/styles/Cursor.styled.ts

@@ -5,7 +5,7 @@ export const StyledCursor = styled.span`
   top: 0;
   left: calc(100% + 0.25em);
 
-  width: 15px;
+  width: 10px;
   height: 100%;
   background-color: ${({ theme }) => theme.colors.accent};
 

src/components/styles/Global.styled.ts

@@ -1,4 +1,5 @@
 import { createGlobalStyle } from 'styled-components';
+import { deviceSize } from '../../common/deviceSizes';
 
 export const GlobalStyles = createGlobalStyle`
    :root {
@@ -24,13 +25,19 @@ export const GlobalStyles = createGlobalStyle`
       width: 100%;
       overflow-x: hidden;
       position: relative;
+
+      font-size: 1rem;
+
+      @media screen and (max-width: ${deviceSize.md}) {
+         font-size: calc(1vw + 0.6rem);
+      }
    }
    
    
    #root > .site-content {
       margin: 0 auto;
-      max-width: 1500px;
-      padding: 0 2em;
+      max-width: 1200px;
+      padding: 0 1em;
    }
 
    .text {
@@ -72,6 +79,11 @@ export const GlobalStyles = createGlobalStyle`
       padding: 0;
    }
 
+   p {
+      padding: 0;
+      margin: 0;
+   }
+
    @keyframes typing {
       to { left: 100% }
    }

src/components/styles/Landing.styled.ts

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { deviceSize } from '../../common/deviceSizes';
 
 export const StyledLanding = styled.section`
   min-height: calc(100vh - 3.5em);
@@ -7,37 +8,49 @@ export const StyledLanding = styled.section`
   justify-content: center;
   align-items: center;
 
-  font-family: ${({ theme }) => theme.fonts.monospace};
-  letter-spacing: 5px;
-
-  text-align: center;
-  width: 100%;
   /* background-color: #fff; */
 `;
 
 export const StyledLandingWrapper = styled.div`
   display: flex;
-  align-items: center;
   flex-direction: column;
+  gap: 100px;
+  max-width: 100%;
 
-  p {
-    font-size: 2.5em;
+  .landing_main {
+    display: flex;
+    align-items: center;
+    gap: 5em;
+
+    @media screen and (max-width: ${deviceSize.md}) {
+      flex-direction: column;
+    }
   }
 
-  div {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
+  .landing_tech {
+    h3 {
+      position: relative;
+      margin: 0;
+      font-size: 1.8em;
+    }
+
+    .separator {
+      width: 2px;
+      height: 30px;
+      background-color: red;
+    }
   }
 `;
 
 export const StyledBrandName = styled.div`
   position: relative;
+  display: inline-block;
 
-  font-size: 2.5em;
+  font-family: ${({ theme }) => theme.fonts.monospace};
+  font-size: 3em;
   opacity: 1;
-  margin-top: 0.5em;
   white-space: nowrap;
+  letter-spacing: 5px;
 
   &::after {
     content: '';
@@ -66,4 +79,38 @@ export const StyledBrandName = styled.div`
 
     animation: typing 0.75s steps(11) forwards, blinking 1.5s infinite;
   }
+
+  @media screen and (max-width: ${deviceSize.sm}) {
+    font-size: 2.3em;
+  }
+`;
+
+export const StyledLandingRight = styled.div`
+  color: ${({ theme }) => theme.colors['200']};
+  font-size: 1.2em;
+
+  .greeting {
+    font-family: ${({ theme }) => theme.fonts.monospace};
+    display: block;
+  }
+
+  .description {
+    margin-top: 1em;
+  }
+`;
+
+export const StyledLinkIcons = styled.div`
+  display: flex;
+  gap: 1em;
+  margin-top: 1em;
+`;
+
+export const StyledLinkIcon = styled.a`
+  cursor: pointer;
+  font-size: 2em;
+  margin-top: 0.5em;
+
+  &:hover {
+    color: skyblue;
+  }
 `;

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['600']};
+  background-color: ${({ theme }) => theme.colors['500']};
 
   .navbar-content {
     display: flex;
@@ -17,7 +17,7 @@ export const StyledNavbar = styled.nav`
 
     color: white;
     padding: 0.75em 2em;
-    max-width: 1500px;
+    max-width: 1900px;
   }
 `;
 

src/components/styles/Projects.styled.ts

@@ -1,44 +1,87 @@
 import { styled } from 'styled-components';
 
 export const StyledProjects = styled.section`
-  .sub-header {
+  h3.sub-header {
     letter-spacing: 0.1em;
     color: ${({ theme }) => theme.colors['200']};
+    margin-top: 3em;
   }
 
   .projects-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    display: flex;
+    flex-direction: column;
     gap: 2rem;
   }
 
   .project-card {
-    padding: 1em;
-    background-color: ${({ theme }) => theme.colors['600']};
-    /* box-shadow: #333 10px 7px 11px 0px; */
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 3.5em;
+
+    .project-thumbnail img,
+    .project-badges img {
+      border-radius: 1em;
+    }
 
     h2,
     h3 {
       margin: 0;
     }
+  }
 
-    h2 {
-      color: ${({ theme }) => theme.colors.accent};
-    }
+  .project-content {
+    display: flex;
+    flex-direction: column;
+  }
 
-    h3 {
-      color: ${({ theme }) => theme.colors['300']};
-    }
+  hr {
+    width: 100%;
+    border: 1px solid white;
+    margin: 0.5em 0;
+  }
+
+  h2.project-title {
+    color: ${({ theme }) => theme.colors.accent};
+  }
+
+  h3.project-subtitle {
+    font-size: 1.1em;
+    color: ${({ theme }) => theme.colors['200']};
   }
 
   .project-badges {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5em;
-    margin-top: 0.5em;
+
+    margin: 0.5em 0;
 
     img {
       max-width: 120px;
     }
   }
+
+  .project-desc {
+    color: ${({ theme }) => theme.colors['300']};
+    text-align: justify;
+
+    height: 100%;
+    margin-bottom: 1em;
+  }
+
+  .project-actions {
+    display: flex;
+    gap: 1em;
+
+    a {
+      padding: 0.25em;
+      font-weight: bold;
+
+      svg {
+        font-size: 1.5em;
+        vertical-align: bottom;
+        margin-right: 0.5em;
+      }
+    }
+  }
 `;

src/components/styles/SectionHeader.styled.ts

@@ -1,6 +1,10 @@
 import { styled } from 'styled-components';
 
 export const StyledSectionHeader = styled.h1`
+  padding: 0;
+  margin: 0;
+  margin-bottom: 0.25em;
+
   position: relative;
   font-size: 2.5em;
   font-family: ${({ theme }) => theme.fonts.monospace};
@@ -10,7 +14,7 @@ export const StyledSectionHeader = styled.h1`
   &::after {
     content: '';
     position: absolute;
-    top: 110%;
+    top: calc(100% + 3px);
     left: 0;
     width: 15em;
     height: 3px;

src/theme.ts

@@ -1,7 +1,7 @@
 export const theme = {
   colors: {
     200: '#e0e1dd',
-    300: '#778da9',
+    300: '#bbc1c9',
     400: '#415a77',
     500: '#1b263b',
     600: '#0d1b2a',