neoretro-cv-flash / index.html
dlindh's picture
I want each section to be a tab, and when you click it, we scroll down to the specific section. I don't like the neon and I don't like the 80s vibe. Make it dark theme with liquid theme
8848a9a verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NeoRetro CV | Daniel Lindh, PhD</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%);
color: #e0e0e0;
}
.navbar {
position: sticky;
top: 0;
background: rgba(15, 15, 26, 0.9);
backdrop-filter: blur(10px);
z-index: 1000;
padding: 1rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-tabs {
display: flex;
justify-content: center;
gap: 1.5rem;
}
.nav-tab {
padding: 0.5rem 1rem;
cursor: pointer;
transition: all 0.3s ease;
border-bottom: 2px solid transparent;
font-weight: 500;
}
.nav-tab:hover, .nav-tab.active {
color: #4fc3f7;
border-bottom-color: #4fc3f7;
}
.section {
padding: 4rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.section-title {
color: #ffffff;
font-size: 1.75rem;
margin-bottom: 2rem;
position: relative;
display: inline-block;
}
.section-title:after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 50px;
height: 3px;
background: linear-gradient(90deg, #4fc3f7, #2962ff);
border-radius: 3px;
}
.card {
background: rgba(30, 30, 46, 0.6);
backdrop-filter: blur(10px);
border-radius: 12px;
padding: 2rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.skill-chip {
background: rgba(79, 195, 247, 0.1);
color: #4fc3f7;
border-radius: 20px;
padding: 0.25rem 0.75rem;
font-size: 0.8rem;
display: inline-block;
margin: 0.25rem;
}
.liquid-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.15;
background: url('https://cdn.jsdelivr.net/gh/creativetimofficial/public-assets/fluid-design/fluid-design.svg') no-repeat center center;
background-size: cover;
}
</style>
</head>
<body class="min-h-screen overflow-x-hidden">
<div class="liquid-bg"></div>
<!-- Navigation -->
<nav class="navbar">
<div class="container mx-auto px-4">
<div class="nav-tabs">
<div class="nav-tab" onclick="scrollToSection('summary')">Summary</div>
<div class="nav-tab" onclick="scrollToSection('experience')">Experience</div>
<div class="nav-tab" onclick="scrollToSection('projects')">Projects</div>
<div class="nav-tab" onclick="scrollToSection('education')">Education</div>
<div class="nav-tab" onclick="scrollToSection('skills')">Skills</div>
<div class="nav-tab" onclick="scrollToSection('contact')">Contact</div>
</div>
</div>
</nav>
<!-- Main Container -->
<div class="container mx-auto px-4 py-12 max-w-6xl">
<!-- Header -->
<header class="mb-16 text-center">
<h1 class="text-5xl md:text-6xl font-bold mb-4 text-white">Daniel Lindh</h1>
<h2 class="text-xl md:text-2xl font-semibold text-gray-300 mb-8">Senior Data Scientist & AI Engineer</h2>
<div class="flex justify-center space-x-6">
<a href="#" class="flex items-center text-gray-300 hover:text-white transition-colors">
<i data-feather="mail" class="mr-2"></i> Email
</a>
<a href="#" class="flex items-center text-gray-300 hover:text-white transition-colors">
<i data-feather="linkedin" class="mr-2"></i> LinkedIn
</a>
<a href="#" class="flex items-center text-gray-300 hover:text-white transition-colors">
<i data-feather="github" class="mr-2"></i> GitHub
</a>
</div>
</header>
<!-- Professional Summary -->
<section id="summary" class="section">
<div class="card">
<h3 class="section-title">Professional Summary</h3>
<p class="text-gray-300 leading-relaxed">
Senior Data Scientist and AI Engineer with a PhD in Cognitive Neuroscience and a strong foundation in machine learning, large language models, and data-driven health research. Experienced in building AI products from prototype to production using AWS, Python, and cloud-native technologies. Combines deep expertise in cognitive science and neuroscience with modern AI to develop user-centered, evidence-based systems.
</p>
</div>
</section>
<!-- Professional Experience -->
<section id="experience" class="section">
<div class="card">
<h3 class="section-title">Professional Experience</h3>
<!-- NOWATCH -->
<div class="mb-8">
<div class="flex justify-between items-start">
<h4 class="text-xl font-bold text-white">NOWATCH – Amsterdam, Netherlands</h4>
<span class="text-blue-400 text-sm">2024–Present</span>
</div>
<p class="font-semibold mb-3 text-gray-300">Senior Data Scientist & AI Engineer</p>
<ul class="list-disc pl-5 space-y-2 text-gray-300">
<li>Lead development of AI-driven health insights integrating stress, recovery, sleep, and activity data.</li>
<li>Built and deployed modular AWS Lambda + Step Function pipelines for AI-generated user reports.</li>
<li>Designed stress classification algorithms and "dominant state" logic using physiological data.</li>
</ul>
<div class="mt-4 flex flex-wrap gap-2">
<span class="skill-chip">Python</span>
<span class="skill-chip">AWS Lambda</span>
<span class="skill-chip">Step Functions</span>
<span class="skill-chip">Bedrock/Anthropic</span>
</div>
</div>
<!-- Learnwise -->
<div class="mb-8">
<div class="flex justify-between items-start">
<h4 class="text-xl font-bold text-white">Learnwise – Remote</h4>
<span class="text-blue-400 text-sm">2023–2024</span>
</div>
<p class="font-semibold mb-3 text-gray-300">AI Engineer & Data Scientist</p>
<ul class="list-disc pl-5 space-y-2 text-gray-300">
<li>Built LLM testing and evaluation platforms for universities.</li>
<li>Created semantic clustering pipeline using embeddings and UMAP.</li>
<li>Integrated LLM analytics directly into GitHub repositories for educational use.</li>
</ul>
<div class="mt-4 flex flex-wrap gap-2">
<span class="skill-chip">Python</span>
<span class="skill-chip">OpenAI API</span>
<span class="skill-chip">Hugging Face</span>
<span class="skill-chip">FastAPI</span>
</div>
</div>
</div>
</section>
<!-- Selected Research Projects -->
<section id="projects" class="section">
<div class="card">
<h3 class="section-title">Selected Research Projects</h3>
<ul class="space-y-4 text-gray-300">
<li class="flex items-start">
<span class="text-blue-400 mr-3"></span>
<span><strong class="text-white">Attentional Blink Study:</strong> Designed immediate response paradigm and applied drift diffusion modeling.</span>
</li>
<li class="flex items-start">
<span class="text-blue-400 mr-3"></span>
<span><strong class="text-white">Visual Object Recognition:</strong> Used CNNs as computational models of human visual recognition.</span>
</li>
<li class="flex items-start">
<span class="text-blue-400 mr-3"></span>
<span><strong class="text-white">Affective Physiology Study:</strong> Predicted attraction during blind dates using heart rate and pupil dilation data.</span>
</li>
</ul>
</div>
</section>
<!-- Education -->
<section id="education" class="section">
<div class="card">
<h3 class="section-title">Education</h3>
<div class="space-y-4 text-gray-300">
<div>
<h4 class="font-semibold text-white">PhD in Cognitive Neuroscience</h4>
<p>University of Amsterdam & University of Birmingham</p>
</div>
<div>
<h4 class="font-semibold text-white">Research Master in Cognitive Neuroscience</h4>
<p>University of Amsterdam</p>
</div>
<div>
<h4 class="font-semibold text-white">Bachelor in Cognitive Science</h4>
<p>University of Skövde, Sweden</p>
</div>
</div>
</div>
</section>
<!-- Technical Skills -->
<section id="skills" class="section">
<div class="card">
<h3 class="section-title">Technical Skills</h3>
<div class="space-y-6">
<div>
<h4 class="font-semibold text-white mb-3">Languages</h4>
<div class="flex flex-wrap gap-2">
<span class="skill-chip">Python</span>
<span class="skill-chip">MATLAB</span>
<span class="skill-chip">R</span>
<span class="skill-chip">SQL</span>
</div>
</div>
<div>
<h4 class="font-semibold text-white mb-3">Machine Learning</h4>
<div class="flex flex-wrap gap-2">
<span class="skill-chip">CNNs</span>
<span class="skill-chip">LLMs</span>
<span class="skill-chip">Bayesian</span>
<span class="skill-chip">Forecasting</span>
</div>
</div>
<div>
<h4 class="font-semibold text-white mb-3">Tools</h4>
<div class="flex flex-wrap gap-2">
<span class="skill-chip">AWS</span>
<span class="skill-chip">Docker</span>
<span class="skill-chip">FastAPI</span>
<span class="skill-chip">Streamlit</span>
</div>
</div>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="section">
<div class="card">
<h3 class="section-title">Contact</h3>
<div class="space-y-4 text-gray-300">
<div class="flex items-center">
<i data-feather="mail" class="mr-3 text-blue-400"></i>
<span>your.email@example.com</span>
</div>
<div class="flex items-center">
<i data-feather="linkedin" class="mr-3 text-blue-400"></i>
<span>linkedin.com/in/yourprofile</span>
</div>
<div class="flex items-center">
<i data-feather="github" class="mr-3 text-blue-400"></i>
<span>github.com/yourusername</span>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="mt-16 text-center text-sm text-gray-400">
<p>© 2024 Daniel Lindh</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
feather.replace();
// Smooth scroll to sections
window.scrollToSection = function(id) {
document.getElementById(id).scrollIntoView({
behavior: 'smooth'
});
// Update active tab
document.querySelectorAll('.nav-tab').forEach(tab => {
tab.classList.remove('active');
});
document.querySelector(`.nav-tab[onclick="scrollToSection('${id}')"]`).classList.add('active');
};
// Initial animation
anime({
targets: '.card',
opacity: [0, 1],
translateY: [30, 0],
delay: anime.stagger(100),
easing: 'easeOutExpo',
duration: 800
});
});
</script>
</body>
</html>