👌 IMPROVE: Updated portfolio to reflect current job

.env.example

@@ -3,4 +3,5 @@ NEXT_PUBLIC_CONTENTFUL_SPACE_ID=
 NEXT_PUBLIC_CONTENTFUL_API_KEY=
 NEXT_PLAUSIBLE_CUSTOM_DOMAIN=
 SENDGRID_API_KEY=
+SENDGRID_FROM=
 REVALIDATE_SECRET_TOKEN=

.vscode/settings.json

@@ -17,6 +17,8 @@
   "eslint.autoFixOnSave": true,
   "eslint.alwaysShowStatus": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-  }
+    "source.fixAll.eslint": "explicit"
+  },
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

components/AboutMe.tsx

@@ -14,18 +14,14 @@ import {
 	ListIcon,
 	ListItem,
 } from "@chakra-ui/react";
-import { usePlausible } from "next-plausible";
 import React from "react";
 import { FaArrowRight } from "react-icons/fa";
 import personalInfo from "../utils/constants/personalInfo";
 
 const AboutMe = () => {
 	const { isOpen, onToggle } = useDisclosure();
 
-	const logEvent = usePlausible();
-
 	const onReadMoreClick = () => {
-		logEvent("about_me_read_more");
 		onToggle();
 	};
 
@@ -39,18 +35,21 @@ const AboutMe = () => {
 						Hey there 👋, I'm Keegan Fargher, I've always had an interest in computers, even from a
 						young age, and coding has been the natural progression of my passion.
 						<br />
-						<br />I am a full-stack developer working in a small team. I designed and developed new
-						features for a payment processing system called{" "}
-						<Link href="https://sidpayment.com/" isExternal>
-							SID Instant EFT
+						<br />
+						I'm a member of the team developing{" "}
+						<Link href="https://www.mrisoftware.com/za/products/property-central/" isExternal>
+							Property Central
 						</Link>
-						. I work on everything from modifying the database to backend coding and styling of the
-						websites. I am also involved in code reviews and sprint planning.
+						; a comprehensive property management solution. Most of my time is spent converting a 20
+						year old VB.NET WinForms desktop application into a modern application using .NET and
+						Angular; trying to unwrangle stored procs, VB code and database triggers.
+						<br />
+						The other 10% of my job is working on new features based on market needs.
 						<br />
 						<br />
-						When I'm not coding, I enjoy gardening / growing things and cooking (
-						<Link href={personalInfo.recipes} isExternal>
-							check out my recipes!
+						When I'm not coding, I enjoy hiking, running and gym (
+						<Link href={personalInfo.strava} isExternal>
+							join me on Strava 🏃
 						</Link>
 						)
 						<br />
@@ -65,31 +64,21 @@ const AboutMe = () => {
 								<List mt={3} spacing={3}>
 									<ListItem>
 										<ListIcon as={FaArrowRight} color="brand.500" />
-										Implemented JWT authentication to ensure no one can intercept a transaction.
-									</ListItem>
-									<ListItem>
-										<ListIcon as={FaArrowRight} color="brand.500" />
-										Improved transaction performance for Investec bankers by +-50%.
+										Successfully converted tens of thousands of lines of VB, stored procedures,
+										database triggers and views into a modern .NET Core and Angular architecture.
 									</ListItem>
 									<ListItem>
 										<ListIcon as={FaArrowRight} color="brand.500" />
-										Implemented unit and integration tests for our payment processor.
+										Resurrected our unit/integration testing framework from the grave, fixing
+										thousands of tests and integrating it into our CI pipelines.
 									</ListItem>
 									<ListItem>
 										<ListIcon as={FaArrowRight} color="brand.500" />
-										Noticed Kubernetes was killing pods in the middle of a transaction so I
-										implemented{" "}
-										<Link
-											href="https://kubernetes.io/docs/tasks/configure-pod-container/configure-liveness-readiness-startup-probes/"
-											isExternal>
-											Liveness, Readiness and Startup Probes
-										</Link>{" "}
-										to ensure a transaction runs to completion before the pod is killed.
+										Upgraded our Angular frontend from v12 to v18 in my spare time.
 									</ListItem>
 									<ListItem>
 										<ListIcon as={FaArrowRight} color="brand.500" />
-										Fixed many long-standing bugs that improved transaction completion rate by
-										+-10%.
+										Rewrote our Azure pipelines into modern YAML templates.
 									</ListItem>
 								</List>
 							)}

