Skip to content

Commit 111775e

Browse files
GRA0007GRA0007
committed
Rewrite homepage using tailwind
1 parent 696a55b commit 111775e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+1634
-3645
lines changed

‎.env.example‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎.eslintrc.json‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎.vscode/settings.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
11
{
2-
"typescript.tsdk": "node_modules/typescript/lib"
2+
"typescript.tsdk": "node_modules/typescript/lib",
3+
"editor.formatOnSave": true,
4+
"editor.defaultFormatter": "biomejs.biome",
5+
"editor.codeActionsOnSave": {
6+
"source.organizeImports.biome": "explicit",
7+
"source.fixAll.biome": "explicit"
8+
}
39
}

‎app/AllProjects.tsx‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎app/blog/[id]/page.tsx‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { Metadata } from 'next'
1+
import type { Metadata } from 'next'
22
import { Fira_Code, Lexend_Zetta } from 'next/font/google'
33
import { notFound } from 'next/navigation'
44

5-
import Nav from '/components/Nav/Nav'
65
import Section from '/components/Section/Section'
7-
import Socials from '/components/Socials/Socials'
86
import { fetchPost } from '/services/blog'
7+
import Nav from '../../../components/Nav'
8+
import Socials from '../../../components/Socials'
99

1010
import styles from './page.module.scss'
1111

@@ -23,18 +23,18 @@ export const generateMetadata = async ({ params }: PageProps): Promise<Metadata>
2323

2424
const sharedMetadata = {
2525
title: post?.meta.title ?? 'Not Found',
26-
description: post?.description ?? 'This blog post doesn\'t exist',
26+
description: post?.description ?? "This blog post doesn't exist",
2727
} satisfies Metadata
2828

2929
return {
3030
...sharedMetadata,
31-
keywords: ['benji', 'blog', ...post?.meta.tags.map(t => t.name) ?? []],
31+
keywords: ['benji', 'blog', ...(post?.meta.tags.map((t) => t.name) ?? [])],
3232
openGraph: {
3333
type: 'article',
3434
...sharedMetadata,
3535
images: post?.meta.cover,
3636
authors: 'Benji',
37-
tags: post?.meta.tags.map(t => t.name),
37+
tags: post?.meta.tags.map((t) => t.name),
3838
},
3939
}
4040
}
@@ -43,31 +43,31 @@ const Post = async ({ params }: PageProps) => {
4343
const post = await fetchPost(params.id).catch(() => undefined)
4444
if (!post) notFound()
4545

46-
return <>
47-
<Nav />
46+
return (
47+
<>
48+
<Nav />
4849

49-
<header>
50-
{post.meta.cover && <img className={styles.bannerImage} src={post.meta.cover} alt="" />}
51-
</header>
50+
<header>{post.meta.cover && <img className={styles.bannerImage} src={post.meta.cover} alt="" />}</header>
5251

53-
<main className={`${styles.content} ${firaCode.variable}`}>
54-
<Section>
55-
<div className={styles.meta}>
56-
<span className={lexendZetta.className}>{post.meta.number?.toString().padStart(2, '0')}</span>
57-
<span>{post.meta.published}</span>
58-
</div>
59-
<h1>{post.meta.title}</h1>
52+
<main className={`${styles.content} ${firaCode.variable}`}>
53+
<Section>
54+
<div className={styles.meta}>
55+
<span className={lexendZetta.className}>{post.meta.number?.toString().padStart(2, '0')}</span>
56+
<span>{post.meta.published}</span>
57+
</div>
58+
<h1>{post.meta.title}</h1>
6059

61-
{post.elements}
60+
{post.elements}
6261

63-
<span className={styles.lastEdited}>Last edited {post.meta.edited}</span>
64-
</Section>
65-
</main>
62+
<span className={styles.lastEdited}>Last edited {post.meta.edited}</span>
63+
</Section>
64+
</main>
6665

67-
<footer className={styles.footer}>
68-
<Socials />
69-
</footer>
70-
</>
66+
<footer className={styles.footer}>
67+
<Socials />
68+
</footer>
69+
</>
70+
)
7171
}
7272

7373
export default Post

‎app/global.css‎

