📄 Huge intl feature
Some checks failed
Some checks failed
This commit was merged in pull request #10.
This commit is contained in:
RJ
259
app/[locale]/about/page.tsx
Normal file
259
app/[locale]/about/page.tsx
Normal file
@@ -0,0 +1,259 @@
|
||||
import { Metadata } from 'next'
|
||||
import { Navbar } from '@/components/blog/navbar'
|
||||
import {setRequestLocale} from 'next-intl/server'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'About',
|
||||
description: 'Learn more about me and this blog',
|
||||
}
|
||||
|
||||
type Props = {
|
||||
params: Promise<{locale: string}>
|
||||
}
|
||||
|
||||
export default async function AboutPage({params}: Props) {
|
||||
const {locale} = await params
|
||||
setRequestLocale(locale)
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
<div className="min-h-screen bg-[rgb(var(--bg-primary))]">
|
||||
<div className="max-w-4xl mx-auto px-6 py-16">
|
||||
{/* Classification Header */}
|
||||
<div className="border-2 border-[rgb(var(--border-primary))] p-8 mb-10">
|
||||
<p className="text-[rgb(var(--text-muted))] font-mono text-xs uppercase tracking-widest mb-4">
|
||||
>> _DOC://PUBLIC_ACCESS
|
||||
</p>
|
||||
<h1 className="text-4xl md:text-5xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] tracking-tight">
|
||||
ABOUT ME_
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="space-y-8">
|
||||
{/* Introduction Section */}
|
||||
<section className="border-2 border-[rgb(var(--border-primary))] p-8">
|
||||
<div className="border-l-4 border-[var(--neon-cyan)] pl-6">
|
||||
<p className="font-mono text-base text-[rgb(var(--text-primary))] leading-relaxed mb-4">
|
||||
Welcome to my corner of the internet! This is where I share my thoughts, opinions,
|
||||
and experiences - from tech adventures to life as a family man. Yes, I love
|
||||
technology, but there's so much more to life than just code and servers.
|
||||
</p>
|
||||
<p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase tracking-wider">
|
||||
STATUS: ACTIVE // ROLE: DAD + DEV + LIFE ENTHUSIAST
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Life & Values Section */}
|
||||
<section className="border-2 border-[rgb(var(--border-primary))] p-8">
|
||||
<h2 className="text-2xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] mb-6 pb-3 border-b-2 border-[rgb(var(--border-primary))]">
|
||||
> LIFE & VALUES
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
<div className="border-l-4 border-[var(--neon-pink)] pl-6">
|
||||
<h3 className="font-mono text-sm font-bold text-[var(--neon-pink)] uppercase mb-2">
|
||||
[FAMILY FIRST]
|
||||
</h3>
|
||||
<p className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
|
||||
Being a dad to an amazing toddler is my most important role. Family time is
|
||||
sacred - whether it's building block towers, exploring parks, or just
|
||||
enjoying the chaos of everyday life together. Tech can wait; these moments
|
||||
can't.
|
||||
</p>
|
||||
</div>
|
||||
<div className="border-l-4 border-[var(--neon-cyan)] pl-6">
|
||||
<h3 className="font-mono text-sm font-bold text-[var(--neon-cyan)] uppercase mb-2">
|
||||
[ACTIVE LIFESTYLE]
|
||||
</h3>
|
||||
<p className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
|
||||
I believe in keeping the body active. Whether it's hitting the gym, playing
|
||||
sports, or just staying on the move - physical activity keeps me sharp,
|
||||
balanced, and ready for whatever life throws my way.
|
||||
</p>
|
||||
</div>
|
||||
<div className="border-l-4 border-[var(--neon-green)] pl-6">
|
||||
<h3 className="font-mono text-sm font-bold text-[var(--neon-green)] uppercase mb-2">
|
||||
[ENJOYING THE SIMPLE THINGS]
|
||||
</h3>
|
||||
<p className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
|
||||
Life's too short not to enjoy it. A good drink, a relaxing
|
||||
evening after a long day, or just not doing anything a blowing some steam off.
|
||||
</p>
|
||||
</div>
|
||||
<div className="border-l-4 border-[var(--neon-orange)] pl-6">
|
||||
<h3 className="font-mono text-sm font-bold text-[var(--neon-orange)] uppercase mb-2">
|
||||
[TECH WITH PURPOSE]
|
||||
</h3>
|
||||
<p className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
|
||||
Yes, I love tech - self-hosting, privacy, tinkering with hardware. But it's
|
||||
a tool, not a lifestyle. Tech should serve life, not the other way around.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Content Section */}
|
||||
<section className="border-2 border-[rgb(var(--border-primary))] p-8">
|
||||
<h2 className="text-2xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] mb-6 pb-3 border-b-2 border-[rgb(var(--border-primary))]">
|
||||
> WHAT YOU'LL FIND HERE
|
||||
</h2>
|
||||
<p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase tracking-wider mb-6">
|
||||
CONTENT SCOPE // EVERYTHING FROM TECH TO LIFE
|
||||
</p>
|
||||
<ul className="space-y-3">
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-[var(--neon-pink)] font-mono font-bold">></span>
|
||||
<span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
|
||||
<strong>Thoughts & Opinions</strong> - My take on life, work, and everything in
|
||||
between
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-[var(--neon-pink)] font-mono font-bold">></span>
|
||||
<span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
|
||||
<strong>Life & Family</strong> - Adventures in parenting, sports, and enjoying
|
||||
the simple things
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-[var(--neon-cyan)] font-mono font-bold">></span>
|
||||
<span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
|
||||
<strong>Tech Research</strong> - When I dive into interesting technologies and
|
||||
experiments
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-[var(--neon-cyan)] font-mono font-bold">></span>
|
||||
<span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
|
||||
<strong>System Administration</strong> - Self-hosting, infrastructure, and
|
||||
DevOps adventures
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-[var(--neon-cyan)] font-mono font-bold">></span>
|
||||
<span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
|
||||
<strong>Development Insights</strong> - Lessons learned from building software
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-[var(--neon-green)] font-mono font-bold">></span>
|
||||
<span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
|
||||
<strong>Random Stuff</strong> - Because life doesn't fit into neat
|
||||
categories!
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
{/* Areas of Focus Section */}
|
||||
<section className="border-2 border-[rgb(var(--border-primary))] p-8">
|
||||
<h2 className="text-2xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] mb-6 pb-3 border-b-2 border-[rgb(var(--border-primary))]">
|
||||
> AREAS OF FOCUS
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="border border-[rgb(var(--border-primary))] p-4">
|
||||
<h3 className="font-mono text-xs font-bold text-[var(--neon-pink)] uppercase mb-2">
|
||||
[BEING A DAD]
|
||||
</h3>
|
||||
<p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
|
||||
Playing with my boy, teaching moments, watching him grow, building memories
|
||||
together
|
||||
</p>
|
||||
</div>
|
||||
<div className="border border-[rgb(var(--border-primary))] p-4">
|
||||
<h3 className="font-mono text-xs font-bold text-[var(--neon-cyan)] uppercase mb-2">
|
||||
[STAYING ACTIVE]
|
||||
</h3>
|
||||
<p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
|
||||
Gym sessions, sports, keeping fit, maintaining energy for life's demands
|
||||
</p>
|
||||
</div>
|
||||
<div className="border border-[rgb(var(--border-primary))] p-4">
|
||||
<h3 className="font-mono text-xs font-bold text-[var(--neon-green)] uppercase mb-2">
|
||||
[TECHNOLOGY & SYSTEMS]
|
||||
</h3>
|
||||
<p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
|
||||
Software development, infrastructure, DevOps, self-hosting adventures
|
||||
</p>
|
||||
</div>
|
||||
<div className="border border-[rgb(var(--border-primary))] p-4">
|
||||
<h3 className="font-mono text-xs font-bold text-[var(--neon-orange)] uppercase mb-2">
|
||||
[LIFE BALANCE]
|
||||
</h3>
|
||||
<p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
|
||||
Relaxing with good company, enjoying downtime, appreciating the simple moments
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Tech Stack Section */}
|
||||
<section className="border-2 border-[rgb(var(--border-primary))] p-8">
|
||||
<h2 className="text-2xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] mb-6 pb-3 border-b-2 border-[rgb(var(--border-primary))]">
|
||||
> TECH STACK
|
||||
</h2>
|
||||
<p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase tracking-wider mb-6">
|
||||
TOOLS I USE // WHEN NEEDED
|
||||
</p>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="border border-[rgb(var(--border-primary))] p-4">
|
||||
<h3 className="font-mono text-xs font-bold text-[var(--neon-cyan)] uppercase mb-2">
|
||||
[DEVELOPMENT]
|
||||
</h3>
|
||||
<p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
|
||||
.NET, Golang, TypeScript, Next.js, React
|
||||
</p>
|
||||
</div>
|
||||
<div className="border border-[rgb(var(--border-primary))] p-4">
|
||||
<h3 className="font-mono text-xs font-bold text-[var(--neon-cyan)] uppercase mb-2">
|
||||
[INFRASTRUCTURE]
|
||||
</h3>
|
||||
<p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
|
||||
Windows Server, Linux, Docker, Hyper-V
|
||||
</p>
|
||||
</div>
|
||||
<div className="border border-[rgb(var(--border-primary))] p-4">
|
||||
<h3 className="font-mono text-xs font-bold text-[var(--neon-cyan)] uppercase mb-2">
|
||||
[DESIGN]
|
||||
</h3>
|
||||
<p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
|
||||
Tailwind CSS, Markdown, Terminal aesthetics
|
||||
</p>
|
||||
</div>
|
||||
<div className="border border-[rgb(var(--border-primary))] p-4">
|
||||
<h3 className="font-mono text-xs font-bold text-[var(--neon-cyan)] uppercase mb-2">
|
||||
[SELF-HOSTING]
|
||||
</h3>
|
||||
<p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
|
||||
Home lab, privacy-focused services, full control, Git server
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Contact Section */}
|
||||
<section className="border-2 border-[rgb(var(--border-primary))] p-8">
|
||||
<h2 className="text-2xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] mb-6 pb-3 border-b-2 border-[rgb(var(--border-primary))]">
|
||||
> CONTACT
|
||||
</h2>
|
||||
<div className="border-l-4 border-[var(--neon-pink)] pl-6">
|
||||
{/* <p className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed mb-4">
|
||||
You can reach me at{' '}
|
||||
<a
|
||||
href="mailto:email@example.com"
|
||||
className="text-[var(--neon-cyan)] hover:text-[var(--neon-pink)] underline transition-colors"
|
||||
>
|
||||
email@example.com
|
||||
</a>{' '}
|
||||
or find me on social media.
|
||||
</p> */}
|
||||
{/* <p className="font-mono text-xs text-[rgb(var(--text-muted))] uppercase tracking-wider">
|
||||
RESPONSE TIME: < 24H // STATUS: MONITORED
|
||||
</p> */}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user