damjan_savic/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implementierung - SEO - 01.08.2025

Browse Source
This commit is contained in:
damjan_savic
2025-08-01 20:33:47 +02:00
parent f176743885
commit e69e68242c
32 changed files with 12822 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+1 -14
View File
@@ -26,30 +26,17 @@ const RouteTracker = () => {
return null;
};
// Funktion zum Blockieren von externen Google Fonts
const blockExternalGoogleFonts = () => {
// Suche nach allen Google Fonts Link-Elementen und entferne sie
const linkElements = document.querySelectorAll('link[href*="fonts.googleapis.com"]');
linkElements.forEach(link => {
link.parentNode?.removeChild(link);
});
};
function App() {
useEffect(() => {
// Benutzerdefiniertes Scrollbar-Styling aktivieren
document.documentElement.classList.add('custom-scrollbar');
// Blockiere Google Fonts beim ersten Laden, sofern nicht explizit zugestimmt wurde
if (!isCookieCategoryEnabled('functional')) {
blockExternalGoogleFonts();
}
}, []);
return (
<HelmetProvider>
<ErrorBoundary>
<BrowserRouter>
<BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
<ScrollProvider>
<Suspense fallback={null}>
<PageTransition>
src/components/FloatingPaths.tsx
+3 -2
View File
@@ -15,8 +15,8 @@ export function FloatingPaths({ position }: { position: number }) {
}))
return (
<div className="absolute inset-0 pointer-events-none">
<svg className="w-full h-full text-accent" viewBox="0 0 696 316" fill="none">
<div className="absolute inset-0 pointer-events-none floating-paths" style={{ isolation: 'isolate', zIndex: 0 }}>
<svg className="w-full h-full text-accent" viewBox="0 0 696 316" fill="none" style={{ transform: 'translateZ(0)' }}>
<title>Background Paths</title>
{paths.map((path) => (
<motion.path
@@ -36,6 +36,7 @@ export function FloatingPaths({ position }: { position: number }) {
repeat: Number.POSITIVE_INFINITY,
ease: "linear",
}}
style={{ willChange: 'auto' }}
/>
))}
</svg>
src/components/HreflangTags.tsx
-1
View File
@@ -1,5 +1,4 @@
import React from 'react';
import { useRouter } from 'react-router-dom';
import { Helmet } from 'react-helmet-async';
import { useTranslation } from 'react-i18next';
src/components/Layout.tsx
+15 -6
View File
@@ -19,7 +19,7 @@ import LanguageSwitcher from "./LanguageSwitcher";
import { Link, useLocation } from "react-router-dom";
import Footer from "./Footer";
import { useScrollContext } from "./ScrollContext";
import PerformanceMonitor from "./PerformanceMonitor";
import { PerformanceMonitor } from "./PerformanceMonitor";
interface LayoutProps {
children: ReactNode;
@@ -33,9 +33,12 @@ const Layout = ({ children }: LayoutProps) => {
const location = useLocation();
const { isMenuOpen, setIsMenuOpen } = useScrollContext();
// Initial mount
// Initial mount with immediate execution
useEffect(() => {
setIsMounted(true);
// Use requestAnimationFrame to ensure smooth initial render
requestAnimationFrame(() => {
setIsMounted(true);
});
}, []);
// Schließe das Menü beim Routenwechsel
@@ -116,8 +119,13 @@ const Layout = ({ children }: LayoutProps) => {
: []),
];
// Render with opacity 0 on initial mount to prevent flicker
if (!isMounted) {
return null;
return (
<div className="min-h-screen bg-zinc-900">
{children}
</div>
);
}
return (
@@ -126,9 +134,10 @@ const Layout = ({ children }: LayoutProps) => {
<nav
className={`
fixed w-full z-40 transition-all duration-300
bg-zinc-800/50 backdrop-blur-sm border-b border-zinc-700/30
${scrolled
? "bg-zinc-900/80 backdrop-blur supports-[backdrop-filter]:bg-zinc-900/80"
: "bg-transparent"
? "bg-zinc-900/80 backdrop-blur-md shadow-lg shadow-zinc-900/50"
: ""
}
`}
role="navigation"
src/components/NavLink.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ export function NavLink({ to, icon, label, onClick, className }: NavLinkProps) {
{isActive && (
<motion.div
layoutId="activeIndicator"
className="absolute inset-0 rounded-full bg-zinc-800/50 -z-10"
className="absolute inset-0 rounded-full bg-zinc-700/60 -z-10"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
src/components/PageTransition.tsx
+119 -100
View File
@@ -1,6 +1,6 @@
"use client"
import React, { useEffect, useState, useCallback } from "react"
import { motion, AnimatePresence, cubicBezier } from "framer-motion"
import React, { useEffect, useState, useRef } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { useLocation } from "react-router-dom"
import { useScrollContext } from './ScrollContext'
@@ -8,126 +8,145 @@ interface PageTransitionProps {
children: React.ReactNode
}
const customEase = cubicBezier(0.25, 0.1, 0.25, 1)
const Logo = () => (
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={{
opacity: 1,
scale: 1,
transition: { duration: 0.4, ease: customEase },
}}
exit={{
opacity: 0,
scale: 1.2,
transition: { duration: 0.3, ease: customEase },
}}
className="w-16 h-16"
>
<img
src="/logo.png"
alt="Logo"
className="w-full h-full object-contain filter brightness-200"
/>
</motion.div>
)
const Logo = () => {
const [imageError, setImageError] = useState(false);
return (
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={{
opacity: 1,
scale: 1,
transition: { duration: 0.4 },
}}
exit={{
opacity: 0,
scale: 1.2,
transition: { duration: 0.3 },
}}
className="w-16 h-16 relative"
>
{!imageError ? (
<img
src="/logo.png"
alt="Logo"
className="w-full h-full object-contain filter brightness-200"
onError={() => setImageError(true)}
/>
) : (
<div className="w-full h-full flex items-center justify-center text-white font-bold text-2xl bg-zinc-800 rounded-full">
DS
</div>
)}
</motion.div>
);
}
const PageTransition = ({ children }: PageTransitionProps) => {
const location = useLocation()
const [showLogo, setShowLogo] = useState(false)
const [showContent, setShowContent] = useState(true)
const { setIsTransitioning } = useScrollContext()
const [isAnimating, setIsAnimating] = useState(false)
const [isTransitioning, setIsTransitioning] = useState(true) // Start with transition on initial load
const [showContent, setShowContent] = useState(false)
const { setIsTransitioning: setGlobalTransitioning } = useScrollContext()
const previousPathRef = useRef<string | null>(null)
const isFirstMount = useRef(true)
const resetScroll = useCallback(() => {
window.scrollTo({
top: 0,
behavior: 'instant'
})
}, [])
const startTransition = useCallback(() => {
setIsAnimating(true)
setIsTransitioning(true)
setShowContent(false)
setShowLogo(true)
}, [setIsTransitioning])
const finishTransition = useCallback(() => {
setShowContent(true)
setShowLogo(false)
setIsAnimating(false)
setIsTransitioning(false)
resetScroll()
}, [setIsTransitioning, resetScroll])
// Handle initial page load transition
useEffect(() => {
if (isFirstMount.current) {
setIsTransitioning(true);
setGlobalTransitioning(true);
// Show content after transition animation
const timer = setTimeout(() => {
setIsTransitioning(false);
setGlobalTransitioning(false);
setShowContent(true);
isFirstMount.current = false;
}, 1200);
return () => clearTimeout(timer);
}
}, [setGlobalTransitioning]);
useEffect(() => {
const cleanup = () => {
setShowLogo(false)
setShowContent(true)
setIsAnimating(false)
setIsTransitioning(false)
// Skip on first mount
if (isFirstMount.current) {
previousPathRef.current = location.pathname;
return;
}
if (location.pathname) {
startTransition()
// Only animate if path actually changed
if (location.pathname === previousPathRef.current) {
return;
}
const logoTimer = setTimeout(() => {
setShowLogo(false)
}, 800)
// Hide content immediately
setShowContent(false);
// Small delay to ensure React has finished updating
const startTimer = setTimeout(() => {
// Update previous path
previousPathRef.current = location.pathname;
const contentTimer = setTimeout(() => {
finishTransition()
}, 1000)
// Reset scroll position
window.scrollTo(0, 0);
return () => {
clearTimeout(logoTimer)
clearTimeout(contentTimer)
cleanup()
// Start transition
setIsTransitioning(true);
setGlobalTransitioning(true);
// End transition after animation and show new content
const endTimer = setTimeout(() => {
setIsTransitioning(false);
setGlobalTransitioning(false);
setShowContent(true);
}, 1200);
// Store the end timer for cleanup
(window as any).__pageTransitionEndTimer = endTimer;
}, 10);
return () => {
clearTimeout(startTimer);
if ((window as any).__pageTransitionEndTimer) {
clearTimeout((window as any).__pageTransitionEndTimer);
}
}
return cleanup
}, [location.pathname, startTransition, finishTransition])
setIsTransitioning(false);
setGlobalTransitioning(false);
};
}, [location.pathname, setGlobalTransitioning]);
return (
<div className={`relative min-h-screen bg-zinc-900 ${isAnimating ? 'pointer-events-none' : ''}`}>
<AnimatePresence mode="wait">
{showLogo && (
<>
{/* Page transition overlay - always on top */}
<AnimatePresence>
{isTransitioning && (
<motion.div
className="fixed inset-0 z-[60] bg-zinc-900 pointer-events-none"
key="transition-overlay"
className="fixed inset-0 bg-zinc-900 flex items-center justify-center page-transition-active"
style={{ zIndex: 9999 }}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.3, ease: customEase }}
transition={{ duration: 0.4, ease: "easeInOut" }}
>
<div className="absolute inset-0 flex items-center justify-center">
<Logo />
</div>
<Logo />
</motion.div>
)}
</AnimatePresence>
<AnimatePresence mode="wait">
{showContent && (
<motion.div
className="relative z-0 min-h-screen"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{
duration: 0.3,
ease: customEase,
}}
>
<div className={isAnimating ? 'pointer-events-none' : ''}>
{children}
</div>
</motion.div>
)}
</AnimatePresence>
</div>
{/* Content - only show when transition is complete */}
<div style={{ opacity: showContent ? 1 : 0, transition: 'opacity 0.3s ease-in-out' }}>
<motion.div
key={location.pathname}
initial={{ opacity: 0 }}
animate={{ opacity: showContent ? 1 : 0 }}
transition={{ duration: 0.3 }}
>
{children}
</motion.div>
</div>
</>
)
}
src/index.css
+30 -1
View File
@@ -1,9 +1,19 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import './colors.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Font loading states */
html.fonts-loading body {
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
html.fonts-loaded body,
html.fonts-fallback body {
opacity: 1;
}
@layer base {
:root {
font-family: Inter, system-ui, sans-serif;
@@ -40,6 +50,14 @@
.text-gradient {
@apply bg-clip-text text-transparent bg-gradient-to-r from-primary via-accent to-secondary;
}
/* GPU acceleration utilities - simplified */
.gpu-accelerated {
transform: translateZ(0);
-webkit-transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
}
@keyframes float {
@@ -60,6 +78,17 @@
}
}
/* Prevent hover flickering */
* {
-webkit-tap-highlight-color: transparent;
}
a, button {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
}
/* Scrollbar Styling */
@media (pointer: fine) {
::-webkit-scrollbar {
src/main.tsx
+10
View File
@@ -4,9 +4,11 @@ import { HelmetProvider } from 'react-helmet-async';
import App from './App';
import './index.css';
import './styles/mobile-optimizations.css';
import './styles/minimal-fixes.css';
import './i18n';
import { register as registerServiceWorker } from './utils/serviceWorkerRegistration';
import { reportWebVitals } from './utils/webVitals';
import { initializeFonts } from './utils/fontLoader';
// Typdefinition für Google Analytics
declare global {
@@ -17,6 +19,9 @@ declare global {
}
}
// Initialize fonts as early as possible
initializeFonts();
const rootElement = document.getElementById('root');
if (!rootElement) {
@@ -29,6 +34,11 @@ createRoot(rootElement).render(
</HelmetProvider>
);
// Mark app as mounted to prevent flicker
requestAnimationFrame(() => {
document.body.classList.add('app-mounted');
});
// Register service worker
registerServiceWorker();
src/pages/home/components/About.tsx
+16
View File
@@ -12,6 +12,10 @@ const About = () => {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"
style={{
transform: 'translateZ(0)',
willChange: 'opacity, transform'
}}
>
{/* Image Section */}
<div className="relative">
@@ -20,6 +24,10 @@ const About = () => {
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5 }}
className="rounded-3xl overflow-hidden aspect-square"
style={{
transform: 'translateZ(0)',
willChange: 'opacity, transform'
}}
>
<img
src="/portrait.jpg"
@@ -36,6 +44,10 @@ const About = () => {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.2 }}
className="text-3xl font-bold text-white"
style={{
transform: 'translateZ(0)',
willChange: 'opacity, transform'
}}
>
{t('pages.home.about.title')}
</motion.h2>
@@ -45,6 +57,10 @@ const About = () => {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.3 }}
className="text-zinc-400 leading-relaxed"
style={{
transform: 'translateZ(0)',
willChange: 'opacity, transform'
}}
>
<div className="text-zinc-400 leading-relaxed text-justify">
{t('pages.home.about.content')}
src/pages/home/components/Experience.tsx
+12
View File
@@ -59,6 +59,10 @@ const Experience = () => {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
style={{
transform: 'translateZ(0)',
willChange: 'opacity, transform'
}}
>
<h2 className="text-3xl font-bold text-white text-center mb-12">
{t('pages.home.experience.title')}
@@ -78,6 +82,10 @@ const Experience = () => {
exit={{ opacity: 0, x: -50 }}
transition={{ duration: 0.3 }}
className="grid grid-cols-1 md:grid-cols-2 gap-6"
style={{
transform: 'translateZ(0)',
willChange: 'opacity, transform'
}}
>
{getCurrentPageItems().map((exp, index) => (
<motion.div
@@ -86,6 +94,10 @@ const Experience = () => {
animate={{ opacity: 1 }}
transition={{ duration: 0.5, delay: index * 0.1 }}
className="p-6 md:p-8 rounded-3xl bg-zinc-800/40 hover:bg-zinc-800/60 transition-colors"
style={{
transform: 'translateZ(0)',
willChange: 'opacity'
}}
>
<h3 className="text-lg md:text-xl font-semibold text-white mb-1">
{exp.role}
src/pages/home/components/Hero.tsx
+35 -28
View File
@@ -14,48 +14,48 @@ const Hero = () => {
};
return (
<section id="home" className="relative min-h-screen bg-zinc-900 text-white">
{/* Floating Paths Background */}
<div className="absolute inset-0 pointer-events-none">
<section id="home" className="relative min-h-screen bg-zinc-900 text-white overflow-hidden">
{/* Floating Paths Background - nur eine Instanz für bessere Performance */}
<div className="absolute inset-0 pointer-events-none" style={{ zIndex: 1 }}>
<FloatingPaths position={1} />
<FloatingPaths position={-1} />
</div>
{/* Concentric Circles Background */}
<div className="absolute inset-0 pointer-events-none flex items-center justify-center">
{[1, 2, 3, 4, 5].map((index) => (
{/* Concentric Circles Background - mit GPU-Beschleunigung */}
<div className="absolute inset-0 pointer-events-none flex items-center justify-center" style={{ zIndex: 2 }}>
{[1, 2, 3].map((index) => (
<div
key={index}
className="absolute rounded-full border border-zinc-800"
className="absolute rounded-full border border-zinc-800/30"
style={{
width: `${index * 20}%`,
height: `${index * 20}%`,
opacity: 0.1
width: `${index * 30}%`,
height: `${index * 30}%`,
opacity: 0.1,
transform: 'translateZ(0)'
}}
/>
))}
</div>
{/* Top Navigation */}
<div className="absolute top-4 w-full px-8 flex justify-between items-center z-20">
<div className="absolute top-4 w-full px-8 flex justify-between items-center" style={{ zIndex: 40 }}>
<div className="flex gap-4">
<a
href="https://www.linkedin.com/in/damjan-savi%C4%87-720288127/"
target="_blank"
rel="noopener noreferrer"
className="text-white hover:text-zinc-300 transition-colors"
className="inline-flex items-center justify-center w-9 h-9 text-white hover:text-zinc-300 transition-colors"
aria-label={t('pages.home.hero.social.linkedin.title')}
>
<Linkedin className="h-5 w-5" />
<Linkedin className="h-5 w-5 pointer-events-none" />
</a>
<a
href="https://github.com/damjan1996"
target="_blank"
rel="noopener noreferrer"
className="text-white hover:text-zinc-300 transition-colors"
className="inline-flex items-center justify-center w-9 h-9 text-white hover:text-zinc-300 transition-colors"
aria-label={t('pages.home.hero.social.github.title')}
>
<Github className="h-5 w-5" />
<Github className="h-5 w-5 pointer-events-none" />
</a>
</div>
<a
@@ -68,18 +68,21 @@ const Hero = () => {
</div>
{/* Main Content */}
<div className="flex flex-col items-center justify-start min-h-screen px-4 pt-16 relative z-10">
<div className="flex flex-col items-center justify-start min-h-screen px-4 pt-16 relative" style={{ zIndex: 30 }}>
{/* Profile Image */}
<motion.div
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5 }}
className="w-48 h-48 sm:w-64 sm:h-64 mb-6 rounded-full overflow-hidden border-2 border-zinc-800"
style={{ transform: 'translateZ(0)', backfaceVisibility: 'hidden' }}
>
<img
src="/portrait.jpg"
alt={t('pages.home.hero.image.alt')}
className="w-full h-full object-cover"
loading="eager"
style={{ transform: 'scale(1.01)' }}
/>
</motion.div>
@@ -110,39 +113,43 @@ const Hero = () => {
>
<button
onClick={() => scrollToSection('experience')}
className="w-full sm:w-auto px-6 py-2 hover:bg-zinc-800 rounded-full transition-all duration-300 uppercase cursor-pointer"
className="relative w-full sm:w-auto px-6 py-2 rounded-full uppercase cursor-pointer overflow-hidden group"
>
{t('pages.home.hero.navigation.experience')}
<span className="relative z-10">{t('pages.home.hero.navigation.experience')}</span>
<div className="absolute inset-0 bg-zinc-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-full" />
</button>
<button
onClick={() => scrollToSection('skills')}
className="w-full sm:w-auto px-6 py-2 hover:bg-zinc-800 rounded-full transition-all duration-300 uppercase cursor-pointer"
className="relative w-full sm:w-auto px-6 py-2 rounded-full uppercase cursor-pointer overflow-hidden group"
>
{t('pages.home.hero.navigation.skills')}
<span className="relative z-10">{t('pages.home.hero.navigation.skills')}</span>
<div className="absolute inset-0 bg-zinc-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-full" />
</button>
<button
onClick={() => scrollToSection('projects')}
className="w-full sm:w-auto px-6 py-2 hover:bg-zinc-800 rounded-full transition-all duration-300 uppercase cursor-pointer"
className="relative w-full sm:w-auto px-6 py-2 rounded-full uppercase cursor-pointer overflow-hidden group"
>
{t('pages.home.hero.navigation.projects')}
<span className="relative z-10">{t('pages.home.hero.navigation.projects')}</span>
<div className="absolute inset-0 bg-zinc-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-full" />
</button>
<button
onClick={() => scrollToSection('about')}
className="w-full sm:w-auto px-6 py-2 hover:bg-zinc-800 rounded-full transition-all duration-300 uppercase cursor-pointer"
className="relative w-full sm:w-auto px-6 py-2 rounded-full uppercase cursor-pointer overflow-hidden group"
>
{t('pages.home.hero.navigation.about')}
<span className="relative z-10">{t('pages.home.hero.navigation.about')}</span>
<div className="absolute inset-0 bg-zinc-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-full" />
</button>
</motion.div>
</div>
{/* Contact Button Bottom */}
<div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 z-20">
<div className="absolute bottom-4 left-1/2 transform -translate-x-1/2" style={{ zIndex: 40 }}>
<a
href="mailto:info@damjan-savic.com"
className="text-white hover:text-zinc-300 transition-colors"
className="inline-flex items-center justify-center w-10 h-10 text-white hover:text-zinc-300 transition-colors"
aria-label={t('pages.home.hero.social.getInTouch')}
>
<Mail className="h-6 w-6" />
<Mail className="h-6 w-6 pointer-events-none" />
</a>
</div>
</section>
src/pages/home/components/Skills.tsx
+12
View File
@@ -71,6 +71,10 @@ const Skills = () => {
animate={{ opacity: 1 }}
onHoverStart={() => setSelectedSkill(skill.name)}
onHoverEnd={() => setSelectedSkill(null)}
style={{
transform: 'translateZ(0)',
willChange: 'opacity'
}}
>
<div className="flex justify-between items-center">
<div className="flex flex-col">
@@ -102,6 +106,10 @@ const Skills = () => {
initial={{ width: 0 }}
animate={{ width: `${skill.level}%` }}
transition={{ duration: 0.5 }}
style={{
transform: 'translateZ(0)',
willChange: 'width'
}}
/>
</div>
</motion.div>
@@ -123,6 +131,10 @@ const Skills = () => {
role="button"
aria-pressed={selectedSkill === skill.name}
aria-label={t('pages.home.skills.aria.selectSkill')}
style={{
transform: 'translateZ(0)',
willChange: 'transform'
}}
>
<div className={selectedSkill === skill.name ? 'text-zinc-500' : 'text-white'}>
{iconMap[skill.name]}
src/pages/portfolio/components/PortfolioCard.tsx
+4
View File
@@ -45,6 +45,10 @@ const PortfolioCard: React.FC<PortfolioCardProps> = ({ project }) => {
variants={itemVariants}
transition={{ duration: 0.5 }}
className="relative"
style={{
transform: 'translateZ(0)',
willChange: 'opacity, transform'
}}
>
{/* Image Container */}
<div className="aspect-[16/9] w-full relative overflow-hidden">
src/pages/portfolio/components/PortfolioGrid.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ const PortfolioGrid = () => {
try {
const localeModule = await import(
`../../../i18n/locales/${i18n.language}/portfolio`
`../../../i18n/locales/${i18n.language}/portfolio/index.ts`
);
// Mische die Projekte mit lokalisierten Inhalten, sofern verfügbar
src/styles/minimal-fixes.css
+31
View File
@@ -0,0 +1,31 @@
/* Minimal fixes for animation issues */
/* 1. Stabilize page transitions */
.page-transition-active {
z-index: 9999 !important;
background-color: rgb(24, 24, 27) !important; /* zinc-900 */
}
/* 2. Prevent floating paths from interfering */
.floating-paths {
z-index: -1 !important;
pointer-events: none !important;
}
/* 3. Ensure smooth font loading */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 4. Fix for Safari/iOS */
@supports (-webkit-touch-callout: none) {
body {
-webkit-transform: translateZ(0);
}
}
/* 5. Prevent animation conflicts during route changes */
.page-transition-active * {
animation-play-state: paused !important;
}
src/styles/mobile-optimizations.css
+2 -25
View File
@@ -33,7 +33,6 @@ a {
justify-content: center;
padding: 12px 24px;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Mobile navigation optimized for thumb reach */
@@ -147,28 +146,6 @@ a {
padding-bottom: env(safe-area-inset-bottom);
}
/* Performance optimizations */
.will-change-transform {
will-change: transform;
}
/* Performance optimizations handled by interaction-fix.css */
.gpu-accelerated {
transform: translateZ(0);
-webkit-transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
perspective: 1000;
-webkit-perspective: 1000;
}
/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Reduced motion handled by interaction-fix.css */
src/utils/fontLoader.ts
+30
View File
@@ -0,0 +1,30 @@
// Font loading utility to ensure fonts are loaded before showing content
export const preloadFonts = async () => {
if ('fonts' in document) {
try {
await document.fonts.load('1em Inter');
document.documentElement.classList.add('fonts-loaded');
} catch (err) {
console.warn('Font loading failed:', err);
// Fallback to system fonts
document.documentElement.classList.add('fonts-fallback');
}
}
};
// Call this function as early as possible
export const initializeFonts = () => {
// Add loading class immediately
document.documentElement.classList.add('fonts-loading');
// Start font loading
preloadFonts();
// Remove loading class after a timeout to prevent indefinite loading state
setTimeout(() => {
document.documentElement.classList.remove('fonts-loading');
if (!document.documentElement.classList.contains('fonts-loaded')) {
document.documentElement.classList.add('fonts-fallback');
}
}, 3000);
};
src/utils/webVitals.ts
+4 -4
View File
@@ -39,10 +39,10 @@ function sendToAnalytics(metric: Metric) {
}
}));
// Also send to your analytics endpoint if needed
if (navigator.sendBeacon) {
navigator.sendBeacon('/api/analytics', body);
}
// Comment out analytics endpoint for now - not implemented
// if (navigator.sendBeacon) {
// navigator.sendBeacon('/api/analytics', body);
// }
}
export function reportWebVitals() {