Merge branch 'svelte-henri' into svelte

2026-08-08 16:49:14 +00:00 · 2026-03-27 23:00:53 +02:00
parent 5676426c9e f73f73767f
commit bfe6363f0b
18 changed files with 167 additions and 99 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -22,6 +22,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.mise.toml

 *storybook.log
 storybook-static
--- a/README.md
+++ b/README.md
@@ -1,152 +1,156 @@
 # Lapikud External Website

-Built with [Svelte 5](https://svelte.dev/) and [Vite](https://vite.dev/).
+![Built with Svelte](https://img.shields.io/badge/Svelte-5-FF3E00?logo=svelte&logoColor=white)
+![Built with Vite](https://img.shields.io/badge/Vite-646CFF?logo=vite&logoColor=white)
+![Deployed on GitHub Pages](https://img.shields.io/badge/Deployed-GitHub%20Pages-222?logo=github)

-## Development plan
+Welcome! This is the public-facing website for Lapikud. It's a learning project. If something breaks, that's totally fine. You just get to learn more about git.

-Materials are on `Google Drive > Lapikud > Tarkvara > Väliveeb`
+Materials and design files are on **Google Drive → Lapikud → Tarkvara → Väliveeb**

-## Contribution guide
+---

-### 1. Create Issues
+## 🙋 How to help

-Easiest way to help would be to create issues about things that are missing and wrong
+You don't need to write code to contribute!

-### 2. Fork this repo and create a pull request
+### Option 1 — Report something
+Found a bug, typo, or something missing? [Open an issue](https://github.com/Lapikud/lapikud.github.io/issues) and describe what's wrong. That's already super helpful.

-Fork this repo to your own account and create a pull request for changes you have done in there
+### Option 2 — Fix something yourself
+1. **Fork** this repo (button in the top right on GitHub — it copies the project to your account)
+2. Make your changes
+3. Open a **pull request** back to this repo

-## How to setup development environment
+---

-### Prerequisites
+## 🛠️ Setting up your dev environment

- [Node.js](https://nodejs.org/) (v18 or higher. v20 is recommended)
- npm (comes with Node.js)
+### What you need first
+
+- [Node.js](https://nodejs.org/) — v18 or higher, but grab the **LTS version** (currently v24) to be safe
+
+> Node.js comes with `npm` included, so you don't need to install that separately.
+
+---
+
+### Don't have a code editor yet?
+
+If you don't have a preferred code editor, [VSCode](https://code.visualstudio.com/) is a solid choice. Download and install it, and you're good to go.
+
+---
+
+### Windows? Set up WSL first (recommended)
+
+WSL lets you run Linux commands on Windows, which makes everything smoother.

 <details>
-<summary>Set up VScode</summary>
+<summary>📋 WSL setup steps</summary>

-1. install [VSCode](https://code.visualstudio.com/)
-
-2. Recommended: wsl2 for windows users
-
-You might need to enable virtualization in BIOS unless it is already enabled. It can be checked by looking for "Virtualization" in Task Manager > Performance tab.
+**Step 1** — Enable WSL. Run these two commands in PowerShell as Administrator (this enables the necessary Windows features):

 ```bash
 dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
 dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
 ```

+**Step 2** — Set WSL to version 2 (the better one):
+
 ```bash
 wsl --set-default-version 2
 ```

-install [Ubuntu from Microsoft Store](https://apps.microsoft.com/store/detail/ubuntu/9NBLGGH4MSV6)
+**Step 3** — Install [Ubuntu from the Microsoft Store](https://apps.microsoft.com/store/detail/ubuntu/9NBLGGH4MSV6)
+
+> ⚠️ If WSL doesn't work, check that **Virtualization** is enabled on your machine: open Task Manager → Performance tab → look for "Virtualization: Enabled"

 </details>

+---
+
 ### Installation

-1. **Clone the repository**
+**1. Clone the repo** — this downloads the project to your computer:

 ```bash
 git clone https://github.com/Lapikud/lapikud.github.io.git
 cd lapikud.github.io
 ```

-2. **Install dependencies**
+**2. Install dependencies** — this installs all the packages the project needs:

 ```bash
 npm install
 ```

-3. **Start development server**
+**3. Start the dev server** — this runs the site locally so you can see your changes live:

 ```bash
 npm run dev
 ```

-> [!IMPORTANT]
->
-> ### Optional (secretly required): Image optimization
->
-> No one wants to download 5MB images that are then shown in a 100x100px box.
->
-> **Always optimize images before committing them!**
+Then open the URL it gives you (usually `http://localhost:5173`) in your browser. 🎉
+
+---
+
+## 🖼️ Images — please optimize before committing!
+
+Nobody wants to load a 5MB photo that's displayed at 100×100px. Always resize images before adding them to the project.
+
+Install FFmpeg first:

 <details>
-<summary>Linux/Windows (WSL/Ubuntu)</summary>
+<summary>Linux / WSL / Ubuntu</summary>

 ```bash
 sudo apt install ffmpeg
 ```

-```bash
-# For thumbnails/small images (100-300px display)
-ffmpeg -i input -vf scale=400:-1 output.jpg
-
-# For medium images (300-800px display)
-ffmpeg -i input -vf scale=1200:-1 output.jpg
-
-# For full-width hero images
-ffmpeg -i input -vf scale=1920:-1 output.jpg
-```
-
 </details>

 <details>
-<summary>Windows</summary>
-
-**Option 1: Using winget (Windows 11 or Windows 10 with App Installer)**
+<summary>Windows (without WSL)</summary>

+**Option A — via winget:**
 ```bash
 winget install ffmpeg
 ```

-**Option 2: Manual installation**
-
-1. Download FFmpeg from [ffmpeg.org/download.html](https://ffmpeg.org/download.html)
+**Option B — manually:**
+1. Download from [ffmpeg.org/download.html](https://ffmpeg.org/download.html)
 2. Extract the archive
-3. Add the `bin` folder to your PATH environment variable
-
-**Usage:**
-
-```bash
-# For thumbnails/small images (100-300px display)
-ffmpeg -i input -vf scale=400:-1 output.jpg
-
-# For medium images (300-800px display)
-ffmpeg -i input -vf scale=1200:-1 output.jpg
-
-# For full-width hero images
-ffmpeg -i input -vf scale=1920:-1 output.jpg
-```
+3. Add the `bin` folder to your PATH

 </details>

 <details>
-<summary>MacOS</summary>
+<summary>macOS</summary>

 ```bash
 brew install ffmpeg
 ```

+</details>
+
+### Resize commands
+
+Once FFmpeg is installed, use the right size for the job:
+
 ```bash
-# For thumbnails/small images (100-300px display)
+# Small thumbnails (shown at 100–300px)
 ffmpeg -i input -vf scale=400:-1 output.jpg

-# For medium images (300-800px display)
+# Medium images (shown at 300–800px)
 ffmpeg -i input -vf scale=1200:-1 output.jpg

-# For full-width hero images
+# Hero / full-width images
 ffmpeg -i input -vf scale=1920:-1 output.jpg
 ```

-</details>
+---

-## Deploy
+## 🚀 Deployment

-> [!NOTE]  
-> Github will build and deploy the website automatically on every push to the `main` branch. You don't need to do anything manually.
+Nothing to do here — GitHub automatically builds and deploys the site whenever something is pushed to the `main` branch.

-Deployment typically takes 2-5 minutes. You can check the progress in the [Actions tab](https://github.com/Lapikud/lapikud.github.io/actions).
+It usually takes **2–5 minutes**. You can watch it happen in the [Actions tab](https://github.com/Lapikud/lapikud.github.io/actions).
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -7,6 +7,8 @@

 {#if $text && Object.keys($text).length > 0}
  <Navbar />
+  <main>
    <Router {routes} />
    <Footer />
+  </main>
 {/if}
--- a/src/app.css
+++ b/src/app.css
@@ -1,5 +1,6 @@
 /* Global stylesheet */

+@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@300;400;500;600;700&display=swap");
@import "tailwindcss";

 /* Overwriting tailwindcss specific variables */
@@ -26,10 +27,6 @@

 /* Design tokens & theme variables (light defaults) */
 :root {
-  /* layout tokens */
-  --site-padding: clamp(1rem, 2vw, 2rem); /* horizontal page padding */
-  --content-max: 1200px; /* main content max width */
-
  /* spacing scale */
  --spacing-0: 0px;
  --spacing-1: 4px;
@@ -56,7 +53,7 @@
  box-sizing: border-box;
 }
 html {
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
+  font-family: "Unbounded", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
--- a/src/components/Dropdown.svelte
+++ b/src/components/Dropdown.svelte
@@ -21,7 +21,7 @@
 </script>

 <div class="relative inline-block" on:focusout={handleFocusOut}>
-  <Button onClick={toggle} class={buttonClass}>
+  <Button onClick={toggle} class={`${buttonClass} gap-0`}>
    {name}
    <svg
      xmlns="http://www.w3.org/2000/svg"
@@ -29,7 +29,7 @@
      viewBox="0 0 24 24"
      stroke-width="2"
      stroke="currentColor"
-      class="w-5 ml-2 mt-1 transition-transform inline-block"
+      class="w-4 h-4 ml-1 mr-0 mt-0.5 transition-transform inline-block"
      style:transform={isOpen ? "rotate(180deg)" : "none"}
    >
      <path
--- a/src/components/layout/Section.svelte
+++ b/src/components/layout/Section.svelte
@@ -18,7 +18,7 @@
  {id}
  class="w-full {paddingClasses[padding]} {bg} {className}"
 >
-  <div class="{fullWidth ? '' : 'max-w-[1200px]'} mx-auto px-(--site-padding)">
+  <div class="{fullWidth ? '' : 'max-w-[1200px]'} mx-auto">
    <slot />
  </div>
 </section>
--- a/src/layout/Navbar.svelte
+++ b/src/layout/Navbar.svelte
@@ -1,8 +1,8 @@
 <script>
  import {
    Button,
+    Container,
    Dropdown,
-    Section,
    Stack,
  } from "$components";
  import { navigate, getPath, currentLang, text, switchLanguageRoute } from "$lib";
@@ -105,7 +105,8 @@
  }
 </style>

-<Section className="text-black" bg="bg-orange-500" padding="tight">
+<header class="fixed inset-x-0 top-0 z-50 text-white">
+  <Container maxWidth={true} center={false} className="py-2 md:py-3">
    {#if $text && Object.keys($text).length > 0}
      <div class="flex items-center w-full relative min-h-12">
      <!-- Logo -->
@@ -117,9 +118,9 @@
        </div>
      {/if}
      
-      <div class="flex items-center justify-end ml-auto w-full md:w-auto">
+      <div class="flex items-center justify-end ml-auto w-full md:w-auto md:border-b-3 md:border-white">
        <!-- Desktop Navigation -->
-        <nav class="z-10 hidden md:flex gap-4 justify-end text-xl">
+        <nav class="z-10 hidden md:flex gap-2 justify-end text-xl">
          <Dropdown
            name={$text.about || 'Meist'}
            buttonClass="rounded-[5px] hover:text-white"
@@ -162,7 +163,7 @@
          
          <!-- Language Switcher -->
          <Button 
-            class="rounded-[5px] px-3 py-1 text-sm ml-2 hover:text-white"
+            class="rounded-[5px] px-3 py-1 text-sm ml-4 hover:text-white"
            onClick={() => switchLanguageRoute($currentLang === 'est' ? 'en' : 'est')}
          >
            {$currentLang === 'est' ? 'EN' : 'EST'}
@@ -181,7 +182,8 @@
      </div>
      </div>
    {/if}
-</Section>
+  </Container>
+</header>

 <!-- Full Screen Mobile Menu -->
 {#if mobileMenuOpen}
@@ -191,7 +193,7 @@
    class:menu-closing={isClosing}
  >
    <Stack className="min-h-full">
-      <div class="absolute top-8 right-0 px-(--site-padding)">
+      <div class="absolute top-8 right-0">
        <Button
          onClick={closeMobileMenu}
          class="ml-auto p-2 transition-colors flex bg-transparent hover:text-orange-500"
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -31,7 +31,7 @@ async function loadTranslations(lang) {
        
        // Dynamically import all translation files for the specific language
        // Vite will code-split these and only bundle the ones actually used
-        const modules = import.meta.glob('../locales/*/*.json');
+        const modules = import.meta.glob('./locales/*/*.json');
        
        for (const path in modules) {
            if (path.includes(`/locales/${lang}/`) || path.includes(`\\locales\\${lang}\\`)) {
--- a/src/lib/locales/en/Footer.json
+++ b/src/lib/locales/en/Footer.json
--- a/src/lib/locales/en/Helpdesk.json
+++ b/src/lib/locales/en/Helpdesk.json
--- a/src/lib/locales/en/Home.json
+++ b/src/lib/locales/en/Home.json
--- a/src/lib/locales/en/Navbar.json
+++ b/src/lib/locales/en/Navbar.json
--- a/src/lib/locales/est/Footer.json
+++ b/src/lib/locales/est/Footer.json
--- a/src/lib/locales/est/Helpdesk.json
+++ b/src/lib/locales/est/Helpdesk.json
--- a/src/lib/locales/est/Home.json
+++ b/src/lib/locales/est/Home.json
--- a/src/lib/locales/est/Navbar.json
+++ b/src/lib/locales/est/Navbar.json
--- a/src/routes/NewHome.svelte
+++ b/src/routes/NewHome.svelte
@@ -0,0 +1,62 @@
+<script>
+import {Section, Grid, Center, Image, Svg} from "$components";
+</script>
+
+<!-- Hero Section -->
+<Section className="relative min-h-screen overflow-hidden" padding="none" fullWidth={true}>
+  <div class="relative min-h-screen flex items-center">
+    <div class="pointer-events-none absolute inset-0" aria-hidden="true">
+      <Image
+        src="/assets/carousel-images/1.jpg"
+        alt=""
+        objectFit="cover"
+        className="w-full h-full"
+        pictureClass="block w-full h-full"
+      />
+    </div>
+    <div
+      class="pointer-events-none absolute inset-0 bg-gray-900 [clip-path:polygon(75%_0,100%_0,100%_100%,25%_100%)]"
+      aria-hidden="true"
+    ></div>
+    <div
+      class="pointer-events-none absolute inset-0 bg-orange-500/75 [clip-path:polygon(0_0,75%_0,25%_100%,0_100%)]"
+      aria-hidden="true"
+    ></div>
+
+    <div
+      class="pointer-events-none absolute inset-0 [clip-path:polygon(0_0,75%_0,25%_100%,0_100%)]"
+      aria-hidden="true"
+    >
+      <Svg
+        type="connector"
+        className="absolute left-0 top-[16%] w-[clamp(130px,14vw,230px)] text-white/95"
+      />
+      <Svg
+        type="branch"
+        className="absolute left-0 top-[52%] -translate-y-1/2 w-[clamp(56px,6vw,94px)] text-white/95"
+      />
+      <Svg
+        type="mirrorV"
+        className="absolute left-0 bottom-[12%] w-[clamp(130px,14vw,230px)] text-white/95"
+      />
+    </div>
+
+    <div
+      class="pointer-events-none absolute inset-x-0 bottom-[6%] z-10 hidden md:flex w-full flex-col items-end gap-3"
+      aria-hidden="true"
+    >
+      <div class="h-6 w-[50%] bg-orange-500/90"></div>
+      <div class="h-4 w-[60%] bg-orange-500/90"></div>
+    </div>
+
+    <Grid columns={2} className="relative z-20 items-center">
+      <Center className="self-center md:-translate-y-8">
+        <img src="/assets/LapLogo_black_white.png" alt="MTÜ Lapikud" class="max-w-lg w-full h-auto p-4"/>
+      </Center>
+      <p class="self-center md:translate-y-16 text-center text-2xl leading-[200%] p-8 text-white">
+        MTÜ Lapikud on Tallinna Tehnikaülikooli Tarkvaraarendusklubi, mis ühendab endisi
+        ja praegusi IT huvilisi tudengeid.
+      </p>
+    </Grid>
+  </div>
+</Section>
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -1,7 +1,7 @@
 // ADD PAGES HERE TO REGISTER ROUTES
 // examples: '/page', '/page/:id'

-import Home from './Home.svelte'
+import NewHome from './NewHome.svelte'
 import Student from './Student.svelte'
 import Mentors from './Mentors.svelte'
 import Helpdesk from './Helpdesk.svelte'
@@ -65,7 +65,7 @@ export function getTranslatedRoute(currentPath, targetLang) {
 }

 export const routes = {
-  '/': Home,
+  '/': NewHome,
  '/tudengile': Student,
  '/student': Student,
  '/mentorid': Mentors,