diff --git a/index.html b/index.html index 5377009..8c1903b 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..02bd6b2 --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,19 @@ + diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 7389935..44c7607 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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 ( diff --git a/src/components/LandingSection.tsx b/src/components/LandingSection.tsx new file mode 100644 index 0000000..6da1f21 --- /dev/null +++ b/src/components/LandingSection.tsx @@ -0,0 +1,16 @@ +import Logo from './Logo'; +import { StyledBrandName, StyledLanding, StyledLandingWrapper } from './styles/Landing.styled'; + +export default function LandingSection() { + return ( + + + + + + SPYTHERE:// + + + + ); +} diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx new file mode 100644 index 0000000..de74e5d --- /dev/null +++ b/src/components/Logo.tsx @@ -0,0 +1,48 @@ +export default function Logo() { + return ( + + + + ); +} diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 98813ca..5f956c2 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -10,7 +10,9 @@ function NavlinkList(props: { navlinks: NavLink[] }) { <> {props.navlinks.map((navlink) => ( - {navlink.title} + + {navlink.title} + ))} diff --git a/src/components/styles/Global.styled.ts b/src/components/styles/Global.styled.ts index e66df98..ef22ebe 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: #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 } + } `; diff --git a/src/components/styles/Landing.styled.ts b/src/components/styles/Landing.styled.ts new file mode 100644 index 0000000..6d6d8c2 --- /dev/null +++ b/src/components/styles/Landing.styled.ts @@ -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; + } +`; diff --git a/src/components/styles/Navbar.styled.ts b/src/components/styles/Navbar.styled.ts index eb818cc..1fa04cb 100644 --- a/src/components/styles/Navbar.styled.ts +++ b/src/components/styles/Navbar.styled.ts @@ -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; `; diff --git a/src/sections/LandingSection.scss b/src/index.scss similarity index 100% rename from src/sections/LandingSection.scss rename to src/index.scss diff --git a/src/main.tsx b/src/main.tsx index 8d0ad14..db8ad16 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -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( diff --git a/src/sections/LandingSection.tsx b/src/sections/LandingSection.tsx deleted file mode 100644 index 2c4043e..0000000 --- a/src/sections/LandingSection.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function LandingSection() { - return
LandingSection
; -} diff --git a/src/theme.ts b/src/theme.ts index df22b4d..4c13330 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -1,5 +1,6 @@ export const theme = { colors: { - primary: 'mediumseagreen', + primary: 'lightseagreen', + bg: '#242424', }, };