public/icons/fediverse/akkoma.svg

@@ -1,2 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><title>Pleroma icon</title><path d="M6.36 0A1.868 1.868 0 004.49 1.868V24h5.964V0zm7.113 0v12h4.168a1.868 1.868 0 001.868-1.868V0zm0 18.036V24h4.168a1.868 1.868 0 001.868-1.868v-4.096Z"/></svg>

public/icons/fediverse/peertube.svg

@@ -1,2 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><title>PeerTube icon</title><path d="M3,0v12l9-6L3,0z M3,12v12l9-6L3,12z M12,6v12l9-6L12,6z"/></svg>

public/icons/fediverse/pixelfed.svg

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <g>
-        <path fill="none" d="M0 0H24V24H0z"/>
-        <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm1.031 6.099h-2.624c-.988 0-1.789.776-1.789 1.733v6.748l2.595-2.471h1.818c1.713 0 3.101-1.345 3.101-3.005s-1.388-3.005-3.1-3.005z"/>
-    </g>
-</svg>

src/App.tsx

@@ -3,7 +3,6 @@ import { useTheme } from "./style/themes.tsx";
 
 import About from "./sections/about.tsx";
 import Tools from "./sections/tools.tsx";
-import Links from "./sections/links.tsx";
 
 const App: React.FC = () => {
   const { theme } = useTheme();
@@ -11,7 +10,6 @@ const App: React.FC = () => {
   return <ThemeProvider theme={theme}>
     <Container>
       <About />
-      <Links />
       <Tools />
     </Container>
   </ThemeProvider>;

src/components/button.tsx

@@ -5,8 +5,7 @@ export type Props = {
     content?: string,
     icon?: string,
     link?: string,
-    primary?: boolean,
-    disabled?: boolean,
+    primary?: boolean
 } & React.ComponentProps<'div'>;
 
 const Button: React.FC<Props> = ({
@@ -15,15 +14,14 @@ const Button: React.FC<Props> = ({
     link,
     primary,
     children,
-    disabled = false,
     ...props
 }) => {
-    const item = <ButtonStyled {...props} className={classes({ link, primary, disabled })}>
+    const item = <ButtonStyled {...props} className={classes({ link, primary })}>
         {icon && <img src={icon} alt="Button icon" />}
         {content || children}
     </ButtonStyled>;
 
-    return (link && !disabled) ? <a href={link} target="_blank" rel="noreferrer">{item}</a> : item;
+    return link ? <a href={link} target="_blank" rel="noreferrer">{item}</a> : item;
 }
 
 const ButtonStyled = styled.div`
@@ -49,7 +47,6 @@ const ButtonStyled = styled.div`
     &:hover, &.primary {
         background: ${({ theme }) => theme.text};
         color: ${({ theme }) => theme.secondary};
-        box-shadow: 0 0 5px ${({ theme }) => theme.text};
 
         img {
             filter: ${({ theme }) => (theme.type === 'dark' ? 'none' : 'invert()')};
@@ -57,18 +54,13 @@ const ButtonStyled = styled.div`
     }
 
     &.primary:hover {
-        background: transparent;
+        background: ${({ theme }) => theme.secondary};
         color: ${({ theme }) => theme.text};
 
         img { 
             filter: ${({ theme }) => (theme.type === 'dark' ? 'invert()' : 'none')};
         }
     }
-
-    &.disabled {
-        opacity: 0.4;
-        cursor: not-allowed;
-    }
 `;
 
 export default Button;

src/sections/about.tsx

@@ -61,6 +61,9 @@ const About: React.FC = () => {
             "Evanescence"
         ])}
         <p>yeah I know, I listen to a broad spectrum of music</p>
+
+        <h2>Some links...</h2>
+        {asCardStack(LINKS)}
     </>;
 }
 
@@ -68,4 +71,38 @@ const Heading = styled.h1`
     font-family: "Pacifico", serif;
 `;
 
+const LINKS = [
+    {
+        content: "PGP",
+        icon: "/icons/pgp.svg",
+        link: "/pgp.asc",
+        primary: true
+    },
+    {
+        content: "Uptime of my services",
+        icon: "/icons/uptime.svg",
+        link: "https://health.sador.me/status/aio"
+    },
+    {
+        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;

src/sections/links.tsx

@@ -1,71 +0,0 @@
-import styled from "styled-components";
-import { asCardStack } from "../components/card-stack";
-
-const Links: React.FC = () => {
-    return <>
-        <h2>Fediverse!</h2>
-        {asCardStack(FEDIVERSE_LINKS)}
-
-        <h2>Some links...</h2>
-        {asCardStack(LINKS)}
-    </>;
-}
-
-const Heading = styled.h1`
-    font-family: "Pacifico", serif;
-`;
-
-const FEDIVERSE_LINKS = [
-    {
-        content: "Akkoma",
-        icon: "/icons/fediverse/akkoma.svg",
-        link: "https://akkoma.sador.me"
-    },
-    {
-        content: "Pixelfed",
-        icon: "/icons/fediverse/pixelfed.svg",
-        link: "https://pix.sador.me"
-    },
-    {
-        content: "PeerTube",
-        icon: "/icons/fediverse/peertube.svg",
-        link: "https://tube.sador.me/home"
-    }
-].map(link => Object.assign(link, { primary: true }));
-
-const LINKS = [
-    {
-        content: "PGP",
-        icon: "/icons/pgp.svg",
-        link: "/pgp.asc",
-        primary: true
-    },
-    {
-        content: "Uptime of my services",
-        icon: "/icons/uptime.svg",
-        link: "https://health.sador.me/status/aio"
-    },
-    {
-        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 (deactivated)",
-        icon: "/icons/instagram.svg",
-        disabled: true,
-        link: "https://instagram.com/sadorowo"
-    }
-];
-
-export default Links;

src/style/themes.tsx

@@ -32,14 +32,14 @@ const ThemeContext = createContext<Props>({
 });
 
 const ThemeProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
-    const [isDarkTheme, setIsDarkTheme] = useState(() => localStorage.getItem("theme") === "dark");
+    const [isLightTheme, setIsLightTheme] = useState(() => localStorage.getItem("theme") === "light");
 
     useEffect(() => {
-        localStorage.setItem("theme", isDarkTheme ? "dark" : "light");
-    }, [isDarkTheme]);
+        localStorage.setItem("theme", isLightTheme ? "light" : "dark");
+    }, [isLightTheme]);
 
-    const theme = isDarkTheme ? darkTheme : lightTheme;
-    const toggleTheme = () => setIsDarkTheme(prev => !prev);
+    const theme = isLightTheme ? lightTheme : darkTheme;
+    const toggleTheme = () => setIsLightTheme(prev => !prev);
 
     return (
         <ThemeContext.Provider value={{ theme, toggleTheme }}>

src/tests/about.test.js

@@ -1,8 +1,8 @@
 import { render, screen } from "@testing-library/react";
-import About from "../sections/about";
+import App from "../App";
 
 test("renders hello text", () => {
-  render(<About />);
+  render(<App />);
 
   const helloElement = screen.getByText(/hello/i);
   expect(helloElement).toBeInTheDocument();
@@ -10,30 +10,37 @@ test("renders hello text", () => {
 
 describe("all sub-sections of about are visible", () => {
   test("'some facts about me'", () => {
-    render(<About />);
+    render(<App />);
 
     const section = screen.getByText(/some facts about me/i);
     expect(section).toBeInTheDocument();
   })
 
   test("'i can...'", () => {
-    render(<About />);
+    render(<App />);
 
     const section = screen.getByText(/i can.../i);
     expect(section).toBeInTheDocument();
   })
 
   test("'my favourite music genres'", () => {
-    render(<About />);
+    render(<App />);
 
     const section = screen.getByText(/my favourite music genres/i);
     expect(section).toBeInTheDocument();
   })
 
   test("'bands/singers'", () => {
-    render(<About />);
+    render(<App />);
 
     const section = screen.getByText(/bands\/singers/i);
     expect(section).toBeInTheDocument();
   })
+
+  test("'some links'", () => {
+    render(<App />);
+
+    const section = screen.getByText(/some links/i);
+    expect(section).toBeInTheDocument();
+  })
 })

src/tests/links.test.js

@@ -1,18 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import Links from "../sections/links";
-
-describe("all sub-sections of links are visible", () => {
-    test("'Fediverse!'", () => {
-        render(<Links />);
-
-        const section = screen.getByText(/Fediverse!/i);
-        expect(section).toBeInTheDocument();
-    })
-
-    test("'some links'", () => {
-        render(<Links />);
-
-        const section = screen.getByText(/some links/i);
-        expect(section).toBeInTheDocument();
-    })
-})

src/tests/tools.test.js

@@ -1,16 +1,16 @@
 import { render, screen } from "@testing-library/react";
-import Tools from "../sections/tools";
+import App from "../App";
 
 describe("all sub-sections of tools are visible", () => {
   test("'languages that i use'", () => {
-    render(<Tools />);
+    render(<App />);
 
     const section = screen.getByText(/languages that i use/i);
     expect(section).toBeInTheDocument();
   })
 
   test("'my favourite tools'", () => {
-    render(<Tools />);
+    render(<App />);
 
     const section = screen.getByText(/my favourite tools/i);
     expect(section).toBeInTheDocument();