lapikud/lapikud.github.io
2
0
Fork 1
mirror of https://github.com/Lapikud/lapikud.github.io.git synced 2026-08-08 18:09:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Home, card, mentors page update

Browse Source
This commit is contained in:
Randel Mandre
2026-02-23 23:06:41 +02:00
parent c1cd4aeb8f
commit 4a452e9793
5 changed files with 235 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/layout/Card.svelte
View File

@@ -1,6 +1,6 @@
<script> <script>
export let href = ""; export let href = "";
export let variant = "default"; // 'default' | 'animated' | 'animated-neutral' | 'glass' export let variant = "default"; // 'default' | 'animated' | 'animated-neutral' | 'glass' | 'blur'
export let className = ""; export let className = "";
const variantClasses = { const variantClasses = {
@@ -8,6 +8,7 @@
animated: "card-animated", animated: "card-animated",
"animated-neutral": "card-animated-neutral", "animated-neutral": "card-animated-neutral",
glass: "card-glass", glass: "card-glass",
blur: "card-blur",
}; };
</script> </script>
@@ -80,6 +81,35 @@
transform: none; transform: none;
} }
.card-blur {
background: rgba(255, 255, 255, 0.68);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.55);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
isolation: isolate;
}
.card-blur::before {
content: "";
position: absolute;
inset: -12px;
border-radius: calc(var(--radius-lg) + 12px);
background: radial-gradient(
120% 120% at 50% 50%,
rgba(245, 245, 245, 0.95) 45%,
rgba(245, 245, 245, 0.55) 65%,
rgba(245, 245, 245, 0) 82%
);
filter: blur(10px);
pointer-events: none;
z-index: -1;
}
.card-blur:hover {
background: rgba(255, 255, 255, 0.78);
}
@media (max-width: 768px) { @media (max-width: 768px) {
.card { .card {
padding: var(--space-4); padding: var(--space-4);

6
src/layout/Navbar.svelte
View File

@@ -195,11 +195,11 @@
<!-- Full Screen Mobile Menu --> <!-- Full Screen Mobile Menu -->
{#if mobileMenuOpen} {#if mobileMenuOpen}
<div <div
class="fixed inset-0 z-100 bg-(--off-black) md:hidden overflow-hidden" class="fixed inset-0 z-100 bg-(--off-black) md:hidden overflow-y-auto"
class:menu-opening={!isClosing} class:menu-opening={!isClosing}
class:menu-closing={isClosing} class:menu-closing={isClosing}
> >
<Stack className="h-full"> <Stack className="min-h-full">
<div class="absolute top-8 right-0 px-(--site-padding)"> <div class="absolute top-8 right-0 px-(--site-padding)">
<Button <Button
onClick={closeMobileMenu} onClick={closeMobileMenu}
@@ -212,7 +212,7 @@
</div> </div>
<!-- Menu Content --> <!-- Menu Content -->
<Stack gap="var(--space-5)" className="flex-1 px-8 pb-8 text-white text-xl justify-center"> <Stack gap="var(--space-5)" className="flex-1 px-8 pt-24 pb-12 text-white text-xl">
<!-- About Section --> <!-- About Section -->
<Stack gap="var(--space-3)"> <Stack gap="var(--space-3)">
<h3 class="text-2xl font-bold" style="color: var(--orange)">{$text.about}</h3> <h3 class="text-2xl font-bold" style="color: var(--orange)">{$text.about}</h3>

10
src/routes/Home.svelte
View File

@@ -39,7 +39,7 @@
<Section> <Section>
<Grid gap="var(--space-5)"> <Grid gap="var(--space-5)">
<Card variant="animated-neutral" href="/tudengile"> <Card variant="blur" href="/tudengile">
<div class="feature-icon" style="color: var(--orange)"> <div class="feature-icon" style="color: var(--orange)">
<Users size={32} strokeWidth={1.5} /> <Users size={32} strokeWidth={1.5} />
</div> </div>
@@ -52,7 +52,7 @@
</div> </div>
</Card> </Card>
<Card variant="animated-neutral" href="/helpdesk"> <Card variant="blur" href="/helpdesk">
<div class="feature-icon" style="color: var(--orange)"> <div class="feature-icon" style="color: var(--orange)">
<Wrench size={32} strokeWidth={1.5} /> <Wrench size={32} strokeWidth={1.5} />
</div> </div>
@@ -65,7 +65,7 @@
</div> </div>
</Card> </Card>
<Card variant="animated-neutral" href="/ourwork"> <Card variant="blur" href="/ourwork">
<div class="feature-icon" style="color: var(--orange)"> <div class="feature-icon" style="color: var(--orange)">
<HeartHandshake size={32} strokeWidth={1.5} /> <HeartHandshake size={32} strokeWidth={1.5} />
</div> </div>
@@ -83,11 +83,11 @@
<!-- What We Do Section --> <!-- What We Do Section -->
<Section> <Section>
<Grid gap="var(--space-4)"> <Grid gap="var(--space-4)">
<Card variant="glass"> <Card variant="blur">
<h2 class="pb-4 text-4xl font-bold">Mida me loome</h2> <h2 class="pb-4 text-4xl font-bold">Mida me loome</h2>
<p>Meie põhieesmärgiks on Tallinna Tehnikaülikooli IT tudengitele erialase lisandväärtuse loomine. Kaasame tudengeid praktilistesse lahendustesse, kus saab ideid reaalselt ellu viia ja oma oskusi päriselt kasutada. Meie projektidest kasvavad välja huvitavad ja tarvilikud lõputööd, millel on selge praktiline väärtus.</p> <p>Meie põhieesmärgiks on Tallinna Tehnikaülikooli IT tudengitele erialase lisandväärtuse loomine. Kaasame tudengeid praktilistesse lahendustesse, kus saab ideid reaalselt ellu viia ja oma oskusi päriselt kasutada. Meie projektidest kasvavad välja huvitavad ja tarvilikud lõputööd, millel on selge praktiline väärtus.</p>
</Card> </Card>
<Card variant="glass"> <Card variant="blur">
<h2 class="pb-4 text-4xl font-bold">Keda ja kuidas kaasame</h2> <h2 class="pb-4 text-4xl font-bold">Keda ja kuidas kaasame</h2>
<p>Pakume nutikatele ja motiveeritud tudengitele võimalust saada meie juures esimene töökogemus ning arendada end meeskonnas töötades. Lapikud ei ole ainult IT-tudengite organisatsioon, kaasame projektidesse ka majandusteaduskonna tudengeid, et tehniliste lahenduste kõrval oleks esindatud ka äriline vaade.</p> <p>Pakume nutikatele ja motiveeritud tudengitele võimalust saada meie juures esimene töökogemus ning arendada end meeskonnas töötades. Lapikud ei ole ainult IT-tudengite organisatsioon, kaasame projektidesse ka majandusteaduskonna tudengeid, et tehniliste lahenduste kõrval oleks esindatud ka äriline vaade.</p>
</Card> </Card>

343
src/routes/Mentors.svelte
View File

@@ -1,176 +1,213 @@
<script> <script>
import { import { Section, Card, Center } from "$components";
Section, import { onMount } from "svelte";
Grid, import yaml from "js-yaml";
Card, import { currentLang, getLangText } from "$lib";
Center,
} from "$components";
import { onMount } from "svelte";
import yaml from 'js-yaml';
import { currentLang, getLangText } from "$lib";
import Mail from "lucide-svelte/icons/mail"; import Mail from "lucide-svelte/icons/mail";
import Phone from "lucide-svelte/icons/phone"; import Phone from "lucide-svelte/icons/phone";
import MessageCircle from "lucide-svelte/icons/message-circle"; import MessageCircle from "lucide-svelte/icons/message-circle";
import User from "lucide-svelte/icons/user"; import User from "lucide-svelte/icons/user";
let mentors = []; let mentors = [];
onMount(async () => { onMount(async () => {
const response = await fetch('/_data/mentors.yml'); const response = await fetch("/_data/mentors.yml");
const yamlText = await response.text(); const yamlText = await response.text();
mentors = yaml.load(yamlText); mentors = yaml.load(yamlText);
}); });
function getContactIcon(contactType) { function getContactIcon(contactType) {
const type = contactType.toLowerCase(); const type = contactType.toLowerCase();
if (type.includes('email') || type.includes('e-post')) return Mail; if (type.includes("email") || type.includes("e-post")) return Mail;
if (type.includes('phone') || type.includes('telefon')) return Phone; if (type.includes("phone") || type.includes("telefon")) return Phone;
if (type.includes('messenger') || type.includes('discord') || type.includes('facebook')) return MessageCircle; if (
return User; type.includes("messenger") ||
} type.includes("discord") ||
type.includes("facebook")
function getContactLink(method) { )
const type = method.name.toLowerCase(); return MessageCircle;
const value = method.value; return User;
if (type.includes('email')) return `mailto:${value}`;
if (type.includes('phone') || type.includes('telefon')) return `tel:${value}`;
if (type.includes('messenger') || type.includes('facebook')) {
return value.startsWith('http') ? value : `https://m.me/${value}`;
} }
if (type.includes('discord')) return '#';
return value.startsWith('http') ? value : '#'; function getContactLink(method) {
} const type = method.name.toLowerCase();
const value = method.value;
if (type.includes("email")) return `mailto:${value}`;
if (type.includes("phone") || type.includes("telefon"))
return `tel:${value}`;
if (type.includes("messenger") || type.includes("facebook")) {
return value.startsWith("http") ? value : `https://m.me/${value}`;
}
if (type.includes("discord")) return "#";
return value.startsWith("http") ? value : "#";
}
</script> </script>
<!-- Hero Section --> <!-- Hero Section -->
<Section background="orange"> <Section background="orange">
<Center> <Center>
<div class="text-center max-w-4xl"> <div class="text-center max-w-4xl">
<h1 class="text-5xl font-bold mb-6">Meie Mentorid</h1> <h1 class="text-5xl font-bold mb-6">Meie Mentorid</h1>
<p class="text-2xl leading-relaxed"> <p class="text-2xl leading-relaxed">
Kogenud tudengid, kes aitavad sind areneda ja jagavad oma teadmisi Kogenud tudengid, kes aitavad sind areneda ja jagavad oma
</p> teadmisi
</div> </p>
</Center> </div>
</Center>
</Section> </Section>
<!-- Mentors Grid --> <!-- Mentors Grid -->
<Section> <Section>
<div class="text-center mb-12"> <div class="text-center mb-12">
<h2 class="text-4xl font-bold mb-4">Tutvuge meie mentorite meeskonnaga</h2> <h2 class="text-4xl font-bold mb-4">
<p class="text-xl text-gray-600">Igaüks neist on spetsialist omas valdkonnas ja valmis sind aitama</p> Tutvuge meie mentorite meeskonnaga
</div> </h2>
<p class="text-xl text-gray-600">
Igaüks neist on spetsialist omas valdkonnas ja valmis sind aitama
</p>
</div>
<Grid columns={2} gap="var(--space-6)"> <div class="flex flex-col gap-8">
{#each mentors as mentor} {#each mentors as mentor}
<Card variant="glass" class="overflow-hidden"> <div>
<div class="flex flex-col md:flex-row gap-6"> <div class="flex flex-col md:flex-row gap-6">
<!-- Mentor Photo --> <!-- Mentor Photo -->
{#if mentor.photo} {#if mentor.photo}
<div class="shrink-0"> <div class="shrink-0">
<img <img
src={`/assets/mentors-images/optimised/${mentor.photo}`} src={`/assets/mentors-images/optimised/${mentor.photo}`}
alt={mentor.name} alt={mentor.name}
class="w-full md:w-48 h-48 object-cover rounded-lg" class="w-full md:w-48 h-48 object-cover"
on:error={(e) => { on:error={(e) => {
e.target.src = '/assets/mentors-images/original/' + mentor.photo; e.target.src =
}} "/assets/mentors-images/original/" +
/> mentor.photo;
}}
/>
</div>
{/if}
<!-- Mentor Info -->
<div class="flex-1">
<h3 class="text-2xl font-bold mb-2">{mentor.name}</h3>
{#if mentor.age}
<p class="text-gray-600 mb-2">
Vanus: {mentor.age}
</p>
{/if}
{#if mentor.speciality}
<p
class="text-lg font-semibold mb-2"
style="color: var(--orange)"
>
{getLangText(
mentor,
"speciality",
$currentLang,
)}
</p>
{/if}
{#if mentor.teams && mentor.teams.length > 0}
<div class="mb-3">
<span class="font-semibold">Meeskonnad: </span>
<span class="text-gray-700"
>{mentor.teams.join(", ")}</span
>
</div>
{/if}
{#if mentor.term}
<p class="text-gray-600 mb-3">
Ametiperiood: {mentor.term}
{mentor.term === 1 ? "aasta" : "aastat"}
</p>
{/if}
{#if mentor.description}
<p
class="text-sm font-semibold mb-2"
style="color: var(--orange)"
>
Otsin: {getLangText(
mentor,
"description",
$currentLang,
)}
</p>
{/if}
{#if mentor.activities}
<p class="text-gray-700 text-sm mb-4">
{getLangText(
mentor,
"activities",
$currentLang,
)}
</p>
{/if}
<!-- Contact Methods -->
{#if mentor.contactMethods && mentor.contactMethods.length > 0}
<div class="flex flex-wrap gap-2 mt-4">
{#each mentor.contactMethods as method}
{@const IconComponent = getContactIcon(
method.name,
)}
<a
href={getContactLink(method)}
class="inline-flex items-center gap-2 px-3 py-2 bg-orange-100 hover:bg-orange-200 rounded-lg transition-colors text-sm"
title={method.name}
target={method.value.startsWith("http")
? "_blank"
: "_self"}
rel={method.value.startsWith("http")
? "noopener noreferrer"
: ""}
>
<svelte:component
this={IconComponent}
size={16}
/>
<span class="capitalize"
>{method.name}</span
>
</a>
{/each}
</div>
{/if}
</div>
</div>
</div> </div>
{/if} {/each}
</div>
<!-- Mentor Info -->
<div class="flex-1">
<h3 class="text-2xl font-bold mb-2">{mentor.name}</h3>
{#if mentor.age}
<p class="text-gray-600 mb-2">Vanus: {mentor.age}</p>
{/if}
{#if mentor.speciality}
<p class="text-lg font-semibold mb-2" style="color: var(--orange)">
{getLangText(mentor, 'speciality', $currentLang)}
</p>
{/if}
{#if mentor.teams && mentor.teams.length > 0}
<div class="mb-3">
<span class="font-semibold">Meeskonnad: </span>
<span class="text-gray-700">{mentor.teams.join(', ')}</span>
</div>
{/if}
{#if mentor.term}
<p class="text-gray-600 mb-3">Ametiperiood: {mentor.term} {mentor.term === 1 ? 'aasta' : 'aastat'}</p>
{/if}
{#if mentor.description}
<p class="text-sm font-semibold mb-2" style="color: var(--orange)">
Otsin: {getLangText(mentor, 'description', $currentLang)}
</p>
{/if}
{#if mentor.activities}
<p class="text-gray-700 text-sm mb-4 line-clamp-3">
{getLangText(mentor, 'activities', $currentLang)}
</p>
{/if}
<!-- Contact Methods -->
{#if mentor.contactMethods && mentor.contactMethods.length > 0}
<div class="flex flex-wrap gap-2 mt-4">
{#each mentor.contactMethods as method}
{@const IconComponent = getContactIcon(method.name)}
<a
href={getContactLink(method)}
class="inline-flex items-center gap-2 px-3 py-2 bg-orange-100 hover:bg-orange-200 rounded-lg transition-colors text-sm"
title={method.name}
target={method.value.startsWith('http') ? '_blank' : '_self'}
rel={method.value.startsWith('http') ? 'noopener noreferrer' : ''}
>
<svelte:component this={IconComponent} size={16} />
<span class="capitalize">{method.name}</span>
</a>
{/each}
</div>
{/if}
</div>
</div>
</Card>
{/each}
</Grid>
</Section> </Section>
<!-- Become a Mentor Section --> <!-- Become a Mentor Section -->
<Section background="neutral"> <Section background="neutral">
<Center> <Center>
<Card variant="glass" class="max-w-3xl"> <Card variant="glass" class="max-w-3xl">
<h2 class="text-4xl font-bold mb-6 text-center">Taha saada mentoriks?</h2> <h2 class="text-4xl font-bold mb-6 text-center">
<p class="text-lg text-center mb-6"> Taha saada mentoriks?
Kui oled kogenud tudeng ja soovid jagada oma teadmisi ning aidata uusi liikmeid, </h2>
siis võta meiega ühendust! <p class="text-lg text-center mb-6">
</p> Kui oled kogenud tudeng ja soovid jagada oma teadmisi ning
<div class="text-center"> aidata uusi liikmeid, siis võta meiega ühendust!
<a </p>
href="mailto:lapikud@lapikud.ee" <div class="text-center">
class="inline-block px-8 py-3 bg-orange-500 hover:bg-orange-600 text-white font-semibold rounded-lg transition-colors" <a
> href="mailto:lapikud@lapikud.ee"
Võta ühendust class="inline-block px-8 py-3 bg-orange-500 hover:bg-orange-600 text-white font-semibold rounded-lg transition-colors"
</a> >
</div> Võta ühendust
</Card> </a>
</Center> </div>
</Card>
</Center>
</Section> </Section>
<style>
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>

4
src/routes/Student.svelte
View File

@@ -171,7 +171,7 @@
{#if members.senior && members.senior.length > 0} {#if members.senior && members.senior.length > 0}
<div class="mb-12"> <div class="mb-12">
<h3 class="text-3xl font-bold mb-6 text-center">Senior liikmed</h3> <h3 class="text-3xl font-bold mb-6 text-center">Vanemliikmed</h3>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4"> <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
{#each members.senior as member} {#each members.senior as member}
<div class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow"> <div class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
@@ -184,7 +184,7 @@
{#if members.junior && members.junior.length > 0} {#if members.junior && members.junior.length > 0}
<div> <div>
<h3 class="text-3xl font-bold mb-6 text-center">Junior liikmed</h3> <h3 class="text-3xl font-bold mb-6 text-center">Noorliikmed</h3>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4"> <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
{#each members.junior as member} {#each members.junior as member}
<div class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow"> <div class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">