diff --git a/source/src/components/Footer.tsx b/source/src/components/Footer.tsx index 3b969b2..9137098 100644 --- a/source/src/components/Footer.tsx +++ b/source/src/components/Footer.tsx @@ -4,72 +4,72 @@ import { faGithub } from "@fortawesome/free-brands-svg-icons" import styled from "styled-components" import theming from "../theming" -export default class Footer extends React.Component { - StyledFooter = styled.footer` - display: flex; - justify-content: space-between; - margin-bottom: 1px; /* footer goes outside the page by 1 px for some reason */ - padding: 50px 10px; - background-color: white; - background-color: ${(props) => - theming.theme(props.theme.currentTheme, { - light: "white", - dark: "black", - })}; +const StyledFooter = styled.footer` + display: flex; + justify-content: space-between; + margin-bottom: 1px; /* footer goes outside the page by 1 px for some reason */ + padding: 50px 10px; + background-color: white; + background-color: ${(props) => + theming.theme(props.theme.currentTheme, { + light: "white", + dark: "black", + })}; + color: ${(props) => + theming.theme(props.theme.currentTheme, { + light: "black", + dark: "white", + })}; + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + .logo { + color: gray; + } +` + +const StyledLink = styled.a` + width: 30px; + font-size: 2rem; + color: ${(props) => + theming.theme(props.theme.currentTheme, { + light: "lightgrey", + dark: "grey", + })}; + + &:hover { color: ${(props) => theming.theme(props.theme.currentTheme, { light: "black", dark: "white", })}; - * { - margin: 0; - padding: 0; - box-sizing: border-box; - } - .logo { - color: gray; - } - ` + } +` - StyledLink = styled.a` - width: 30px; - font-size: 2rem; - color: ${(props) => - theming.theme(props.theme.currentTheme, { - light: "lightgrey", - dark: "grey", - })}; - - &:hover { - color: ${(props) => - theming.theme(props.theme.currentTheme, { - light: "black", - dark: "white", - })}; - } - ` - - StyledStrong = styled.strong` - font-size: 1.1rem; - ` +const StyledStrong = styled.strong` + font-size: 1.1rem; +` +export default class Footer extends React.Component { render() { return ( - +
Copyright © develo - pomp + pomp
- - +
- + ) } } diff --git a/source/src/components/LanguageToggleButton.tsx b/source/src/components/LanguageToggleButton.tsx index ebf2fce..888124c 100644 --- a/source/src/components/LanguageToggleButton.tsx +++ b/source/src/components/LanguageToggleButton.tsx @@ -8,22 +8,22 @@ import theming from "../theming" import { LanguageContext } from "../LangaugeContext" +const StyledThemeButton = styled.div` + ${theming.styles.navbarButtonStyle} + ${(props) => + props.language == "en" + ? "" + : "transform: scaleX(-1);\ + -moz-transform: scaleX(-1);\ + -webkit-transform: scaleX(-1);\ + -ms-transform: scaleX(-1);"}; +` + interface StyledThemeButtonProps { language: string } export default class LanguageToggleButton extends React.Component { - StyledThemeButton = styled.div` - ${theming.styles.navbarButtonStyle} - ${(props) => - props.language == "en" - ? "" - : "transform: scaleX(-1);\ - -moz-transform: scaleX(-1);\ - -webkit-transform: scaleX(-1);\ - -ms-transform: scaleX(-1);"}; - ` - languageName = (language) => { let name = "English" if (language == "kr") name = "Korean" @@ -35,14 +35,14 @@ export default class LanguageToggleButton extends React.Component { {({ language, toggleLanguage }) => ( <> - - + Using {this.languageName(language)} language diff --git a/source/src/components/Navbar.tsx b/source/src/components/Navbar.tsx index fa07b14..f6bb707 100644 --- a/source/src/components/Navbar.tsx +++ b/source/src/components/Navbar.tsx @@ -13,82 +13,83 @@ import Sidebar from "./Sidebar" import ThemeToggleButton from "./ThemeToggleButton" import LanguageToggleButton from "./LanguageToggleButton" +const StyledNav = styled.nav` + display: flex; + align-items: center; + height: 2rem; + margin: 0; + padding: 1rem; + background-color: ${(props) => + theming.theme(props.theme.currentTheme, { + light: theming.light.backgroundColor0, + dark: theming.dark.backgroundColor0, + })}; + color: ${(props) => + theming.theme(props.theme.currentTheme, { + light: theming.light.color0, + dark: theming.dark.color0, + })}; + box-shadow: 0 4px 10px rgb(0 0 0 / 5%); + + .right { + margin-left: auto; + } +` + +const StyledNavLinks = styled.div` + @media only screen and (max-width: ${theming.size.screen_size1}) { + display: none; + } +` + +const StyledImg = styled.img` + height: 2rem; + margin: 1rem; +` + +const StyledLink = styled(Link)` + ${theming.styles.navbarButtonStyle} +` + +const StyledALink = styled.a` + ${theming.styles.navbarButtonStyle} +` + export default class Navbar extends React.Component { - StyledNav = styled.nav` - display: flex; - align-items: center; - height: 2rem; - margin: 0; - padding: 1rem; - background-color: ${(props) => - theming.theme(props.theme.currentTheme, { - light: theming.light.backgroundColor0, - dark: theming.dark.backgroundColor0, - })}; - color: ${(props) => - theming.theme(props.theme.currentTheme, { - light: theming.light.color0, - dark: theming.dark.color0, - })}; - box-shadow: 0 4px 10px rgb(0 0 0 / 5%); - - .right { - margin-left: auto; - } - ` - - StyledNavLinks = styled.div` - @media only screen and (max-width: ${theming.size.screen_size1}) { - display: none; - } - ` - - StyledImg = styled.img` - height: 2rem; - margin: 1rem; - ` - - StyledLink = styled(Link)` - ${theming.styles.navbarButtonStyle} - ` - - StyledALink = styled.a` - ${theming.styles.navbarButtonStyle} - ` render() { return ( - + - - + {NavbarData.map((item, index) => ( - + {item.title} - + ))} - + - - + View source code - + ) } } diff --git a/source/src/components/SearchBox.tsx b/source/src/components/SearchBox.tsx index 51227fd..442468f 100644 --- a/source/src/components/SearchBox.tsx +++ b/source/src/components/SearchBox.tsx @@ -5,57 +5,57 @@ import styled from "styled-components" import theming from "../theming" -export default class Navbar extends React.Component { - StyledSearchBoxContainer = styled.div` - display: flex; - justify-content: left; - margin: 0.5rem; - align-items: center; +const StyledSearchBoxContainer = styled.div` + display: flex; + justify-content: left; + margin: 0.5rem; + align-items: center; + background-color: ${(props) => + theming.theme(props.theme.currentTheme, { + light: "whitesmoke", + dark: "#2F3136", + })}; + color: ${(props) => + theming.theme(props.theme.currentTheme, { + light: "black", + dark: "#CFD0D0", + })}; + + &:hover { background-color: ${(props) => theming.theme(props.theme.currentTheme, { - light: "whitesmoke", - dark: "#2F3136", - })}; - color: ${(props) => - theming.theme(props.theme.currentTheme, { - light: "black", - dark: "#CFD0D0", + light: "#eeeeee", + dark: "#36393F", })}; + } +` - &:hover { - background-color: ${(props) => - theming.theme(props.theme.currentTheme, { - light: "#eeeeee", - dark: "#36393F", - })}; - } - ` +const StyledSearchBox = styled.input` + width: 80%; + border: none; + border-right: 1rem; + outline: none; + padding: 10px 10px; + text-decoration: none; + background-color: inherit; + color: inherit; +` - StyledSearchBox = styled.input` - width: 80%; - border: none; - border-right: 1rem; - outline: none; - padding: 10px 10px; - text-decoration: none; - background-color: inherit; - color: inherit; - ` - - StyledSearchButton = styled(FontAwesomeIcon)` - cursor: pointer; - ` +const StyledSearchButton = styled(FontAwesomeIcon)` + cursor: pointer; +` +export default class Navbar extends React.Component { render() { return ( - - + - - + + ) } } diff --git a/source/src/components/Sidebar.tsx b/source/src/components/Sidebar.tsx index ec9fefd..2637194 100644 --- a/source/src/components/Sidebar.tsx +++ b/source/src/components/Sidebar.tsx @@ -9,6 +9,73 @@ import NavbarData, { Item } from "../data/NavbarData" import SubMenu from "./SubMenu" +const CommonSidebarToggleButtonStyle = css` + ${theming.styles.navbarButtonStyle} + width: 1.5rem; + text-align: center; + cursor: pointer; + @media only screen and (min-width: ${theming.size.screen_size1}) { + display: none; + } +` + +const StyledToggleSidebarButton = styled.div` + ${CommonSidebarToggleButtonStyle} +` + +const StyledToggleSidebarButton2 = styled.div` + ${CommonSidebarToggleButtonStyle} + border-radius: 0; + margin: auto; + width: 90%; + height: 2rem; + font-size: 1.1rem; +` + +const StyledOverlay = styled.div` + display: ${(props) => (props.isSidebarOpen ? "block" : "none")}; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 20; + transition-property: opacity; + background-color: rgba(0, 0, 0, 25%); + + * { + overflow: scroll; + } +` + +const SidebarNav = styled.nav` + width: 250px; + height: 100vh; + display: flex; + justify-content: center; + position: fixed; + top: 0; + right: ${(props) => (props.isSidebarOpen ? "0" : "-100%")}; + transition: 350ms; + z-index: 30; + overflow-x: hidden; + overflow-y: scroll; + background-color: ${(props) => + theming.theme(props.theme.currentTheme, { + light: theming.light.backgroundColor0, + dark: theming.dark.backgroundColor0, + })}; + color: ${(props) => + theming.theme(props.theme.currentTheme, { + light: theming.light.color0, + dark: theming.dark.color0, + })}; +` + +const SidebarWrap = styled.div` + width: 100%; +` + interface SidebarProps {} interface SidebarState { isSidebarOpen: boolean @@ -31,82 +98,15 @@ export default class Sidebar extends React.Component< document.body.style.overflow = this.state.isSidebarOpen ? "" : "hidden" } - CommonSidebarToggleButtonStyle = css` - ${theming.styles.navbarButtonStyle} - width: 1.5rem; - text-align: center; - cursor: pointer; - @media only screen and (min-width: ${theming.size.screen_size1}) { - display: none; - } - ` - - StyledToggleSidebarButton = styled.div` - ${this.CommonSidebarToggleButtonStyle} - ` - - StyledToggleSidebarButton2 = styled.div` - ${this.CommonSidebarToggleButtonStyle} - border-radius: 0; - margin: auto; - width: 90%; - height: 2rem; - font-size: 1.1rem; - ` - - StyledOverlay = styled.div` - display: ${(props) => (props.isSidebarOpen ? "block" : "none")}; - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 20; - transition-property: opacity; - background-color: rgba(0, 0, 0, 25%); - - * { - overflow: scroll; - } - ` - - SidebarNav = styled.nav` - width: 250px; - height: 100vh; - display: flex; - justify-content: center; - position: fixed; - top: 0; - right: ${(props) => (props.isSidebarOpen ? "0" : "-100%")}; - transition: 350ms; - z-index: 30; - overflow-x: hidden; - overflow-y: scroll; - background-color: ${(props) => - theming.theme(props.theme.currentTheme, { - light: theming.light.backgroundColor0, - dark: theming.dark.backgroundColor0, - })}; - color: ${(props) => - theming.theme(props.theme.currentTheme, { - light: theming.light.color0, - dark: theming.dark.color0, - })}; - ` - - SidebarWrap = styled.div` - width: 100%; - ` - render() { return ( <> - - open sidebar - + - - - + + {" "} Close - + {NavbarData.map((item: Item, index) => { return })} - - + + ) } diff --git a/source/src/components/Spinner.tsx b/source/src/components/Spinner.tsx index 74f7e6d..36492a4 100644 --- a/source/src/components/Spinner.tsx +++ b/source/src/components/Spinner.tsx @@ -5,6 +5,78 @@ import React from "react" import styled, { keyframes } from "styled-components" +const motion = keyframes` + from { + transform: scale(1, 1); + opacity: 1; + } + to { + transform: scale(0, 0); + opacity: 0; + } + ` + +const spin = keyframes` + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + ` + +const Ball = styled.div` + float: left; + clear: right; + margin: ${(props) => props.size / 15}px; + width: ${(props) => props.size / 5}px; + height: ${(props) => props.size / 5}px; + border-radius: 2px; + background-color: lightgrey; + animation-name: ${motion}; + animation-direction: alternate; + animation-duration: 800ms; + animation-timing-function: linear; + animation-iteration-count: infinite; + + /* use a for loop here? */ + &:nth-child(1) { + animation-delay: 200ms; + } + &:nth-child(2) { + animation-delay: 400ms; + } + &:nth-child(3) { + animation-delay: 600ms; + } + &:nth-child(4) { + animation-delay: 400ms; + } + &:nth-child(5) { + animation-delay: 600ms; + } + &:nth-child(6) { + animation-delay: 800ms; + } + &:nth-child(7) { + animation-delay: 600ms; + } + &:nth-child(8) { + animation-delay: 800ms; + } + &:nth-child(9) { + animation-delay: 1000ms; + } +` + +const Wrapper = styled.div` + margin: 5rem auto 0 auto; + width: 200px; + height: 200px; + animation-timing-function: linear; + animation: ${spin} 10s infinite; +` + interface BallInterface { size: number key: string @@ -18,78 +90,6 @@ interface SpinnerProps { export default class Spinner extends React.Component { balls: unknown[] = [] - motion = keyframes` - from { - transform: scale(1, 1); - opacity: 1; - } - to { - transform: scale(0, 0); - opacity: 0; - } - ` - - spin = keyframes` - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } - ` - - Ball = styled.div` - float: left; - clear: right; - margin: ${(props) => props.size / 15}px; - width: ${(props) => props.size / 5}px; - height: ${(props) => props.size / 5}px; - border-radius: 2px; - background-color: lightgrey; - animation-name: ${this.motion}; - animation-direction: alternate; - animation-duration: 800ms; - animation-timing-function: linear; - animation-iteration-count: infinite; - - /* use a for loop here? */ - &:nth-child(1) { - animation-delay: 200ms; - } - &:nth-child(2) { - animation-delay: 400ms; - } - &:nth-child(3) { - animation-delay: 600ms; - } - &:nth-child(4) { - animation-delay: 400ms; - } - &:nth-child(5) { - animation-delay: 600ms; - } - &:nth-child(6) { - animation-delay: 800ms; - } - &:nth-child(7) { - animation-delay: 600ms; - } - &:nth-child(8) { - animation-delay: 800ms; - } - &:nth-child(9) { - animation-delay: 1000ms; - } - ` - - Wrapper = styled.div` - margin: 5rem auto 0 auto; - width: 200px; - height: 200px; - animation-timing-function: linear; - animation: ${this.spin} 10s infinite; - ` - constructor(props) { super(props) @@ -99,7 +99,7 @@ export default class Spinner extends React.Component { for (let i = 0; i < countBallsInLine; i++) { for (let j = 0; j < countBallsInLine; j++) { this.balls.push( - { } render() { - return {this.balls} + return {this.balls} } } diff --git a/source/src/components/SubMenu.tsx b/source/src/components/SubMenu.tsx index e479df2..e810a91 100644 --- a/source/src/components/SubMenu.tsx +++ b/source/src/components/SubMenu.tsx @@ -4,6 +4,39 @@ import styled from "styled-components" import theming from "../theming" import { Item } from "../data/NavbarData" +const SidebarLink = styled(Link)` + ${theming.styles.navbarButtonStyle}; + display: flex; + width: 100%; + margin: 0; + border-radius: 0; + justify-content: space-between; + height: 2rem; + align-items: center; + padding: 20px; + list-style: none; +` + +const SidebarLabel = styled.span` + margin-left: 16px; +` + +const DropdownLink = styled(Link)` + background: #414757; + height: 60px; + padding-left: 3rem; + display: flex; + align-items: center; + text-decoration: none; + color: #f5f5f5; + font-size: 18px; + + &:hover { + background: #632ce4; + cursor: pointer; + } +` + interface SubMenuProps { item: Item } @@ -16,39 +49,6 @@ export default class SubMenu extends React.Component< SubMenuProps, SubMenuState > { - SidebarLink = styled(Link)` - ${theming.styles.navbarButtonStyle}; - display: flex; - width: 100%; - margin: 0; - border-radius: 0; - justify-content: space-between; - height: 2rem; - align-items: center; - padding: 20px; - list-style: none; - ` - - SidebarLabel = styled.span` - margin-left: 16px; - ` - - DropdownLink = styled(Link)` - background: #414757; - height: 60px; - padding-left: 3rem; - display: flex; - align-items: center; - text-decoration: none; - color: #f5f5f5; - font-size: 18px; - - &:hover { - background: #632ce4; - cursor: pointer; - } - ` - constructor(props) { super(props) this.state = { @@ -61,15 +61,13 @@ export default class SubMenu extends React.Component< render() { return ( <> -
{this.props.item.icon} - - {this.props.item.title} - + {this.props.item.title}
{this.props.item.subNav && this.state.isSubNavOpen @@ -78,7 +76,7 @@ export default class SubMenu extends React.Component< ? this.props.item.iconClosed : null}
- + {/* not used as of the moment */} {this.state.isSubNavOpen && // check if subNav is open @@ -86,12 +84,10 @@ export default class SubMenu extends React.Component< this.props.item.subNav.map((item, index) => { // shows all items in subNav return ( - + {item.icon} - - {item.title} - - + {item.title} + ) })} diff --git a/source/src/components/ThemeToggleButton.tsx b/source/src/components/ThemeToggleButton.tsx index 03e2069..4513ebd 100644 --- a/source/src/components/ThemeToggleButton.tsx +++ b/source/src/components/ThemeToggleButton.tsx @@ -6,24 +6,25 @@ import ReactTooltip from "react-tooltip" import theming from "../theming" -export default class Navbar extends React.Component { - StyledThemeButton = styled.div` - ${theming.styles.navbarButtonStyle} - ${(props) => - theming.theme(props.theme.currentTheme, { - light: "", - dark: "transform: scaleX(-1);\ +const StyledThemeButton = styled.div` + ${theming.styles.navbarButtonStyle} + ${(props) => + theming.theme(props.theme.currentTheme, { + light: "", + dark: "transform: scaleX(-1);\ -moz-transform: scaleX(-1);\ -webkit-transform: scaleX(-1);\ -ms-transform: scaleX(-1);", - })}; - ` + })}; +` + +export default class Navbar extends React.Component { render() { return ( {({ currentTheme, setTheme }) => ( <> - )} - + Using {currentTheme} theme diff --git a/source/src/pages/NotFound.tsx b/source/src/pages/NotFound.tsx index a0911f3..112344e 100644 --- a/source/src/pages/NotFound.tsx +++ b/source/src/pages/NotFound.tsx @@ -4,22 +4,22 @@ import { Helmet } from "react-helmet-async" import theming from "../theming" +const StyledNotFound = styled.div` + margin: auto; + margin-top: 2rem; + text-align: center; + color: ${(props) => + theming.theme(props.theme.currentTheme, { + light: "#111111", + dark: "#EEEEEE", + })}; +` + +const Styled404 = styled.h1` + font-size: 3rem; +` + export default class NotFound extends React.Component { - StyledNotFound = styled.div` - margin: auto; - margin-top: 2rem; - text-align: center; - color: ${(props) => - theming.theme(props.theme.currentTheme, { - light: "#111111", - dark: "#EEEEEE", - })}; - ` - - Styled404 = styled.h1` - font-size: 3rem; - ` - render() { return ( <> @@ -38,10 +38,10 @@ export default class NotFound extends React.Component { content="Page does not exist" /> - - 404 + + 404 the page you are looking for does not exist. :( - + ) } diff --git a/source/src/pages/Portfolio.tsx b/source/src/pages/Portfolio.tsx index cb13919..2fd2fc3 100644 --- a/source/src/pages/Portfolio.tsx +++ b/source/src/pages/Portfolio.tsx @@ -2,13 +2,13 @@ import React from "react" import styled from "styled-components" import { Helmet } from "react-helmet-async" +const StyledPortfolio = styled.div`` + +const StyledH1 = styled.h1` + font-size: 3rem; +` + export default class Portfolio extends React.Component { - StyledPortfolio = styled.div`` - - StyledH1 = styled.h1` - font-size: 3rem; - ` - render() { return ( <> @@ -30,10 +30,10 @@ export default class Portfolio extends React.Component { content="developomp's Portfolio" /> - - Portfolio + + Portfolio My projects - + ) } diff --git a/source/src/pages/PostList.tsx b/source/src/pages/PostList.tsx index 65445f1..7423305 100644 --- a/source/src/pages/PostList.tsx +++ b/source/src/pages/PostList.tsx @@ -7,6 +7,49 @@ import { Helmet } from "react-helmet-async" import theming from "../theming" import pages from "../pages.json" +const StyledPostList = styled.div` + padding-top: 2rem; + margin: auto; + text-align: center; + color: ${(props) => + theming.theme(props.theme.currentTheme, { + light: "#111111", + dark: "#EEEEEE", + })}; +` + +const StyledH1 = styled.h1` + margin-bottom: 20px; + font-weight: 500; + margin: 0; +` + +const StyledTitle = styled.h1` + font-size: 2rem; + font-style: bold; +` + +const StyledLink = styled(Link)` + text-decoration: none; + + color: ${(props) => + theming.theme(props.theme.currentTheme, { + light: "black", + dark: "white", + })}; + + &:hover { + text-decoration: underline; + } +` + +const StyledPostCard = styled.div` + box-shadow: 0 4px 10px rgb(0 0 0 / 10%); + text-align: left; + margin-bottom: 20px; + padding: 10px 20px; +` + interface HomeProps { title: string howMany?: number @@ -16,49 +59,6 @@ export default class PostList extends React.Component { h1Text: string PostCards: Array = [] - StyledPostList = styled.div` - padding-top: 2rem; - margin: auto; - text-align: center; - color: ${(props) => - theming.theme(props.theme.currentTheme, { - light: "#111111", - dark: "#EEEEEE", - })}; - ` - - StyledH1 = styled.h1` - margin-bottom: 20px; - font-weight: 500; - margin: 0; - ` - - StyledTitle = styled.h1` - font-size: 2rem; - font-style: bold; - ` - - StyledLink = styled(Link)` - text-decoration: none; - - color: ${(props) => - theming.theme(props.theme.currentTheme, { - light: "black", - dark: "white", - })}; - - &:hover { - text-decoration: underline; - } - ` - - StyledPostCard = styled.div` - box-shadow: 0 4px 10px rgb(0 0 0 / 10%); - text-align: left; - margin-bottom: 20px; - padding: 10px 20px; - ` - constructor(props) { super(props) @@ -74,17 +74,14 @@ export default class PostList extends React.Component { const post = pages[pagePath] this.PostCards.push( - - - + + + {post.meta?.title ? post.meta.title : "Unknown title"} - - + + Published on{" "} {post.meta?.date ? post.meta.date : "Unknown date"} by{" "} @@ -103,11 +100,9 @@ export default class PostList extends React.Component { }} > - - Read more - + Read more - + ) howMany-- } @@ -129,11 +124,11 @@ export default class PostList extends React.Component { - - {this.h1Text} + + {this.h1Text}
{this.PostCards} - + ) }