Lines changed: 97 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,119 @@
1-
:root {
2-
--background: #14072E;
3-
--surface: lavender;
1+
@import "tailwindcss";
2+
3+
@theme {
4+
--color-dark: #14072E;
5+
--color-light: lavender;
6+
--spacing-gutter: max(calc(calc(calc(100vw - 1152px) + 8rem) / 2), 4rem);
7+
}
48

9+
:root {
510
font-size: min(max(2.083333vw, 16px), 24px);
6-
--gutter: max(calc(calc(calc(100vw - 1152px) + 8rem) / 2), 4rem);
711

812
--focus-ring: 2px solid currentColor;
913
}
1014
@media (max-width: 768px) {
1115
:root {
12-
--gutter: 2rem;
16+
--spacing-gutter: 2rem;
1317
}
1418
}
1519

16-
html, body {
17-
margin: 0;
18-
background: var(--background);
19-
color: var(--surface);
20+
html {
21+
@apply bg-dark text-light;
2022
}
2123

2224
body {
23-
display: flex;
24-
flex-direction: column;
25-
min-height: 100vh;
25+
@apply flex flex-col min-h-dvh;
2626
}
2727

2828
a {
29-
color: inherit;
30-
border-radius: .2em;
29+
@apply rounded-sm underline focus-visible:[outline:var(--focus-ring)] outline-offset-4;
3130
}
32-
a:focus-visible {
33-
outline: var(--focus-ring);
34-
outline-offset: .2em;
31+
32+
@keyframes appear {
33+
from {
34+
transform: scale(.5);
35+
}
36+
to {
37+
transform: scale(1);
38+
}
3539
}
3640

37-
h1 {
38-
font-size: 3em;
39-
font-weight: 400;
40-
margin-block: 1em;
41+
@keyframes blink {
42+
from, .6% {
43+
transform: scaleY(1);
44+
}
45+
.2%, .4% {
46+
transform: scaleY(0);
47+
}
4148
}
4249

43-
h2 {
44-
font-size: 2.6em;
45-
font-weight: 400;
46-
margin-block: 1em;
50+
@keyframes pop {
51+
from {
52+
transform: scale(1.05);
53+
}
54+
70% {
55+
transform: scale(1.5);
56+
opacity: 1;
57+
}
58+
to {
59+
transform: scale(1.6);
60+
opacity: 0;
61+
}
62+
}
63+
64+
.eye {
65+
--eye-size: 1em;
66+
--pupil-size: 60%;
67+
68+
height: var(--eye-size);
69+
width: var(--eye-size);
70+
border-radius: 10em;
71+
position: absolute;
72+
display: flex;
73+
align-items: center;
74+
justify-content: center;
75+
top: calc(var(--eye-y) - calc(var(--eye-size) / 2));
76+
left: calc(var(--eye-x) - calc(var(--eye-size) / 2));
77+
transition: transform .15s;
78+
animation: appear .15s ease-out;
79+
80+
&:hover {
81+
transform: scale(1.05);
82+
}
83+
84+
&::before {
85+
content: '';
86+
position: absolute;
87+
display: block;
88+
inset: 0;
89+
background: var(--color-light);
90+
animation: blink 30s linear infinite var(--blink-delay);
91+
border-radius: inherit;
92+
93+
@media (prefers-reduced-motion: reduce) {
94+
animation: none;
95+
}
96+
}
97+
98+
&::after {
99+
content: '';
100+
height: var(--pupil-size);
101+
width: var(--pupil-size);
102+
display: block;
103+
background: var(--color-dark);
104+
border-radius: inherit;
105+
transform: translate(var(--pupil-x, 0), var(--pupil-y, 0));
106+
transition: transform .15s;
107+
}
108+
109+
&[data-popped=true] {
110+
animation: pop .2s ease-in;
111+
animation-fill-mode: forwards;
112+
pointer-events: none;
113+
114+
&::after {
115+
--pupil-size: 20%;
116+
transition: height .15s ease-in, width .15s ease-in;
117+
}
118+
}
47119
}

‎public/favicon.svg‎ renamed to ‎app/icon.svg‎

File renamed without changes.

‎app/layout.tsx‎

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,34 @@
1-
import { Metadata } from 'next'
1+
import type { Metadata, Viewport } from 'next'
22
import { Lexend } from 'next/font/google'
3-
import { Analytics } from '@vercel/analytics/react'
4-
53
import './global.css'
64

75
const lexend = Lexend({ subsets: ['latin'] })
86

9-
const sharedMetadata = {
7+
export const metadata: Metadata = {
8+
metadataBase: new URL('https://bengrant.dev'),
109
title: {
1110
absolute: 'Benji',
1211
template: '%s - Benji',
1312
},
14-
description: 'Hi, I\'m Benji. I make websites that bring joy. Click through to learn more about me!',
15-
} satisfies Metadata
16-
17-
export const metadata: Metadata = {
18-
...sharedMetadata,
19-
metadataBase: new URL('https://bengrant.dev'),
20-
icons: [{ rel: 'mask-icon icon', url: '/favicon.svg' }],
21-
themeColor: '#14072E',
13+
description: "Hi, I'm Benji. I make websites that bring joy. Click through to learn more about me!",
2214
keywords: ['benji', 'personal', 'resume', 'about', 'projects', 'crab fit', 'blog'],
2315
openGraph: {
24-
type: 'website',
25-
...sharedMetadata,
16+
type: 'profile',
17+
firstName: 'Benji',
18+
lastName: 'Grant',
2619
},
20+
robots: 'index, follow',
21+
}
22+
23+
export const viewport: Viewport = {
24+
themeColor: '#14072E',
25+
colorScheme: 'light dark',
2726
}
2827

29-
const RootLayout = ({ children }: { children: React.ReactNode }) =>
28+
const RootLayout = ({ children }: { children: React.ReactNode }) => (
3029
<html lang="en">
31-
<body className={lexend.className}>
32-
{children}
33-
<Analytics />
34-
</body>
30+
<body className={lexend.className}>{children}</body>
3531
</html>
32+
)
3633

3734
export default RootLayout

‎app/not-found.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import Nav from '/components/Nav/Nav'
2-
import Section from '/components/Section/Section'
1+
import { Nav } from '/components/Nav'
32

4-
const NotFound = () =>
3+
const NotFound = () => (
54
<>
65
<Nav />
7-
<Section style={{ flex: 1, textAlign: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
6+
7+
<main className="flex flex-1 items-center justify-center px-gutter text-center">
88
<p>Sorry, but the page you're looking for couldn't be found.</p>
9-
</Section>
9+
</main>
1010
</>
11+
)
1112

1213
export default NotFound

0 commit comments

Comments
 (0)