basically just your average cs student slop site
schtormm.nl
add some fanciness (thanks claude)
+372
-164
+151
-85
app/cv/page.tsx
+151
-85
app/cv/page.tsx
···
1
1
import { Metadata } from "next";
2
+
import Link from "next/link";
2
3
3
4
export const metadata: Metadata = {
4
5
title: "cv - storm's site",
5
6
description: "storm's personal site",
6
7
};
7
8
8
-
export default function Home() {
9
+
export default function CV() {
9
10
return (
10
-
<main>
11
-
<div className="flex h-screen bg-gray-50 dark:bg-gray-950 flex-col items-center justify-center">
12
-
<div className="pt-10 flex flex-col items-center justify-center gap-10">
13
-
<div>
14
-
<h1 className="text-3xl text-center dark:text-white">Experience</h1>
15
-
<div className="w-sm flex flex-col items-center gap-4">
16
-
<h2 className=" font-bold dark:text-white">
17
-
September 2024 - January 2025
18
-
</h2>
19
-
<div className="flex items-center gap-2">
20
-
<div className="border-l-2 border-purple-200 h-12 my-2"></div>
21
-
<div className="flex flex-col">
22
-
<h1 className="text-xl dark:text-white">
23
-
<a className="text-indigo-400" href="https://stager.co">
24
-
Stager
25
-
</a>{" "}
26
-
- Internship
27
-
</h1>
28
-
<article className="dark:text-white text-sm">
29
-
Dutch SaaS company for event planning, ticket sales,
30
-
marketing and more
31
-
</article>
32
-
</div>
33
-
</div>
34
-
<p className="wp dark:text-white text-wrap">
11
+
<main className="min-h-screen bg-gray-50 dark:bg-gray-950 px-5 py-12">
12
+
<div className="max-w-xl mx-auto animate-fade-left">
13
+
{/* Back button */}
14
+
<Link
15
+
href="/"
16
+
className="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors mb-8 group"
17
+
>
18
+
<span className="group-hover:-translate-x-0.5 transition-transform">
19
+
←
20
+
</span>
21
+
<span>Back</span>
22
+
</Link>
23
+
24
+
{/* Experience */}
25
+
<section className="mb-12">
26
+
<h2 className="text-xs font-semibold uppercase tracking-widest text-indigo-500 dark:text-indigo-400 mb-6">
27
+
Experience
28
+
</h2>
29
+
30
+
{/* Timeline */}
31
+
<div className="relative">
32
+
<div className="absolute left-[7px] top-2 bottom-0 w-px bg-gray-200 dark:bg-gray-800" />
33
+
34
+
<div className="relative pl-8">
35
+
<div className="absolute left-0 top-1.5 w-3.5 h-3.5 rounded-full bg-indigo-500 border-2 border-gray-50 dark:border-gray-950 shadow-sm shadow-indigo-500/40" />
36
+
<p className="text-xs text-gray-400 dark:text-gray-500 mb-1 font-medium">
37
+
September 2024 – January 2025
38
+
</p>
39
+
<h3 className="font-semibold dark:text-white text-gray-900">
40
+
<a
41
+
className="text-indigo-500 dark:text-indigo-400 hover:text-indigo-400 dark:hover:text-indigo-300 transition-colors"
42
+
href="https://stager.co"
43
+
target="_blank"
44
+
rel="noopener noreferrer"
45
+
>
46
+
Stager
47
+
</a>{" "}
48
+
— Internship
49
+
</h3>
50
+
<p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
51
+
Dutch SaaS company for event planning, ticket sales, marketing
52
+
and more.
53
+
</p>
54
+
<p className="text-sm text-gray-600 dark:text-gray-300 mt-2 leading-relaxed">
35
55
Worked on a project refactoring and redesigning the customizable
36
-
newsletter unsubscription for the company's clients. Also worked
37
-
on refactoring various other parts of the application to bring
38
-
them up to date with current style and structure.
56
+
newsletter unsubscription flow for the company's clients. Also
57
+
refactored various other parts of the application to bring them
58
+
up to date with current style and structure.
39
59
</p>
40
60
</div>
41
61
</div>
42
-
<div>
43
-
<h1 className="text-3xl text-center dark:text-white">Projects</h1>
44
-
<div className="w-sm flex flex-col gap-4">
45
-
<div className="w-sm flex flex-col gap-4">
46
-
<h1 className="dark:text-white text-xl">Semester 6</h1>
47
-
<article className="dark:text-white text-sm">
48
-
Interdisciplinary prototype of a VR appplication for{" "}
62
+
</section>
63
+
64
+
{/* Divider */}
65
+
<div className="border-t border-gray-100 dark:border-gray-800 mb-12" />
66
+
67
+
{/* Projects */}
68
+
<section>
69
+
<h2 className="text-xs font-semibold uppercase tracking-widest text-indigo-500 dark:text-indigo-400 mb-6">
70
+
Projects
71
+
</h2>
72
+
73
+
<div className="flex flex-col gap-4">
74
+
{/* Semester 6 */}
75
+
<div className="bg-white dark:bg-gray-900 rounded-2xl p-5 border border-gray-100 dark:border-gray-800 shadow-sm hover:shadow-md hover:border-indigo-100 dark:hover:border-indigo-900/60 transition-all">
76
+
<div className="flex items-start justify-between gap-3 mb-2">
77
+
<h3 className="font-semibold text-gray-900 dark:text-white">
78
+
Semester 6 — VR Application
79
+
</h3>
80
+
<span className="text-xs bg-indigo-50 dark:bg-indigo-950/60 text-indigo-500 dark:text-indigo-400 border border-indigo-100 dark:border-indigo-900/50 px-2 py-0.5 rounded-full whitespace-nowrap flex-shrink-0">
81
+
VR / Unity
82
+
</span>
83
+
</div>
84
+
<p className="text-sm text-gray-500 dark:text-gray-400">
85
+
Interdisciplinary prototype for{" "}
86
+
<a
87
+
className="text-indigo-500 dark:text-indigo-400 hover:underline underline-offset-2 transition-colors"
88
+
href="https://www.vonkrotterdam.nl/"
89
+
target="_blank"
90
+
rel="noopener noreferrer"
91
+
>
92
+
Innovatiecentrum VONK
93
+
</a>
94
+
</p>
95
+
<p className="text-sm text-gray-600 dark:text-gray-300 mt-2 leading-relaxed">
96
+
Collaborated with four students to build a VR prototype using
97
+
Unity, FastAPI, and the Oculus SDK to showcase the possibilities
98
+
of VR in tourism.
99
+
</p>
100
+
</div>
101
+
102
+
{/* Project D */}
103
+
<div className="bg-white dark:bg-gray-900 rounded-2xl p-5 border border-gray-100 dark:border-gray-800 shadow-sm hover:shadow-md hover:border-indigo-100 dark:hover:border-indigo-900/60 transition-all">
104
+
<div className="flex items-start justify-between gap-3 mb-2">
105
+
<h3 className="font-semibold text-gray-900 dark:text-white">
49
106
<a
50
-
className="text-indigo-400"
51
-
href="https://www.vonkrotterdam.nl/"
107
+
className="text-indigo-500 dark:text-indigo-400 hover:text-indigo-400 dark:hover:text-indigo-300 transition-colors"
108
+
href="https://github.com/pablosanderman/project-d"
109
+
target="_blank"
110
+
rel="noopener noreferrer"
52
111
>
53
-
Innovatiecentrum VONK
54
-
</a>{" "}
55
-
</article>
56
-
<p className="dark:text-white text-wrap">
57
-
Worked together with four other students to create a prototype
58
-
for a VR application using Unity, FastAPI, the Oculus SDK and
59
-
other technologies to showcase the possibilities of VR in
60
-
tourism.
61
-
</p>
62
-
</div>
63
-
<div className="w-sm flex flex-col gap-4">
64
-
<h1 className="text-indigo-400 text-xl">
65
-
<a href="https://github.com/pablosanderman/project-d">
66
112
Project D
67
113
</a>
68
-
</h1>
69
-
<article className="dark:text-white text-sm">
70
-
Room booking app prototype to showcase to{" "}
71
-
<a className="text-indigo-400" href="https://eneco.nl">
72
-
Eneco{" "}
73
-
</a>
74
-
as part of the "Project D" course
75
-
</article>
76
-
<p className="dark:text-white text-wrap">
77
-
Worked together with four other students to create a prototype
78
-
for a meeting room booking app using React Native and various
79
-
other technologies such as Postgres and Expo.
80
-
</p>
114
+
</h3>
115
+
<span className="text-xs bg-indigo-50 dark:bg-indigo-950/60 text-indigo-500 dark:text-indigo-400 border border-indigo-100 dark:border-indigo-900/50 px-2 py-0.5 rounded-full whitespace-nowrap flex-shrink-0">
116
+
React Native
117
+
</span>
81
118
</div>
82
-
<div className="w-sm flex flex-col gap-4">
83
-
<h1 className="dark:text-white text-xl">Project C</h1>
84
-
<article className="dark:text-white text-sm">
85
-
Prototype of a webapp to manage{" "}
86
-
<a
87
-
className="text-indigo-400"
88
-
href="https://en.wikipedia.org/wiki/OGSM"
89
-
>
90
-
OGSM{" "}
91
-
</a>{" "}
92
-
charts for{" "}
93
-
<a className="text-indigo-400" href="https://centric.eu/en/">
94
-
Centric
95
-
</a>{" "}
96
-
as part of the "Project C" course
97
-
</article>
98
-
<p className="dark:text-white text-wrap">
99
-
Worked together with two other students to create a prototype
100
-
for a webapp to manage strategic charts using NextJS
101
-
</p>
119
+
<p className="text-sm text-gray-500 dark:text-gray-400">
120
+
Room booking app prototype for{" "}
121
+
<a
122
+
className="text-indigo-500 dark:text-indigo-400 hover:underline underline-offset-2 transition-colors"
123
+
href="https://eneco.nl"
124
+
target="_blank"
125
+
rel="noopener noreferrer"
126
+
>
127
+
Eneco
128
+
</a>
129
+
</p>
130
+
<p className="text-sm text-gray-600 dark:text-gray-300 mt-2 leading-relaxed">
131
+
Collaborated with four students to build a meeting room booking
132
+
app using React Native, Expo, and Postgres.
133
+
</p>
134
+
</div>
135
+
136
+
{/* Project C */}
137
+
<div className="bg-white dark:bg-gray-900 rounded-2xl p-5 border border-gray-100 dark:border-gray-800 shadow-sm hover:shadow-md hover:border-indigo-100 dark:hover:border-indigo-900/60 transition-all">
138
+
<div className="flex items-start justify-between gap-3 mb-2">
139
+
<h3 className="font-semibold text-gray-900 dark:text-white">
140
+
Project C
141
+
</h3>
142
+
<span className="text-xs bg-indigo-50 dark:bg-indigo-950/60 text-indigo-500 dark:text-indigo-400 border border-indigo-100 dark:border-indigo-900/50 px-2 py-0.5 rounded-full whitespace-nowrap flex-shrink-0">
143
+
Next.js
144
+
</span>
102
145
</div>
146
+
<p className="text-sm text-gray-500 dark:text-gray-400">
147
+
<a
148
+
className="text-indigo-500 dark:text-indigo-400 hover:underline underline-offset-2 transition-colors"
149
+
href="https://en.wikipedia.org/wiki/OGSM"
150
+
target="_blank"
151
+
rel="noopener noreferrer"
152
+
>
153
+
OGSM
154
+
</a>{" "}
155
+
chart management webapp for{" "}
156
+
<a
157
+
className="text-indigo-500 dark:text-indigo-400 hover:underline underline-offset-2 transition-colors"
158
+
href="https://centric.eu/en/"
159
+
target="_blank"
160
+
rel="noopener noreferrer"
161
+
>
162
+
Centric
163
+
</a>
164
+
</p>
165
+
<p className="text-sm text-gray-600 dark:text-gray-300 mt-2 leading-relaxed">
166
+
Collaborated with two other students to build a strategic chart
167
+
management webapp using Next.js.
168
+
</p>
103
169
</div>
104
170
</div>
105
-
</div>
171
+
</section>
106
172
</div>
107
173
</main>
108
174
);
+120
-26
app/links/page.tsx
+120
-26
app/links/page.tsx
···
1
1
import { Metadata } from "next";
2
+
import Link from "next/link";
2
3
3
4
export const metadata: Metadata = {
4
5
title: "links - storm's site",
5
6
description:
6
-
"storm's personal site - links to personal profiles and platforms",
7
+
"storm's personal site - links to personal profiles and platforms",
7
8
};
8
9
9
-
export default function Home() {
10
+
export default function Links() {
10
11
return (
11
-
<main>
12
-
<div className="bg-gray-50 dark:bg-gray-950 flex h-screen">
13
-
<div className="flex flex-col items-center justify-center gap-4 pt-10 align-middle w-full">
14
-
<h1 className="text-3xl text-center dark:text-white">
15
-
Links and profiles
12
+
<main className="min-h-screen bg-gray-50 dark:bg-gray-950 px-5 py-12">
13
+
<div className="max-w-sm mx-auto animate-fade-left">
14
+
{/* Back button */}
15
+
<Link
16
+
href="/"
17
+
className="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors mb-8 group"
18
+
>
19
+
<span className="group-hover:-translate-x-0.5 transition-transform">
20
+
←
21
+
</span>
22
+
<span>Back</span>
23
+
</Link>
24
+
25
+
{/* Header */}
26
+
<div className="mb-8">
27
+
<h1 className="text-2xl font-semibold dark:text-white tracking-tight">
28
+
Links & Profiles
16
29
</h1>
17
-
<p className="text-center dark:text-white">
18
-
If you need to send me a message, here's a few platforms to do that
19
-
on!
30
+
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
31
+
A few places you can find or reach me.
20
32
</p>
33
+
</div>
34
+
35
+
{/* Social links */}
36
+
<div className="flex flex-col gap-3">
21
37
<a
22
-
className="dark:text-white text-xl px-5 py-2 bg-gray-400 rounded-md"
23
38
href="https://github.com/schtormm"
39
+
target="_blank"
40
+
rel="noopener noreferrer"
41
+
className="flex items-center gap-4 px-5 py-4 bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 rounded-2xl shadow-sm hover:shadow-md hover:border-indigo-100 dark:hover:border-indigo-900/60 transition-all group"
24
42
>
25
-
<span>
26
-
<i></i>GitHub
43
+
<div className="w-10 h-10 rounded-xl bg-gray-900 dark:bg-gray-100 flex items-center justify-center flex-shrink-0">
44
+
<svg
45
+
role="img"
46
+
viewBox="0 0 24 24"
47
+
className="w-5 h-5 fill-white dark:fill-gray-900"
48
+
xmlns="http://www.w3.org/2000/svg"
49
+
>
50
+
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
51
+
</svg>
52
+
</div>
53
+
<div>
54
+
<div className="font-medium text-gray-900 dark:text-white text-sm">
55
+
GitHub
56
+
</div>
57
+
<div className="text-xs text-gray-400 dark:text-gray-500">
58
+
schtormm
59
+
</div>
60
+
</div>
61
+
<span className="ml-auto text-gray-300 dark:text-gray-600 group-hover:text-indigo-400 group-hover:translate-x-0.5 transition-all text-sm">
62
+
→
27
63
</span>
28
64
</a>
65
+
29
66
<a
30
-
className="dark:text-white text-xl px-5 py-2 bg-sky-400 rounded-md"
31
67
href="https://bsky.schtormm.nl"
32
-
id="bluesky"
68
+
target="_blank"
69
+
rel="noopener noreferrer"
70
+
className="flex items-center gap-4 px-5 py-4 bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 rounded-2xl shadow-sm hover:shadow-md hover:border-sky-100 dark:hover:border-sky-900/60 transition-all group"
33
71
>
34
-
<span>
35
-
<i></i>BlueSky
72
+
<div className="w-10 h-10 rounded-xl bg-sky-500 flex items-center justify-center flex-shrink-0">
73
+
<svg
74
+
role="img"
75
+
viewBox="0 0 24 24"
76
+
className="w-5 h-5 fill-white"
77
+
xmlns="http://www.w3.org/2000/svg"
78
+
>
79
+
<path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.204-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z" />
80
+
</svg>
81
+
</div>
82
+
<div>
83
+
<div className="font-medium text-gray-900 dark:text-white text-sm">
84
+
Bluesky
85
+
</div>
86
+
<div className="text-xs text-gray-400 dark:text-gray-500">
87
+
bsky.schtormm.nl
88
+
</div>
89
+
</div>
90
+
<span className="ml-auto text-gray-300 dark:text-gray-600 group-hover:text-sky-400 group-hover:translate-x-0.5 transition-all text-sm">
91
+
→
36
92
</span>
37
93
</a>
94
+
38
95
<a
39
-
className="dark:text-white text-xl px-5 py-2 bg-slate-400 rounded-md"
40
-
href="https://mas.to/@storm"
41
-
id="mastodon"
96
+
href="mailto:hi@schtormm.nl"
97
+
className="flex items-center gap-4 px-5 py-4 bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 rounded-2xl shadow-sm hover:shadow-md hover:border-indigo-100 dark:hover:border-indigo-900/60 transition-all group"
42
98
>
43
-
<span>
44
-
<i></i>Mastodon
99
+
<div className="w-10 h-10 rounded-xl bg-indigo-500 flex items-center justify-center flex-shrink-0">
100
+
<svg
101
+
role="img"
102
+
viewBox="0 0 24 24"
103
+
className="w-5 h-5 fill-white"
104
+
xmlns="http://www.w3.org/2000/svg"
105
+
>
106
+
<path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z" />
107
+
</svg>
108
+
</div>
109
+
<div>
110
+
<div className="font-medium text-gray-900 dark:text-white text-sm">
111
+
Mail
112
+
</div>
113
+
<div className="text-xs text-gray-400 dark:text-gray-500">
114
+
hi@schtormm.nl
115
+
</div>
116
+
</div>
117
+
<span className="ml-auto text-gray-300 dark:text-gray-600 group-hover:text-indigo-400 group-hover:translate-x-0.5 transition-all text-sm">
118
+
→
45
119
</span>
46
120
</a>
121
+
47
122
<a
48
-
className="dark:text-white text-xl px-5 py-2 bg-slate-600 rounded-md"
49
123
href="https://twitter.com/schtormm"
50
-
id="twitter"
124
+
target="_blank"
125
+
rel="noopener noreferrer"
126
+
className="flex items-center gap-4 px-5 py-4 bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 rounded-2xl shadow-sm hover:shadow-md hover:border-gray-200 dark:hover:border-gray-700 transition-all group"
51
127
>
52
-
<span>
53
-
<i></i>Twitter
128
+
<div className="w-10 h-10 rounded-xl bg-sky-400 flex items-center justify-center flex-shrink-0">
129
+
<svg
130
+
role="img"
131
+
viewBox="0 0 24 24"
132
+
className="w-5 h-5 fill-white"
133
+
xmlns="http://www.w3.org/2000/svg"
134
+
>
135
+
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
136
+
</svg>
137
+
</div>
138
+
<div>
139
+
<div className="font-medium text-gray-900 dark:text-white text-sm">
140
+
Twitter
141
+
</div>
142
+
<div className="text-xs text-gray-400 dark:text-gray-500">
143
+
schtormm · no longer active
144
+
</div>
145
+
</div>
146
+
<span className="ml-auto text-gray-300 dark:text-gray-600 group-hover:text-gray-500 dark:group-hover:text-gray-400 group-hover:translate-x-0.5 transition-all text-sm">
147
+
→
54
148
</span>
55
149
</a>
56
150
</div>
+67
-53
app/page.tsx
+67
-53
app/page.tsx
···
1
1
import Image from "next/image";
2
2
import Link from "next/link";
3
3
import profile from "../public/images/profile.jpeg";
4
+
4
5
export default function Home() {
5
6
return (
6
-
<main>
7
-
<div>
8
-
<div className="px-5 sm:px-0 flex flex-col justify-center h-screen bg-gray-50 dark:bg-gray-950">
9
-
<div className="p-10 mx-auto bg-gray-200 dark:bg-gray-900 shadow-lg dark:shadow-purple-900/60 rounded-xl">
10
-
<div className="mb-4">
11
-
<Image
12
-
src={profile}
13
-
alt="Storm"
14
-
width={200}
15
-
height={200}
16
-
className="rounded-2xl mx-auto"
17
-
/>
18
-
<h1 className="text-3xl text-center mt-4 dark:text-white">
19
-
Hi! I'm Storm <i></i>
7
+
<main className="min-h-screen bg-gray-50 dark:bg-gray-950 flex items-center justify-center px-5 py-12">
8
+
<div className="w-full max-w-md animate-fade-right">
9
+
<div className="bg-white dark:bg-gray-900 rounded-2xl shadow-lg dark:shadow-black/40 overflow-hidden">
10
+
<div className="p-8">
11
+
{/* Profile image with gradient ring */}
12
+
<div className="flex flex-col items-center mb-6">
13
+
<div className="p-0.5 rounded-[18px] bg-gradient-to-br from-indigo-500 to-purple-500 mb-5 shadow-md shadow-indigo-500/20">
14
+
<Image
15
+
src={profile}
16
+
alt="Storm"
17
+
width={110}
18
+
height={110}
19
+
className="rounded-2xl block"
20
+
/>
21
+
</div>
22
+
<h1 className="text-2xl font-semibold dark:text-white tracking-tight">
23
+
Hi, I'm Storm 👋
20
24
</h1>
21
-
<div className="text-center mt-4 dark:text-white">
22
-
I'm an informatica student at the{" "}
25
+
</div>
26
+
27
+
{/* Bio */}
28
+
<div className="text-center space-y-2 mb-6">
29
+
<p className="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
30
+
Informatica student at the{" "}
23
31
<a
24
-
className="text-indigo-400"
32
+
className="text-indigo-500 dark:text-indigo-400 hover:text-indigo-400 dark:hover:text-indigo-300 underline underline-offset-2 transition-colors"
25
33
href="https://www.rotterdamuas.com/about/organisation/schools/school-of-communication-media-and-information-technology/welcome/"
34
+
target="_blank"
35
+
rel="noopener noreferrer"
26
36
>
27
37
Rotterdam University of Applied Sciences
28
38
</a>
29
39
.
30
-
<p className="mt-2">
31
-
{" "}
32
-
I like simracing and tech (anything from open source software
33
-
to old consoles).
34
-
</p>
35
-
</div>
40
+
</p>
41
+
<p className="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
42
+
I like simracing and tech — from open source software to old
43
+
consoles.
44
+
</p>
36
45
</div>
37
46
38
-
<div className="h-0 mx-auto border-b-2 border-gray-400"></div>
39
-
<div className="mt-8">
40
-
<div className="dark:text-white text-center">
41
-
<h2 className="text-xl">Contact</h2>
42
-
<div>
43
-
If you need to contact me,{" "}
44
-
<Link className="text-indigo-400" href="/links">
45
-
here's where you can do that
46
-
</Link>
47
-
.
48
-
</div>
49
-
<div>
50
-
Additionally:{" "}
51
-
<Link className="text-indigo-400" href={"/cv"}>
52
-
here's my experience and a few projects!
53
-
</Link>
54
-
</div>
55
-
</div>
47
+
{/* Divider */}
48
+
<div className="border-t border-gray-100 dark:border-gray-800 mb-6" />
56
49
57
-
<div className="mt-4 text-center">
58
-
<p className="dark:text-white">
59
-
Credit to{" "}
60
-
<a
61
-
className="text-purple-400"
62
-
href="https://github.com/Matthbo"
63
-
>
64
-
Vivy
65
-
</a>{" "}
66
-
for parts of the design of this site.
67
-
</p>
68
-
</div>
50
+
{/* Navigation links */}
51
+
<div className="flex flex-col gap-2.5">
52
+
<Link
53
+
className="flex items-center justify-between px-4 py-3 bg-gray-50 dark:bg-gray-800/60 hover:bg-indigo-50 dark:hover:bg-indigo-950/50 border border-gray-100 dark:border-gray-700/50 hover:border-indigo-200 dark:hover:border-indigo-800 rounded-xl text-sm font-medium text-gray-700 dark:text-gray-200 transition-all group"
54
+
href="/links"
55
+
>
56
+
<span>Contact & Profiles</span>
57
+
<span className="text-indigo-400 group-hover:translate-x-0.5 transition-transform">
58
+
→
59
+
</span>
60
+
</Link>
61
+
<Link
62
+
className="flex items-center justify-between px-4 py-3 bg-gray-50 dark:bg-gray-800/60 hover:bg-indigo-50 dark:hover:bg-indigo-950/50 border border-gray-100 dark:border-gray-700/50 hover:border-indigo-200 dark:hover:border-indigo-800 rounded-xl text-sm font-medium text-gray-700 dark:text-gray-200 transition-all group"
63
+
href="/cv"
64
+
>
65
+
<span>Experience & Projects</span>
66
+
<span className="text-indigo-400 group-hover:translate-x-0.5 transition-transform">
67
+
→
68
+
</span>
69
+
</Link>
69
70
</div>
71
+
72
+
{/* Credit */}
73
+
<p className="text-xs text-gray-400 dark:text-gray-600 text-center mt-6">
74
+
Credit to{" "}
75
+
<a
76
+
className="text-purple-400 hover:text-purple-300 transition-colors"
77
+
href="https://github.com/Matthbo"
78
+
target="_blank"
79
+
>
80
+
Vivy
81
+
</a>{" "}
82
+
for parts of the design.
83
+
</p>
70
84
</div>
71
85
</div>
72
86
</div>
+34
app/styles/globals.css
+34
app/styles/globals.css
···
1
1
@import "tailwindcss";
2
+
3
+
html {
4
+
scroll-behavior: smooth;
5
+
}
6
+
7
+
@keyframes fade-left {
8
+
from {
9
+
opacity: 0;
10
+
transform: translatex(10px);
11
+
}
12
+
to {
13
+
opacity: 1;
14
+
transform: translatex(0);
15
+
}
16
+
}
17
+
18
+
@keyframes fade-right {
19
+
from {
20
+
opacity: 0;
21
+
transform: translatex(-10px);
22
+
}
23
+
to {
24
+
opacity: 1;
25
+
transform: translatex(0);
26
+
}
27
+
}
28
+
29
+
.animate-fade-left {
30
+
animation: fade-left 0.4s ease-out both;
31
+
}
32
+
33
+
.animate-fade-right {
34
+
animation: fade-right 0.4s ease-out both;
35
+
}