navbar; logo & landing animation

2026-05-03 21:48:18 +00:00 · 2023-08-31 18:16:21 +02:00
parent dffa5fdda9
commit 579c728628
14 changed files with 199 additions and 16 deletions
@@ -1,8 +1,8 @@
 import { ThemeProvider } from 'styled-components';
 import { theme } from './theme';
 import { GlobalStyles } from './components/styles/Global.styled';
-import LandingSection from './sections/LandingSection';
 import Navbar from './components/Navbar';
+import LandingSection from './components/LandingSection';

 function App() {
  return (
@@ -0,0 +1,16 @@
+import Logo from './Logo';
+import { StyledBrandName, StyledLanding, StyledLandingWrapper } from './styles/Landing.styled';
+
+export default function LandingSection() {
+  return (
+    <StyledLanding>
+      <StyledLandingWrapper>
+        <Logo />
+
+        <StyledBrandName>
+          <span className="text--accent">SPYTHERE</span>://
+        </StyledBrandName>
+      </StyledLandingWrapper>
+    </StyledLanding>
+  );
+}
@@ -0,0 +1,48 @@
+export default function Logo() {
+  return (
+    <svg width="196" height="196" viewBox="0 0 196 196" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g id="logo">
+        <rect
+          id="Rectangle 6"
+          x="3"
+          y="3"
+          width="189.852"
+          height="189.852"
+          rx="94.2731"
+          fill="white"
+          stroke="black"
+          strokeWidth="6"
+        />
+        <path
+          id="Intersect"
+          d="M165.266 168.76C147.661 185.514 123.907 195.852 97.926 195.852C58.4165 195.852 24.0555 171.944 8.63965 137.924C15.0762 132.88 21.0118 128.459 26.1811 124.608C37.8345 115.928 45.593 110.148 46.4152 106.682L47.8642 79.2739L56.7605 84.114L57.6568 79.2739L36.2911 70.1935L27.2107 65.0301C27.2107 65.0301 20.801 61.1131 24.0059 59.5107C27.2107 57.9082 31.6619 57.9082 31.6619 57.9082L62.6421 55.7717L71.5445 36.3645L98.4296 31.0231L112.851 30.3109L120.507 32.2694L126.561 33.6938L136.354 41.884L152.556 55.7717L153.547 79.2739L173.209 98.503L176.236 101.53C176.236 101.53 180.509 105.625 179.085 107.049C177.661 108.474 161.814 105.091 161.814 105.091L146.324 101.53L128.109 122.931L153.547 136.771L145.43 142.546C154.951 146.639 161.333 155.826 165.266 168.76Z"
+          fill="black"
+        />
+        <mask id="mask0_904_20" maskUnits="userSpaceOnUse" x="126" y="99" width="14" height="7">
+          <rect id="eye-right-mask" x="126" y="99" width="14" height="7" fill="#D9D9D9">
+            <animate id="op1" attributeName="y" dur="0.5s" values="99;106;99" begin="1s;op1.end+5s" />
+          </rect>
+        </mask>
+        <g mask="url(#mask0_904_20)">
+          <path id="Vector 17" d="M134.702 104.583L126.859 99.856L139.099 99.5168L134.702 104.583Z" fill="white" />
+        </g>
+        <mask id="mask1_904_20" maskUnits="userSpaceOnUse" x="91" y="81" width="29" height="24">
+          <rect
+            id="eye-left-mask"
+            x="97.7191"
+            y="81.3097"
+            width="26.6407"
+            height="10"
+            transform="rotate(35.672 97.7191 81.3097)"
+            fill="#D9D9D9"
+          >
+            <animate id="op2" attributeName="y" dur="0.5s" values="81.3097;92;81.3097" begin="1s;op2.end+5s" />
+          </rect>
+        </mask>
+        <g mask="url(#mask1_904_20)">
+          <path id="Vector 16" d="M105.509 98.473L98.0737 82.8924L118.549 97.4879L105.509 98.473Z" fill="white" />
+        </g>
+      </g>
+    </svg>
+  );
+}
@@ -10,7 +10,9 @@ function NavlinkList(props: { navlinks: NavLink[] }) {
    <>
      <StyledNavlinkList>
        {props.navlinks.map((navlink) => (
-          <StyledNavlink href={navlink.href}>{navlink.title}</StyledNavlink>
+          <StyledNavlink key={navlink.title} href={navlink.href}>
+            {navlink.title}
+          </StyledNavlink>
        ))}
      </StyledNavlinkList>
    </>
@@ -8,7 +8,7 @@ export const GlobalStyles = createGlobalStyle`

      color-scheme: light dark;
      color: white;
-      background-color: #242424;
+      background-color: ${({ theme }) => theme.colors.bg};

      font-synthesis: none;
      text-rendering: optimizeLegibility;
@@ -27,5 +27,33 @@ export const GlobalStyles = createGlobalStyle`
   a {
      color: white;
      text-decoration: none;
+
+      transition: all 0.25s;
+
+      &:hover {
+         color: ${({ theme }) => theme.colors.primary};
+      }
+   }
+
+   img {
+      max-width: 100%;
+      vertical-align: middle;
+   }
+
+   .text {
+      &--accent {
+         color: ${({ theme }) => theme.colors.primary};
+      }
+   }
+
+   @keyframes typing {
+      to { left: 100% }
+   }
+
+   @keyframes blinking {
+      0% { opacity: 0 }
+      50% { opacity: 1 }
+      100% { opacity: 0 }
+
   }
 `;
@@ -0,0 +1,69 @@
+import styled from 'styled-components';
+
+export const StyledLanding = styled.section`
+  min-height: calc(100vh - 3.5em);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-family: 'IBM Plex Mono', 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;
+
+  p {
+    font-size: 2.5em;
+  }
+
+  div {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+`;
+
+export const StyledBrandName = styled.div`
+  position: relative;
+
+  font-size: 2.5em;
+  opacity: 1;
+  margin-top: 0.5em;
+  white-space: nowrap;
+
+  &::after {
+    content: '';
+    position: absolute;
+
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: ${({ theme }) => theme.colors.bg};
+
+    animation: typing 0.75s steps(11) forwards;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    z-index: 100;
+
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: ${({ theme }) => theme.colors.bg};
+    border-left: 10px solid ${({ theme }) => theme.colors.primary};
+
+    animation: typing 0.75s steps(11) forwards, blinking 1.5s infinite;
+  }
+`;
@@ -3,24 +3,27 @@ import { styled } from 'styled-components';
 export const StyledNavbar = styled.nav`
  display: flex;
  justify-content: space-between;
+  align-items: center;
+  height: 3.5em;

-  color: black;
-  font-size: 1.2em;
-  background-color: ${({ theme }) => theme.colors.primary};
-  padding: 0.5em;
+  color: white;
+  padding: 0.75em 2em;
 `;

 export const StyledNavlinkBrand = styled.div`
-  color: black;
  opacity: 0.85;
  font-weight: 700;
+  color: ${({ theme }) => theme.colors.primary};
+  font-size: 1.3em;
 `;

 export const StyledNavlinkList = styled.div`
  display: flex;
-  gap: 0.5em;
+  gap: 1em;
+  font-size: 1.1em;
 `;

 export const StyledNavlink = styled.a`
-  color: black;
+  /* color: black; */
+  font-weight: bold;
 `;
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
+import './index.scss';

 ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
@@ -1,3 +0,0 @@
-export default function LandingSection() {
-  return <div>LandingSection</div>;
-}
@@ -1,5 +1,6 @@
 export const theme = {
  colors: {
-    primary: 'mediumseagreen',
+    primary: 'lightseagreen',
+    bg: '#242424',
  },
 };