[core]: Add about page

e2e/integration/about/index.spec.ts

@@ -0,0 +1,34 @@
+context("About Me Page", () => {
+  before(() => {
+    cy.visit("/about");
+  });
+
+  it("displays the about page", () => {
+    cy.findByTestId("panel-title").should("have.text", "about me");
+  });
+
+  it("displays the project details", () => {
+    cy.findByTestId("status").should(
+      "have.text",
+      "Activated in September 2016",
+    );
+    cy.findByTestId("location").should(
+      "have.text",
+      "Small town in Oregon, USA",
+    );
+    cy.findByTestId("level").should("have.text", "Mid-Level Developer");
+    cy.findByTestId("about-me-email-link").should(
+      "have.attr",
+      "target",
+      "_blank",
+    );
+  });
+
+  it("displays my brief", () => {
+    cy.findByTestId("brief").should("exist");
+  });
+
+  it("displays my tech specs", () => {
+    cy.findByTestId("tech").should("exist");
+  });
+});

e2e/integration/home/index.spec.ts

@@ -189,10 +189,18 @@ context("Home Page", () => {
     cy.findByTestId("mail").should("have.attr", "target", "_blank");
   });
 
+  it("displays a link to open about me page", () => {
+    cy.findByTestId("about-me").should("exist");
+  });
+
   it("displays a link to open github", () => {
     cy.findByTestId("github").should("have.attr", "target", "_blank");
   });
 
+  it("displays a link to open codesandbox", () => {
+    cy.findByTestId("codesandbox").should("have.attr", "target", "_blank");
+  });
+
   it("displays a link to open linkedin", () => {
     cy.findByTestId("linkedin").should("have.attr", "target", "_blank");
   });

e2e/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "baseUrl": "./e2e",
-    "rootDir": "./e2e",
+    "baseUrl": ".",
+    "rootDir": ".",
     "target": "es6",
     "lib": ["es6", "dom"],
     "moduleResolution": "node",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "portoflio",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "My personal website.",
   "repository": "https://github.com/mattcarlotta/portfolio",
   "author": "Matt Carlotta",
@@ -24,7 +24,7 @@
     "test:prod": "npm run build:prod && npm run start",
     "test:stage": "npm run build:stage && npm run stage",
     "test:watch": "jest --watch --onlyChanged",
