diff --git a/src/App.tsx b/src/App.tsx index dc03c84..1561c90 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,12 +1,5 @@ import "@styles/App.scss"; -import Header from "@components/Header"; -import About from "@components/About"; export default function App() { - return ( -
-
- -
- ); + return
; } diff --git a/src/components/About.tsx b/src/components/About.tsx deleted file mode 100644 index 8d4f0d3..0000000 --- a/src/components/About.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import "@styles/About.scss"; - -export default function About() { - return ( -
-
-
Hey There! I'm Janis Meister
-

- A software developer. I develop and plan  - software solutions. -

-

- Over 3 years of experience in software development. I have worked on a - variety of projects, from small to large scale. I have experience in - both frontend and backend development. -

-
-
- -
-
- ); -} diff --git a/src/components/Header.tsx b/src/components/Header.tsx deleted file mode 100644 index a1f21e0..0000000 --- a/src/components/Header.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import "@styles/Header.scss"; -import ThemeSwitch from "@components/ThemeSwitch"; - -function Logo() { - return ( -
-

Janis

-

Meister

-

"DerTyp7"

-
- ); -} - -function Control() { - return ( -
- -
Language
-
- ); -} - -export default function Header() { - return ( -
- {/* Mobile Top Row Header */} -
- - -
- {/* END: Mobile Top Row Header */} - - - -
- About - Skills - Projects - Contact -
- -
- ); -} diff --git a/src/components/ThemeSwitch.tsx b/src/components/ThemeSwitch.tsx deleted file mode 100644 index 6e4d23b..0000000 --- a/src/components/ThemeSwitch.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import "@styles/ThemeSwitch.scss"; -import { useEffect, useRef } from "react"; - -export default function ThemeSwitch() { - const svgRef = useRef(null); - - function switchTheme(theme: string) { - const bodyElement = document.getElementsByTagName("body")[0]; - - if (theme == "dark") { - bodyElement.classList.add("theme-dark"); - } else { - bodyElement.classList.remove("theme-dark"); - localStorage.setItem("theme", "light"); - } - } - - function toggleTheme() { - if (svgRef.current) { - if (localStorage.getItem("theme") == "light") { - svgRef.current.style.animationDirection = "normal"; - svgRef.current.style.animationName = "spinThemeSwitch"; - } else { - svgRef.current.style.animationDirection = "reverse"; - svgRef.current.style.animationName = "spinThemeSwitch"; - } - - setTimeout(() => { - if (localStorage.getItem("theme") == "light") { - localStorage.setItem("theme", "dark"); - switchTheme("dark"); - } else { - localStorage.setItem("theme", "light"); - switchTheme("light"); - } - - if (svgRef.current) { - svgRef.current.style.animationName = ""; - } - }, 150); - } - } - - useEffect(() => { - if (localStorage.getItem("theme") == "dark") { - switchTheme("dark"); - } else { - switchTheme("light"); - } - }, []); - - return ( -
- - - -
- ); -} diff --git a/src/styles/About.scss b/src/styles/About.scss deleted file mode 100644 index e1039bf..0000000 --- a/src/styles/About.scss +++ /dev/null @@ -1,82 +0,0 @@ -.about { - display: flex; - flex-direction: row; - margin-top: 100px; - - .text { - flex: 1; - padding: 0 100px; - - .badge { - border: 3px solid var(--color-accent); - background-color: var(--color-accent-background); - padding: 5px 10px; - border-radius: 5px; - text-align: center; - width: 50%; - font-weight: bold; - font-size: 0.8rem; - } - - h1 { - margin: 20px 0px; - line-height: 1; - letter-spacing: 0.2rem; - - span { - color: var(--color-accent); - text-decoration: underline; - } - } - - p { - color: #2727279f; - font-size: 0.9rem; - font-weight: bold; - } - } - - .image { - flex: 1; - display: flex; - justify-content: center; - align-items: center; - img { - width: 70%; - aspect-ratio: 1/1; - } - } - - @media (max-width: 1100px) { - gap: 10px; - - .text { - padding: 0 50px; - - .badge { - width: 60%; - } - } - } - - @media (max-width: 900px) { - flex-direction: column; - - .image { - display: none; - } - .text { - .badge { - width: 40%; - } - } - } - - @media (max-width: 700px) { - .text { - .badge { - width: 100%; - } - } - } -} diff --git a/src/styles/Header.scss b/src/styles/Header.scss deleted file mode 100644 index 59270b9..0000000 --- a/src/styles/Header.scss +++ /dev/null @@ -1,139 +0,0 @@ -.header { - padding: 1rem 2rem; - display: flex; - justify-content: space-between; - align-items: center; - gap: 5rem; - flex-direction: row; - - .logo { - flex: 0.5; - cursor: text; - - p { - font-size: 2rem; - line-height: 0.8; - - &:nth-child(2) { - padding-left: 20px; - font-weight: bold; - } - - &.tooltip { - display: none; - background-color: var(--color-accent); - color: #000; - animation: moveFromTop 0.05s ease-in-out; - font-size: 1.5rem; - } - } - - &:hover { - .tooltip { - display: block; - position: absolute; - margin-top: 10px; - padding: 10px; - border-radius: 5px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - z-index: 1; - font-weight: bold; - } - } - - @keyframes moveFromTop { - 0% { - transform: translateY(-30px); - } - 100% { - transform: translateY(-10px); - } - } - } - - .links { - flex: 1; - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-around; - - a { - margin-left: 1rem; - text-decoration: none; - color: var(--color-font-link-header); - font-weight: 600; - font-size: 1.2rem; - transition: all 0.15s ease-in-out; - border-bottom: 3px solid var(--color-border-link-header); - - &:hover { - color: var(--color-font-link-header-hover); - border-color: var(--color-border-link-header-hover); - } - } - } - - .control { - display: flex; - justify-content: space-around; - align-items: center; - flex: 0.5; - } - - .header-mobile { - display: none; // will be set to flex on mobile/small screens - justify-content: space-between; - flex: 1; - width: 100%; - flex-direction: row; - - .logo { - display: block; - } - - .control { - display: flex; - justify-content: flex-end; - gap: 1rem; - } - } - - @media (max-width: 768px) { - flex-direction: column; - gap: 1rem; - .logo { - display: none; - } - - .control { - display: none; - } - - .header-mobile { - display: flex; - } - } - - @media (max-width: 300px) { - .header-mobile { - flex-direction: column; - .logo { - justify-content: center; - display: flex; - margin-bottom: 10px; - } - - .control { - justify-content: center; - } - } - - .links { - flex-direction: column; - align-items: center; - justify-content: center; - gap: 1rem; - } - } -} diff --git a/src/styles/ThemeSwitch.scss b/src/styles/ThemeSwitch.scss deleted file mode 100644 index e4cf946..0000000 --- a/src/styles/ThemeSwitch.scss +++ /dev/null @@ -1,26 +0,0 @@ -.themeSwitch { - svg { - aspect-ratio: 1; - height: 2rem; - cursor: pointer; - animation-duration: 150ms; - animation-timing-function: linear; - animation-iteration-count: 1; - animation-direction: normal; - fill: var(--color-font-nav); - transition: all 50ms linear; - - &:hover { - fill: var(--color-font); - } - } - - @keyframes spinThemeSwitch { - from { - transform: rotate(0deg); - } - to { - transform: rotate(-180deg); - } - } -} diff --git a/src/styles/variables_colors.scss b/src/styles/variables_colors.scss index 641f996..ec0b8c4 100644 --- a/src/styles/variables_colors.scss +++ b/src/styles/variables_colors.scss @@ -1,11 +1,10 @@ :root { - /*! By default colors are in LIGHT mode */ /* Colors: General */ - --color-background-body: #ffffff; + --color-background-body: #000000; --color-background-header: transparent; - --color-font: #000000; + --color-font: #ffffff; --color-font-link-header: #1c1c1c; --color-font-link-header-hover: #000;