71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
import styled from "styled-components";
|
|
import { useTheme } from "../style/themes";
|
|
import { calculateAge } from "../utils/math";
|
|
|
|
import { asCardStack } from "../components/card-stack";
|
|
|
|
const About: React.FC = () => {
|
|
const { years, months, days } = calculateAge(new Date(2007, 6, 25));
|
|
const { theme, toggleTheme } = useTheme();
|
|
|
|
return <>
|
|
<Heading>Hello.</Heading>
|
|
<p>My name is Franek. I'm {years} years, {months} months and {days} days old.</p>
|
|
{asCardStack([
|
|
{
|
|
content: `switch theme to ${theme.type === "light" ? "dark" : "light"}`,
|
|
icon: "/icons/" + (theme.type === "light" ? "moon" : "sun") + ".svg",
|
|
primary: theme.type === "light",
|
|
onClick: toggleTheme
|
|
}
|
|
])}
|
|
|
|
<h2>Some facts about me</h2>
|
|
{asCardStack([
|
|
"introvert",
|
|
"IT enthusiast",
|
|
"automotive enthusiast"
|
|
])}
|
|
|
|
<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>
|
|
</>;
|
|
}
|
|
|
|
const Heading = styled.h1`
|
|
font-family: "Pacifico", serif;
|
|
`;
|
|
|
|
export default About; |