121 lines
3.0 KiB
TypeScript
121 lines
3.0 KiB
TypeScript
import styled from "styled-components";
|
|
import { useTheme } from "../style/themes";
|
|
import { calculateAge } from "../utils/math";
|
|
|
|
import CardStack, { Item } from "../components/card-stack";
|
|
import Button from "../components/button";
|
|
|
|
const asCardStack = (items: Array<Item | string>) => (
|
|
<CardStack
|
|
items={items.map(item =>
|
|
typeof item === "string"
|
|
? { content: item }
|
|
: item
|
|
)}
|
|
/>
|
|
);
|
|
|
|
const About: React.FC = () => {
|
|
const { years, months, days } = calculateAge(new Date(2007, 6, 25));
|
|
const { theme, toggleTheme } = useTheme();
|
|
|
|
return <AboutSection>
|
|
<h1>Hello.</h1>
|
|
<p>My name is Franek. I'm {years} years, {months} months and {days} days old.</p>
|
|
<div id="margin-auto">
|
|
<Button
|
|
onClick={toggleTheme}
|
|
content={`switch theme to ${theme.type === 'light' ? 'dark' : 'light'}`}
|
|
icon={'/icons/' + (theme.type === 'light' ? 'moon' : 'sun') + '.svg'}
|
|
/>
|
|
</div>
|
|
|
|
<h2>Some facts about me</h2>
|
|
{asCardStack([
|
|
"introvert",
|
|
"IT enthusiast",
|
|
"automotive enthustiast"
|
|
])}
|
|
|
|
<h2>I can...</h2>
|
|
{asCardStack([
|
|
"play keyboard/organ",
|
|
"mess with PCs from software to hardware",
|
|
"code various apps and scripts"
|
|
])}
|
|
|
|
<h2>My favourite music genres are:</h2>
|
|
{asCardStack([
|
|
"black metal",
|
|
"doom metal",
|
|
"DSBM",
|
|
"nu metal",
|
|
"hard rock"
|
|
])}
|
|
|
|
<h2>I like these bands/singers:</h2>
|
|
{asCardStack([
|
|
"Mgła",
|
|
"Behemoth",
|
|
"Burzum",
|
|
"Arkona",
|
|
"Draconian",
|
|
"Darkthrone",
|
|
"Venom",
|
|
"Slipknot",
|
|
"None",
|
|
"Lil Peep",
|
|
"Alphaville",
|
|
"MGMT",
|
|
"ABBA",
|
|
"Evanescence"
|
|
])}
|
|
<p>yeah I know, I listen to a broad spectrum of music</p>
|
|
|
|
<h2>Some links...</h2>
|
|
{asCardStack(LINKS)}
|
|
</AboutSection>;
|
|
}
|
|
|
|
const AboutSection = styled.div`
|
|
color: ${({ theme }) => theme.text};
|
|
|
|
&>h1 {
|
|
font-family: "Pacifico", serif;
|
|
}
|
|
|
|
&>#margin-auto {
|
|
margin: 0 auto;
|
|
width: max-content;
|
|
}
|
|
`;
|
|
|
|
const LINKS = [
|
|
{
|
|
content: "PGP",
|
|
icon: "/icons/pgp.svg",
|
|
link: "/pgp.asc"
|
|
},
|
|
{
|
|
content: "E-mail",
|
|
icon: "/icons/email.svg",
|
|
link: "mailto:contact@sador.me?subject=[sador.me] ..."
|
|
},
|
|
{
|
|
content: "Gitea",
|
|
icon: "/icons/gitea.svg",
|
|
link: "https://git.sador.me"
|
|
},
|
|
{
|
|
content: "Matrix",
|
|
icon: "/icons/matrix.svg",
|
|
link: "https://matrix.to/#/@boss:sador.me"
|
|
},
|
|
{
|
|
content: "Instagram",
|
|
icon: "/icons/instagram.svg",
|
|
link: "https://instagram.com/sadorowo"
|
|
}
|
|
];
|
|
|
|
export default About; |