WIP

.eslintrc.json

@@ -1,6 +1,3 @@
 {
-  "extends": "next/core-web-vitals",
-  "rules": {
-    "@next/next/no-img-element": "off"
-  }
-}
+  "extends": "next/core-web-vitals"
+}

data/performers/2024.ts

@@ -7,8 +7,6 @@ const Performers: Array<Performer> = [
     { name: 'Katariina Vuorinen', paragraphs: ['Katariina Vuorinen on runoilija, löytöretkeilijä ja Runosaari-festivaalin luoja. Vuonna 2018 hän löysi nomadivuosiensa keskeltä maagisen Velkuanmaan saaren, ja tiesi heti paikan kutsuvan runon henkiä saaristoon. Vuonna 2021 tämä unelma toteutui Runosaaressa, joka jatkuu nyt vuosittaisena tapahtumana Naantalin saaristossa.', 'Voimallisten näkyjen, rytmin ja mielen liikkeiden tarkentamisen taiturina tunnettu Vuorinen julkaisi viidennen runokokoelmansa Myöhempien kesien jumalat, Los dioses de los veranos ulteriores vuoden 2022 Runosaaressa. Teoksessa Vuorinen kutoo yhteen ihmisen, luonnonvoimat ja kaiken yllä valvovan taivaan Andien ikiaikaisissa maisemissa. Latinalainen Amerikka ja espanjan kieli ovat Vuoriselle erityisen merkityksellisiä, mitä ilmentää kokoelman julkaiseminen samoissa kansissa kaksikielisenä: suomeksi ja espanjaksi (käännös: Zoila Forss-Crespo Moreyra).'], id: 'katariina_vuorinen' },
     { name: 'Juha Kulmala + Positroninen runo-orkesteri', paragraphs: ['Juha Kulmala + Positroninen runo-orkesteri tuuttaa runoutta ja musiikkia herkästi ja häpeilemättä. Rock, blues, jazz, beat, latino, afro, länsirannikko, itärannikko, ulko- ja sisäavaruus, underground, rautalanka, painevasara, sydänääni, suven kimmellys. Meiltä saa kaiken.', 'Juha Kulmala, tekstit.', 'Pekka Tolonen, rytmit, kitarat, bassot, koskettimet ja muut soittimet.'], id: 'juha_kulmala' },
     { name: 'Juha Rautio', paragraphs: ['Juha Rautio (s.1980) on kirjoittanut seitsemän runokokoelmaa, joista viimeisin Jokainen epäilys ennen tätä ja tämän jälkeen ilmestyi 2024 alkuvuodesta. Rautio on esiintynyt aktiivisesti runoilijana vuodesta 2005. Runosaaressa hän esiintyy pitkästä aikaa akustisen kitaran kanssa.'], id: 'juha_rautio' },
-    { name: 'Risto Oikarinen', paragraphs: ['Risto Oikarinen on palkittu kirjailija ja saksofonisti. Hänen viimeisin runokokoelmansa on Kiitos tästä yöstä (Otava 2023). Oikarinen yhdistää esityksissään runoutta ja saksofoninsoittoa. Hän on esiintynyt useilla kirjallisuusfestivaaleilla niin kotimaassa kuin Euroopassa, ja hänen runojaan on käännetty kymmenelle kielelle.', 'Oikarinen opettaa kirjoittamista mm. Kriittisessä korkeakoulussa. Hänet on myös vihitty Suomen luterilaisen kirkon pastoriksi.'], id: 'risto_oikarinen' },
-    { name: 'Emmi Ketonen', paragraphs: ['Emmi Ketonen on turkulainen suomentaja, joka on kääntänyt erityisesti latinalaisamerikkalaista kirjallisuutta. Vuonna 2017 julkaistiin suomennos chileläisen Vicente Huidobron runoteoksesta Altazor. Vuonna 2025 on tulossa seuraava runosuomennos, valikoima argentiinalaisen Alejandra Pizarnikin tuotannosta. Molempien teosten kustantaja on Kustannusliike Parkko.'], id: 'emmi_ketonen' },
 ];
 
-export default Performers;
+export default Performers;

data/performers/2025.ts

