Fix built-in next/font and YAMLParse errors that prevented /projects from rendering

.gitignore

@@ -26,6 +26,7 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
+.env
 .env*.local
 
 # vercel
@@ -35,4 +36,4 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-.contentlayer
+.contentlayer

README.md

@@ -1,33 +1,29 @@
 <div align="center">
-    <a href="https://chronark.com"><h1 align="center">chronark.com</h1></a>
+    <a href="https://bonafe.org"><h1 align="center">bonafe.org</h1></a>
 
-My personal website, built with [Next.js](https://nextjs.org/), [Tailwind CSS](https://tailwindcss.com/), [Upstash](https://upstash.com?ref=chronark.com), [Contentlayer](https://www.contentlayer.dev/) and deployed to [Vercel](https://vercel.com/).
+My personal website, built with [Next.js](https://nextjs.org/), [Tailwind CSS](https://tailwindcss.com/), [Upstash](https://upstash.com?ref=bonafe.org), [Contentlayer](https://www.contentlayer.dev/) and deployed to [Vercel](https://vercel.com/).
 
 </div>
-
 <br/>
 
-
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/upstash/clone?demo-title=Next.js%20Portfolio%20with%20Pageview%20Counter&demo-description=Portfolio%20site%20with%20pageview%20counter%2C%20built%20with%20Next.js%2013%20App%20Router%2C%20Contentlayer%2C%20and%20Upstash%20Redis.&demo-url=https%3A%2F%2Fchronark.com%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F1DA8n5a6WaP9p1FXf9LmUY%2Fc6264fa2732355787bf657df92dda8a1%2FCleanShot_2023-04-17_at_14.17.37.png&project-name=Next.js%20Portfolio%20with%20Pageview%20Counter&repository-name=nextjs-portfolio-pageview-counter&repository-url=https%3A%2F%2Fgithub.com%2Fchronark%2Fchronark.com&from=templates&integration-ids=oac_V3R1GIpkoJorr6fqyiwdhl17)
 
 ## Running Locally
 
-
 ```sh-session
-git clone https://github.com/chronark/chronark.com.git
-cd chronark.com
+git clone https://github.com/LucasBonafe/bonafe.org.git
+cd bonafe.org
 ```
 
-
-Create a `.env` file similar to [`.env.example`](https://github.com/chronark/chronark.com/blob/main/.env.example).
+Create a `.env` file similar to [`.env.example`](https://github.com/LucasBonafe/bonafe.org/blob/main/.env.example).
 
 Then install dependencies and run the development server:
+
 ```sh-session
 pnpm install
 pnpm dev
 ```
 
-
 ## Cloning / Forking
 
 Please remove all of my personal information (projects, images, etc.) before deploying your own version of this site.

app/components/analytics.tsx

@@ -1,5 +1,4 @@
-"use client";
-
+'use client';
 export function Analytics() {
 	const token = process.env.NEXT_PUBLIC_BEAM_TOKEN;
 	if (!token) {

app/components/card.tsx

@@ -1,42 +1,41 @@
-"use client";
+'use client';
 import {
-	motion,
-	useMotionTemplate,
-	useMotionValue,
-	useSpring,
-} from "framer-motion";
+  motion,
+  useMotionTemplate,
+  useMotionValue,
+  useSpring,
+} from 'framer-motion';
+import {MouseEventHandler, PropsWithChildren} from 'react';
 
-import { MouseEventHandler, PropsWithChildren } from "react";
 
-export const Card: React.FC<PropsWithChildren> = ({ children }) => {
-	const mouseX = useSpring(0, { stiffness: 500, damping: 100 });
-	const mouseY = useSpring(0, { stiffness: 500, damping: 100 });
+export const Card: React.FC<PropsWithChildren> = ({children}) => {
+	const mouseX = useSpring(0, {stiffness: 500, damping: 100});
+	const mouseY = useSpring(0, {stiffness: 500, damping: 100});
 
-	function onMouseMove({ currentTarget, clientX, clientY }: any) {
-		const { left, top } = currentTarget.getBoundingClientRect();
+	function onMouseMove({currentTarget, clientX, clientY}: any) {
+		const {left, top} = currentTarget.getBoundingClientRect();
 		mouseX.set(clientX - left);
 		mouseY.set(clientY - top);
 	}
 	const maskImage = useMotionTemplate`radial-gradient(240px at ${mouseX}px ${mouseY}px, white, transparent)`;
-	const style = { maskImage, WebkitMaskImage: maskImage };
+	const style = {maskImage, WebkitMaskImage: maskImage};
 
 	return (
 		<div
 			onMouseMove={onMouseMove}
-			className="overflow-hidden relative duration-700 border rounded-xl hover:bg-zinc-800/10 group md:gap-8 hover:border-zinc-400/50 border-zinc-600 "
+			className="overflow-hidden relative duration-700 border rounded-xl hover:bg-zinc-800/10 group md:gap-8 hover:border-zinc-400/50 border-zinc-600"
 		>
 			<div className="pointer-events-none">
 				<div className="absolute inset-0 z-0  transition duration-1000 [mask-image:linear-gradient(black,transparent)]" />
 				<motion.div
-					className="absolute inset-0 z-10  bg-gradient-to-br opacity-100  via-zinc-100/10  transition duration-1000 group-hover:opacity-50 "
+					className="absolute inset-0 z-10  bg-gradient-to-br opacity-100  via-zinc-100/10  transition duration-1000 group-hover:opacity-50"
 					style={style}
 				/>
 				<motion.div
 					className="absolute inset-0 z-10 opacity-0 mix-blend-overlay transition duration-1000 group-hover:opacity-100"
 					style={style}
 				/>
 			</div>
-
 			{children}
 		</div>
 	);

app/components/mdx.tsx

@@ -78,13 +78,13 @@ const components = {
 		/>
 	),
 	ul: ({ className, ...props }) => (
-		<ul className={clsx("my-6 ml-6 list-disc", className)} {...props} />
+		<ul className={clsx("my-6 ml-6 list-disc", className)} {...props}/>
 	),
 	ol: ({ className, ...props }) => (
-		<ol className={clsx("my-6 ml-6 list-decimal", className)} {...props} />
+		<ol className={clsx("my-6 ml-6 list-decimal", className)} {...props}/>
 	),
 	li: ({ className, ...props }) => (
-		<li className={clsx("mt-2", className)} {...props} />
+		<li className={clsx("mt-2", className)} {...props}/>
 	),
 	blockquote: ({ className, ...props }) => (
 		<blockquote
@@ -108,11 +108,11 @@ const components = {
 		/>
 	),
 	hr: ({ ...props }) => (
-		<hr className="my-4 border-zinc-200 md:my-8" {...props} />
+		<hr className="my-4 border-zinc-200 md:my-8" {...props}/>
 	),
 	table: ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => (
 		<div className="w-full my-6 overflow-y-auto">
-			<table className={clsx("w-full", className)} {...props} />
+			<table className={clsx("w-full", className)} {...props}/>
 		</div>
 	),
 	tr: ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
@@ -172,7 +172,7 @@ export function Mdx({ code }: MdxProps) {
 
 	return (
 		<div className="mdx">
-			<Component components={components} />
+			<Component components={components}/>
 		</div>
 	);
 }

app/components/nav.tsx

@@ -46,7 +46,7 @@ export const Navigation: React.FC = () => {
 						href="/"
 						className="duration-200 text-zinc-300 hover:text-zinc-100"
 					>
-						<ArrowLeft className="w-6 h-6 " />
+						<ArrowLeft className="w-6 h-6 "/>
 					</Link>
 				</div>
 			</div>

app/components/particles.tsx

@@ -228,7 +228,7 @@ export default function Particles({
 
 	return (
 		<div className={className} ref={canvasContainerRef} aria-hidden="true">
-			<canvas ref={canvasRef} />
+			<canvas ref={canvasRef}/>
 		</div>
 	);
 }

app/contact/page.tsx

@@ -1,63 +1,58 @@
-"use client";
-import { Github, Mail, Twitter } from "lucide-react";
-import Link from "next/link";
-import { Navigation } from "../components/nav";
-import { Card } from "../components/card";
+'use client';
+import {Github, Linkedin, Mail} from 'lucide-react';
+import Link from 'next/link';
+import {Card} from '../components/card';
+
 
 const socials = [
-	{
-		icon: <Twitter size={20} />,
-		href: "https://twitter.com/chronark_",
-		label: "Twitter",
-		handle: "@chronark_",
-	},
-	{
-		icon: <Mail size={20} />,
-		href: "mailto:dev@chronark.com",
-		label: "Email",
-		handle: "dev@chronark.com",
-	},
-	{
-		icon: <Github size={20} />,
-		href: "https://github.com/chronark",
-		label: "Github",
-		handle: "chronark",
-	},
+  {
+    icon: <Linkedin size={20} />,
+    href: "https://www.linkedin.com/in/lucas-bonafe/",
+    label: "LinkedIn",
+    handle: "in/lucas-bonafe",
+  },
+  {
+    icon: <Mail size={20} />,
+    href: "mailto:lucas@bonafe.org",
+    label: "E-mail",
+    handle: "lucas@bonafe.org",
+  },
+  {
+    icon: <Github size={20} />,
+    href: "https://github.com/LucasBonafe",
+    label: "GitHub",
+    handle: "LucasBonafe",
+  },
 ];
 
-export default function Example() {
-	return (
-		<div className=" bg-gradient-to-tl from-zinc-900/0 via-zinc-900 to-zinc-900/0">
-			<Navigation />
-			<div className="container flex items-center justify-center min-h-screen px-4 mx-auto">
-				<div className="grid w-full grid-cols-1 gap-8 mx-auto mt-32 sm:mt-0 sm:grid-cols-3 lg:gap-16">
-					{socials.map((s) => (
-						<Card>
-							<Link
-								href={s.href}
-								target="_blank"
-								className="p-4 relative flex flex-col items-center gap-4 duration-700 group md:gap-8 md:py-24  lg:pb-48  md:p-16"
-							>
-								<span
-									className="absolute w-px h-2/3 bg-gradient-to-b from-zinc-500 via-zinc-500/50 to-transparent"
-									aria-hidden="true"
-								/>
-								<span className="relative z-10 flex items-center justify-center w-12 h-12 text-sm duration-1000 border rounded-full text-zinc-200 group-hover:text-white group-hover:bg-zinc-900 border-zinc-500 bg-zinc-900 group-hover:border-zinc-200 drop-shadow-orange">
-									{s.icon}
-								</span>{" "}
-								<div className="z-10 flex flex-col items-center">
-									<span className="lg:text-xl font-medium duration-150 xl:text-3xl text-zinc-200 group-hover:text-white font-display">
-										{s.handle}
-									</span>
-									<span className="mt-4 text-sm text-center duration-1000 text-zinc-400 group-hover:text-zinc-200">
-										{s.label}
-									</span>
-								</div>
-							</Link>
-						</Card>
-					))}
-				</div>
-			</div>
-		</div>
-	);
+export default function Contact() {
+  return (
+    <div className="grid w-full grid-cols-1 gap-8 mx-auto mt-32 sm:mt-0 sm:grid-cols-3 lg:gap-16">
+      {socials.map((s) => (
+        <Card>
+          <Link
+            href={s.href}
+            target="_blank"
+            className="p-4 relative flex flex-col items-center gap-4 duration-700 group md:gap-8 md:py-12  lg:pb-12  md:p-12"
+          >
+            <span
+              className="absolute w-px h-2/3 bg-gradient-to-b from-zinc-500 via-zinc-500/50 to-transparent"
+              aria-hidden="true"
+            />
+            <span className="relative z-10 flex items-center justify-center w-12 h-12 text-sm duration-1000 border rounded-full text-zinc-200 group-hover:text-white group-hover:bg-zinc-900 border-zinc-500 bg-zinc-900 group-hover:border-zinc-200 drop-shadow-orange">
+              {s.icon}
+            </span>{" "}
+            <div className="z-10 flex flex-col items-center">
+              <span className="lg:text-xl font-medium duration-150 xl:text-3xl text-zinc-200 group-hover:text-white font-display">
+                {s.handle}
+              </span>
+              <span className="mt-4 text-sm text-center duration-1000 text-zinc-400 group-hover:text-zinc-200">
+                {s.label}
+              </span>
+            </div>
+          </Link>
+        </Card>
+      ))}
+    </div>
+  );
 }

app/layout.tsx

@@ -1,24 +1,27 @@
-import "../global.css";
-import { Inter } from "@next/font/google";
-import LocalFont from "@next/font/local";
-import { Metadata } from "next";
-import { Analytics } from "./components/analytics";
+import {Analytics} from '@vercel/analytics/react';
+import {SpeedInsights} from '@vercel/speed-insights/next';
+import {Metadata} from 'next';
+import {Inter} from 'next/font/google';
+import LocalFont from 'next/font/local';
+import '../global.css';
+// import {Analytics} from './components/analytics';
+
 
 export const metadata: Metadata = {
   title: {
-    default: "chronark.com",
-    template: "%s | chronark.com",
+    default: "Bonafé.org",
+    template: "%s | bonafe.org",
   },
-  description: "Co-founder of unkey.dev and founder of planetfall.io",
+  description: "Software Engineer | Full Stack Developer | Pentester | Blockchain Analyst | DevOps | Cloud Architect",
   openGraph: {
-    title: "chronark.com",
+    title: "bonafe.org",
     description:
-      "Co-founder of unkey.dev and founder of planetfall.io",
-    url: "https://chronark.com",
-    siteName: "chronark.com",
+      "Software Engineer | Full Stack Developer | Pentester | Blockchain Analyst | DevOps | Cloud Architect",
+    url: "https://bonafe.org",
+    siteName: "bonafe.org",
     images: [
       {
-        url: "https://chronark.com/og.png",
+        url: "https://bonafe.org/bonafe.png",
         width: 1920,
         height: 1080,
       },
@@ -38,7 +41,7 @@ export const metadata: Metadata = {
     },
   },
   twitter: {
-    title: "Chronark",
+    title: "bonafe_org",
     card: "summary_large_image",
   },
   icons: {
@@ -63,13 +66,11 @@ export default function RootLayout({
   return (
     <html lang="en" className={[inter.variable, calSans.variable].join(" ")}>
       <head>
-        <Analytics />
       </head>
-      <body
-        className={`bg-black ${process.env.NODE_ENV === "development" ? "debug-screens" : undefined
-          }`}
-      >
+      <body className={`bg-black ${process.env.NODE_ENV === "development" ? "debug-screens" : undefined}`}>
         {children}
+        <Analytics/>
+        <SpeedInsights/>
       </body>
     </html>
   );