feat: new minimalist look

src/components/Footer.tsx

@@ -1,35 +1,36 @@
 import React from "react";
 import styled from "styled-components";
-import { Text, Box, Flex } from "rebass/styled-components";
+import { Box, Flex } from "rebass/styled-components";
 import { Fade } from "react-awesome-reveal";
 import SocialLink from "./SocialLink";
-import Link from "./Link";
 import { useSiteQuery } from "../queries/useSiteQuery";
 
 const Footer = () => {
-	const { companyName, socialLinks } = useSiteQuery();
+	const { socialLinks } = useSiteQuery();
 
 	return (
-		<Box p={[2, 3]} backgroundColor="secondaryAccent" id="footer" as="footer">
+		<Box
+			p={[2, 3]}
+			backgroundColor="darkPrimary"
+			id="footer"
+			as="footer"
+			style={{
+				position: "absolute",
+				bottom: 0,
+				left: 0,
+				right: 0,
+				width: "fit-content",
+				margin: "auto",
+			}}
+		>
 			<FooterContainer>
-				<Fade direction="left" triggerOnce>
-					<Text fontSize={[2, 3]} color="lightPrimary">
-						<span>{`© ${companyName} - Powered by `}</span>
-						<Link href="https://github.com/meese-enterprises" dark>Open Source</Link>{" "}
-						<span role="img" aria-label="heart">
-							❤️
-						</span>
-					</Text>
+				<Fade direction="right" triggerOnce cascade damping={0.5}>
+					{socialLinks.map((sl) => (
+						<Box mx={[2, 3]} fontSize={[4, 5]} key={sl.name}>
+							<SocialLink {...sl} />
+						</Box>
+					))}
 				</Fade>
-				<Flex>
-					<Fade direction="right" triggerOnce cascade damping={0.5}>
-						{socialLinks.map((sl) => (
-							<Box mx={[2, 3]} fontSize={[4, 5]} key={sl.name}>
-								<SocialLink {...sl} />
-							</Box>
-						))}
-					</Fade>
-				</Flex>
 			</FooterContainer>
 		</Box>
 	);

src/components/Header.tsx

@@ -1,14 +1,12 @@
 import React from "react";
 import Headroom from "react-headroom";
-import { Box, Link as RebassLink, Flex, Image } from "rebass/styled-components";
+import { Link as RebassLink, Flex, Image } from "rebass/styled-components";
 import styled from "styled-components";
-import Link from "./Link";
 import { useHelmetQuery } from "../queries/useHelmetQuery";
 import { useSiteQuery } from "../queries/useSiteQuery";
 import { SECTION } from "../utils/constants";
 import { getSectionHref } from "../utils/helpers";
 
-// TODO: Add a light/dark mode toggle
 const Header = () => {
 	const { logo } = useHelmetQuery();
 	const { companyName } = useSiteQuery();
@@ -33,17 +31,6 @@ const Header = () => {
 						/>
 					</Flex>
 				</RebassLink>
-				<Flex mr={[0, 3, 5]}>
-					{(Object.keys(SECTION) as Array<keyof typeof SECTION>)
-						.filter((id) => id !== "home")
-						.map((id) => (
-							<Box key={id} ml={[2, 3]} fontSize={[2, 3]}>
-								<Link href={`#${id}`} tabIndex={0} className="navSection">
-									{SECTION[id]}
-								</Link>
-							</Box>
-						))}
-				</Flex>
 			</Flex>
 		</StyledHeadroom>
 	);

src/sections/Landing.tsx

@@ -3,11 +3,10 @@ import React, { useEffect } from "react";
 import { Text } from "rebass/styled-components";
 
 // Internal imports
-import ScrollIcon from "../components/ScrollIcon";
+import Footer from "../components/Footer";
 import ScrambleLetters from "../utils/scramble";
 import Section from "../components/Section";
 import { SECTION } from "../utils/constants";
-import { getSectionHref } from "../utils/helpers";
 import { useLandingPageQuery } from "../queries/useLandingPageQuery";
 
 const LandingPage = () => {
@@ -21,7 +20,6 @@ const LandingPage = () => {
 
 	// Runs after the render, so the DOM elements are available
 	useEffect(() => {
-		// TODO: Try to improve the performance and appearance of this on Linux systems
 		new ScrambleLetters();
 	}, []);
 
@@ -72,7 +70,7 @@ const LandingPage = () => {
 				{tagline}
 			</Text>
 
-			<ScrollIcon href={`#${getSectionHref(SECTION.about)}`} />
+			<Footer />
 		</Section.Container>
 	);
 };