246 lines
12 KiB
TypeScript
246 lines
12 KiB
TypeScript
import { Metadata } from 'next'
|
|
import { Navbar } from '@/components/blog/navbar'
|
|
import { setRequestLocale, getTranslations } 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)
|
|
const t = await getTranslations('About')
|
|
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">
|
|
{t('classificationHeader')}
|
|
</p>
|
|
<h1 className="text-4xl md:text-5xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] tracking-tight">
|
|
{t('mainTitle')}
|
|
</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">
|
|
{t('introParagraph1')}
|
|
</p>
|
|
<p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase tracking-wider">
|
|
{t('introLabel')}
|
|
</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))]">
|
|
{t('lifeValuesTitle')}
|
|
</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">
|
|
{t('familyFirstTitle')}
|
|
</h3>
|
|
<p className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
|
|
{t('familyFirstText')}
|
|
</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">
|
|
{t('activeLifestyleTitle')}
|
|
</h3>
|
|
<p className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
|
|
{t('activeLifestyleText')}
|
|
</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">
|
|
{t('simpleThingsTitle')}
|
|
</h3>
|
|
<p className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
|
|
{t('simpleThingsText')}
|
|
</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">
|
|
{t('techPurposeTitle')}
|
|
</h3>
|
|
<p className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
|
|
{t('techPurposeText')}
|
|
</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))]">
|
|
{t('contentTitle')}
|
|
</h2>
|
|
<p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase tracking-wider mb-6">
|
|
{t('contentSubtitle')}
|
|
</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>{t('contentThoughts')}</strong> - {t('contentThoughtsDesc')}
|
|
</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>{t('contentLifeFamily')}</strong> - {t('contentLifeFamilyDesc')}
|
|
</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>{t('contentTechResearch')}</strong> - {t('contentTechResearchDesc')}
|
|
</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>{t('contentSysAdmin')}</strong> - {t('contentSysAdminDesc')}
|
|
</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>{t('contentDevelopment')}</strong> - {t('contentDevelopmentDesc')}
|
|
</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>{t('contentRandom')}</strong> - {t('contentRandomDesc')}
|
|
</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))]">
|
|
{t('focusTitle')}
|
|
</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">
|
|
{t('focusBeingDadTitle')}
|
|
</h3>
|
|
<p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
|
|
{t('focusBeingDadText')}
|
|
</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">
|
|
{t('focusStayingActiveTitle')}
|
|
</h3>
|
|
<p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
|
|
{t('focusStayingActiveText')}
|
|
</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">
|
|
{t('focusTechnologyTitle')}
|
|
</h3>
|
|
<p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
|
|
{t('focusTechnologyText')}
|
|
</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">
|
|
{t('focusLifeBalanceTitle')}
|
|
</h3>
|
|
<p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
|
|
{t('focusLifeBalanceText')}
|
|
</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))]">
|
|
{t('techStackTitle')}
|
|
</h2>
|
|
<p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase tracking-wider mb-6">
|
|
{t('techStackSubtitle')}
|
|
</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">
|
|
{t('techStackDevelopmentTitle')}
|
|
</h3>
|
|
<p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
|
|
{t('techStackDevelopmentText')}
|
|
</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">
|
|
{t('techStackInfrastructureTitle')}
|
|
</h3>
|
|
<p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
|
|
{t('techStackInfrastructureText')}
|
|
</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">
|
|
{t('techStackDesignTitle')}
|
|
</h3>
|
|
<p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
|
|
{t('techStackDesignText')}
|
|
</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">
|
|
{t('techStackSelfHostingTitle')}
|
|
</h3>
|
|
<p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
|
|
{t('techStackSelfHostingText')}
|
|
</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))]">
|
|
{t('contactTitle')}
|
|
</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>
|
|
</>
|
|
)
|
|
}
|