-    "test:watchall": "jest -watchAll",
+    "test:watchall": "jest --watchAll",
     "tsc": "tsc --p ./tsconfig.json"
   },
   "dependencies": {

src/components/Layout/AppsDescriptions/index.tsx

@@ -21,15 +21,13 @@ export const ApplicationDescriptions: Array<ApplicationDescription> = [
         <OutsideLink
           ariaLabel="Navigate to automated microservice source page"
           href="https://github.com/mattcarlotta/SJSITAPP-Agent"
-          padding="0"
         >
           an automated microservice
         </OutsideLink>
         ,&nbsp;
         <OutsideLink
           ariaLabel="Navigate to image microservice source page"
           href="https://github.com/mattcarlotta/SJSITAPP-Image"
-          padding="0"
         >
           an image microservice
         </OutsideLink>
@@ -51,7 +49,6 @@ export const ApplicationDescriptions: Array<ApplicationDescription> = [
         <OutsideLink
           ariaLabel="Navigate to gamersnexus home page"
           href="https://www.gamersnexus.net/"
-          padding="0"
         >
           GamersNexus.net
         </OutsideLink>
@@ -67,23 +64,20 @@ export const ApplicationDescriptions: Array<ApplicationDescription> = [
         <OutsideLink
           ariaLabel="Navigate to dotenv npm home page"
           href="https://www.npmjs.com/package/dotenv"
-          padding="0"
         >
           dotenv
         </OutsideLink>
         &nbsp;and&nbsp;
         <OutsideLink
           ariaLabel="Navigate to dotenv-expand npm home page"
           href="https://www.npmjs.com/package/dotenv-expand"
-          padding="0"
         >
           dotenv-expand
         </OutsideLink>
         , @noshot/env is a simple to use&nbsp;
         <OutsideLink
           ariaLabel="Navigate to bundle phobia @noshot/env page"
           href="https://bundlephobia.com/result?p=@noshot/env"
-          padding="0"
         >
           zero-dependency
         </OutsideLink>
@@ -94,7 +88,6 @@ export const ApplicationDescriptions: Array<ApplicationDescription> = [
         <OutsideLink
           ariaLabel="Navigate to 12factor home page"
           href="https://12factor.net/config"
-          padding="0"
         >
           the twelve-factor app
         </OutsideLink>
@@ -103,7 +96,6 @@ export const ApplicationDescriptions: Array<ApplicationDescription> = [
         <OutsideLink
           ariaLabel="Navigate to codecov @noshot/env page"
           href="https://codecov.io/gh/no-shot/env/branch/main"
-          padding="0"
         >
           100% test coverage
         </OutsideLink>
@@ -115,7 +107,6 @@ export const ApplicationDescriptions: Array<ApplicationDescription> = [
         <OutsideLink
           ariaLabel="Navigate to noshot/env-metrics page"
           href="https://github.com/no-shot/env-metrics#metrics"
-          padding="0"
         >
           env metrics
         </OutsideLink>
@@ -167,7 +158,6 @@ export const ApplicationDescriptions: Array<ApplicationDescription> = [
         <OutsideLink
           ariaLabel="Navigate to styled-components home page"
           href="https://styled-components.com/"
-          padding="0"
         >
           styled-components
         </OutsideLink>
@@ -176,7 +166,6 @@ export const ApplicationDescriptions: Array<ApplicationDescription> = [
         <OutsideLink
           ariaLabel="Navigate to npm composable-styled-components package page"
           href="https://www.npmjs.com/package/composable-styled-components"
-          padding="0"
         >
           npm
         </OutsideLink>
@@ -185,7 +174,6 @@ export const ApplicationDescriptions: Array<ApplicationDescription> = [
         <OutsideLink
           ariaLabel="Navigate to Algolia home page"
           href="https://www.algolia.com"
-          padding="0"
         >
           Algolia
         </OutsideLink>
@@ -210,7 +198,6 @@ export const ApplicationDescriptions: Array<ApplicationDescription> = [
         <OutsideLink
           ariaLabel="Navigate to babel-plugin-module-resolver home page"
           href="https://github.com/tleunen/babel-plugin-module-resolver"
-          padding="0"
         >
           babel-plugin-module-resolver
         </OutsideLink>
@@ -231,7 +218,6 @@ export const ApplicationDescriptions: Array<ApplicationDescription> = [
           ariaLabel="Navigate to the Next SSR Kit project page."
           dataTestId="nextjs-ssr-link"
           href="/nextjs-ssr-kit"
-          padding="0"
           showUnderline
         >
           Nextjs SSR Kit
@@ -259,7 +245,6 @@ export const ApplicationDescriptions: Array<ApplicationDescription> = [
         <OutsideLink
           ariaLabel="Navigate to gcn-usb-adapter source page"
           href="https://bitbucket.org/elmassivo/gcn-usb-adapter/src/master/"
-          padding="0"
         >
           GCN USB Adapter
         </OutsideLink>
@@ -269,7 +254,6 @@ export const ApplicationDescriptions: Array<ApplicationDescription> = [
         <OutsideLink
           ariaLabel="Navigate to youtube video"
           href="https://youtu.be/nA50Wlv3K_M"
-          padding="0"
         >
           video
         </OutsideLink>

src/components/Layout/Card/index.ts

@@ -10,11 +10,11 @@ const cardVariants = {
     transition: { delay: 0.1 * index },
   }),
   initial: { x: -1000, opacity: 0 },
-  exit: (index: number) => ({
+  exit: {
     x: -1000,
     opacity: 0,
-    transition: { delay: 0.015 * index },
-  }),
+    transition: { delay: 0 },
+  },
   hover: { scale: 1.1 },
 };
 

src/components/Layout/FileDetails/index.tsx

@@ -3,7 +3,7 @@ import Info from "~components/Layout/Info";
 import {
   AiOutlineFolderOpen,
   AiOutlineCode,
-  BsFillCircleFill,
+  FiPower,
   IconContext,
   RiMapPin2Line,
 } from "~icons";
@@ -38,7 +38,7 @@ const FileDetails = ({
       `}
     >
       <Info data-testid="status">
-        <BsFillCircleFill style={{ color: active ? "limegreen" : "#2c4776" }} />
+        <FiPower style={{ color: active ? "limegreen" : "#2c4776" }} />
         {status}
       </Info>
       <Info data-testid="filename">

src/components/Layout/FlexCenter/index.ts

@@ -1,13 +1,6 @@
 import styled from "@emotion/styled";
 
-const FlexCenter = styled.div<{ breakpoint?: boolean; direction?: string }>`
-  ${({ breakpoint }) =>
-    breakpoint &&
-    `@media (max-width: 500px) {
-      flex-wrap: wrap;
-    }
-  `};
-
+const FlexCenter = styled.div<{ direction?: string }>`
   flex-direction: ${({ direction }) => direction || "column"};
   display: flex;
   justify-content: center;

src/components/Layout/FlexSpaceAround/__tests__/FlexSpaceAround.test.tsx

@@ -0,0 +1,27 @@
+import { mount, ReactWrapper } from "enzyme";
+import FlexSpaceAround from "../index";
+
+describe("FlexSpaceAround", () => {
+  let wrapper: ReactWrapper;
+  beforeEach(() => {
+    wrapper = mount(<FlexSpaceAround />);
+  });
+
+  it("renders without errors", () => {
+    expect(wrapper).toExist();
+    expect(wrapper).toHaveStyleRule("flex-direction", "row");
+    expect(wrapper).toHaveStyleRule("justify-content", "space-around");
+  });
+
+  it("sets 'flex-direction' to a 'column' when passed a 'direction' prop", () => {
+    wrapper.setProps({ direction: "column" });
+    expect(wrapper).toHaveStyleRule("flex-direction", "column");
+  });
+
+  it("sets media query when passed a 'breakpoint' prop", () => {
+    wrapper.setProps({ breakpoint: true });
+    expect(wrapper).toHaveStyleRule("flex-wrap", "wrap", {
+      media: "(max-width: 500px)",
+    });
+  });
+});

src/components/Layout/FlexSpaceAround/index.ts

@@ -0,0 +1,23 @@
+import styled from "@emotion/styled";
+
+const FlexSpaceAround = styled.div<{
+  breakpoint?: boolean;
+  direction?: string;
+}>`
+  ${({ breakpoint }) =>
+    breakpoint &&
+    `@media (max-width: 500px) {
+      flex-wrap: wrap;
+    }
+  `};
+
+  flex-direction: ${({ direction }) => direction || "row"};
+  display: flex;
+  max-width: 400px;
+  justify-content: space-around;
+  margin: 10px auto;
+  align-items: center;
+  width: 100%;
+`;
+
+export default FlexSpaceAround;