components/ContactMeForm.tsx

@@ -31,7 +31,7 @@ const FormValidation = Yup.object().shape({
 	name: Yup.string().required("Your name is required"),
 	message: Yup.string()
 		.required("A message is required")
-		.min(5, "Please type at least 5 characters"),
+		.min(2, "Please type at least 2 characters"),
 });
 
 const ContactMeForm: React.FC = () => {

components/HeroSection.tsx

@@ -11,19 +11,15 @@ import {
 	Icon,
 	Wrap,
 	WrapItem,
+	Tooltip,
 } from "@chakra-ui/react";
-import { FaEnvelope, FaGithub, FaLinkedin, FaFile } from "react-icons/fa";
+import { FaEnvelope, FaLinkedin, FaFile } from "react-icons/fa";
 import React from "react";
-import { usePlausible } from "next-plausible";
 import personalInfo from "../utils/constants/personalInfo";
 
 function HeroSection() {
 	const [isLargerThan800] = useMediaQuery("800");
 
-	const logEvent = usePlausible();
-
-	const handleClick = (event: string) => logEvent(event);
-
 	return (
 		<>
 			<Stack spacing={10} justifyContent="flex-start" alignItems="flex-start" width="100%">
@@ -82,11 +78,18 @@ function HeroSection() {
 				<SlideFade dir="top" in transition={{ enter: { duration: 0.4, delay: 0.9 } }}>
 					<Text fontSize="display3" color="textSecondary">
 						🚀 Working at{" "}
-						<Link href="https://payfast.io/" isExternal>
-							Payfast
+						<Link href="https://www.mrisoftware.com/za/" isExternal>
+							MRI Software
 						</Link>
 						<br />
-						🥕 Enjoying gardening and cooking when I'm not coding
+						🔧 Building{" "}
+						<Tooltip label="We track the price of products so you can make better informed decisions on what to buy">
+							<Link href="https://buck.cheap/" isExternal>
+								Buck Cheap
+							</Link>
+						</Tooltip>
+						<br />
+						🏃‍♀️ Enjoying running, hiking and gym when I'm not coding
 					</Text>
 				</SlideFade>
 
@@ -98,8 +101,7 @@ function HeroSection() {
 									leftIcon={<Icon as={FaLinkedin} color="brand.300" />}
 									position="static"
 									size={isLargerThan800 ? "md" : "sm"}
-									color="white"
-									onClick={() => handleClick("introduction_linkedin")}>
+									color="white">
 									LinkedIn
 								</Button>
 							</Link>
@@ -111,8 +113,7 @@ function HeroSection() {
 									transition="0.3s"
 									position="static"
 									size={isLargerThan800 ? "md" : "sm"}
-									color="white"
-									onClick={() => handleClick("introduction_email")}>
+									color="white">
 									Email
 								</Button>
 							</Link>
@@ -124,8 +125,7 @@ function HeroSection() {
 									transition="0.3s"
 									position="static"
 									size={isLargerThan800 ? "md" : "sm"}
-									color="white"
-									onClick={() => handleClick("introduction_cv")}>
+									color="white">
 									Resume
 								</Button>
 							</Link>

components/ProjectCard/ProjectLink.tsx

@@ -6,16 +6,13 @@ import NextLink from "next/link";
 
 type ProjectLinkProps = {
 	id: string;
-	handleClick: (event: string) => void;
 	children: JSX.Element | JSX.Element[];
 };
 
-const ProjectLink: React.FC<ProjectLinkProps> = ({ handleClick, id, children }) => {
+const ProjectLink: React.FC<ProjectLinkProps> = ({ id, children }) => {
 	return (
 		<NextLink href="/projects/[id]/" as={`/projects/${id}`} passHref>
-			<Link href={`/projects/${id}`} onClick={() => handleClick("project_click")}>
-				{children}
-			</Link>
+			<Link href={`/projects/${id}`}>{children}</Link>
 		</NextLink>
 	);
 };

components/ProjectCard/index.tsx

@@ -3,7 +3,6 @@ import { Text, Image, Link, Box, Heading } from "@chakra-ui/react";
 import React from "react";
 
 import dateFormat from "dateformat";
-import { usePlausible } from "next-plausible";
 import ProjectCardTag from "./ProjectCardTag";
 import { ProjectOverviewItem } from "../../api/types";
 import ProjectLink from "./ProjectLink";
@@ -23,10 +22,6 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
 	tags,
 	index = 0,
 }) => {
-	const logEvent = usePlausible();
-
-	const handleClick = (event: string) => logEvent(event);
-
 	return (
 		<>
 			<Box
@@ -66,7 +61,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
 					justifyContent="center"
 					marginTop={{ base: "3", md: "0" }}>
 					<ProjectCardTag tags={tags} />
-					<ProjectLink id={id} handleClick={handleClick}>
+					<ProjectLink id={id}>
 						<Heading marginTop="2">{title}</Heading>
 					</ProjectLink>
 
@@ -78,7 +73,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
 						{shortDescription}
 					</Text>
 
-					<ProjectLink id={id} handleClick={handleClick}>
+					<ProjectLink id={id}>
 						<Text fontSize={{ base: "md", md: "lg" }}>Read Case Study &rarr;</Text>
 					</ProjectLink>
 				</Box>

next.config.js

@@ -1,5 +1,3 @@
-const { withPlausibleProxy } = require("next-plausible");
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
@@ -8,4 +6,4 @@ const nextConfig = {
   }
 };
 
-module.exports = withPlausibleProxy()(nextConfig);
+module.exports = nextConfig;

package.json

@@ -21,7 +21,6 @@
     "mdx-prism": "^0.3.4",
     "next": "12.1.4",
     "next-mdx-remote": "4.0.1",
-    "next-plausible": "^3.1.9",
     "next-seo": "^5.4.0",
     "react": "18.0.0",
     "react-dom": "18.0.0",

pages/_app.tsx

@@ -1,7 +1,6 @@
 import { ChakraProvider } from "@chakra-ui/react";
 import React, { useEffect, useState } from "react";
 import type { AppProps } from "next/app";
-import PlausibleProvider from "next-plausible";
 import customTheme from "../styles/theme";
 import GlobalStyle from "../styles/GlobalStyle";
 
@@ -21,19 +20,13 @@ function MyApp({ Component, pageProps }: AppProps) {
 	}
 
 	return (
-		<PlausibleProvider
-			enabled
-			selfHosted
-			trackLocalhost
-			trackOutboundLinks
-			domain={process.env.NEXT_PUBLIC_DOMAIN_NAME ?? "My cool website"}
-			customDomain={process.env.NEXT_PLAUSIBLE_CUSTOM_DOMAIN}>
+		<>
 			<ChakraProvider resetCSS theme={customTheme}>
 				<GlobalStyle>
 					<Component {...pageProps} />
 				</GlobalStyle>
 			</ChakraProvider>
-		</PlausibleProvider>
+		</>
 	);
 }
 

pages/api/sendgrid.tsx

@@ -16,7 +16,7 @@ async function sendEmail(req: NextApiRequest, res: NextApiResponse) {
 	try {
 		await sendgrid.send({
 			to: personalInfo.email,
-			from: "[email protected]",
+			from: process.env.SENDGRID_FROM!,
 			subject: `Message from portfolio`,
 			html: `<div>${JSON.stringify(data)}}</div>`,
 		});

pages/projects/index.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable react/no-children-prop */
 import {
 	Text,
-	Container,
 	Divider,
 	Heading,
 	Input,

utils/constants/personalInfo.tsx

@@ -3,6 +3,7 @@ export default {
 	email: "[email protected]",
 	cv: "https://drive.google.com/file/d/11a9sggeW9T83J1dVzSWhg95eKnjrdYHo/view",
 	recipes: "https://recipes.keeganfargher.co.za/",
+	strava: "https://www.strava.com/athletes/132695502",
 	github: "https://github.com/KeeganFargher",
 	linkedIn: "https://www.linkedin.com/in/keegan-fargher-955583151/",
 	profilePictureUrl: "https://i.ibb.co/J7y4yrm/IMG-20191208-185751-1-1.jpg",