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

feat: major UI/UX overhaul, snippets system, and performance fixes
Some checks failed
Dev Deployment (Zero Downtime) / deploy-dev (push) Failing after 9m26s
Details

Browse Source
This commit is contained in:
denshooter
2026-02-16 12:31:40 +01:00
parent 6f62b37c3a
commit a5dba298f3
41 changed files with 1610 additions and 499 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
app/components/Hero.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { motion } from "framer-motion";
import { ArrowDown, Github, Linkedin, Mail, Code, Zap } from "lucide-react";
import { Github, Linkedin, Mail } from "lucide-react";
import { useLocale, useTranslations } from "next-intl";
import Image from "next/image";
import { useEffect, useState } from "react";
@@ -53,7 +53,7 @@ const Hero = () => {
transition={{ duration: 0.5 }}
className="inline-flex items-center gap-3 px-5 py-2.5 rounded-full bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 shadow-sm"
>
<span className="w-2.5 h-2.5 bg-green-500 rounded-full animate-pulse" />
<span className="w-2.5 h-2.5 bg-emerald-500 rounded-full animate-pulse" />
<span className="font-mono text-[10px] font-black uppercase tracking-[0.3em] text-stone-500">{getLabel("hero.badge", "Student & Self-Hoster")}</span>
</motion.div>
@@ -70,7 +70,7 @@ const Hero = () => {
initial={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
className="block text-transparent bg-clip-text bg-gradient-to-r from-liquid-mint via-liquid-sky to-liquid-purple pb-4"
className="block text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 via-liquid-sky to-liquid-purple pb-4"
>
{getLabel("hero.line2", "Stuff.")}
</motion.span>
@@ -95,29 +95,27 @@ const Hero = () => {
<div className="absolute inset-0 bg-white/10 -translate-x-full group-hover:translate-x-full transition-transform duration-1000" />
{t("ctaWork")}
</a>
<div className="flex gap-4">
{[
{ icon: Github, href: "https://github.com/Denshooter" },
{ icon: Linkedin, href: "https://linkedin.com/in/dkonkol" },
{ icon: Mail, href: "mailto:contact@dk0.dev" }
].map((social, i) => (
<a key={i} href={social.href} target="_blank" rel="noopener noreferrer" className="p-5 bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-[1.5rem] text-stone-400 hover:text-stone-900 dark:hover:text-white transition-all shadow-sm hover:shadow-xl">
<social.icon size={22} />
</a>
))}
</div>
<a href="#contact" className="font-black text-xs uppercase tracking-[0.2em] text-stone-500 hover:text-stone-900 dark:hover:text-white transition-colors">
{t("ctaContact")}
</a>
</motion.div>
</div>
{/* Right: The Photo */}
<motion.div
initial={{ opacity: 0, scale: 0.8, rotate: 5 }}
animate={{ opacity: 1, scale: 1, rotate: 0 }}
transition={{ duration: 1, ease: [0.25, 0.1, 0.25, 1] }}
initial={{ opacity: 0, scale: 0.8 }}
animate={{
opacity: 1,
scale: 1
}}
transition={{
opacity: { duration: 1 },
scale: { duration: 1 }
}}
className="relative w-72 h-72 md:w-[500px] md:h-[500px] shrink-0 mt-12 lg:mt-0"
>
<div className="absolute inset-0 bg-gradient-to-tr from-liquid-mint to-liquid-purple rounded-[5rem] rotate-12 scale-90 opacity-20 blur-3xl animate-pulse" />
<div className="relative w-full h-full rounded-[4rem] overflow-hidden border-[16px] border-white dark:border-stone-900 shadow-[0_50px_100px_-20px_rgba(0,0,0,0.4)]">
<div className="absolute inset-0 bg-gradient-to-tr from-liquid-mint to-liquid-purple rounded-[5rem] rotate-12 scale-90 opacity-20 blur-3xl" />
<div className="relative w-full h-full rounded-[4rem] overflow-hidden border-[24px] border-white dark:border-stone-900 shadow-[0_50px_100px_-20px_rgba(0,0,0,0.4)]">
<Image src="/images/me.jpg" alt="Dennis Konkol" fill className="object-cover" priority />
</div>