Initial commit

Created from https://vercel.com/new

.env.example

@@ -0,0 +1,2 @@
+UPSTASH_REDIS_REST_URL=
+UPSTASH_REDIS_REST_TOKEN=

.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.contentlayer

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Andreas Thomas
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,33 @@
+<div align="center">
+    <a href="https://chronark.com"><h1 align="center">chronark.com</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/).
+
+</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
+```
+
+
+Create a `.env` file similar to [`.env.example`](https://github.com/chronark/chronark.com/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

@@ -0,0 +1,15 @@
+"use client";
+
+export function Analytics() {
+	const token = process.env.NEXT_PUBLIC_BEAM_TOKEN;
+	if (!token) {
+		return null;
+	}
+	return (
+		<script
+			src="https://beamanalytics.b-cdn.net/beam.min.js"
+			data-token={token}
+			async
+		/>
+	);
+}

app/components/card.tsx

@@ -0,0 +1,43 @@
+"use client";
+import {
+	motion,
+	useMotionTemplate,
+	useMotionValue,
+	useSpring,
+} from "framer-motion";
+
+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 });
+
+	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 };
+
+	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 "
+		>
+			<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 "
+					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

@@ -0,0 +1,178 @@
+// @ts-nocheck
+import * as React from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { useMDXComponent } from "next-contentlayer/hooks";
+
+function clsx(...args: any) {
+	return args.filter(Boolean).join(" ");
+}
+const components = {
+	h1: ({ className, ...props }) => (
+		<h1
+			className={clsx(
+				"mt-2 scroll-m-20 text-4xl font-bold tracking-tight",
+				className,
+			)}
+			{...props}
+		/>
+	),
+	h2: ({ className, ...props }) => (
+		<h2
+			className={clsx(
+				"mt-10 scroll-m-20 border-b border-b-zinc-800 pb-1 text-3xl font-semibold tracking-tight first:mt-0",
+				className,
+			)}
+			{...props}
+		/>
+	),
+	h3: ({ className, ...props }) => (
+		<h3
+			className={clsx(
+				"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight",
+				className,
+			)}
+			{...props}
+		/>
+	),
+	h4: ({ className, ...props }) => (
+		<h4
+			className={clsx(
+				"mt-8 scroll-m-20 text-xl font-semibold tracking-tight",
+				className,
+			)}
+			{...props}
+		/>
+	),
+	h5: ({ className, ...props }) => (
+		<h5
+			className={clsx(
+				"mt-8 scroll-m-20 text-lg font-semibold tracking-tight",
+				className,
+			)}
+			{...props}
+		/>
+	),
+	h6: ({ className, ...props }) => (
+		<h6
+			className={clsx(
+				"mt-8 scroll-m-20 text-base font-semibold tracking-tight",
+				className,
+			)}
+			{...props}
+		/>
+	),
+	a: ({ className, ...props }) => (
+		<Link
+			className={clsx(
+				"font-medium text-zinc-900 underline underline-offset-4",
+				className,
+			)}
+			{...props}
+		/>
+	),
+	p: ({ className, ...props }) => (
+		<p
+			className={clsx("leading-7 [&:not(:first-child)]:mt-6", className)}
+			{...props}
+		/>
+	),
+	ul: ({ 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} />
+	),
+	li: ({ className, ...props }) => (
+		<li className={clsx("mt-2", className)} {...props} />
+	),
+	blockquote: ({ className, ...props }) => (
+		<blockquote
+			className={clsx(
+				"mt-6 border-l-2 border-zinc-300 pl-6 italic text-zinc-800 [&>*]:text-zinc-600",
+				className,
+			)}
+			{...props}
+		/>
+	),
+	img: ({
+		className,
+		alt,
+		...props
+	}: React.ImgHTMLAttributes<HTMLImageElement>) => (
+		// eslint-disable-next-line @next/next/no-img-element
+		<img
+			className={clsx("rounded-md border border-zinc-200", className)}
+			alt={alt}
+			{...props}
+		/>
+	),
+	hr: ({ ...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} />
+		</div>
+	),
+	tr: ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
+		<tr
+			className={clsx(
+				"m-0 border-t border-zinc-300 p-0 even:bg-zinc-100",
+				className,
+			)}
+			{...props}
+		/>
+	),
+	th: ({ className, ...props }) => (
+		<th
+			className={clsx(
+				"border border-zinc-200 px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
+				className,
+			)}
+			{...props}
+		/>
+	),
+	td: ({ className, ...props }) => (
+		<td
+			className={clsx(
+				"border border-zinc-200 px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
+				className,
+			)}
+			{...props}
+		/>
+	),
+	pre: ({ className, ...props }) => (
+		<pre
+			className={clsx(
+				"mt-6 mb-4 overflow-x-auto rounded-lg bg-zinc-900 py-4",
+				className,
+			)}
+			{...props}
+		/>
+	),
+	code: ({ className, ...props }) => (
+		<code
+			className={clsx(
+				"relative rounded border bg-zinc-300 bg-opacity-25 py-[0.2rem] px-[0.3rem] font-mono text-sm text-zinc-600",
+				className,
+			)}
+			{...props}
+		/>
+	),
+	Image,
+};
+
+interface MdxProps {
+	code: string;
+}
+
+export function Mdx({ code }: MdxProps) {
+	const Component = useMDXComponent(code);
+
+	return (
+		<div className="mdx">
+			<Component components={components} />
+		</div>
+	);
+}

app/components/nav.tsx

@@ -0,0 +1,55 @@
+"use client";
+import { ArrowLeft } from "lucide-react";
+import Link from "next/link";
+import React, { useEffect, useRef, useState } from "react";
+
+export const Navigation: React.FC = () => {
+	const ref = useRef<HTMLElement>(null);
+	const [isIntersecting, setIntersecting] = useState(true);
+
+	useEffect(() => {
+		if (!ref.current) return;
+		const observer = new IntersectionObserver(([entry]) =>
+			setIntersecting(entry.isIntersecting),
+		);
+
+		observer.observe(ref.current);
+		return () => observer.disconnect();
+	}, []);
+
+	return (
+		<header ref={ref}>
+			<div
+				className={`fixed inset-x-0 top-0 z-50 backdrop-blur  duration-200 border-b  ${
+					isIntersecting
+						? "bg-zinc-900/0 border-transparent"
+						: "bg-zinc-900/500  border-zinc-800 "
+				}`}
+			>
+				<div className="container flex flex-row-reverse items-center justify-between p-6 mx-auto">
+					<div className="flex justify-between gap-8">
+						<Link
+							href="/projects"
+							className="duration-200 text-zinc-400 hover:text-zinc-100"
+						>
+							Projects
+						</Link>
+						<Link
+							href="/contact"
+							className="duration-200 text-zinc-400 hover:text-zinc-100"
+						>
+							Contact
+						</Link>
+					</div>
+
+					<Link
+						href="/"
+						className="duration-200 text-zinc-300 hover:text-zinc-100"
+					>
+						<ArrowLeft className="w-6 h-6 " />
+					</Link>
+				</div>
+			</div>
+		</header>
+	);
+};