dschlueter/jamulix-homepage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Mobile: SVG-Grafik, auf kleinen Screens sichtbar

Browse source 
- programmer-graphic.tsx: programmierer-vector.svg statt PNG (336 KB statt 1,6 MB)
- hero.tsx: hidden lg:block entfernt, Grafik jetzt auch auf Mobile sichtbar
- Mobile-Größe: max-w-xs/sm, Desktop: max-w-md

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Dieter Schlüter 2026-04-25 19:30:19 +02:00
commit 28451452a2
2 changed files with 4 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
components/hero.tsx
View file

@ -83,7 +83,7 @@ export function Hero() {
initial={{ opacity: 0, scale: 0.95 }} initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.8, delay: 0.3 }} transition={{ duration: 0.8, delay: 0.3 }}
className="lg:col-span-5 hidden lg:block" className="lg:col-span-5"
> >
<ProgrammerGraphic /> <ProgrammerGraphic />
</motion.div> </motion.div>

6
components/programmer-graphic.tsx
View file

@ -2,7 +2,7 @@
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
import Image from 'next/image' import Image from 'next/image'
import programmiererImg from '../public/Programmierer.png' import programmiererSvg from '../public/programmierer-vector.svg'
export function ProgrammerGraphic() { export function ProgrammerGraphic() {
return ( return (
@ -10,10 +10,10 @@ export function ProgrammerGraphic() {
initial={{ opacity: 0, scale: 0.95 }} initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.8 }} transition={{ duration: 0.8 }}
className="relative w-full max-w-md mx-auto aspect-[3/5] lg:aspect-square" className="relative w-full max-w-xs mx-auto aspect-[3/5] sm:max-w-sm lg:max-w-md lg:aspect-square"
> >
<Image <Image
src={programmiererImg} src={programmiererSvg}
alt="Programmierung: Von 1976 bis heute – 50 Jahre Code" alt="Programmierung: Von 1976 bis heute – 50 Jahre Code"
fill fill
className="object-contain drop-shadow-lg" className="object-contain drop-shadow-lg"