fix: rebalance about layout and fix missing gaming icon
Some checks failed
Dev Deployment (Zero Downtime) / deploy-dev (push) Failing after 9m23s
Some checks failed
Dev Deployment (Zero Downtime) / deploy-dev (push) Failing after 9m23s
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { motion, Variants } from "framer-motion";
|
import { motion, Variants } from "framer-motion";
|
||||||
import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb } from "lucide-react";
|
import { Globe, Server, Wrench, Shield, Gamepad2, Gamepad, Code, Activity, Lightbulb } from "lucide-react";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { useLocale, useTranslations } from "next-intl";
|
import { useLocale, useTranslations } from "next-intl";
|
||||||
import type { JSONContent } from "@tiptap/react";
|
import type { JSONContent } from "@tiptap/react";
|
||||||
@@ -235,69 +235,115 @@ const About = () => {
|
|||||||
className="py-24 px-4 bg-gradient-to-br from-liquid-sky/15 via-liquid-lavender/10 to-liquid-pink/15 relative overflow-hidden"
|
className="py-24 px-4 bg-gradient-to-br from-liquid-sky/15 via-liquid-lavender/10 to-liquid-pink/15 relative overflow-hidden"
|
||||||
>
|
>
|
||||||
<div className="max-w-6xl mx-auto relative z-10">
|
<div className="max-w-6xl mx-auto relative z-10">
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-start">
|
||||||
{/* Text Content */}
|
{/* Left Column: Bio & Hobbies */}
|
||||||
<motion.div
|
<div className="space-y-16">
|
||||||
initial="hidden"
|
{/* Biography */}
|
||||||
whileInView="visible"
|
|
||||||
viewport={{ once: true, margin: "-100px" }}
|
|
||||||
variants={staggerContainer}
|
|
||||||
className="space-y-8"
|
|
||||||
>
|
|
||||||
<motion.h2
|
|
||||||
variants={fadeInUp}
|
|
||||||
className="text-4xl md:text-5xl font-bold text-stone-900"
|
|
||||||
>
|
|
||||||
{t("title")}
|
|
||||||
</motion.h2>
|
|
||||||
<motion.div
|
<motion.div
|
||||||
variants={fadeInUp}
|
initial="hidden"
|
||||||
className="prose prose-stone prose-lg text-stone-700 space-y-4"
|
whileInView="visible"
|
||||||
|
viewport={{ once: true, margin: "-100px" }}
|
||||||
|
variants={staggerContainer}
|
||||||
|
className="space-y-8"
|
||||||
>
|
>
|
||||||
{cmsDoc ? (
|
<motion.h2
|
||||||
<RichTextClient doc={cmsDoc} className="prose prose-stone max-w-none" />
|
variants={fadeInUp}
|
||||||
) : (
|
className="text-4xl md:text-5xl font-bold text-stone-900"
|
||||||
<>
|
>
|
||||||
<p>{t("p1")}</p>
|
{t("title")}
|
||||||
<p>{t("p2")}</p>
|
</motion.h2>
|
||||||
<p>{t("p3")}</p>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
<motion.div
|
<motion.div
|
||||||
variants={fadeInUp}
|
variants={fadeInUp}
|
||||||
className="relative overflow-hidden bg-gradient-to-br from-liquid-mint/15 via-liquid-sky/10 to-liquid-lavender/15 border-2 border-liquid-mint/30 rounded-xl p-5 backdrop-blur-sm"
|
className="prose prose-stone prose-lg text-stone-700 space-y-4"
|
||||||
>
|
>
|
||||||
<div className="flex items-start gap-3">
|
{cmsDoc ? (
|
||||||
<Lightbulb size={20} className="text-stone-600 flex-shrink-0 mt-0.5" />
|
<RichTextClient doc={cmsDoc} className="prose prose-stone max-w-none" />
|
||||||
<div>
|
) : (
|
||||||
<p className="text-sm font-semibold text-stone-800 mb-1">
|
<>
|
||||||
{t("funFactTitle")}
|
<p>{t("p1")}</p>
|
||||||
</p>
|
<p>{t("p2")}</p>
|
||||||
<p className="text-sm text-stone-700 leading-relaxed">
|
<p>{t("p3")}</p>
|
||||||
{t("funFactBody")}
|
</>
|
||||||
</p>
|
)}
|
||||||
|
<motion.div
|
||||||
|
variants={fadeInUp}
|
||||||
|
className="relative overflow-hidden bg-gradient-to-br from-liquid-mint/15 via-liquid-sky/10 to-liquid-lavender/15 border-2 border-liquid-mint/30 rounded-xl p-5 backdrop-blur-sm"
|
||||||
|
>
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<Lightbulb size={20} className="text-stone-600 flex-shrink-0 mt-0.5" />
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-semibold text-stone-800 mb-1">
|
||||||
|
{t("funFactTitle")}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-stone-700 leading-relaxed">
|
||||||
|
{t("funFactBody")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</motion.div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Tech Stack & Hobbies */}
|
{/* Hobbies Section */}
|
||||||
<motion.div
|
<motion.div
|
||||||
initial="hidden"
|
initial="hidden"
|
||||||
whileInView="visible"
|
whileInView="visible"
|
||||||
viewport={{ once: true, margin: "-100px" }}
|
viewport={{ once: true, margin: "-100px" }}
|
||||||
variants={staggerContainer}
|
variants={staggerContainer}
|
||||||
className="space-y-8"
|
className="space-y-6"
|
||||||
>
|
>
|
||||||
<div>
|
|
||||||
<motion.h3
|
<motion.h3
|
||||||
variants={fadeInUp}
|
variants={fadeInUp}
|
||||||
className="text-2xl font-bold text-stone-900 mb-6"
|
className="text-2xl font-bold text-stone-900"
|
||||||
|
>
|
||||||
|
{t("hobbiesTitle")}
|
||||||
|
</motion.h3>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
|
{hobbies.map((hobby, idx) => (
|
||||||
|
<motion.div
|
||||||
|
key={`hobby-${hobby.text}-${idx}`}
|
||||||
|
variants={fadeInUp}
|
||||||
|
whileHover={{
|
||||||
|
scale: 1.02,
|
||||||
|
transition: { duration: 0.4, ease: "easeOut" },
|
||||||
|
}}
|
||||||
|
className={`flex items-center gap-3 p-4 rounded-xl border-2 transition-[background-color,border-color,box-shadow] duration-500 ease-out backdrop-blur-md ${
|
||||||
|
idx % 4 === 0
|
||||||
|
? "bg-gradient-to-r from-liquid-mint/25 to-liquid-sky/25 border-liquid-mint/50 hover:border-liquid-mint/70"
|
||||||
|
: idx % 4 === 1
|
||||||
|
? "bg-gradient-to-r from-liquid-coral/25 to-liquid-peach/25 border-liquid-coral/50 hover:border-liquid-coral/70"
|
||||||
|
: idx % 4 === 2
|
||||||
|
? "bg-gradient-to-r from-liquid-lavender/25 to-liquid-pink/25 border-liquid-lavender/50 hover:border-liquid-lavender/70"
|
||||||
|
: "bg-gradient-to-r from-liquid-lime/25 to-liquid-teal/25 border-liquid-lime/50 hover:border-liquid-lime/70"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<hobby.icon size={20} className="text-stone-700" />
|
||||||
|
<span className="text-stone-800 font-semibold text-sm">
|
||||||
|
{String(hobby.text)}
|
||||||
|
</span>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Column: Tech Stack & Reading */}
|
||||||
|
<div className="space-y-16">
|
||||||
|
{/* Tech Stack */}
|
||||||
|
<motion.div
|
||||||
|
initial="hidden"
|
||||||
|
whileInView="visible"
|
||||||
|
viewport={{ once: true, margin: "-100px" }}
|
||||||
|
variants={staggerContainer}
|
||||||
|
className="space-y-8"
|
||||||
|
>
|
||||||
|
<motion.h3
|
||||||
|
variants={fadeInUp}
|
||||||
|
className="text-2xl font-bold text-stone-900"
|
||||||
>
|
>
|
||||||
{t("techStackTitle")}
|
{t("techStackTitle")}
|
||||||
</motion.h3>
|
</motion.h3>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 gap-4">
|
||||||
{techStack.map((stack, idx) => (
|
{techStack.map((stack, idx) => (
|
||||||
<motion.div
|
<motion.div
|
||||||
key={`${stack.category}-${idx}`}
|
key={`${stack.category}-${idx}`}
|
||||||
@@ -308,12 +354,12 @@ const About = () => {
|
|||||||
}}
|
}}
|
||||||
className={`p-5 rounded-xl border-2 transition-[background-color,border-color,box-shadow] duration-500 ease-out backdrop-blur-md ${
|
className={`p-5 rounded-xl border-2 transition-[background-color,border-color,box-shadow] duration-500 ease-out backdrop-blur-md ${
|
||||||
idx === 0
|
idx === 0
|
||||||
? "bg-gradient-to-br from-liquid-sky/25 to-liquid-mint/25 border-liquid-sky/50 hover:border-liquid-sky/70 hover:from-liquid-sky/35 hover:to-liquid-mint/35"
|
? "bg-gradient-to-br from-liquid-sky/20 to-liquid-mint/20 border-liquid-sky/40 hover:border-liquid-sky/60"
|
||||||
: idx === 1
|
: idx === 1
|
||||||
? "bg-gradient-to-br from-liquid-peach/25 to-liquid-coral/25 border-liquid-peach/50 hover:border-liquid-peach/70 hover:from-liquid-peach/35 hover:to-liquid-coral/35"
|
? "bg-gradient-to-br from-liquid-peach/20 to-liquid-coral/20 border-liquid-peach/40 hover:border-liquid-peach/60"
|
||||||
: idx === 2
|
: idx === 2
|
||||||
? "bg-gradient-to-br from-liquid-lavender/25 to-liquid-pink/25 border-liquid-lavender/50 hover:border-liquid-lavender/70 hover:from-liquid-lavender/35 hover:to-liquid-pink/35"
|
? "bg-gradient-to-br from-liquid-lavender/20 to-liquid-pink/20 border-liquid-lavender/40 hover:border-liquid-lavender/60"
|
||||||
: "bg-gradient-to-br from-liquid-teal/25 to-liquid-lime/25 border-liquid-teal/50 hover:border-liquid-teal/70 hover:from-liquid-teal/35 hover:to-liquid-lime/35"
|
: "bg-gradient-to-br from-liquid-teal/20 to-liquid-lime/20 border-liquid-teal/40 hover:border-liquid-teal/60"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-3 mb-3">
|
<div className="flex items-center gap-3 mb-3">
|
||||||
@@ -330,12 +376,12 @@ const About = () => {
|
|||||||
key={`${stack.category}-${item}-${itemIdx}`}
|
key={`${stack.category}-${item}-${itemIdx}`}
|
||||||
className={`px-3 py-1.5 rounded-lg border-2 text-sm text-stone-800 font-semibold transition-all duration-400 ease-out backdrop-blur-sm ${
|
className={`px-3 py-1.5 rounded-lg border-2 text-sm text-stone-800 font-semibold transition-all duration-400 ease-out backdrop-blur-sm ${
|
||||||
itemIdx % 4 === 0
|
itemIdx % 4 === 0
|
||||||
? "bg-liquid-mint/25 border-liquid-mint/50 hover:bg-liquid-mint/35 hover:border-liquid-mint/70"
|
? "bg-liquid-mint/20 border-liquid-mint/40 hover:bg-liquid-mint/30"
|
||||||
: itemIdx % 4 === 1
|
: itemIdx % 4 === 1
|
||||||
? "bg-liquid-lavender/25 border-liquid-lavender/50 hover:bg-liquid-lavender/35 hover:border-liquid-lavender/70"
|
? "bg-liquid-lavender/20 border-liquid-lavender/40 hover:bg-liquid-lavender/30"
|
||||||
: itemIdx % 4 === 2
|
: itemIdx % 4 === 2
|
||||||
? "bg-liquid-rose/25 border-liquid-rose/50 hover:bg-liquid-rose/35 hover:border-liquid-rose/70"
|
? "bg-liquid-rose/20 border-liquid-rose/40 hover:bg-liquid-rose/30"
|
||||||
: "bg-liquid-sky/25 border-liquid-sky/50 hover:bg-liquid-sky/35 hover:border-liquid-sky/70"
|
: "bg-liquid-sky/20 border-liquid-sky/40 hover:bg-liquid-sky/30"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{String(item)}
|
{String(item)}
|
||||||
@@ -345,61 +391,29 @@ const About = () => {
|
|||||||
</motion.div>
|
</motion.div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Reading Section */}
|
||||||
|
<div className="space-y-10">
|
||||||
|
<motion.div
|
||||||
|
initial="hidden"
|
||||||
|
whileInView="visible"
|
||||||
|
viewport={{ once: true }}
|
||||||
|
variants={fadeInUp}
|
||||||
|
>
|
||||||
|
<CurrentlyReading />
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial="hidden"
|
||||||
|
whileInView="visible"
|
||||||
|
viewport={{ once: true }}
|
||||||
|
variants={fadeInUp}
|
||||||
|
>
|
||||||
|
<ReadBooks />
|
||||||
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
{/* Hobbies & Reading Grid */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
||||||
{/* Hobbies Column */}
|
|
||||||
<div className="space-y-6">
|
|
||||||
<motion.h3
|
|
||||||
variants={fadeInUp}
|
|
||||||
className="text-xl font-bold text-stone-900 mb-4"
|
|
||||||
>
|
|
||||||
{t("hobbiesTitle")}
|
|
||||||
</motion.h3>
|
|
||||||
<div className="space-y-3">
|
|
||||||
{hobbies.map((hobby, idx) => (
|
|
||||||
<motion.div
|
|
||||||
key={`hobby-${hobby.text}-${idx}`}
|
|
||||||
variants={fadeInUp}
|
|
||||||
whileHover={{
|
|
||||||
x: 8,
|
|
||||||
scale: 1.02,
|
|
||||||
transition: { duration: 0.4, ease: "easeOut" },
|
|
||||||
}}
|
|
||||||
className={`flex items-center gap-3 p-4 rounded-xl border-2 transition-[background-color,border-color,box-shadow] duration-500 ease-out backdrop-blur-md ${
|
|
||||||
idx === 0
|
|
||||||
? "bg-gradient-to-r from-liquid-mint/25 to-liquid-sky/25 border-liquid-mint/50 hover:border-liquid-mint/70 hover:from-liquid-mint/35 hover:to-liquid-sky/35"
|
|
||||||
: idx === 1
|
|
||||||
? "bg-gradient-to-r from-liquid-coral/25 to-liquid-peach/25 border-liquid-coral/50 hover:border-liquid-coral/70 hover:from-liquid-coral/35 hover:to-liquid-peach/35"
|
|
||||||
: idx === 2
|
|
||||||
? "bg-gradient-to-r from-liquid-lavender/25 to-liquid-pink/25 border-liquid-lavender/50 hover:border-liquid-lavender/70 hover:from-liquid-lavender/35 hover:to-liquid-pink/35"
|
|
||||||
: "bg-gradient-to-r from-liquid-lime/25 to-liquid-teal/25 border-liquid-lime/50 hover:border-liquid-lime/70 hover:from-liquid-lime/35 hover:to-liquid-teal/35"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<hobby.icon size={20} className="text-stone-700" />
|
|
||||||
<span className="text-stone-800 font-semibold">
|
|
||||||
{String(hobby.text)}
|
|
||||||
</span>
|
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Reading Column */}
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* Currently Reading */}
|
|
||||||
<motion.div variants={fadeInUp}>
|
|
||||||
<CurrentlyReading />
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Read Books */}
|
|
||||||
<motion.div variants={fadeInUp}>
|
|
||||||
<ReadBooks />
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Reference in New Issue
Block a user