jaspermayone.com
+1
postcss.config.mjs
+1
postcss.config.mjs
+13
-2
src/app/layout.tsx
+13
-2
src/app/layout.tsx
···
2
2
import { SpeedInsights } from "@vercel/speed-insights/next";
3
3
import { AnimatePresence } from "framer-motion";
4
4
import type { Metadata, Viewport } from "next";
5
+
import localFont from "next/font/local";
5
6
import Script from "next/script";
7
+
8
+
const cuteNotes = localFont({
9
+
src: [
10
+
{
11
+
path: "../../public/fonts/CuteNotes.ttf",
12
+
style: "normal",
13
+
},
14
+
],
15
+
variable: "--font-cuteNotes",
16
+
});
6
17
7
18
export const metadata: Metadata = {
8
19
title: {
···
40
51
children: React.ReactNode;
41
52
}>) {
42
53
return (
43
-
<html lang="en" className="light">
54
+
<html lang="en" className={`light ${cuteNotes.variable}`}>
44
55
<head>
45
56
<meta property="og:image" content="https://jaspermayone.com/api/og" />
46
57
<link rel="icon" href="/icon" sizes="any" />
47
58
</head>
48
-
<body>
59
+
<body className={`${cuteNotes.variable} font-sans`}>
49
60
<Script
50
61
src="https://kit.fontawesome.com/96163f3b63.js"
51
62
crossOrigin="anonymous"
+1
-1
src/app/page.tsx
+1
-1
src/app/page.tsx
···
42
42
animate={{ opacity: 1 }}
43
43
transition={{ type: "spring", duration: 1.5 }}
44
44
>
45
-
<div className="flex flex-col md:flex-row gap-8 items-top -mt-8">
45
+
<div className="flex flex-col md:flex-row gap-8 items-top -mt-8 mx-5">
46
46
<div className="w-64 flex-shrink-0">
47
47
<RoundedImage
48
48
src="/images/jmdark-min.jpg"
+11
-12
src/app/verify/page.tsx
+11
-12
src/app/verify/page.tsx
···
1
+
"use client";
1
2
import { AtSign } from "lucide-react";
2
-
import { Metadata } from "next";
3
3
import Link from "next/link";
4
4
import {
5
5
SiBluesky,
···
14
14
SiYoutube,
15
15
} from "react-icons/si";
16
16
17
-
export const metadata: Metadata = {
18
-
title: "Verify",
19
-
description:
20
-
"A page to verify my identity across various platforms and domains.",
21
-
};
22
-
23
17
import { EmailCard } from "@/components/EmailCard";
24
-
25
-
const LetterBlock = ({ letter }) => (
26
-
<span className="inline-block py-1 mx-0.5">{letter}</span>
27
-
);
28
18
29
19
const WavyDivider = () => (
30
20
<div className="my-6">
···
43
33
</div>
44
34
);
45
35
36
+
const LetterBlock = ({ letter }) => (
37
+
<span
38
+
className="inline-block py-1 mx-0.5"
39
+
style={{ fontFamily: "var(--font-cuteNotes)" }}
40
+
>
41
+
{letter}
42
+
</span>
43
+
);
44
+
46
45
const SectionHeader = ({ children }) => (
47
-
<h2 className="text-4xl mb-2 font-cute-notes">
46
+
<h2 className="text-4xl mb-2" style={{ fontFamily: "var(--font-cuteNotes)" }}>
48
47
{children.split("").map((letter, index) => (
49
48
<LetterBlock key={index} letter={letter} />
50
49
))}
+1
-1
src/components/email.tsx
+1
-1
src/components/email.tsx
···
75
75
<Input
76
76
type="email"
77
77
placeholder="example@example.com"
78
-
className="flex-1 text-sm outline-dashed outline-1.5 outline-blurre"
78
+
className="flex-1 text-sm outline-none border-1 border-gray-300 focus:border-blue-400 focus:ring-blue-400"
79
79
value={email}
80
80
onChange={handleInputChange}
81
81
aria-label="email"
+1
src/styles/globals.css
+1
src/styles/globals.css
+2
-1
tailwind.config.ts
+2
-1
tailwind.config.ts