My personal site.
theclashfruit.me
feat: seo + links page
+186
-12
+87
app/(main)/links/page.tsx
+87
app/(main)/links/page.tsx
···
1
+
import Link from 'next/link';
2
+
import Image from 'next/image';
3
+
4
+
import styles from '@/styles/pages/Links.module.scss';
5
+
6
+
import type { Metadata } from 'next';
7
+
8
+
// Types for our buttons
9
+
interface ButtonLink {
10
+
title: string;
11
+
img: string;
12
+
href: string;
13
+
}
14
+
15
+
const buttons: ButtonLink[] = [
16
+
{
17
+
title: 'Volpeon',
18
+
img: 'https://volpeon.ink/_assets/btn1.svg',
19
+
href: 'https://volpeon.ink/'
20
+
},
21
+
{
22
+
title: 'Pebble',
23
+
img: 'https://pebble.pet/button.gif',
24
+
href: 'https://pebble.pet/'
25
+
}
26
+
];
27
+
28
+
export const metadata: Metadata = {
29
+
title: 'Links'
30
+
};
31
+
32
+
export default function LinksPage() {
33
+
return (
34
+
<>
35
+
<h3>Socials</h3>
36
+
<ul>
37
+
<li>
38
+
<Link href="https://bsky.app/profile/theclashfruit.me">Bluesky</Link>
39
+
</li>
40
+
<li>
41
+
<Link href="https://wetdry.world/@TheClashFruit">Mastodon</Link>
42
+
</li>
43
+
<li>
44
+
<Link href="https://github.com/TheClashFruit">GitHub</Link>
45
+
</li>
46
+
<li>
47
+
<Link href="https://tangled.org/theclashfruit.me">Tangled</Link>
48
+
</li>
49
+
<li>
50
+
<Link href="https://www.furaffinity.net/user/theclashfruit">
51
+
Fur Affinity
52
+
</Link>{' '}
53
+
(I don't use it but maybe in the future.)
54
+
</li>
55
+
<li>
56
+
<Link href="https://ko-fi.com/theclashfruit">Ko-Fi</Link>
57
+
</li>
58
+
<li>
59
+
<Link href="https://discord.gg/CWEApqJ6rc">Discord Server</Link>
60
+
</li>
61
+
</ul>
62
+
63
+
<h3>Buttons</h3>
64
+
<div
65
+
style={{
66
+
display: 'flex',
67
+
flexWrap: 'wrap',
68
+
gap: '4px'
69
+
}}
70
+
>
71
+
{buttons.map((btn, i) => (
72
+
<Link href={btn.href} className={styles.button} key={i}>
73
+
<Image
74
+
src={btn.img}
75
+
width={88}
76
+
height={31}
77
+
alt={btn.title}
78
+
unoptimized
79
+
/>
80
+
</Link>
81
+
))}
82
+
</div>
83
+
84
+
<p>The 88x31 buttons are the property of their respective owners, check their websites out!</p>
85
+
</>
86
+
);
87
+
}
+16
-6
app/(main)/page.mdx
+16
-6
app/(main)/page.mdx
···
1
1
export const metadata = {
2
-
title: 'Home',
2
+
title: 'Home'
3
3
};
4
4
5
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue urna sed lectus condimentum blandit. Suspendisse sodales hendrerit commodo. Pellentesque ac massa urna. Donec ut posuere enim. Aliquam id velit tincidunt, lobortis ante at, varius dui. Ut lacinia elit enim, eget aliquam ligula eleifend non. Aliquam non mauris et nulla vulputate iaculis et sed felis. Donec bibendum suscipit elementum. In facilisis lacinia justo.
5
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor purus et libero laoreet varius. Donec faucibus ipsum ut mi eleifend, ut aliquam augue egestas. Cras in tincidunt metus. Quisque tempus lobortis lorem, nec mollis metus sodales sit amet. Morbi vestibulum elementum sem, ac auctor lorem egestas sit amet. Sed interdum laoreet orci et tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse pharetra odio facilisis lectus mollis, ac iaculis lorem ornare. Aenean sollicitudin massa commodo, fermentum lorem eget, facilisis leo. Aliquam porta lectus ac sapien rhoncus ullamcorper. Curabitur sit amet egestas justo. Aenean a tempus ante. Sed tempus ut sem bibendum efficitur. Vestibulum et tortor quis ipsum ultricies ornare.
6
6
7
-
Mauris eu tristique purus. Sed vulputate ultrices justo eget vehicula. Vestibulum ac purus id lectus finibus accumsan. Vestibulum congue purus lectus, ut ullamcorper lorem bibendum at. Vivamus et egestas nisi. Nunc vulputate, sapien sollicitudin tristique mattis, nibh leo suscipit augue, in volutpat est neque id est. Suspendisse potenti. Duis blandit sapien vestibulum lorem iaculis, id semper leo dapibus. Curabitur a nulla diam. Curabitur a consequat nunc. Donec tincidunt vitae dui at tristique. Mauris finibus erat non nibh tincidunt, in ultrices diam sodales. Integer cursus sollicitudin nulla dapibus vehicula. Fusce blandit imperdiet eros, a porta nunc interdum ac.
7
+
Maecenas scelerisque iaculis purus sed laoreet. Pellentesque id facilisis nunc. Vestibulum euismod scelerisque massa eget condimentum. In non dignissim nibh, sit amet rhoncus purus. Duis et magna vel ante sagittis fringilla quis vitae dui. Quisque ultricies massa dui, non rhoncus eros pretium at. Suspendisse potenti. Donec at commodo lectus. Pellentesque maximus ex a tempor rhoncus. In erat odio, vestibulum a malesuada vel, rhoncus ut diam.
8
8
9
-
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut facilisis ut ipsum vitae aliquam. Suspendisse elit sem, placerat vitae leo ac, viverra imperdiet turpis. Suspendisse fermentum risus ante, vitae egestas tellus finibus a. Integer vulputate lorem quis massa condimentum, non lacinia libero dignissim. Duis auctor laoreet lacinia. Nulla nulla elit, gravida sit amet sollicitudin vel, pharetra id augue.
9
+
Aenean tempus augue id aliquet luctus. Vivamus tincidunt magna erat, a dictum quam rutrum quis. Vestibulum quis pulvinar lacus. Curabitur vel convallis ligula. Donec sit amet ultricies odio. Aenean in convallis ligula. Vivamus sit amet blandit turpis. Duis sit amet ligula elit. Aenean a felis luctus tellus maximus efficitur. Phasellus facilisis massa at volutpat aliquam.
10
10
11
-
Donec ac odio in mauris sollicitudin laoreet. Suspendisse potenti. Etiam convallis, purus eget dictum tincidunt, magna leo sodales mi, non fermentum lectus nunc at enim. Morbi et ex quam. Suspendisse sit amet ultrices ex. Donec ex ante, vestibulum sed blandit eget, mollis sit amet eros. Cras aliquet ante in justo lobortis, vitae fringilla libero consectetur. Morbi imperdiet feugiat laoreet. Etiam aliquet urna vel massa pulvinar, in vestibulum nisi tincidunt. Fusce eget velit non lorem ultrices vulputate. Aenean purus dolor, ultricies nec leo quis, congue imperdiet neque. Proin quis massa nec nisi bibendum aliquet pulvinar ut velit.
11
+
Pellentesque nisi risus, condimentum ac justo eget, posuere auctor augue. Nunc in nisl augue. Integer eu viverra turpis. Etiam eget finibus nisi. Integer tincidunt nibh at volutpat tempus. Integer lobortis et magna vitae malesuada. Aliquam mauris tellus, venenatis nec massa vel, euismod varius turpis. Aliquam scelerisque rutrum mattis. Aliquam erat volutpat. Vestibulum eget volutpat orci. Maecenas tortor elit, consequat in egestas et, consequat eu lacus. Sed luctus aliquet velit, sit amet fermentum magna consectetur ut. Quisque ut neque justo. Donec eget consequat risus.
12
12
13
-
Ut aliquam, sapien sed pellentesque porttitor, tellus mauris rutrum eros, id luctus tortor neque sed diam. Maecenas ex lorem, feugiat in diam vel, vestibulum feugiat augue. In ipsum nisi, sagittis vel eleifend placerat, commodo sed odio. Etiam at rhoncus mauris. Nulla viverra auctor massa sit amet auctor. Sed fermentum mi quis justo ullamcorper, ut maximus nunc pretium. Maecenas suscipit mauris eget odio pellentesque, eu posuere sapien gravida. Suspendisse imperdiet nulla augue, ullamcorper laoreet elit pulvinar pulvinar. Donec eget placerat augue. Sed arcu arcu, convallis eu placerat nec, luctus ut ante. Sed nec mauris eget erat pretium molestie eget non justo. In pharetra, lectus nec mollis accumsan, lectus lacus efficitur tellus, gravida varius est elit eu tellus.
13
+
Proin vel ligula et velit blandit dignissim. Morbi sed libero ex. Donec dui ligula, euismod quis purus eget, placerat consequat lectus. Sed consequat justo ut consectetur sodales. Aliquam erat volutpat. Phasellus faucibus turpis accumsan bibendum ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi tincidunt, eros vel euismod tristique, nisl justo lacinia nulla, ac dignissim nisl ipsum id quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque accumsan leo mi, at luctus urna vehicula ut. Morbi sit amet ante vel lorem aliquam ultricies quis ac nunc.
14
+
15
+
Integer convallis libero ullamcorper risus vehicula interdum. Integer a sollicitudin orci. Sed blandit lectus est, non tincidunt leo mollis facilisis. Nunc at imperdiet nisl. Donec congue dolor sit amet rutrum auctor. Sed vitae odio semper, laoreet augue id, porttitor tellus. Nullam condimentum non orci eget lacinia. Ut at arcu molestie, cursus enim ac, cursus tellus. Suspendisse tincidunt faucibus volutpat. Curabitur lectus diam, malesuada eget finibus sit amet, iaculis eu odio. Etiam eu tortor lectus. Ut ante leo, placerat a risus a, egestas aliquet ligula. Donec libero urna, condimentum eu ex eget, auctor mattis dolor. Etiam ante augue, gravida sit amet ullamcorper ac, lacinia non elit. Nulla nec tincidunt lacus, non viverra lorem.
16
+
17
+
Nunc efficitur est in pretium mollis. Pellentesque interdum interdum lectus vitae sodales. Nunc nisl eros, venenatis sit amet sem eu, feugiat sagittis velit. Proin ac erat libero. Donec luctus euismod consequat. Suspendisse condimentum at sapien ut euismod. Proin imperdiet risus quis lacus bibendum viverra. Nulla eget urna leo. Duis quam massa, sodales commodo leo sit amet, accumsan convallis risus. Donec ante lectus, dapibus nec ligula at, sodales tincidunt leo. Phasellus id magna ut urna tristique malesuada. Ut porta commodo euismod. Pellentesque a elit ac lorem iaculis luctus.
18
+
19
+
Nunc aliquet est nec lobortis facilisis. Vestibulum quis nunc semper, commodo felis in, condimentum diam. Fusce posuere quis mauris fringilla fringilla. Vestibulum quis sapien a elit rhoncus semper sit amet et neque. Maecenas tristique dignissim diam in condimentum. Proin eget rutrum nisi. Duis tristique ante at sem hendrerit ultricies. Aliquam rhoncus ex eu enim sagittis suscipit. Sed tellus metus, interdum eu odio sit amet, tempus interdum lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum nec gravida elit.
20
+
21
+
Pellentesque orci sem, faucibus facilisis pellentesque iaculis, ultrices id massa. Mauris malesuada, dolor a maximus convallis, mi neque mattis dolor, eu dapibus orci nibh et nibh. Nulla vestibulum ultrices eros eu consectetur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sed eros ut tortor eleifend viverra id eget mauris. Mauris vitae consectetur lorem. Etiam dictum venenatis justo non lacinia. Pellentesque dictum sapien ut metus maximus, vitae dignissim sem lobortis. Duis auctor fringilla dolor. Mauris non eleifend purus.
22
+
23
+
Ut id commodo nisi. Nam vulputate nisl nisl, eu volutpat ligula bibendum at. Duis ornare feugiat bibendum. Nunc vel luctus ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras quis aliquet nisl. Nullam ultricies, leo in vehicula congue, dolor tortor imperdiet ligula, sit amet mattis quam libero semper metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean efficitur laoreet turpis, ut tincidunt ante aliquam in.
app/favicon.ico
app/favicon.ico
This is a binary file and will not be displayed.
+18
-2
app/layout.tsx
+18
-2
app/layout.tsx
···
1
-
import type { Metadata } from 'next';
1
+
import type { Metadata, Viewport } from 'next';
2
2
3
3
import localFont from 'next/font/local';
4
4
···
16
16
});
17
17
18
18
export const metadata: Metadata = {
19
+
metadataBase: new URL('https://theclashfruit.me'),
19
20
title: {
20
21
default: 'TheClashFruit',
21
22
template: 'TheClashFruit • %s'
22
23
},
23
-
description: ':3'
24
+
description: 'A fluffy dragon smashing buttons on a keyboard and darwing lines on paper.',
25
+
openGraph: {
26
+
type: 'website',
27
+
siteName: 'TheClashFruit',
28
+
description: 'A fluffy dragon smashing buttons on a keyboard and darwing lines on paper.',
29
+
url: 'https://theclashfruit.me'
30
+
}
31
+
};
32
+
33
+
export const viewport: Viewport = {
34
+
width: 'device-width',
35
+
initialScale: 1,
36
+
themeColor: [
37
+
{ media: '(prefers-color-scheme: dark)', color: '#BFC1FF' },
38
+
{ media: '(prefers-color-scheme: light)', color: '#565992' }
39
+
]
24
40
};
25
41
26
42
export default function RootLayout({
+16
public/favicon.svg
+16
public/favicon.svg
···
1
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+
<path d="M11.0002 20C9.24428 20.0053 7.55048 19.3505 6.25474 18.1654C4.959 16.9803 4.15599 15.3515 4.00496 13.6021C3.85393 11.8527 4.36591 10.1104 5.43937 8.72074C6.51283 7.33112 8.06935 6.3957 9.80022 6.1C15.5002 5 17.0002 4.48 19.0002 2C20.0002 4 21.0002 6.18 21.0002 10C21.0002 15.5 16.2202 20 11.0002 20Z" stroke="#565992" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
3
+
<path d="M2 21C2 18 3.85 15.64 7.08 15C9.5 14.52 12 13 13 12" stroke="#565992" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
4
+
5
+
<style>
6
+
path {
7
+
stroke: #565992;
8
+
}
9
+
10
+
@media (prefers-color-scheme: dark) {
11
+
path {
12
+
stroke: #BFC1FF;
13
+
}
14
+
}
15
+
</style>
16
+
</svg>
+1
styles/components/Container.module.scss
+1
styles/components/Container.module.scss
+9
styles/globals.scss
+9
styles/globals.scss
···
8
8
box-sizing: border-box;
9
9
10
10
scrollbar-color: var(--primary) var(--surface);
11
+
scrollbar-gutter: stable;
11
12
}
12
13
13
14
body {
···
21
22
22
23
> main {
23
24
flex: 1;
25
+
26
+
ul, ol {
27
+
margin-bottom: 8px;
28
+
29
+
&:last-child {
30
+
margin-bottom: 0;
31
+
}
32
+
}
24
33
}
25
34
}
26
35
+2
styles/layout/Main.module.scss
+2
styles/layout/Main.module.scss
+11
styles/pages/Links.module.scss
+11
styles/pages/Links.module.scss
+15
styles/typography.module.scss
+15
styles/typography.module.scss
···
1
1
body {
2
2
font-family: var(--fontCantarell), sans-serif;
3
+
3
4
font-size: 100%;
4
5
font-weight: 400;
6
+
7
+
line-height: 1.35;
8
+
}
9
+
10
+
::selection {
11
+
background: color-mix(var(--primary) 25%, transparent 75%);
5
12
}
6
13
7
14
h1,
···
55
62
pre,
56
63
code {
57
64
font-family: var(--fontMonaspaceRadon), monospace;
65
+
}
66
+
67
+
pre {
68
+
margin-bottom: 8px;
69
+
70
+
&:last-child {
71
+
margin-bottom: 0;
72
+
}
58
73
}
59
74
60
75
button,