denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: rebalance about layout and fix missing gaming icon
Some checks failed
Dev Deployment (Zero Downtime) / deploy-dev (push) Failing after 9m23s
Details

Browse Source
This commit is contained in:
denshooter
2026-02-16 00:45:30 +01:00
parent 0b1a45038d
commit 5347a9ff3b
1 changed files with 126 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
app/components/About.tsx
View File

@@ -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,8 +235,10 @@ 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 */}
<div className="space-y-16">
{/* Biography */}
<motion.div <motion.div
initial="hidden" initial="hidden"
whileInView="visible" whileInView="visible"
@@ -282,7 +284,52 @@ const About = () => {
</motion.div> </motion.div>
</motion.div> </motion.div>
{/* Tech Stack & Hobbies */} {/* Hobbies Section */}
<motion.div
initial="hidden"
whileInView="visible"
viewport={{ once: true, margin: "-100px" }}
variants={staggerContainer}
className="space-y-6"
>
<motion.h3
variants={fadeInUp}
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 <motion.div
initial="hidden" initial="hidden"
whileInView="visible" whileInView="visible"
@@ -290,14 +337,13 @@ const About = () => {
variants={staggerContainer} variants={staggerContainer}
className="space-y-8" className="space-y-8"
> >
<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("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>
</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> </motion.div>
))}
</div>
</div>
{/* Reading Column */} {/* Reading Section */}
<div className="space-y-6"> <div className="space-y-10">
{/* Currently Reading */} <motion.div
<motion.div variants={fadeInUp}> initial="hidden"
whileInView="visible"
viewport={{ once: true }}
variants={fadeInUp}
>
<CurrentlyReading /> <CurrentlyReading />
</motion.div> </motion.div>
{/* Read Books */} <motion.div
<motion.div variants={fadeInUp}> initial="hidden"
whileInView="visible"
viewport={{ once: true }}
variants={fadeInUp}
>
<ReadBooks /> <ReadBooks />
</motion.div> </motion.div>
</div> </div>
</div> </div>
</motion.div>
</div> </div>
</div> </div>
</section> </section>