📝 add locale on blog ssr, add translations for other webpage content

2025-12-04 14:56:00 +02:00
parent d349c1a957
commit 087bccbb13
9 changed files with 255 additions and 87 deletions
--- a/app/[locale]/about/page.tsx
+++ b/app/[locale]/about/page.tsx
@@ -1,6 +1,6 @@
 import { Metadata } from 'next'
 import { Navbar } from '@/components/blog/navbar'
-import {setRequestLocale} from 'next-intl/server'
+import {setRequestLocale, getTranslations} from 'next-intl/server'

 export const metadata: Metadata = {
  title: 'About',
@@ -14,6 +14,7 @@ type Props = {
 export default async function AboutPage({params}: Props) {
  const {locale} = await params
  setRequestLocale(locale)
+  const t = await getTranslations('About')
  return (
    <>
      <Navbar />
@@ -22,10 +23,10 @@ export default async function AboutPage({params}: Props) {
          {/* 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">
-              &gt;&gt; _DOC://PUBLIC_ACCESS
+              {t('classificationHeader')}
            </p>
            <h1 className="text-4xl md:text-5xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] tracking-tight">
-              ABOUT ME_
+              {t('mainTitle')}
            </h1>
          </div>

@@ -35,12 +36,10 @@ export default async function AboutPage({params}: Props) {
            <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&apos;s so much more to life than just code and servers.
+                  {t('introParagraph1')}
                </p>
                <p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase tracking-wider">
-                  STATUS: ACTIVE // ROLE: DAD + DEV + LIFE ENTHUSIAST
+                  {t('introLabel')}
                </p>
              </div>
            </section>
@@ -48,46 +47,39 @@ export default async function AboutPage({params}: Props) {
            {/* 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))]">
-                &gt; LIFE & VALUES
+                {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">
-                    [FAMILY FIRST]
+                    {t('familyFirstTitle')}
                  </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&apos;s building block towers, exploring parks, or just
-                    enjoying the chaos of everyday life together. Tech can wait; these moments
-                    can&apos;t.
+                    {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">
-                    [ACTIVE LIFESTYLE]
+                    {t('activeLifestyleTitle')}
                  </h3>
                  <p className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
-                    I believe in keeping the body active. Whether it&apos;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.
+                    {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">
-                    [ENJOYING THE SIMPLE THINGS]
+                    {t('simpleThingsTitle')}
                  </h3>
                  <p className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
-                    Life&apos;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.
+                    {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">
-                    [TECH WITH PURPOSE]
+                    {t('techPurposeTitle')}
                  </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&apos;s
-                    a tool, not a lifestyle. Tech should serve life, not the other way around.
+                    {t('techPurposeText')}
                  </p>
                </div>
              </div>
@@ -96,51 +88,46 @@ export default async function AboutPage({params}: Props) {
            {/* 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))]">
-                &gt; WHAT YOU&apos;LL FIND HERE
+                {t('contentTitle')}
              </h2>
              <p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase tracking-wider mb-6">
-                CONTENT SCOPE // EVERYTHING FROM TECH TO LIFE
+                {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">&gt;</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
+                    <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">&gt;</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
+                    <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">&gt;</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
+                    <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">&gt;</span>
                  <span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
-                    <strong>System Administration</strong> - Self-hosting, infrastructure, and
-                    DevOps adventures
+                    <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">&gt;</span>
                  <span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
-                    <strong>Development Insights</strong> - Lessons learned from building software
+                    <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">&gt;</span>
                  <span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
-                    <strong>Random Stuff</strong> - Because life doesn&apos;t fit into neat
-                    categories!
+                    <strong>{t('contentRandom')}</strong> - {t('contentRandomDesc')}
                  </span>
                </li>
              </ul>
@@ -149,40 +136,39 @@ export default async function AboutPage({params}: Props) {
            {/* 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))]">
-                &gt; AREAS OF FOCUS
+                {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">
-                    [BEING A DAD]
+                    {t('focusBeingDadTitle')}
                  </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
+                    {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">
-                    [STAYING ACTIVE]
+                    {t('focusStayingActiveTitle')}
                  </h3>
                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
-                    Gym sessions, sports, keeping fit, maintaining energy for life&apos;s demands
+                    {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">
-                    [TECHNOLOGY & SYSTEMS]
+                    {t('focusTechnologyTitle')}
                  </h3>
                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
-                    Software development, infrastructure, DevOps, self-hosting adventures
+                    {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">
-                    [LIFE BALANCE]
+                    {t('focusLifeBalanceTitle')}
                  </h3>
                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
-                    Relaxing with good company, enjoying downtime, appreciating the simple moments
+                    {t('focusLifeBalanceText')}
                  </p>
                </div>
              </div>
@@ -190,42 +176,42 @@ export default async function AboutPage({params}: Props) {
            {/* 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))]">
-                &gt; TECH STACK
+                {t('techStackTitle')}
              </h2>
              <p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase tracking-wider mb-6">
-                TOOLS I USE // WHEN NEEDED
+                {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">
-                    [DEVELOPMENT]
+                    {t('techStackDevelopmentTitle')}
                  </h3>
                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
-                    .NET, Golang, TypeScript, Next.js, React
+                    {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">
-                    [INFRASTRUCTURE]
+                    {t('techStackInfrastructureTitle')}
                  </h3>
                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
-                    Windows Server, Linux, Docker, Hyper-V
+                    {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">
-                    [DESIGN]
+                    {t('techStackDesignTitle')}
                  </h3>
                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
-                    Tailwind CSS, Markdown, Terminal aesthetics
+                    {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">
-                    [SELF-HOSTING]
+                    {t('techStackSelfHostingTitle')}
                  </h3>
                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
-                    Home lab, privacy-focused services, full control, Git server
+                    {t('techStackSelfHostingText')}
                  </p>
                </div>
              </div>
@@ -233,7 +219,7 @@ export default async function AboutPage({params}: Props) {
            {/* 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))]">
-                &gt; CONTACT
+                {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">