commit b0e912594da0a406796facebae5d61edde74cd13 Author: Jukka Lampikoski Date: Sun Mar 8 20:03:18 2026 +0200 Initial commit: lampikoski.fi static one-pager Static HTML/CSS/JS political campaign site with: - Hero section with three key themes - Theme cards (Järkevä talous, Yrittäjähenkisyys, Inhimilliset päätökset) - About section with portrait and key facts - Wellbeing region section (Teknologia & Hyvinvointi) - Contact section - FI/EN language toggle - Mobile responsive design - Teal/petroli color scheme - Scroll animations Co-Authored-By: Claude Opus 4.6 diff --git a/images/blog-selfie.jpg b/images/blog-selfie.jpg new file mode 100644 index 0000000..74f1683 Binary files /dev/null and b/images/blog-selfie.jpg differ diff --git a/images/building.jpg b/images/building.jpg new file mode 100644 index 0000000..018a5c0 Binary files /dev/null and b/images/building.jpg differ diff --git a/images/fence-portrait.jpg b/images/fence-portrait.jpg new file mode 100644 index 0000000..3a7fed4 Binary files /dev/null and b/images/fence-portrait.jpg differ diff --git a/images/hero-portrait.jpg b/images/hero-portrait.jpg new file mode 100644 index 0000000..f057450 Binary files /dev/null and b/images/hero-portrait.jpg differ diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000..257627c Binary files /dev/null and b/images/logo.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..e721421 --- /dev/null +++ b/index.html @@ -0,0 +1,158 @@ + + + + + + Jukka Lampikoski + + + + + + + + + + + + +
+
+
+

+ Järkevä talous. + Yrittäjähenkisyys. + Inhimilliset päätökset. +

+

Kuntavaaliehdokas, Kaarina

+ Tutustu teemoihin +
+
+ Jukka Lampikoski +
+
+
+ + +
+
+

Miksi mukaan politiikkaan?

+

Talouden tasapaino, pienyrittäjyyden edellytykset, lapsiperheiden oikeudet sekä turvallinen lapsuus tarvitsevat puolustajia, jotka eivät tingi ihmisoikeuksista, tasa-arvosta tai yhdenvertaisuudesta. Yhteisen edun pitää kaikissa tilanteissa mennä oman tai kaverin edun edelle.

+ +
+
+
01
+

Järkevä talous

+

Taloutta voi korjata kestävästi eikä vain leikkaamalla. Hyvin kohdistettu julkinen raha koulutukseen tai hyvinvointiin tulee moninkertaisena takaisin. Kaikki rahat ovat veronmaksajien rahoja ja ne pitää kohdistaa järkevästi: koulutukseen, huono-osaisuuden vähentämiseen, lapsiperheiden tukemiseen sekä mielenterveyspalveluihin.

+
+ +
+
02
+

Yrittäjähenkisyys

+

Yrittäjät ovat taloutemme selkäranka. He luovat työpaikkoja, kehittävät innovaatioita ja tuovat uusia tuotteita markkinoille. Tavoitteeni on luoda yrittäjyyttä tukevaa ympäristöä: panostuksia koulutukseen ja osaajiin sekä tarpeettoman sääntelyn ja byrokratian vähentämistä. Kaupungin tulisi järjestää myös pienemmille yrittäjille viihtyisiä toimitiloja.

+
+ +
+
03
+

Inhimilliset päätökset

+

Kaikessa päätöksenteossa huomiomme tulisi kiinnittyä ihmisiin. Turvalliset kasvuolosuhteet lapsille, riittävät resurssit kouluihin ja varhaiskasvatukseen sekä mielenterveyspalveluihin. Parannetaan mielenterveyttä, vähennetään köyhyyttä ja tuetaan elämän alamäissä — niin saadaan kuntalaisista terveitä aikuisia. Yhteisen edun pitää mennä aina oman edun edelle.

+
+
+
+
+ + +
+
+
+ Jukka Lampikoski +
+
+

Jukka Lampikoski

