mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Marc Mintel
2026-01-15 00:00:45 +01:00
parent 300f894346
commit 019b59602f
1 changed files with 142 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
src/pages/index.astro
View File

@@ -18,8 +18,29 @@ const allTags = [...new Set(allPosts.flatMap(post => post.tags))];
<!-- Everything on ONE minimalist page -->
<!-- Clean Hero Section -->
<section class="pt-10 pb-8 md:pt-12 md:pb-10">
<div class="max-w-3xl mx-auto px-6">
<section class="pt-10 pb-8 md:pt-12 md:pb-10 relative">
<!-- Animated Background -->
<div class="absolute inset-0 bg-gradient-to-br from-white via-slate-50/30 to-blue-50/20 animate-gradient-shift"></div>
<!-- Morphing Blob -->
<div class="absolute inset-0 flex items-center justify-center pointer-events-none">
<div class="w-48 h-48 bg-gradient-to-br from-blue-200/15 via-purple-200/10 to-indigo-200/15 animate-morph"></div>
</div>
<!-- Animated Drawing Paths -->
<svg class="absolute inset-0 w-full h-full pointer-events-none" viewBox="0 0 100 100">
<path d="M10,50 Q50,10 90,50 T90,90" stroke="rgba(59,130,246,0.1)" stroke-width="0.5" fill="none" class="animate-draw"></path>
<path d="M10,70 Q50,30 90,70" stroke="rgba(147,51,234,0.1)" stroke-width="0.5" fill="none" class="animate-draw-delay"></path>
<path d="M20,20 Q50,80 80,20" stroke="rgba(16,185,129,0.1)" stroke-width="0.5" fill="none" class="animate-draw-reverse"></path>
</svg>
<!-- Floating Shapes -->
<div class="absolute top-10 left-10 w-20 h-20 bg-blue-100/20 rounded-full animate-float-1"></div>
<div class="absolute top-20 right-20 w-16 h-16 bg-indigo-100/20 rotate-45 animate-float-2"></div>
<div class="absolute bottom-20 left-1/4 w-12 h-12 bg-purple-100/20 rounded-full animate-float-3"></div>
<div class="absolute bottom-10 right-1/3 w-24 h-24 bg-cyan-100/20 animate-float-4"></div>
<div class="max-w-3xl mx-auto px-6 relative z-10">
<div class="text-center animate-fade-in">
<h1 class="text-3xl md:text-4xl font-serif font-light text-slate-900 tracking-tight mb-3">
Marc Mintel
@@ -168,18 +189,35 @@ const allTags = [...new Set(allPosts.flatMap(post => post.tags))];
// Smooth transition to blog post with Framer Motion-style animation
const postLinks = document.querySelectorAll('.post-link') as NodeListOf<HTMLAnchorElement>;
postLinks.forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const href = link.getAttribute('href');
if (!href || !transitionOverlay) return;
// Get post data for potential future use
const slug = link.getAttribute('data-slug');
const title = link.getAttribute('data-title');
// Capture title position for layout animation
const titleElement = link.querySelector('[data-post-title]') as HTMLElement;
if (titleElement && slug) {
const rect = titleElement.getBoundingClientRect();
const titleData = {
text: titleElement.textContent || '',
x: rect.left,
y: rect.top,
width: rect.width,
height: rect.height,
fontSize: window.getComputedStyle(titleElement).fontSize,
fontWeight: window.getComputedStyle(titleElement).fontWeight,
color: window.getComputedStyle(titleElement).color
};
sessionStorage.setItem(`title-position-${slug}`, JSON.stringify(titleData));
}
// Add click ripple effect to the card
const card = link.querySelector('.post-card') as HTMLElement;
if (card) {
@@ -189,12 +227,12 @@ const allTags = [...new Set(allPosts.flatMap(post => post.tags))];
card.style.transform = 'scale(1)';
}, 150);
}
// Framer Motion-style page transition
// 1. Fade in overlay
transitionOverlay.style.opacity = '1';
transitionOverlay.style.pointerEvents = 'auto';
// 2. Scale down current content
const mainContent = document.querySelector('main');
if (mainContent) {
@@ -202,7 +240,7 @@ const allTags = [...new Set(allPosts.flatMap(post => post.tags))];
mainContent.style.transform = 'scale(0.95)';
mainContent.style.opacity = '0';
}
// 3. Navigate after animation
setTimeout(() => {
window.location.href = href;
@@ -396,5 +434,100 @@ const allTags = [...new Set(allPosts.flatMap(post => post.tags))];
transition-duration: 0.01ms !important;
}
}
/* Animated gradient shift */
@keyframes gradient-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.animate-gradient-shift {
background-size: 200% 200%;
animation: gradient-shift 20s ease infinite;
}
/* Floating animations */
@keyframes float-1 {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
}
.animate-float-1 {
animation: float-1 15s ease-in-out infinite;
}
@keyframes float-2 {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-15px) rotate(90deg); }
}
.animate-float-2 {
animation: float-2 18s ease-in-out infinite;
}
@keyframes float-3 {
0%, 100% { transform: translateY(0px) scale(1); }
50% { transform: translateY(-10px) scale(1.1); }
}
.animate-float-3 {
animation: float-3 12s ease-in-out infinite;
}
@keyframes float-4 {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-25px) rotate(-90deg); }
}
.animate-float-4 {
animation: float-4 20s ease-in-out infinite;
}
/* Morphing blob animation */
@keyframes morph {
0%, 100% {
border-radius: 50%;
transform: scale(1) rotate(0deg);
}
25% {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
transform: scale(1.1) rotate(90deg);
}
50% {
border-radius: 20% 80% 20% 80% / 80% 20% 80% 20%;
transform: scale(0.9) rotate(180deg);
}
75% {
border-radius: 70% 30% 50% 50% / 50% 70% 30% 50%;
transform: scale(1.05) rotate(270deg);
}
}
.animate-morph {
animation: morph 25s ease-in-out infinite;
}
/* Drawing animations */
@keyframes draw {
to { stroke-dashoffset: 0; }
}
.animate-draw {
stroke-dasharray: 200;
stroke-dashoffset: 200;
animation: draw 8s ease-in-out infinite alternate;
}
.animate-draw-delay {
stroke-dasharray: 200;
stroke-dashoffset: 200;
animation: draw 8s ease-in-out infinite alternate 4s;
}
.animate-draw-reverse {
stroke-dasharray: 200;
stroke-dashoffset: 200;
animation: draw 8s ease-in-out infinite alternate-reverse 2s;
}
</style>
</BaseLayout>