@@ -1,21 +0,0 @@
-import type Performer from '../../types/Performer';
-
-const Performers: Array<Performer> = [
-    { name: 'Kauko Röyhkä & Severi Pyysalo', paragraphs: ['Kauko Röyhkän ja Severi Pyysalon epätodennäköinen duo on musisoinut yhdessä jo    15 vuotta. Kaksikko on levyttänyt lp:n Turmion suurherttua (Svart 2017). Keikkasetti koostuu enimmikseen Kauko Röyhkän tunnetuimmista lauluista, joihin Severi Pyysalon vibrafoni lisää taidokkaan jazzkuorrutuksen.'], id: 'royhka-pyysalo' },
-    { name: 'Uhrijuhla', paragraphs: ['Laulaja Olga Välimaan lämmin ääni johdattaa kuulijan unenomaiseen toiseuteen. Uhrijuhla-yhtye on levyttänyt kaksi albumillista runollista ja melodisesti rikasta musiikkia, jollaista nykyään kuulee enää harvoin. '], id: 'uhrijuhla' },
-    { name: 'Juha Kulmala + Positroninen Runo-orkesteri!', paragraphs: ['Juha Kulmala + Positroninen Runo-orkesteri on lyyrinen ufo, jonka ohjaimia vääntävät runoilija Juha Kulmala ja muusikko Pekka Tolonen. Tulemme Runosaareen nyt jo viidettä kertaa ja setissä on jälleen uutta ja ajatonta, kaunista ja purevaa. Runoutta ja sähköistä musiikkia.', 'Juha Kulmala on turkulainen runoilija, jolta on julkaistu 6 kokoelmaa, niistä viimeisin on RESET (Poesia 2022). Jarkko Laine -kirjallisuuspalkinto 2011, Tanssiva karhu -runopalkinto 2014, Wsoy:n kirjallisuussäätiön tunnustuspalkinto 2022. ”Juha Kulmala on ehkä Suomen luotettavin runoilija, mikä ei tarkoita, että hän olisi tylsä.” (Vesa Rantama, Keskisuomalainen)', 'Pekka Tolonen on monitaitoinen muusikko, joka on tehnyt yhteistyötä Kulmalan ja muidenkin runoilijoiden kanssa eri kokoonpanoissa jo toistakymmentä vuotta. '], id: 'kulmala' },
-    { name: 'Santtu Puukka', paragraphs: ['Santtu Puukka (s.1972)  on Vantaalainen kirjailija. Hänen viides runokokoelma ilmestyy syksyksi Enostonen julkaisemana.'], id: 'puukka' },
-    { name: 'Maaria Päivinen', paragraphs: ['Maaria Päivinen on Tohmajärvellä syntynyt, nykyisin Kotkassa asuva kirjailija. Häneltä on ilmestynyt kaksi runokokoelmaa, joista uusin, Maailmanymmärrysmatka (Aviador 2024), sukeltaa maailman lisäksi ihmiseen itseensä. Päivinen rakastaa sanoja, niiden muodostamaa virtaa ja runoutta ylipäänsä.'], id: 'paivinen' },
-    { name: 'Henriikka Tavi', paragraphs: ['Henriikka Tavi on runoilija ja kirjailija, jonka tuotantoa on luonnehdittu kokeelliseksi, leikkisäksi ja kielitietoiseksi. Halu venyttää kirjallisuuden rajoja sekä kysymys kirjallisuuden merkityksestä motivoi Tavia kirjoittajana. Tavi on julkaissut lukuisia runoteoksia, joista viimeisimmät ovat Remu (Teos, 2023) ja Pinnan alla -epälibretto (Poesiavihkot/ Poesia 2023). Tavi opettaa kirjoittamista mm. Kriittisessä korkeakoulussa ja on Osuuskunta Poesian aktiivinen jäsen. Hän on saanut teoksistaan paljon tunnustusta ja useita palkintoja.'], id: 'henriikka' },
-    { name: 'Jaakko Martikainen ja Henriikka Tavi', paragraphs: ['Jaakko Martikaisen ja Henriikka Tavin osin käsikirjoitetut ja osin improvisoidut esitykset liikkuvat musiikin, runouden ja äänirunouden välimaastossa joka kerta erilaisin painotuksin. Jaakko Martikainen on turkulainen jazzmuusikko ja soiton opettaja. Henriikka Tavi on runoilija, kirjailija ja musiikin intohimoinen harrastaja. '], id: 'jaakko-henriikka' },
-    { name: 'Pegasos', paragraphs: ['Pegasos on helsinkiläinen, v. 2015 perustettu kuuden muusikon yhtye, jonka musiikki on helmeilevä ja uniikki yhdistelmä suomenkielistä folkia, popia ja rockia. Yhtyeen tavaramerkiksi muodostunutta, kahden laulajan hiottua stemmalaulua on verrattu niin ruotsalaiseen First Aid Kitiin kuin kotimaisiin Ultra Brahan ja Scandinavian Music Groupiin. Pegasosta on kiitetty tarkkanäköisistä sanoituksistaan ja vaikuttavista keikoistaan, joissa laulajien rehellinen läsnäolo, soundi ja soittajien ilmaisuvoima vetävät kuulijoita puoleensa poikkeuksellisella tavalla.', 'Pegasoksen toinen pitkäsoitto Ei mikään ole niin kuin eilen julkaistiin keväällä 2023. Yhtyeeltä on lisäksi ilmestynyt albumi Anna vielä aikaa (2020), omakustanne-EP (2017), sekä Pepe Willbergin kanssa toteutettu cover-versio Egotrippi-yhtyeen kappaleesta Varovasti nyt (2022). Tällä hetkellä Pegasos työstää 3. albumiaan.', 'Runosaaressa yhtye esiintyy duona lauluntekijä Tuulikki Blom sekä kitaristi Veikki Virkajärven voimin.'], id: 'pegasos' },
-    { name: 'Peter Mickwitz ', paragraphs: ['Runoilija Peter Mickwitz on syntynyt vuonna 1964. Hän kirjoittaa myös esseitä ja lyhyttä proosaa. Mickwitzille on myönnetty mm. Ylen Tanssiva Karhu -palkinto sekä runoilijana että kääntäjänä. Vuonna 2024 hän sai Runeberg-palkinnon kokoelmastaan Misslyckad i en uggla. Vuonna 2016 ilmestyi suomeksi valikoima Lyhytproosaa se mikä avautuu Kristiina Lähteen kääntämänä.'], id: 'mickwitz' },
-    { name: 'Panu Hämeenaho', paragraphs: ['Panu Hämeenaho on opetellut olemaan sarjakuvapiirtäjä, kirjoittaja ja kirjallisuuden opettaja. Okkultti tulee itsestään.'], id: 'panu' },
-    { name: 'Silja Järventausta', paragraphs: ['Silja Järventausta on helsinkiläinen runoilija, kotoisin Seinäjoelta. Häneltä on ilmestynyt seitsemän runokokoelmaa Teokselta, viimeisin, Vuorosana pihapiirissä, tammikuussa 2025. Iltapäivä isolla kirjaimella sai Nihil Interitin vuoden 2022 parhaan runoteoksen palkinnon ja lukuisia ehdokkuuksia. Esikoisteos Patjalla meren yli ilmestyi vuonna 2006.'], id: 'jarventausta' },
-    { name: 'Katariina Vuorinen', paragraphs: ['Katariina Vuorinen on maailmassa elävä runoilija, @apoetontheroadandintothewild, joka viettää pohjoisen valoisat ajat meren äärellä Velkuanmaan saaressa, ja pimeät kuut Chilen Andeilla ja Valparaísossa, kiehtovimmassa kaupungissa. Tuntemattomien seutujen koluaminen on hänelle elinehto.', 'Vuorisen kuudes runokokoelma, Kesän oraakkeli (Aviador 2025) julkaistaan tämän vuoden Runosaaressa. Runosaari on Vuorisen Naantalin saaristoon luoma korkeatasoisen runouden ja musiikin jokakesäinen, moniääninen juhla. Se sai alkunsa, kun hän löysi nomadivuosiensa keskeltä maagisen Velkuanmaan saaren, ja tiesi heti paikan kutsuvan runon henkiä saaristoon.', 'Vuorinen on kiitetty esiintyjä sekä yksin että muusikoiden kanssa Suomessa ja ulkomailla, ja hänen runojaan on käännetty neljälletoista kielelle. Vuorisen edellinen teos, Myöhempien kesien jumalat, Los dioses de los veranos ulteriores (Aviador 2022) julkaistiin kaksikielisenä laitoksena, suomeksi ja espanjaksi. Sen aistivoimaisen tarkka ja vuolas runous on hurmannut yleisöjä etenkin Latinalaisessa Amerikassa.'], id: 'katariina' },
-    { name: 'Milagros Corcuera', paragraphs: ["Milagros Corcuera (Buenos Aires, 1993) is an Argentine writer whose poetry intertwines the personal with the universal. Her work explores themes of memory, longing, identity, and human experience with a delicate yet striking voice, drawing on Latin America's rich traditions, folklore, nature, and fascination with diverse cultures. She has published Trasandina (Valparaíso, 2018), Una pared llena de exvotos (Bs As, 2022) and Cabinet of Curiosities (Bs As, 2023), the children's book El Caleidoscopio (Bs As, 2024) as well as a compilation of Bilingual poems in Spanish-English (Denmark, 2025). Her poetry delves into the subtle beauty of everyday moments and distant objects from different eras. She has performed at festivals in Chile, México, Denmark, and Argentina, won multiple awards, and been featured in various anthologies. Currently, she is developing projects in nonfiction, travel writing, poetry, and children's literature."], id: 'milagros' },
-    { name: 'Tiina Lehikoinen', paragraphs: ['Tiina Lehikoinen on kirjailija ja kuvataiteilija, joka viihtyy lajien välisillä rajoilla. Hänen uusin teoksensa Mutta armo on kukka joka laulaa (Poesia) ilmestyi keväällä 2024. Lehikoisen kaunokirjallinen tuotanto sisältää useita runo- ja novellikokoelmia sekä esseihtivän romaanin. Kirjoissaan hän on käsitellyt ekofeministisiä teemoja, kielen suhdetta ruumiillisuuteen, erilaisia valtasuhteita ja ympäristöhuolta sekä leikin, mielikuvituksen ja toivon merkitystä kulttuuristen eläinten eloonjäämisessä. Lehikoisen teoksille on myönnetty Vuoden aforismikirja - ja Tampereen kaupungin kirjallisuuspalkinto ja lisäksi ne ovat olleet Runeberg-, Tanssiva Karhu -, Nihil Interit - ja Tiiliskivi-palkintoehdokkaana. Koulutukseltaan Lehikoinen on filosofian ja taiteen maisteri. Kaunokirjallisen ja taiteellisen työnsä ohella hän on päätoimittanut runouslehti Tuli&Savua ja verkkolehti Noesista sekä opettanut luovaa kirjoittamista vuodesta 2005. Lehikoisen tekstejä on käännetty englanniksi, espanjaksi, italiaksi, venäjäksi ja saksaksi.'], id: 'lehikoinen' },
-    //{ name: '', paragraphs: [''], id: 'placeholder' },
-];
-
-export default Performers;

