soderberg-tech/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Light mode

Browse Source
This commit is contained in:
WilliamSoderberg
2026-03-11 23:27:19 +01:00 Verified
parent 658a8edf15
commit 3cda989390
16 changed files with 345 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/contact/page.tsx
+20 -20
View File
@@ -5,7 +5,7 @@ import Image from 'next/image';
export default function ContactPage() {
return (
<main className="flex flex-col flex-1 relative bg-[#0d1117] overflow-hidden">
<main className="flex flex-col flex-1 relative bg-slate-50 dark:bg-[#0d1117] overflow-hidden transition-colors duration-300">
{/* 1. Immersive Mountain Background */}
<Image
@@ -16,14 +16,14 @@ export default function ContactPage() {
className="absolute inset-0 w-full h-full object-cover z-0"
/>
{/* Dark blur overlay so the text and cards remain perfectly readable */}
<div className="absolute inset-0 bg-[#0d1117]/85 backdrop-blur-md z-0"></div>
<div className="absolute inset-0 bg-slate-100/30 dark:bg-[#0d1117]/85 backdrop-blur-md z-0 transition-colors duration-300"></div>
<div className="h-25 shrink-0 z-10"></div>
<section className="relative z-10 flex-1 flex flex-col justify-center items-center py-12 px-6">
<div className="mb-12 text-center">
<h1 className="text-white text-[40px] md:text-[55px] uppercase font-black tracking-tighter drop-shadow-lg">
<h1 className="text-slate-900 dark:text-white text-[40px] md:text-[55px] uppercase font-black tracking-tighter drop-shadow-lg transition-colors">
Find me here!
</h1>
<p className="text-[#84c0a0] font-mono font-bold tracking-widest mt-2 uppercase">
@@ -31,20 +31,20 @@ export default function ContactPage() {
</p>
</div>
<div className="w-full max-w-3xl bg-white/5 backdrop-blur-xl rounded-4xl border border-white/10 shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-8 md:p-12">
<div className="w-full max-w-3xl bg-white/80 dark:bg-white/5 backdrop-blur-xl rounded-4xl border border-slate-200 dark:border-white/10 shadow-xl dark:shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-8 md:p-12 transition-colors duration-300">
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
<div className="flex flex-col gap-8">
<h3 className="text-white text-xl font-bold border-b border-white/10 pb-4 uppercase tracking-wider">Direct Info</h3>
<h3 className="text-slate-900 dark:text-white text-xl font-bold border-b border-slate-200 dark:border-white/10 pb-4 uppercase tracking-wider transition-colors">Direct Info</h3>
<div className="flex items-center gap-4 group">
<div className="w-12 h-12 rounded-2xl bg-[#84c0a0]/10 flex items-center justify-center border border-[#84c0a0]/30 group-hover:bg-[#84c0a0]/20 transition-all">
<FaEnvelope className="text-[#84c0a0] text-xl" />
</div>
<div>
<p className="text-gray-400 text-xs uppercase font-bold tracking-widest">Email</p>
<a href="mailto:support@soderberg.tech" className="text-white font-medium hover:text-[#84c0a0] transition-colors break-all">
<p className="text-slate-500 dark:text-gray-400 text-xs uppercase font-bold tracking-widest transition-colors">Email</p>
<a href="mailto:support@soderberg.tech" className="text-slate-900 dark:text-white font-medium hover:text-[#84c0a0] dark:hover:text-[#84c0a0] transition-colors break-all">
support@soderberg.tech
</a>
</div>
@@ -55,35 +55,35 @@ export default function ContactPage() {
<FaMapMarkerAlt className="text-[#84c0a0] text-xl" />
</div>
<div>
<p className="text-gray-400 text-xs uppercase font-bold tracking-widest">Location</p>
<p className="text-white font-medium">Höganäs, Sweden</p>
<p className="text-slate-500 dark:text-gray-400 text-xs uppercase font-bold tracking-widest transition-colors">Location</p>
<p className="text-slate-900 dark:text-white font-medium transition-colors">Höganäs, Sweden</p>
</div>
</div>
</div>
<div className="flex flex-col gap-4">
<h3 className="text-white text-xl font-bold border-b border-white/10 pb-4 uppercase tracking-wider">Networks</h3>
<h3 className="text-slate-900 dark:text-white text-xl font-bold border-b border-slate-200 dark:border-white/10 pb-4 uppercase tracking-wider transition-colors">Networks</h3>
<div className="grid grid-cols-1 gap-3">
<a href="https://www.linkedin.com/in/william-s%C3%B6derberg-5b79bb247" target="_blank" className="flex items-center justify-between p-4 rounded-2xl bg-white/5 border border-white/5 hover:border-[#0077b5]/50 hover:bg-[#0077b5]/10 transition-all group">
<div className="flex items-center gap-3 text-white font-bold">
<a href="https://www.linkedin.com/in/william-s%C3%B6derberg-5b79bb247" target="_blank" className="flex items-center justify-between p-4 rounded-2xl bg-white/50 dark:bg-white/5 border border-slate-200 dark:border-white/5 hover:border-[#0077b5]/50 hover:bg-[#0077b5]/10 transition-all group">
<div className="flex items-center gap-3 text-slate-900 dark:text-white font-bold transition-colors">
<FaLinkedin className="text-xl text-[#0077b5]" /> LinkedIn
</div>
<span className="text-gray-500 group-hover:text-[#0077b5] group-hover:translate-x-1 transition-all">→</span>
<span className="text-slate-400 dark:text-gray-500 group-hover:text-[#0077b5] group-hover:translate-x-1 transition-all">→</span>
</a>
<a href="https://discordapp.com/users/271290165106966528" target="_blank" className="flex items-center justify-between p-4 rounded-2xl bg-white/5 border border-white/5 hover:border-[#5865F2]/50 hover:bg-[#5865F2]/10 transition-all group">
<div className="flex items-center gap-3 text-white font-bold">
<a href="https://discordapp.com/users/271290165106966528" target="_blank" className="flex items-center justify-between p-4 rounded-2xl bg-white/50 dark:bg-white/5 border border-slate-200 dark:border-white/5 hover:border-[#5865F2]/50 hover:bg-[#5865F2]/10 transition-all group">
<div className="flex items-center gap-3 text-slate-900 dark:text-white font-bold transition-colors">
<FaDiscord className="text-xl text-[#5865F2]" /> Discord
</div>
<span className="text-gray-500 group-hover:text-[#5865F2] group-hover:translate-x-1 transition-all">→</span>
<span className="text-slate-400 dark:text-gray-500 group-hover:text-[#5865F2] group-hover:translate-x-1 transition-all">→</span>
</a>
<a href="https://www.instagram.com/will.i.am.soderberg/" target="_blank" className="flex items-center justify-between p-4 rounded-2xl bg-white/5 border border-white/5 hover:border-[#E1306C]/50 hover:bg-[#E1306C]/10 transition-all group">
<div className="flex items-center gap-3 text-white font-bold">
<a href="https://www.instagram.com/will.i.am.soderberg/" target="_blank" className="flex items-center justify-between p-4 rounded-2xl bg-white/50 dark:bg-white/5 border border-slate-200 dark:border-white/5 hover:border-[#E1306C]/50 hover:bg-[#E1306C]/10 transition-all group">
<div className="flex items-center gap-3 text-slate-900 dark:text-white font-bold transition-colors">
<FaInstagram className="text-xl text-[#E1306C]" /> Instagram
</div>
<span className="text-gray-500 group-hover:text-[#E1306C] group-hover:translate-x-1 transition-all">→</span>
<span className="text-slate-400 dark:text-gray-500 group-hover:text-[#E1306C] group-hover:translate-x-1 transition-all">→</span>
</a>
</div>
</div>
@@ -92,7 +92,7 @@ export default function ContactPage() {
<div className="mt-12">
<a
href="mailto:support@soderberg.tech?subject=Contact%20me"
className="w-full flex items-center justify-center gap-3 py-5 rounded-2xl bg-[#84c0a0] text-[#0d1117] font-bold text-lg hover:scale-[1.02] active:scale-[0.98] transition-all shadow-[0_0_20px_rgba(132,192,160,0.3)]"
className="w-full flex items-center justify-center gap-3 py-5 rounded-2xl bg-[#84c0a0] text-white dark:text-[#0d1117] font-bold text-lg hover:scale-[1.02] active:scale-[0.98] transition-all shadow-[0_0_20px_rgba(132,192,160,0.3)]"
>
<FaEnvelope /> Send an Email
</a>