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

Refactor activity feed disabled UI; use plain img for hero image fix

Browse Source 
Co-authored-by: dennis <dennis@konkol.net>
This commit is contained in:
Cursor Agent
2026-01-12 16:47:14 +00:00
parent e2616ae0f7
commit ba99889782
2 changed files with 45 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
app/components/ActivityFeed.tsx
View File

@@ -1459,20 +1459,29 @@ export default function ActivityFeed() {
// Don't render if tracking is disabled and no data // Don't render if tracking is disabled and no data
if (!isTrackingEnabled && !data) { if (!isTrackingEnabled && !data) {
return ( return (
<div className="fixed bottom-4 right-4 md:bottom-6 md:right-6 z-40 pointer-events-auto"> <div className="fixed bottom-4 right-4 md:bottom-6 md:right-6 z-40 font-sans w-[280px] sm:w-[320px] max-w-[calc(100vw-2rem)] pointer-events-none">
<motion.div <motion.div
initial={{ scale: 0, opacity: 0 }} initial={{ scale: 0.96, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }} animate={{ scale: 1, opacity: 1 }}
className="bg-white/80 backdrop-blur-xl border border-white/60 rounded-2xl px-4 py-3 shadow-xl" className="pointer-events-auto bg-white/90 backdrop-blur-2xl border border-white/60 rounded-2xl shadow-xl overflow-hidden w-full"
> >
<button <div className="px-4 py-3 flex items-center justify-between">
onClick={toggleTracking} <div className="flex items-center gap-3">
className="flex items-center gap-2 text-stone-600 hover:text-stone-900 transition-colors" <Activity size={18} className="text-stone-900" />
title="Activity tracking is disabled. Click to enable." <div className="text-left">
> <h3 className="text-sm font-bold text-stone-900">Live Activity</h3>
<Activity size={16} /> <p className="text-[10px] text-stone-500">Tracking disabled</p>
<span className="text-xs font-semibold">Tracking disabled</span> </div>
</button> </div>
<button
type="button"
onClick={toggleTracking}
className="text-xs font-semibold px-3 py-1.5 rounded-full bg-stone-900 text-white hover:bg-stone-800 transition-colors"
title="Enable activity tracking"
>
Enable
</button>
</div>
</motion.div> </motion.div>
</div> </div>
); );
@@ -1481,20 +1490,29 @@ export default function ActivityFeed() {
// If tracking disabled but we have data, show a disabled state // If tracking disabled but we have data, show a disabled state
if (!isTrackingEnabled && data) { if (!isTrackingEnabled && data) {
return ( return (
<div className="fixed bottom-4 right-4 md:bottom-6 md:right-6 z-40 pointer-events-auto"> <div className="fixed bottom-4 right-4 md:bottom-6 md:right-6 z-40 font-sans w-[280px] sm:w-[320px] max-w-[calc(100vw-2rem)] pointer-events-none">
<motion.div <motion.div
initial={{ scale: 0, opacity: 0 }} initial={{ scale: 0.96, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }} animate={{ scale: 1, opacity: 1 }}
className="bg-white/80 backdrop-blur-xl border border-white/60 rounded-2xl px-4 py-3 shadow-xl" className="pointer-events-auto bg-white/90 backdrop-blur-2xl border border-white/60 rounded-2xl shadow-xl overflow-hidden w-full"
> >
<button <div className="px-4 py-3 flex items-center justify-between">
onClick={toggleTracking} <div className="flex items-center gap-3">
className="flex items-center gap-2 text-stone-600 hover:text-stone-900 transition-colors" <Activity size={18} className="text-stone-900" />
title="Activity tracking is disabled. Click to enable." <div className="text-left">
> <h3 className="text-sm font-bold text-stone-900">Live Activity</h3>
<Activity size={16} /> <p className="text-[10px] text-stone-500">Tracking disabled</p>
<span className="text-xs font-semibold">Tracking disabled</span> </div>
</button> </div>
<button
type="button"
onClick={toggleTracking}
className="text-xs font-semibold px-3 py-1.5 rounded-full bg-stone-900 text-white hover:bg-stone-800 transition-colors"
title="Enable activity tracking"
>
Enable
</button>
</div>
</motion.div> </motion.div>
</div> </div>
); );

14
app/components/Hero.tsx
View File

@@ -2,7 +2,6 @@
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { ArrowDown, Code, Zap, Rocket } from "lucide-react"; import { ArrowDown, Code, Zap, Rocket } from "lucide-react";
import Image from "next/image";
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";
@@ -111,16 +110,13 @@ const Hero = () => {
repeatType: "reverse", repeatType: "reverse",
}} }}
> >
<Image {/* Use a plain <img> to fully bypass Next.js image optimizer (dev 400 issue). */}
<img
src="/images/me.jpg" src="/images/me.jpg"
alt="Dennis Konkol" alt="Dennis Konkol"
fill className="absolute inset-0 w-full h-full object-cover scale-105 hover:scale-[1.08] transition-transform duration-1000 ease-out"
className="object-cover scale-105 hover:scale-[1.08] transition-transform duration-1000 ease-out" loading="eager"
priority decoding="async"
// Next/Image optimizer is returning 400 for this file in some dev setups
// (seen as: "isn't a valid image ... received null"). Bypass optimization.
unoptimized
sizes="(max-width: 768px) 256px, 320px"
/> />
{/* Glossy Overlay for Liquid Feel */} {/* Glossy Overlay for Liquid Feel */}