package-lock.json

@@ -489,11 +489,10 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.12.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
-      "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
+      "version": "8.7.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
+      "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
       "dev": true,
-      "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -724,9 +723,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001717",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001717.tgz",
-      "integrity": "sha512-auPpttCq6BDEG8ZAuHJIplGw6GODhjw+/11e7IjpnYCxZcW/ONgPs0KVBJ0d1bY3e2+7PRe5RCLyP+PfwVgkYw==",
+      "version": "1.0.30001506",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001506.tgz",
+      "integrity": "sha512-6XNEcpygZMCKaufIcgpQNZNf00GEqc7VQON+9Rd0K1bMYo8xhMZRAo5zpbnbMNizi4YNgIDAFrdykWsvY3H4Hw==",
       "funding": [
         {
           "type": "opencollective",
@@ -740,8 +739,7 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ],
-      "license": "CC-BY-4.0"
+      ]
     },
     "node_modules/chalk": {
       "version": "4.1.2",
@@ -3467,9 +3465,9 @@
       }
     },
     "acorn": {
-      "version": "8.12.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
-      "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
+      "version": "8.7.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
+      "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
       "dev": true
     },
     "acorn-jsx": {
@@ -3638,9 +3636,9 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30001717",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001717.tgz",
-      "integrity": "sha512-auPpttCq6BDEG8ZAuHJIplGw6GODhjw+/11e7IjpnYCxZcW/ONgPs0KVBJ0d1bY3e2+7PRe5RCLyP+PfwVgkYw=="
+      "version": "1.0.30001506",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001506.tgz",
+      "integrity": "sha512-6XNEcpygZMCKaufIcgpQNZNf00GEqc7VQON+9Rd0K1bMYo8xhMZRAo5zpbnbMNizi4YNgIDAFrdykWsvY3H4Hw=="
     },
     "chalk": {
       "version": "4.1.2",

pages/_document.tsx

@@ -6,7 +6,7 @@ class MyDocument extends Document {
       <Html>
         <Head>
           <link
-            href='https://fonts.googleapis.com/css?family=Crimson+Text&display=optional'
+            href='https://fonts.googleapis.com/css?family=Crimson+Text'
             rel='stylesheet'
           />
           <meta property="og:title" content="Runosaari" />
@@ -16,8 +16,13 @@ class MyDocument extends Document {
           <meta property="og:image:type" content="image/jpg" />
           <meta property="og:image:width" content="1516" />
           <meta property="og:image:height" content="582" />
-          <meta property="og:description" content="Runofestivaali saariston sylissä 12. - 14.6.2025" />
-          <script defer src="https://diamond-rabbit.pikapod.net/script.js" data-website-id="2778daae-4fd3-45c5-babe-9b9b988a75d4"></script>
+          <meta property="og:description" content="Runosaari 7. ja 14.6. Naantalin saaristo. Vuonna 2024 saarifestivaali tuo runoutta ja musiikkia kahteen kesäkuun perjantaihin" />
+          <script
+            async
+            defer
+            data-website-id='3fb34a0a-f153-4941-9fa4-16c6b648b055'
+            src='https://umami.avislacus.com/umami.js'
+          ></script>
         </Head>
         <body>
           <Main />

pages/arkisto.tsx

@@ -6,7 +6,6 @@ import styles from '../styles/Archive.module.scss';
 import PerformersData2021 from '../data/performers/2021';
 import PerformersData2022 from '../data/performers/2022';
 import PerformersData2023 from '../data/performers/2023';
-import PerformersData2024 from '../data/performers/2024';
 import Performer from '../types/Performer';
 import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
 
@@ -18,7 +17,6 @@ const Archive = () => {
   const [performers2021, setPerformers2021] = useState<PerformerCard[]>([]);
   const [performers2022, setPerformers2022] = useState<PerformerCard[]>([]);
   const [performers2023, setPerformers2023] = useState<PerformerCard[]>([]);
-  const [performers2024, setPerformers2024] = useState<PerformerCard[]>([]);
 
   useEffect(() => {
     let cards: PerformerCard[] = [];
@@ -53,17 +51,6 @@ const Archive = () => {
     setPerformers2023(cards);
   }, []);
 
-  useEffect(() => {
-    let cards: PerformerCard[] = [];
-
-    PerformersData2024.map((p) => {
-      let newCard = { ...p, showDesc: false };
-      cards.push(newCard);
-    });
-
-    setPerformers2024(cards);
-  }, []);
-
   const togglePerformerDesc2021 = (id: string) => {
     let updated: PerformerCard[];
     updated = performers2021.map((p) => {
@@ -100,65 +87,9 @@ const Archive = () => {
     setPerformers2023(updated);
   };
 
-  const togglePerformerDesc2024 = (id: string) => {
-    let updated: PerformerCard[];
-    updated = performers2024.map((p) => {
-      if (p.id === id) {
-        p.showDesc = !p.showDesc;
-      }
-      return p;
-    });
-
-    setPerformers2024(updated);
-  };
-
   return (
     <section className={shared.page + ' ' + styles.archivePage}>
       <h1>Arkisto</h1>
-      <h2 className={styles.year}>2024</h2>
-      {performers2024.map((p) => (
-        <div className={styles.performerContainer} key={p.id}>
-          <Image
-            className={styles.performerImage}
-            src={'/performers/2024/' + p.id + '.jpg'}
-            width={100}
-            height={100}
-            layout='fixed'
-            alt={p.name}
-          />
-          <div className={styles.performerTextContainer}>
-            <div
-              className={styles.performerTitle}
-              onClick={() => togglePerformerDesc2024(p.id)}
-            >
-              <h2>{p.name}</h2>
-              <button className={shared.openingChevron}>
-                {p.showDesc ? (
-                  <BiChevronDown size='3rem' />
-                ) : (
-                  <BiChevronLeft size='3rem' />
-                )}
-              </button>
-            </div>
-            <CSSTransition
-              in={p.showDesc}
-              timeout={1000}
-              classNames='fadeTransition'
-            >
-              {p.showDesc ? (
-                <div>
-                  {p.paragraphs.map((parag, index) => (
-                    <p key={index}>{parag.toString()}</p>
-                  ))}
-                </div>
-              ) : (
-                <span></span>
-              )}
-            </CSSTransition>
-            <hr />
-          </div>
-        </div>
-      ))}
       <h2 className={styles.year}>2023</h2>
       {performers2023.map((p) => (
         <div className={styles.performerContainer} key={p.id}>

pages/components/Lead.tsx

@@ -5,11 +5,27 @@ const Lead = () => {
   return (
     <div className={styles.leadContainer}>
       <h2 className={styles.leadTitle}>
-        Runofestivaali saariston sylissä!
         <span className={styles.dateAndPlace}>
-          12. - 14.6.2025
+          7. ja 14.6. Naantalin saaristo
         </span>
+        Vuonna 2024 saarifestivaali tuo runoutta ja musiikkia kahteen kesäkuun perjantaihin
       </h2>
+      {/* <p className={styles.leadText}>
+        Runosaari on poikkitaiteellinen runofestivaali Livonsaaren, Palvan ja
+        Velkuanmaan saarissa. Festivaali järjestetään kolmatta kertaa
+        13.—15.6.2024.
+      </p>
+      <p className={styles.leadText}>
+        Tapahtuma kutsuu Naantalin saaristoon joukon valovoimaisia ja
+        monialaisia taiteen tekijöitä. Ohjelmassa runous yhdistyy elävään
+        musiikkiin ja erilaisiin taiteellisiin työpajoihin.
+      </p>
+      <p className={styles.leadText}>
+        Lumi ja jää vähenee, vedenpinta nousee ja pandemian aallot viistävät
+        meidänkin rantojamme. Peurojen kurittaman monimuotoisuuden keskelle
+        nousee Runosaari ihmettelemään ihmisen ja muun luonnon olemista taiteen
+        ja ilmaisun keinoin.
+      </p> */}
     </div>
   );
 };

pages/components/Logo.tsx

@@ -3,6 +3,12 @@ import styles from '../../styles/Logo.module.scss';
 import Link from 'next/link';
 
 const Logo = () => {
+  const [isDesktop, setIsDesktop] = useState(true);
+
+  useEffect(() => {
+    setIsDesktop(window.innerWidth > 768);
+  }, []);
+
   return (
     <Link href="/">
       <a>

pages/esiintyjat/[id].tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/router'
 import shared from '../../styles/Shared.module.scss';
 import styles from '../../styles/Performer.module.scss';
-import PerformersData from '../../data/performers/2025';
+import PerformersData from '../../data/performers/2024';
 import Performer from '../../types/Performer';
 import Image from 'next/image';
 
@@ -25,12 +25,12 @@ const PerformerPage = () => {
 
     return (
         performer.name == '' ?
-            (<div>Esiintyjää tunnisteella {router.query.id} ei löydy.</div>)
+            (<div>Esiintyjää tunnisteella "{router.query.id}" ei löydy.</div>)
             : (
                 <div className={styles.performerContainer}>
                     <Image
                         className={styles.performerImage}
-                        src={'/performers/2025/' + performer.id + '.jpg'}
+                        src={'/performers/2024/' + performer.id + '.jpg'}
                         width={300}
                         height={300}
                         layout='fixed'

pages/index.tsx

@@ -6,7 +6,7 @@ import styles from '../styles/Index.module.scss';
 import Lead from './components/Lead';
 import Collaboration from './components/Collaboration';
 import Workshops from './workshops';
-import Archive from './archive';
+import Archive from './arkisto';
 // import Workshops from './workshops';
 
 const Home: NextPage = () => {
@@ -17,8 +17,8 @@ const Home: NextPage = () => {
       <Program />
       <Performers />
       {/* <Workshops /> */}
-      {/* <Info /> */}
-      {/* <Collaboration /> */}
+      <Info />
+      <Collaboration />
       {/* <Archive /> */}
     </div>
   );

pages/info.tsx

@@ -82,15 +82,12 @@ const Info = () => {
           {infoToggles.bus ? (
             <div>
               <p>
-                Bussi 203 lähtee Turusta ma-pe klo 16:10 ja Naantalista klo 17,
-                ja saapuu Velkuan Teersaloon n. klo 17:45. Tämä on ainoa suora
-                yhteys festivaalille. Palvan saareen on Teersalosta yksi lossi,
-                ja Velkuanmaahan kaksi. Lossit lähtevät puolen tunnin välein
-                (tasatunnein ja puolelta) Teersalosta ja Velkuanmaasta, ja Palvasta
-                aina varttia vaille ja yli tasatunnin. (Aikataulut: <a href="https://www.finferries.fi/">finnferries.fi</a>)
-                Takaisin päin busseja ei kulje viikonloppuisin.
+                Bussi 203 lähtee Turusta (Kauppatori E2) ma-pe 16:30 ja saapuu
+                Velkualle 17:53. Tämä on ainoa suorayhteys festivaali alueelle.
+                Takaisin päin bussi menee 06:20 Teersalosta ja on 07:37 Turussa
+                (Kauppatori E2)
               </p>
-              <a href='https://cms.foli.fi/sites/default/files/documents-2024-04/Linja%20200%2C203.pdf'>
+              <a href='https://www.foli.fi/fi'>
                 Paikallisliikenteen bussiaikataulut
               </a>
             </div>

pages/performers.tsx

@@ -4,7 +4,7 @@ import styles from '../styles/Performers.module.scss';
 import shared from '../styles/Shared.module.scss';
 import Performer from '../types/Performer';
 import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
-import PerformersData from '../data/performers/2025';
+import PerformersData from '../data/performers/2024';
 import { CSSTransition } from 'react-transition-group';
 import Link from 'next/link';
 import { FiExternalLink } from 'react-icons/fi';
@@ -47,7 +47,7 @@ const Performers = () => {
           <div className={styles.performerContainer} key={p.id}>
             <Image
               className={styles.performerImage}
-              src={'/performers/2025/' + p.id + '.jpg'}
+              src={'/performers/2024/' + p.id + '.jpg'}
               width={100}
               height={100}
               layout='fixed'
@@ -87,9 +87,9 @@ const Performers = () => {
           </div>
         ))
       ) : (
-        <i className={shared.moreInfoLaterText}>Lisätietoja tulossa myöhemmin...</i>
+        <i>Lisätietoja tulossa myöhemmin...</i>
       )}
-      <Link href="/archive">
+      <Link href="/arkisto">
         <a>
           <span className={styles.archiveLinkText}>Aiempien vuosien esiintyjiä</span>
           <FiExternalLink fontSize={20} />

pages/program.tsx

@@ -4,6 +4,9 @@ import shared from '../styles/Shared.module.scss';
 import styles from '../styles/Program.module.scss';
 import { CSSTransition } from 'react-transition-group';
 import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
+import Performer from '../types/Performer';
+import Image from 'next/image';
+import Link from 'next/link';
 
 interface DayToggles {
   wed: boolean;
@@ -12,64 +15,100 @@ interface DayToggles {
   sat: boolean;
 }
 
+const firstPerformers: Performer[] = [];
+const secondPerformers: Performer[] = [];
+
 const Program = () => {
+  const [firstPerformers] = useState([
+    { id: "ayras", name: "Äyräs", paragraphs: [] },
+    { id: "hanna_storm", name: "Hanna Storm", paragraphs: [] },
+    { id: "juha_rautio", name: "Juha Rautio", paragraphs: [] },
+    { id: "katariina_vuorinen", name: "Katariina Vuorinen & Ilkka Turta", paragraphs: [] }]);
+
+  const [secondPerformers] = useState([
+    { id: "juha_kulmala", name: "Juha Kulmala + Positroninen runo-orkesteri", paragraphs: [] },
+    { id: "terhi_forssen", name: "Terhi Forssén", paragraphs: [] },
+    { id: "katariina_vuorinen", name: "Katariina Vuorinen & Björn", paragraphs: [] }]);
+
   return (
     <section className={shared.page}>
       <h1 id='program-start'>Ohjelma</h1>
-      <p className={styles.programTimeAndPlace}>
-        Torstai 12.6. klo 18-21 <span className={styles.locationName}>Palva</span>
-      </p>
-      <h2 className={styles.placeTitle}>
-        <a href='https://www.cafelaituri.fi'>
-          Cafe Laituri
+
+      <div className={styles.eventContainer}>
+        {/* Vaihela */}
+        <div className={styles.event}>
+          <div className={styles.programTitle}>
+            <span className={styles.timeSpan}>pe</span>
+            <span className={styles.timeSpan}>7.6.</span>
+            <span className={styles.timeSpan}>18 - 21</span>
+          </div>
+          <h2>
+            <a href='https://www.cafelaituri.fi'>
+              <span className={styles.placeName}>Vaihela</span>
+              <FiExternalLink fontSize={20} />
+            </a>
+          </h2>
+
+          <div className={styles.performerList}>
+            {firstPerformers.map((p) => (
+              <a href={'/esiintyjat/' + p.id} className={styles.performerCard}>
+                <Image
+                  className={styles.performerImage}
+                  src={'/performers/2024/' + p.id + '.jpg'}
+                  width={80}
+                  height={80}
+                  layout='fixed'
+                  alt={p.name}
+                />
+                <span className={styles.performerName}>{p.name}</span>
+              </a>
+            ))}
+          </div>
+          <br />
+          <br />
+          <i>Ohjelma täydentyy...</i>
+        </div>
+
+        {/* Laituri */}
+        <div className={styles.event}>
+          <div className={styles.programTitle}>
+            <span className={styles.timeSpan}>pe</span>
+            <span className={styles.timeSpan}>14.6.</span>
+            <span className={styles.timeSpan}>18 - 21</span>
+          </div>
+          <h2>
+            <a href='https://www.cafelaituri.fi'>
+              <span className={styles.placeName}>Laituri</span>
+              <FiExternalLink fontSize={20} />
+            </a>
+          </h2>
+          <div className={styles.performerList}>
+            {secondPerformers.map((p) => (
+              <a href={'/esiintyjat/' + p.id} className={styles.performerCard}>
+                <Image
+                  className={styles.performerImage}
+                  src={'/performers/2024/' + p.id + '.jpg'}
+                  width={80}
+                  height={80}
+                  layout='fixed'
+                  alt={p.name}
+                />
+                <span className={styles.performerName}>{p.name}</span>
+              </a>
+            ))}
+          </div>
+          <br />
+          <br />
+          <i>Ohjelma täydentyy...</i>
+        </div>
+      </div>
+      <Link href="/arkisto">
+        <a>
+          <span className={styles.archiveLinkText}>Aiempien vuosien esiintyjiä</span>
+          <FiExternalLink fontSize={20} />
         </a>
-      </h2>
-      <ul className={styles.performerList}>
-        <li>Pegasos</li>
-        <li>Henriikka Tavi ja Jaakko Martikainen</li>
-        <li>Peter Mickwitz</li>
-        <li>Milagros Corcuera</li>
-      </ul>
-      <hr className={styles.programHr} />
-
-      <p className={styles.programTimeAndPlace}>
-        Perjantai 13.6. klo 18-21 <span className={styles.locationName}>Velkuanmaa</span>
-      </p>
-      <h2 className={styles.placeTitle}>
-        <a href='https://www.vaihela.fi/'>
-          <span className={styles.placeName}>Saaristohotelli Vaihela</span>
-        </a>
-      </h2>
-      <ul className={styles.performerList}>
-        <li>Kauko Röyhkä & Severi Pyysalo</li>
-        <li>Juha Kulmala + Positroninen Runo-orkesteri!</li>
-        <li>Katariina Vuorinen & Pekka Tolonen</li>
-      </ul>
-      <hr className={styles.programHr} />
-
-      <p className={styles.programTimeAndPlace}>
-        Lauantai 14.6. klo 15-20 <span className={styles.locationName}>Teersalo</span>
-      </p>
-      <h2 className={styles.placeTitle}>
-        <a href='https://prosinervo.com/'>
-          <span className={styles.placeName}>Sinervon talo</span>
-        </a>
-      </h2>
-      <ul className={styles.performerList}>
-        <li>Santtu Puukka</li>
-        <li>Maaria Päivinen</li>
-        <li>Silja Järventausta</li>
-        <li>Tiina Lehikoinen</li>
-        <li>Katariina Vuorinen</li>
-        <li>Panu Hämeenaho</li>
-        <li>Uhrijuhla</li>
-        <li>Djangomania</li>
-        <li>Milagros Corcuera</li>
-      </ul>
-
-      <hr className={styles.programHr} />
-
-    </section>
+      </Link>
+    </section >
   );
 };
 

styles/Archive.module.scss

@@ -41,7 +41,6 @@
 
   h2 {
     margin-left: 1rem;
-    width: 100%;
   }
 
   h2:hover {
@@ -72,8 +71,7 @@
       margin-top: 0;
     }
   }
-
   .performerTextContainer {
     margin-left: -0.5rem;
   }
-}
+}

styles/Performers.module.scss

@@ -20,7 +20,7 @@
 .performerTextContainer {
   width: 80%;
   margin-left: 1rem;
-  margin-bottom: 2rem;
+  margin-top: 1rem;
 }
 
 .performerTitle {
@@ -32,7 +32,6 @@
 
   h2 {
     margin-left: 1rem;
-    width: 100%;
   }
 
   h2:hover {
@@ -42,7 +41,9 @@
 }
 
 .performerImage {
+  height: 100px;
   border-radius: 100%;
+  margin-bottom: 2rem;
 }
 
 .performerButton:hover {

styles/Program.module.scss

@@ -22,7 +22,7 @@
 .programTitle {
   display: flex;
   align-items: baseline;
-  justify-content: space-evenly;
+  justify-content: space-between;
   width: 80%;
   max-width: 25rem;
   padding-left: 1.5rem;
@@ -39,27 +39,11 @@
   }
 }
 
-.programTimeAndPlace {
-  width: 80%;
-  text-align: center;
-  font-size: xx-large;
-}
-
-.placeTitle {
-  font-size: 3.5rem !important;
+.placeName {
+  font-size: 2.5rem;
   margin-right: 1rem;
   color: #2f273e;
   text-decoration: none;
-  margin-top: 0;
-
-  a {
-    color: #2f273e;
-    text-decoration-color: #7e54e7;
-  }
-}
-
-.locationName {
-  color: #7e54e7;
 }
 
 .timeSpan {
@@ -70,16 +54,54 @@
 }
 
 .performerList {
-  font-size: 1.5rem;
-  font-weight: bold;
-  list-style-type: none;
-  line-height: 1.5rem;
-  max-width: 20rem;
-  padding-left: 0;
-  margin-top: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2em;
+  justify-content: space-around;
+  margin-top: 3rem;
+}
 
-  li {
-    margin-top: 1em;
+.performerCard {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  text-decoration: none;
+  color: #2f273e;
+
+  img {
+    border-radius: 50%;
+  }
+}
+
+.performerCard:hover {
+  color: rgb(117, 117, 117);
+  transition: color 0.3s;
+}
+
+.performerName {
+  max-width: 105px;
+  word-wrap: normal;
+}
+
+.eventContainer {
+  display: flex;  
+  gap: 4%;
+  margin-bottom: 2em;
+}
+
+.event {
+  min-width: 40%;
+  padding: 4%;
+  background-color: #e7e2f5;
+}
+
+@media screen and (max-width: 768px) {
+  .eventContainer {
+    flex-wrap: wrap;
+  }
+
+  .event {
+    margin-top: 2em;
   }
 }
 
@@ -140,4 +162,16 @@
   border: 0.1rem solid #d5caf29d;
   width: 43%;
   margin-top: 1em;
+}
+
+.archiveLink {
+  margin-top: 1rem;
+}
+
+.archiveLinkText {
+  font-size: 2.5rem;
+  margin-right: 1rem;
+  color: #2f273e;
+  text-decoration: none;
+  font-weight: bold;
 }

styles/Shared.module.scss

@@ -24,9 +24,3 @@
 .followNote {
   max-width: 90%;
 }
-
-.moreInfoLaterText {
-  margin-top: 1rem;
-  margin-bottom: 5rem;
-  font-size: 1.5rem;
-}