m0dus/williammarch.xyz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change theme and cleanup added favicon

Browse Source
This commit is contained in:
will
2026-04-03 16:45:28 +01:00
parent 4020cb239c
commit 6ed27569d6
15 changed files with 538 additions and 564 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
components/Contact.tsx
View File

@@ -46,8 +46,8 @@ export default function Contact() {
widgetIdRef.current = window.turnstile.render(turnstileRef.current, {
sitekey: TURNSTILE_SITE_KEY,
theme: 'dark',
callback: token => {
theme: 'light',
callback: (token) => {
setTurnstileToken(token);
setErrorMessage('');
},
@@ -144,30 +144,26 @@ export default function Contact() {
className="py-24 px-6"
aria-labelledby="contact-heading"
>
<div className="max-w-5xl mx-auto">
<span className="label">Get in touch</span>
<div className="max-w-5xl mx-auto min-w-0">
<h2
id="contact-heading"
className="text-[clamp(1.8rem,4vw,2.5rem)] font-black tracking-tight text-white mb-3"
className="text-[clamp(1.8rem,4vw,2.5rem)] font-black tracking-tight text-slate-900 mb-3"
>
Let’s work together.
</h2>
<p className="text-sm text-white/40 max-w-2xl mb-10">
Open to interesting roles, collaborations, and serious product ideas.
<p className="text-sm text-slate-600 max-w-2xl mb-10">
</p>
<div className="grid md:grid-cols-[280px_1fr] gap-6">
<div className="grid md:grid-cols-[280px_1fr] gap-6 items-start">
{/* Left side contact cards */}
<div className="flex flex-col gap-3">
<a
href={`mailto:${SITE.email}`}
className="glass rounded-xl p-4 flex items-center gap-3 group hover:border-white/[0.14]
hover:-translate-x-[-4px] transition-all duration-150"
className="rounded-xl border border-slate-200/80 bg-white/80 p-4 flex items-center gap-3 group transition-all duration-150 hover:border-slate-300 hover:-translate-x-[1px]"
>
<div
className="w-8 h-8 rounded-lg bg-white/[0.05] flex items-center justify-center flex-shrink-0"
className="w-8 h-8 rounded-lg bg-slate-50 flex items-center justify-center flex-shrink-0 border border-slate-200"
aria-hidden="true"
>
<svg
@@ -175,7 +171,7 @@ export default function Contact() {
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="rgba(255,255,255,0.5)"
stroke="rgba(15,23,42,0.6)"
strokeWidth="1.8"
>
<rect x="2" y="4" width="20" height="16" rx="2" />
@@ -183,10 +179,10 @@ export default function Contact() {
</svg>
</div>
<div className="min-w-0">
<p className="text-[10px] text-white/25 uppercase tracking-wider">
<p className="text-[10px] text-slate-500 uppercase tracking-wider">
Email
</p>
<p className="text-xs font-medium text-white/55 truncate group-hover:text-white/80 transition-colors">
<p className="text-xs font-medium text-slate-800 truncate group-hover:text-slate-900 transition-colors">
{SITE.email}
</p>
</div>
@@ -196,11 +192,10 @@ export default function Contact() {
href={`${GITEA_URL}/${GITEA_USERNAME}`}
target="_blank"
rel="noopener noreferrer"
className="glass rounded-xl p-4 flex items-center gap-3 group hover:border-white/[0.14]
hover:translate-x-1 transition-all duration-150"
className="rounded-xl border border-slate-200/80 bg-white/80 p-4 flex items-center gap-3 group transition-all duration-150 hover:border-slate-300 hover:translate-x-[1px]"
>
<div
className="w-8 h-8 rounded-lg bg-white/[0.05] flex items-center justify-center flex-shrink-0"
className="w-8 h-8 rounded-lg bg-slate-50 flex items-center justify-center flex-shrink-0 border border-slate-200"
aria-hidden="true"
>
<svg
@@ -208,7 +203,7 @@ export default function Contact() {
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="rgba(255,255,255,0.5)"
stroke="rgba(15,23,42,0.6)"
strokeWidth="1.8"
>
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.2c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
@@ -216,10 +211,10 @@ export default function Contact() {
</svg>
</div>
<div className="min-w-0">
<p className="text-[10px] text-white/25 uppercase tracking-wider">
<p className="text-[10px] text-slate-500 uppercase tracking-wider">
Gitea
</p>
<p className="text-xs font-medium text-white/55 truncate group-hover:text-white/80 transition-colors">
<p className="text-xs font-medium text-slate-800 truncate group-hover:text-slate-900 transition-colors">
{GITEA_URL.replace(/^https?:\/\//, '')}/{GITEA_USERNAME}
</p>
</div>
@@ -229,7 +224,7 @@ export default function Contact() {
{/* Form */}
<form
onSubmit={handleSubmit}
className="glass rounded-xl p-6 flex flex-col gap-4 relative"
className="glass rounded-2xl p-6 flex flex-col gap-4 relative border border-slate-200/80 bg-white/80"
noValidate
>
<input
@@ -255,7 +250,7 @@ export default function Contact() {
<div className="grid sm:grid-cols-2 gap-4">
<label className="flex flex-col gap-1.5">
<span className="text-[10px] font-semibold uppercase tracking-wider text-white/30">
<span className="text-[10px] font-semibold uppercase tracking-wider text-slate-500">
Name
</span>
<input
@@ -264,14 +259,14 @@ export default function Contact() {
required
placeholder="Your name"
autoComplete="name"
className="bg-white/[0.03] border border-white/[0.08] rounded-lg px-3 py-2.5 text-sm
text-white placeholder-white/20 outline-none transition-colors
focus:border-white/[0.2] focus:ring-1 focus:ring-white/[0.1]"
className="bg-white border border-slate-200 rounded-lg px-3 py-2.5 text-sm
text-slate-900 placeholder-slate-400 outline-none transition-colors
focus:border-slate-400 focus:ring-1 focus:ring-slate-300"
/>
</label>
<label className="flex flex-col gap-1.5">
<span className="text-[10px] font-semibold uppercase tracking-wider text-white/30">
<span className="text-[10px] font-semibold uppercase tracking-wider text-slate-500">
Email
</span>
<input
@@ -280,15 +275,15 @@ export default function Contact() {
required
placeholder="you@example.com"
autoComplete="email"
className="bg-white/[0.03] border border-white/[0.08] rounded-lg px-3 py-2.5 text-sm
text-white placeholder-white/20 outline-none transition-colors
focus:border-white/[0.2] focus:ring-1 focus:ring-white/[0.1]"
className="bg-white border border-slate-200 rounded-lg px-3 py-2.5 text-sm
text-slate-900 placeholder-slate-400 outline-none transition-colors
focus:border-slate-400 focus:ring-1 focus:ring-slate-300"
/>
</label>
</div>
<label className="flex flex-col gap-1.5">
<span className="text-[10px] font-semibold uppercase tracking-wider text-white/30">
<span className="text-[10px] font-semibold uppercase tracking-wider text-slate-500">
Message
</span>
<textarea
@@ -296,9 +291,9 @@ export default function Contact() {
required
placeholder="What’s on your mind?"
rows={5}
className="bg-white/[0.03] border border-white/[0.08] rounded-lg px-3 py-2.5 text-sm
text-white placeholder-white/20 outline-none resize-none transition-colors
focus:border-white/[0.2] focus:ring-1 focus:ring-white/[0.1]"
className="bg-white border border-slate-200 rounded-lg px-3 py-2.5 text-sm
text-slate-900 placeholder-slate-400 outline-none resize-none transition-colors
focus:border-slate-400 focus:ring-1 focus:ring-slate-300"
/>
</label>
@@ -306,7 +301,7 @@ export default function Contact() {
{TURNSTILE_SITE_KEY ? (
<div ref={turnstileRef} />
) : (
<p className="text-xs text-red-300/80">
<p className="text-xs text-red-500">
Captcha is not configured correctly.
</p>
)}
@@ -326,13 +321,13 @@ export default function Contact() {
</button>
{status === 'sent' && (
<p className="text-xs text-white/45">
<p className="text-xs text-slate-600">
Thanks — your message has been sent.
</p>
)}
{status === 'error' && errorMessage && (
<p className="text-xs text-red-300/80">{errorMessage}</p>
<p className="text-xs text-red-500">{errorMessage}</p>
)}
</div>
</form>