yolando/website-portofolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement hero section with multi-language support and localized content files

Browse Source
This commit is contained in:
Yolando
2026-04-03 17:25:29 +07:00
parent e0f6e4bd8b
commit 9fffe4c598
3 changed files with 25 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/features/hero/hero-section.tsx
View File

@@ -48,33 +48,22 @@ export function HeroSection() {
{/* LEFT: Text Content */}
<div className="text-center lg:text-left flex flex-col items-center lg:items-start order-2 lg:order-1">
<motion.h1
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.7, delay: 0.3 }}
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight leading-[1.1] mb-6"
className="max-w-xl mb-10"
>
<span className="block text-2xl sm:text-3xl lg:text-4xl text-muted-foreground font-medium mb-2">
{t("greeting")}{" "}
<span className="text-foreground gradient-text inline-block">{t("name")}</span>
</span>
{t("titlePart1")}{" "}
<span className="gradient-text whitespace-nowrap">{t("titleHighlight")}</span>
<br />
{t("titlePart2")}
</motion.h1>
<motion.p
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.7, delay: 0.5 }}
className="text-lg text-muted-foreground mb-10 leading-relaxed max-w-xl"
>
<span className="font-mono text-accent font-semibold">
{t("yearsExp")}
</span>{" "}
{t("subtitle")}
</motion.p>
<p className="text-sm sm:text-base text-muted-foreground font-medium mb-1 tracking-wide">
{t("greeting")}
</p>
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight mb-5">
<span className="gradient-text">{t("name")}</span>
</h1>
<p className="text-base sm:text-lg text-muted-foreground font-normal leading-relaxed">
{t("taglineRest")}
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -113,17 +102,18 @@ export function HeroSection() {
{ src: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/spring/spring-original.svg", alt: "Spring Boot" },
{ src: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/oracle/oracle-original.svg", alt: "Oracle" },
{ src: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/docker/docker-original.svg", alt: "Docker" },
{ src: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/postgresql/postgresql-original.svg", alt: "PostgreSQL" },
{ src: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/flutter/flutter-original.svg", alt: "Flutter" },
{ src: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/react/react-original.svg", alt: "React" },
{ src: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/angular/angular-original.svg", alt: "Angular" },
].map((icon) => (
<img key={icon.alt} src={icon.src} alt={icon.alt} title={icon.alt} className="w-9 h-9 md:w-11 md:h-11 opacity-60 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0 hover:scale-125 hover:-translate-y-2 cursor-pointer drop-shadow-sm hover:drop-shadow-xl" />
))}
<img src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" alt="IBM MQ" title="IBM MQ" className="w-10 h-6 md:w-12 md:h-8 object-contain opacity-60 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0 hover:scale-125 hover:-translate-y-2 cursor-pointer drop-shadow-sm hover:drop-shadow-xl dark:invert" />
<div title="SWIFT Payment (MT/MX)" className="flex items-center justify-center opacity-60 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0 hover:scale-125 hover:-translate-y-2 cursor-pointer">
<span className="font-black italic text-sm md:text-base text-[#0033A0] dark:text-[#6FA8FF] tracking-wider">SWIFT</span>
</div>
<a
href="#tech-stack"
className="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-xs font-semibold border border-accent/40 text-accent bg-accent/10 hover:bg-accent/20 hover:border-accent/70 transition-all duration-300 hover:scale-105 whitespace-nowrap"
>
{tTech("seeMore")}
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
</div>
</motion.div>
</div>