diff --git a/public/icons/languages/css3.svg b/public/icons/languages/css3.svg new file mode 100644 index 0000000..cebc690 --- /dev/null +++ b/public/icons/languages/css3.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/public/icons/languages/golang.svg b/public/icons/languages/golang.svg new file mode 100644 index 0000000..67ac934 --- /dev/null +++ b/public/icons/languages/golang.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/public/icons/languages/html5.svg b/public/icons/languages/html5.svg new file mode 100644 index 0000000..2071387 --- /dev/null +++ b/public/icons/languages/html5.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/public/icons/languages/rust.svg b/public/icons/languages/rust.svg new file mode 100644 index 0000000..d411cb1 --- /dev/null +++ b/public/icons/languages/rust.svg @@ -0,0 +1,6 @@ + + + +rust + + \ No newline at end of file diff --git a/public/icons/languages/typescript.svg b/public/icons/languages/typescript.svg new file mode 100644 index 0000000..d70c2e8 --- /dev/null +++ b/public/icons/languages/typescript.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/public/icons/tools/docker.svg b/public/icons/tools/docker.svg new file mode 100644 index 0000000..1ffe03e --- /dev/null +++ b/public/icons/tools/docker.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/public/icons/tools/nixos.svg b/public/icons/tools/nixos.svg new file mode 100644 index 0000000..ab3457a --- /dev/null +++ b/public/icons/tools/nixos.svg @@ -0,0 +1,2 @@ + +NixOS icon \ No newline at end of file diff --git a/public/icons/tools/react.svg b/public/icons/tools/react.svg new file mode 100644 index 0000000..d5fde48 --- /dev/null +++ b/public/icons/tools/react.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/public/icons/tools/vim.svg b/public/icons/tools/vim.svg new file mode 100644 index 0000000..059e5b5 --- /dev/null +++ b/public/icons/tools/vim.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/public/icons/tools/vscode.svg b/public/icons/tools/vscode.svg new file mode 100644 index 0000000..0afeacb --- /dev/null +++ b/public/icons/tools/vscode.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 4956b2f..9e7abed 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,6 +2,7 @@ import styled, { ThemeProvider } from "styled-components"; import { useTheme } from "./style/themes.tsx"; import About from "./sections/about.tsx"; +import Tools from "./sections/tools.tsx"; const App: React.FC = () => { const { theme } = useTheme(); @@ -9,18 +10,20 @@ const App: React.FC = () => { return + ; } const Container = styled.div` - background-color: ${({ theme }) => theme.primary}; transition: 0.2s background-color ease-in-out; + background-color: ${({ theme }) => theme.primary}; + color: ${({ theme }) => theme.text}; - height: 100%; display: grid; text-align: center; place-content: center; + padding: 1rem 0; @media (max-width: 768px) { padding: 1rem; diff --git a/src/components/button.tsx b/src/components/button.tsx index 97a1f85..a966e85 100644 --- a/src/components/button.tsx +++ b/src/components/button.tsx @@ -1,9 +1,23 @@ import styled from "styled-components"; +import { classes } from "../utils/logic"; -export type Props = { content?: string, icon?: string, link?: string } -const Button: React.FC & Props> = ({ content, icon, link, children, ...props }) => { - const item = - {icon && Button icon} +export type Props = { + content?: string, + icon?: string, + link?: string, + primary?: boolean +} & React.ComponentProps<'div'>; + +const Button: React.FC = ({ + content, + icon, + link, + primary, + children, + ...props +}) => { + const item = + {icon && Button icon} {content || children} ; @@ -11,44 +25,41 @@ const Button: React.FC & Props> = ({ content, icon, } const ButtonStyled = styled.div` - gap: ${({ theme }) => theme.gap}; display: flex; align-items: center; - - border-radius: 10px; + gap: ${({ theme }) => theme.gap}; padding: 0.5rem 1rem; - transition: 0.2s ease-in-out; border: 1px solid ${({ theme }) => theme.border}; + border-radius: 10px; + transition: 0.2s ease-in-out; cursor: default; &.link { cursor: pointer; } - &:hover { - background: ${({ theme }) => theme.text}; - color: ${({ theme }) => theme.secondary}; - - img { - filter: invert(); - } - } - - ${({ theme }) => theme.type === 'dark' && ` - img { - filter: invert(); - } - - &:hover img { - filter: none; - } - `} - - &:active { - transform: scale(0.9); - } + &:active { transform: scale(0.9); } img { max-width: 20px; max-height: 20px; - transition-delay: 0.1s; + transition: filter 0.1s; + ${({ theme }) => theme.type === 'dark' && 'filter: invert();'} + } + + &:hover, &.primary { + background: ${({ theme }) => theme.text}; + color: ${({ theme }) => theme.secondary}; + + img { + filter: ${({ theme }) => (theme.type === 'dark' ? 'none' : 'invert()')}; + } + } + + &.primary:hover { + background: ${({ theme }) => theme.secondary}; + color: ${({ theme }) => theme.text}; + + img { + filter: ${({ theme }) => (theme.type === 'dark' ? 'invert()' : 'none')}; + } } `; diff --git a/src/components/card-stack.tsx b/src/components/card-stack.tsx index 2d09440..8950dae 100644 --- a/src/components/card-stack.tsx +++ b/src/components/card-stack.tsx @@ -1,13 +1,10 @@ import styled from "styled-components"; -import Button from "./button"; +import Button, { Props as Item } from "./button"; -export type Item = { content: string, icon?: string, link?: string } const CardStack: React.FC<{ items: Item[] }> = ({ items }) => {items.map((item, index) =>