+
    +
  • Kuntavaaliehdokas, Kaarina
    • +
  • Lähes 20 vuoden kokemus yrittäjänä
    • +
  • IT-hankintojen ja teknologian asiantuntija
    • +
  • Varsinais-Suomen hyvinvointialue
    • +
  • Talous, yrittäjyys, lapsiperheet, mielenterveys
    • +
+

«Ollaan me vastuullisina päättäjinä osa ratkaisua eikä ongelmaa!»

+
+
+
+ + +
+
+
+

Oikea-aikaiset palvelut, hyvinvointi, teknologia ja järkevät IT-hankinnat.

+
+
+
+
+
+

Teknologia

+

Hyvinvointialueen IT-järjestelmät ovat pirstaleisimmat koko maassa. Aluevaltuustossa tarvitaan päättäjiä, jotka tietävät mitä ollaan hankkimassa ja mihin hintaan. Suuret sote-järjestelmät maksavat miljoonia ja määrittävät suunnan kymmeniksi vuosiksi. Minusta saat valtuutetun, jolla on pitkää kokemusta IT-hankinnoista ja nykyajan teknologioista.

+
+
+

Hyvinvointi

+
    +
  • Nuorten mielenterveyspalveluihin lisää resursseja
    • +
  • Kaikista pidettävä yhdenvertaisesti huolta
    • +
  • Terveys- ja sosiaalipalvelut ajoissa ja matalalla kynnyksellä
    • +
  • Perusterveydenhuollon vastaanotot lähellä
    • +
  • Lapsi- ja perhepalveluiden voimavarat turvattava
    • +
  • Vanhusten inhimillinen hoiva riittävällä henkilöstöllä
    • +
  • Kiusaamista ja syrjintää torjuttava kaikin keinoin
    • +
+
+
+
+
+ + +
+
+

Ota yhteyttä

+
+
+

Jukka Lampikoski

+

+ jukka@lampikoski.com +

+
+
+

Ota rohkeasti yhteyttä — vastaan mielelläni kaikkiin kysymyksiin!

+
+
+
+
+ + +
+
+

© 2025 Jukka Lampikoski

