import useLocalStorageState from "use-local-storage-state"; import styled, { DefaultTheme } from "styled-components"; import Col from "react-bootstrap/Col"; import Container from "react-bootstrap/Container"; import Row from "react-bootstrap/Row"; import { animated, useSpring } from "react-spring"; import { FunctionalComponent } from "preact"; import socials from "@utils/socials"; import Dots from "@components/Dots"; import Header from "@components/Header"; import Image from "@components/Image"; import Layout from "@components/Layout"; import Paragraph from "@components/Paragraph"; import ProjectsList from "@components/Project/List"; const Presentation = styled.div` height: 100vh; display: flex; align-items: center; `; const Projects = styled.div` margin-top: 5rem; padding: 5rem 0; `; const Hero = styled.div` /* background-color: ${({ theme }: { theme: DefaultTheme }) => theme.palette.background.secondary}; */ justify-content: ${(props) => (props.right ? "right" : "left")}; display: flex; align-items: center; height: 100%; `; const Logo = styled.div` margin: 2rem 0; display: flex; justify-content: center; width: 100%; `; const ProjectsHeader = styled(Header)` text-align: center; margin-bottom: 5rem; `; const IconsTray = styled.div` display: flex; justify-content: right; margin-top: 1rem; `; const Icon = styled.div` margin-left: 1.5rem; font-size: 2rem; `; const Index: FunctionalComponent = () => { const [darkMode] = useLocalStorageState("darkMode"); const fadeIn = useSpring({ to: { opacity: 1 }, from: { opacity: 0 }, config: { mass: 5 } }); return (
Welcome
My name is Guus van Meerveld, and I am a web developer. This is my portfolio website, to showcase my projects.
setDarkMode(!darkMode)} // style={{ cursor: "pointer" }} height={64} src={darkMode ? "logo-dark.png" : "logo-light.png"} alt="" />
Follow me:
{socials.map((social) => ( {social.icon} ))}
Projects
); }; export default Index;