jleibl/johannes-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Montserrat font to Tailwind config and clean up unused comments in Home component

Browse Source
This commit is contained in:
Jan-Marlon Leibl
2025-01-13 00:06:50 +01:00
parent 81f39ea2bd
commit eb55d474ba
2 changed files with 2 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/pages/index.tsx
View File

@ -34,17 +34,14 @@ export default function Home() {
const currentScrollY = window.scrollY; const currentScrollY = window.scrollY;
setIsScrolled(currentScrollY > 100); setIsScrolled(currentScrollY > 100);
// Always hide menu when at the very top
if (currentScrollY === 0) { if (currentScrollY === 0) {
setIsMenuVisible(false); setIsMenuVisible(false);
return; return;
} }
// Show menu when scrolling up and past initial threshold
if (currentScrollY < lastScrollY.current && currentScrollY > 100) { if (currentScrollY < lastScrollY.current && currentScrollY > 100) {
setIsMenuVisible(true); setIsMenuVisible(true);
} }
// Hide menu when scrolling down
else if (currentScrollY > lastScrollY.current) { else if (currentScrollY > lastScrollY.current) {
setIsMenuVisible(false); setIsMenuVisible(false);
} }
@ -53,7 +50,7 @@ export default function Home() {
}; };
window.addEventListener('scroll', updateScroll); window.addEventListener('scroll', updateScroll);
updateScroll(); // Initial check updateScroll();
return () => window.removeEventListener('scroll', updateScroll); return () => window.removeEventListener('scroll', updateScroll);
}, []); }, []);
@ -87,7 +84,6 @@ export default function Home() {
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
transition={{ duration: 0.7, ease: [0.32, 0.72, 0, 1] }} transition={{ duration: 0.7, ease: [0.32, 0.72, 0, 1] }}
> >
{/* Skip Link */}
<a <a
href="#main-content" href="#main-content"
className={` className={`
@ -98,7 +94,6 @@ export default function Home() {
Skip to main content Skip to main content
</a> </a>
{/* Menu Bar */}
<header> <header>
<motion.nav <motion.nav
className="fixed top-0 left-0 right-0 z-50 bg-black/90 backdrop-blur-md border-b border-white/10" className="fixed top-0 left-0 right-0 z-50 bg-black/90 backdrop-blur-md border-b border-white/10"
@ -158,14 +153,11 @@ export default function Home() {
</motion.nav> </motion.nav>
</header> </header>
{/* Main Content */}
<div id="main-content" tabIndex={-1}> <div id="main-content" tabIndex={-1}>
{/* Hero Section */}
<section <section
className="relative h-[100svh] bg-black overflow-hidden" className="relative h-[100svh] bg-black overflow-hidden"
aria-label="Hero section" aria-label="Hero section"
> >
{/* Background Image */}
<motion.div <motion.div
className="absolute inset-0 w-full md:w-[80%] left-0 md:left-[-15%]" className="absolute inset-0 w-full md:w-[80%] left-0 md:left-[-15%]"
initial={{ opacity: 0, scale: 1.1 }} initial={{ opacity: 0, scale: 1.1 }}
@ -173,7 +165,6 @@ export default function Home() {
transition={{ duration: 1.4, ease: [0.32, 0.72, 0, 1], delay: 0.3 }} transition={{ duration: 1.4, ease: [0.32, 0.72, 0, 1], delay: 0.3 }}
aria-hidden="true" aria-hidden="true"
> >
{/* Mobile Image */}
<div className="relative w-full h-full md:hidden"> <div className="relative w-full h-full md:hidden">
<Image <Image
src="/images/hero-background.jpg" src="/images/hero-background.jpg"
@ -194,7 +185,6 @@ export default function Home() {
/> />
</div> </div>
{/* Desktop Image */}
<div className="relative w-full h-full hidden md:block"> <div className="relative w-full h-full hidden md:block">
<Image <Image
src="/images/hero-background.jpg" src="/images/hero-background.jpg"
@ -216,11 +206,9 @@ export default function Home() {
</div> </div>
</motion.div> </motion.div>
{/* Content Container */}
<div className="absolute inset-0 flex items-center md:justify-start"> <div className="absolute inset-0 flex items-center md:justify-start">
<div className="w-full md:w-[80%] px-6 sm:px-8 md:pl-[25%] md:pr-0 lg:pl-[50%]"> <div className="w-full md:w-[80%] px-6 sm:px-8 md:pl-[25%] md:pr-0 lg:pl-[50%]">
<div className="relative"> <div className="relative">
{/* Main Title */}
<motion.div <motion.div
className="relative z-20 text-center md:text-left" className="relative z-20 text-center md:text-left"
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
@ -253,7 +241,6 @@ export default function Home() {
</div> </div>
</motion.div> </motion.div>
{/* Bottom Content */}
<motion.div <motion.div
className="mt-8 md:mt-12 mix-blend-difference" className="mt-8 md:mt-12 mix-blend-difference"
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
@ -276,7 +263,6 @@ export default function Home() {
</div> </div>
</motion.div> </motion.div>
{/* Mobile Categories */}
<motion.div <motion.div
className="mt-8 text-center md:hidden" className="mt-8 text-center md:hidden"
initial={{ opacity: 0, y: 15 }} initial={{ opacity: 0, y: 15 }}
@ -291,7 +277,6 @@ export default function Home() {
</div> </div>
</div> </div>
{/* Scroll Indicator/To Top Button */}
<motion.div <motion.div
className="fixed bottom-6 md:bottom-8 right-6 md:right-8 z-50" className="fixed bottom-6 md:bottom-8 right-6 md:right-8 z-50"
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
@ -306,7 +291,6 @@ export default function Home() {
aria-label="Scroll to top" aria-label="Scroll to top"
tabIndex={0} tabIndex={0}
> >
{/* Background */}
<motion.div <motion.div
className="absolute right-0 bg-black/50 backdrop-blur-md rounded-full" className="absolute right-0 bg-black/50 backdrop-blur-md rounded-full"
initial={{ opacity: 0, scale: 0.8 }} initial={{ opacity: 0, scale: 0.8 }}
@ -321,7 +305,6 @@ export default function Home() {
}} }}
/> />
{/* Scroll Text and Line */}
<motion.div <motion.div
className="flex items-center gap-2 px-3" className="flex items-center gap-2 px-3"
animate={{ animate={{
@ -336,7 +319,6 @@ export default function Home() {
<div className="w-[40px] md:w-[50px] h-px bg-white/60 origin-right mix-blend-difference" /> <div className="w-[40px] md:w-[50px] h-px bg-white/60 origin-right mix-blend-difference" />
</motion.div> </motion.div>
{/* Arrow Up */}
<motion.div <motion.div
className="absolute right-0 flex items-center justify-center w-10 h-10" className="absolute right-0 flex items-center justify-center w-10 h-10"
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
@ -367,11 +349,9 @@ export default function Home() {
</motion.div> </motion.div>
</section> </section>
{/* Details Section */}
<section id="about" className="py-16 sm:py-20 md:py-24 lg:py-32 bg-black border-t border-white/10"> <section id="about" className="py-16 sm:py-20 md:py-24 lg:py-32 bg-black border-t border-white/10">
<div className="container mx-auto px-4 sm:px-6 md:px-8"> <div className="container mx-auto px-4 sm:px-6 md:px-8">
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-16 lg:gap-24 max-w-7xl mx-auto"> <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-16 lg:gap-24 max-w-7xl mx-auto">
{/* Left Column - About */}
<motion.div <motion.div
initial={{ opacity: 0, y: 30 }} initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
@ -400,7 +380,6 @@ export default function Home() {
</div> </div>
</motion.div> </motion.div>
{/* Right Column - Measurements */}
<motion.div <motion.div
initial={{ opacity: 0, y: 30 }} initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
@ -457,7 +436,6 @@ export default function Home() {
</div> </div>
</section> </section>
{/* Categories Section */}
<section className="relative py-16 sm:py-20 md:py-24 lg:py-32 bg-white"> <section className="relative py-16 sm:py-20 md:py-24 lg:py-32 bg-white">
<div className="absolute inset-0" style={{ <div className="absolute inset-0" style={{
backgroundImage: `linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px)`, backgroundImage: `linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px)`,
@ -480,7 +458,6 @@ export default function Home() {
</motion.div> </motion.div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 max-w-5xl mx-auto"> <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 max-w-5xl mx-auto">
{/* Commercial */}
<motion.div <motion.div
className="text-center space-y-4" className="text-center space-y-4"
> >
@ -495,7 +472,6 @@ export default function Home() {
</p> </p>
</motion.div> </motion.div>
{/* Fitness */}
<motion.div <motion.div
className="text-center space-y-4" className="text-center space-y-4"
> >
@ -511,7 +487,6 @@ export default function Home() {
</p> </p>
</motion.div> </motion.div>
{/* Editorial */}
<motion.div <motion.div
className="text-center space-y-4" className="text-center space-y-4"
> >
@ -529,7 +504,6 @@ export default function Home() {
</div> </div>
</section> </section>
{/* Portfolio Section */}
<section id="portfolio" className="relative py-16 sm:py-20 md:py-24 lg:py-32 bg-white"> <section id="portfolio" className="relative py-16 sm:py-20 md:py-24 lg:py-32 bg-white">
<div className="absolute inset-0" style={{ <div className="absolute inset-0" style={{
backgroundImage: `linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px)`, backgroundImage: `linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px)`,
@ -586,7 +560,6 @@ export default function Home() {
</div> </div>
</section> </section>
{/* Contact Section */}
<section id="contact" className="py-16 sm:py-20 md:py-24 lg:py-32 bg-black"> <section id="contact" className="py-16 sm:py-20 md:py-24 lg:py-32 bg-black">
<div className="container mx-auto px-4 sm:px-6 md:px-8"> <div className="container mx-auto px-4 sm:px-6 md:px-8">
<motion.div <motion.div
@ -697,7 +670,6 @@ export default function Home() {
</section> </section>
</div> </div>
{/* Footer */}
<footer <footer
className="py-8 bg-black border-t border-white/10" className="py-8 bg-black border-t border-white/10"
role="contentinfo" role="contentinfo"

1
tailwind.config.ts
View File

@ -55,6 +55,7 @@ export default {
fontFamily: { fontFamily: {
prompt:['Prompt', 'sans-serif'], prompt:['Prompt', 'sans-serif'],
playfair: ['Playfair Display', 'serif'], playfair: ['Playfair Display', 'serif'],
montserrat: ['Montserrat', 'sans-serif']
}, },
borderRadius: { borderRadius: {
lg: 'var(--radius)', lg: 'var(--radius)',