+
+
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..45df28f --- /dev/null +++ b/script.js @@ -0,0 +1,74 @@ +// ========== Language Toggle ========== +let currentLang = 'fi'; + +const langToggle = document.getElementById('langToggle'); +langToggle.addEventListener('click', () => { + currentLang = currentLang === 'fi' ? 'en' : 'fi'; + langToggle.textContent = currentLang.toUpperCase(); + document.documentElement.lang = currentLang; + + document.querySelectorAll('[data-fi]').forEach(el => { + const text = el.getAttribute(`data-${currentLang}`); + if (text) { + if (el.tagName === 'A' || el.tagName === 'BUTTON' || el.tagName === 'P' || el.tagName === 'SPAN' || el.tagName === 'H1' || el.tagName === 'H2' || el.tagName === 'H3' || el.tagName === 'LI') { + el.innerHTML = text; + } + } + }); +}); + +// ========== Mobile Navigation ========== +const hamburger = document.getElementById('hamburger'); +const navLinks = document.getElementById('navLinks'); + +hamburger.addEventListener('click', () => { + hamburger.classList.toggle('active'); + navLinks.classList.toggle('active'); +}); + +// Close mobile nav on link click +navLinks.querySelectorAll('a').forEach(link => { + link.addEventListener('click', () => { + hamburger.classList.remove('active'); + navLinks.classList.remove('active'); + }); +}); + +// ========== Navbar Scroll Effect ========== +const navbar = document.getElementById('navbar'); +window.addEventListener('scroll', () => { + if (window.scrollY > 50) { + navbar.classList.add('scrolled'); + } else { + navbar.classList.remove('scrolled'); + } +}); + +// ========== Scroll Animations ========== +const observerOptions = { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' +}; + +const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + } + }); +}, observerOptions); + +// Add fade-in class to animatable elements +document.querySelectorAll('.theme-card, .region-card, .about-facts li, .section-title, .section-intro').forEach(el => { + el.classList.add('fade-in'); + observer.observe(el); +}); + +// Stagger theme cards +document.querySelectorAll('.theme-card').forEach((card, i) => { + card.style.transitionDelay = `${i * 0.1}s`; +}); + +document.querySelectorAll('.about-facts li').forEach((li, i) => { + li.style.transitionDelay = `${i * 0.08}s`; +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..0920621 --- /dev/null +++ b/style.css @@ -0,0 +1,663 @@ +/* ========== Reset & Base ========== */ +*, *::before, *::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --color-dark: #1e2d2b; + --color-darker: #141f1e; + --color-accent: #0d9488; + --color-accent-light: #2dd4bf; + --color-warm: #0d9488; + --color-text: #334040; + --color-text-light: #7a8a8a; + --color-bg: #ffffff; + --color-bg-alt: #f3f7f6; + --color-card-dark: #1e2d2b; + --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + --max-width: 1200px; +} + +html { + scroll-behavior: smooth; + font-size: 16px; +} + +body { + font-family: var(--font); + color: var(--color-text); + background: var(--color-bg); + line-height: 1.6; + overflow-x: hidden; +} + +img { + max-width: 100%; + height: auto; + display: block; +} + +a { + color: inherit; + text-decoration: none; +} + +ul { + list-style: none; +} + +.container { + max-width: var(--max-width); + margin: 0 auto; + padding: 0 2rem; +} + +/* ========== Navigation ========== */ +.navbar { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border-bottom: 1px solid rgba(0, 0, 0, 0.05); + transition: box-shadow 0.3s ease; +} + +.navbar.scrolled { + box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); +} + +.nav-container { + max-width: var(--max-width); + margin: 0 auto; + padding: 0 2rem; + display: flex; + align-items: center; + justify-content: space-between; + height: 70px; +} + +.nav-logo { + font-weight: 900; + font-size: 0.85rem; + line-height: 1.1; + letter-spacing: 0.05em; + color: var(--color-dark); + transition: opacity 0.2s; +} + +.nav-logo:hover { + opacity: 0.7; +} + +.nav-links { + display: flex; + align-items: center; + gap: 2rem; +} + +.nav-links a { + font-weight: 600; + font-size: 0.8rem; + letter-spacing: 0.08em; + color: var(--color-text); + transition: color 0.2s; + position: relative; +} + +.nav-links a::after { + content: ''; + position: absolute; + bottom: -4px; + left: 0; + width: 0; + height: 2px; + background: var(--color-accent); + transition: width 0.3s ease; +} + +.nav-links a:hover::after { + width: 100%; +} + +.nav-links a:hover { + color: var(--color-accent); +} + +.lang-toggle { + background: var(--color-dark); + color: white; + border: none; + padding: 0.4rem 0.8rem; + font-weight: 700; + font-size: 0.75rem; + letter-spacing: 0.05em; + border-radius: 4px; + cursor: pointer; + transition: background 0.2s; + font-family: var(--font); +} + +.lang-toggle:hover { + background: var(--color-accent); +} + +.hamburger { + display: none; + flex-direction: column; + gap: 5px; + background: none; + border: none; + cursor: pointer; + padding: 0.5rem; +} + +.hamburger span { + width: 24px; + height: 2px; + background: var(--color-dark); + transition: all 0.3s ease; +} + +.hamburger.active span:nth-child(1) { + transform: rotate(45deg) translate(5px, 5px); +} + +.hamburger.active span:nth-child(2) { + opacity: 0; +} + +.hamburger.active span:nth-child(3) { + transform: rotate(-45deg) translate(5px, -5px); +} + +/* ========== Hero Section ========== */ +.hero { + min-height: 100vh; + display: flex; + align-items: center; + background: linear-gradient(135deg, var(--color-bg-alt) 0%, #e2e8f0 100%); + padding-top: 70px; + overflow: hidden; +} + +.hero-content { + max-width: var(--max-width); + margin: 0 auto; + padding: 0 2rem; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; + width: 100%; +} + +.hero-text h1 { + font-size: clamp(2.5rem, 5vw, 4.5rem); + font-weight: 900; + line-height: 1.05; + letter-spacing: -0.02em; + color: var(--color-dark); + margin-bottom: 1.5rem; +} + +.hero-text h1 span { + display: block; +} + +.hero-accent { + color: var(--color-accent); +} + +.hero-subtitle { + font-size: 1.2rem; + font-weight: 500; + color: var(--color-text-light); + margin-bottom: 2rem; + letter-spacing: 0.02em; +} + +.btn { + display: inline-block; + padding: 0.9rem 2rem; + font-weight: 700; + font-size: 0.85rem; + letter-spacing: 0.05em; + border-radius: 6px; + transition: all 0.3s ease; + font-family: var(--font); + cursor: pointer; + border: none; +} + +.btn-primary { + background: var(--color-accent); + color: white; +} + +.btn-primary:hover { + background: #0a7a70; + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(13, 148, 136, 0.3); +} + +.btn-outline { + background: transparent; + color: var(--color-accent); + border: 2px solid var(--color-accent); +} + +.btn-outline:hover { + background: var(--color-accent); + color: white; +} + +.hero-image { + display: flex; + justify-content: center; + align-items: flex-end; +} + +.hero-image img { + max-height: 85vh; + object-fit: contain; + filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1)); +} + +/* ========== Themes Section ========== */ +.themes { + padding: 8rem 0; + background: var(--color-bg); +} + +.section-title { + font-size: clamp(2rem, 4vw, 3rem); + font-weight: 900; + color: var(--color-dark); + margin-bottom: 1.5rem; + letter-spacing: -0.02em; +} + +.section-title.light { + color: white; +} + +.section-intro { + font-size: 1.15rem; + line-height: 1.7; + color: var(--color-text); + max-width: 800px; + margin-bottom: 4rem; +} + +.themes-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 2rem; +} + +.themes-grid.three-col { + grid-template-columns: repeat(3, 1fr); +} + +.theme-card { + background: var(--color-bg-alt); + border-radius: 12px; + padding: 2.5rem; + transition: transform 0.3s ease, box-shadow 0.3s ease; + border: 1px solid rgba(0, 0, 0, 0.04); +} + +.theme-card:hover { + transform: translateY(-4px); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08); +} + +.theme-number { + font-size: 3rem; + font-weight: 900; + color: var(--color-accent); + opacity: 0.3; + line-height: 1; + margin-bottom: 1rem; +} + +.theme-card h3 { + font-size: 1.4rem; + font-weight: 800; + color: var(--color-dark); + margin-bottom: 1rem; + letter-spacing: -0.01em; +} + +.theme-card p { + font-size: 0.95rem; + line-height: 1.7; + color: var(--color-text); +} + +/* ========== About Section ========== */ +.about-section { + padding: 0; + background: var(--color-dark); + overflow: hidden; +} + +.about-content { + display: grid; + grid-template-columns: 1fr 1fr; + min-height: 600px; +} + +.about-image { + overflow: hidden; +} + +.about-image img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.about-text { + padding: 5rem 4rem; + display: flex; + flex-direction: column; + justify-content: center; +} + +.about-text h2 { + font-size: 2.5rem; + font-weight: 900; + color: white; + margin-bottom: 2rem; + letter-spacing: -0.02em; +} + +.about-facts { + list-style: none; + margin-bottom: 2rem; +} + +.about-facts li { + font-size: 1rem; + color: rgba(255, 255, 255, 0.85); + padding: 0.6rem 0; + padding-left: 1.5rem; + position: relative; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +.about-facts li::before { + content: ''; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 8px; + height: 8px; + background: var(--color-accent-light); + border-radius: 50%; +} + +.about-quote { + font-size: 1.2rem; + font-weight: 700; + color: var(--color-accent-light); + font-style: italic; + line-height: 1.5; +} + +/* ========== Region Section ========== */ +.region-section { + background: var(--color-bg); +} + +.region-hero { + height: 50vh; + min-height: 400px; + background-size: cover; + background-position: center; + position: relative; + display: flex; + align-items: center; + justify-content: center; +} + +.region-overlay { + position: absolute; + inset: 0; + background: rgba(26, 35, 50, 0.7); + display: flex; + align-items: center; + justify-content: center; + padding: 2rem; +} + +.region-overlay h2 { + font-size: clamp(1.5rem, 3.5vw, 2.5rem); + font-weight: 800; + color: white; + text-align: center; + max-width: 800px; + line-height: 1.3; + letter-spacing: -0.01em; +} + +.region-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 3rem; + padding: 5rem 0; +} + +.region-card h3 { + font-size: 1.6rem; + font-weight: 800; + color: var(--color-dark); + margin-bottom: 1.2rem; + letter-spacing: -0.01em; +} + +.region-card p { + font-size: 0.95rem; + line-height: 1.7; + color: var(--color-text); +} + +.region-card ul { + list-style: none; +} + +.region-card ul li { + font-size: 0.95rem; + line-height: 1.6; + color: var(--color-text); + padding: 0.5rem 0; + padding-left: 1.2rem; + position: relative; +} + +.region-card ul li::before { + content: '—'; + position: absolute; + left: 0; + color: var(--color-accent); + font-weight: 700; +} + +/* ========== Contact Section ========== */ +.contact-section { + padding: 6rem 0; + background: var(--color-dark); +} + +.contact-content { + display: flex; + justify-content: space-between; + align-items: center; + gap: 3rem; + margin-top: 2rem; +} + +.contact-name { + font-size: 1.5rem; + font-weight: 800; + color: white; + margin-bottom: 0.5rem; +} + +.contact-email a { + font-size: 1.2rem; + color: var(--color-accent-light); + transition: color 0.2s; +} + +.contact-email a:hover { + color: white; +} + +.contact-message { + font-size: 1.3rem; + font-weight: 600; + color: rgba(255, 255, 255, 0.8); +} + +/* ========== Footer ========== */ +.footer { + padding: 2rem 0; + background: var(--color-darker); + text-align: center; +} + +.footer p { + color: var(--color-text-light); + font-size: 0.85rem; +} + +/* ========== Animations ========== */ +.fade-in { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.6s ease, transform 0.6s ease; +} + +.fade-in.visible { + opacity: 1; + transform: translateY(0); +} + +/* ========== Responsive ========== */ +@media (max-width: 968px) { + .hero-content { + grid-template-columns: 1fr; + text-align: center; + gap: 2rem; + padding-top: 2rem; + } + + .hero-text { + order: 1; + } + + .hero-image { + order: 0; + } + + .hero-image img { + max-height: 50vh; + } + + .themes-grid, + .themes-grid.three-col { + grid-template-columns: 1fr; + } + + .about-content { + grid-template-columns: 1fr; + } + + .about-image { + max-height: 400px; + } + + .about-text { + padding: 3rem 2rem; + } + + .region-grid { + grid-template-columns: 1fr; + gap: 2rem; + } + + .contact-content { + flex-direction: column; + text-align: center; + } +} + +@media (max-width: 768px) { + .nav-links { + display: none; + position: absolute; + top: 70px; + left: 0; + right: 0; + background: white; + flex-direction: column; + padding: 2rem; + gap: 1.5rem; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + } + + .nav-links.active { + display: flex; + } + + .hamburger { + display: flex; + } + + .hero { + min-height: auto; + padding-top: 90px; + padding-bottom: 4rem; + } + + .hero-text h1 { + font-size: 2.2rem; + } + + .themes { + padding: 4rem 0; + } + + .section-title { + font-size: 1.8rem; + } + + .about-text h2 { + font-size: 1.8rem; + } + + .region-hero { + height: 35vh; + min-height: 250px; + } + + .region-overlay h2 { + font-size: 1.2rem; + } + + .contact-name { + font-size: 1.2rem; + } + + .contact-message { + font-size: 1.1rem; + } +}