Skip to content

Commit 90cb7f0

Browse files
devjvdevjv
committed
init
0 parents  commit 90cb7f0

File tree

2 files changed

+311
-0
lines changed

2 files changed

+311
-0
lines changed

‎index.html‎

Lines changed: 311 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,311 @@
1+
<!doctype html>
2+
<html lang="en" class="bg-zinc-900 text-zinc-100">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Kanttiinit, Story so far</title>
8+
<script src="https://cdn.tailwindcss.com"></script>
9+
<style>
10+
:root {
11+
--kanttiinit-green: #06cbb0;
12+
--kanttiinit-green-2: #0b8e72;
13+
}
14+
15+
.kanttiinit-green {
16+
color: var(--kanttiinit-green);
17+
}
18+
19+
.kanttiinit-green-2 {
20+
color: var(--kanttiinit-green-2);
21+
}
22+
23+
.accent-orange {
24+
color: #ff7e5f;
25+
}
26+
27+
.accent-blue {
28+
color: #3b82f6;
29+
}
30+
31+
.accent-light-blue {
32+
color: #93c5fd;
33+
}
34+
35+
.accent-blue-gray {
36+
color: #6b7280;
37+
}
38+
39+
.accent-green {
40+
color: #10b981;
41+
}
42+
43+
a.text-link {
44+
text-decoration: underline;
45+
}
46+
47+
.typewriter>* {
48+
opacity: 0;
49+
white-space: pre;
50+
overflow: hidden;
51+
}
52+
53+
.typewriter>.line {
54+
animation: type 1s steps(40, end) forwards;
55+
}
56+
57+
.typewriter>.line:nth-child(2) {
58+
animation-delay: 1s;
59+
}
60+
61+
.typewriter>.line:nth-child(3) {
62+
animation-delay: 2s;
63+
}
64+
65+
.typewriter>.line:nth-child(4) {
66+
animation-delay: 3s;
67+
}
68+
69+
.typewriter>.line:nth-child(5) {
70+
animation-delay: 4s;
71+
}
72+
73+
@keyframes type {
74+
from {
75+
width: 0;
76+
opacity: 1;
77+
}
78+
79+
to {
80+
width: 100%;
81+
opacity: 1;
82+
}
83+
}
84+
85+
.xp-highlight {
86+
background: linear-gradient(90deg, #0c90fd, #09bddd);
87+
-webkit-background-clip: text;
88+
-webkit-text-fill-color: transparent;
89+
font-weight: bold;
90+
position: relative;
91+
}
92+
93+
.snazzy-text {
94+
font-weight: 600;
95+
font-size: 1.5rem;
96+
background: linear-gradient(90deg, #54d3ff, #b990ff, #ffa6a0);
97+
-webkit-background-clip: text;
98+
-webkit-text-fill-color: transparent;
99+
background-size: 200%;
100+
animation: gradientShift 4s ease infinite;
101+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
102+
position: relative;
103+
}
104+
105+
@keyframes gradientShift {
106+
0% {
107+
background-position: 0% center;
108+
}
109+
110+
50% {
111+
background-position: 100% center;
112+
}
113+
114+
100% {
115+
background-position: 0% center;
116+
}
117+
}
118+
</style>
119+
</head>
120+
121+
<body class="min-h-screen font-mono bg-zinc-900 text-zinc-100 px-6 py-12">
122+
<main class="max-w-4xl mx-auto space-y-24">
123+
<div class="grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
124+
<div>
125+
<h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">
126+
<span class="snazzy-text text-4xl md:text-5xl font-bold">Kanttiinit is open source?</span>🤯
127+
</h1>
128+
<p class="text-zinc-200 mb-6">
129+
Help us build it. It's used by thousands of students
130+
every day in the Greater Helsinki area.
131+
</p>
132+
<p class="text-zinc-200 mb-6">
133+
Do you know <span class="accent-orange">Svelte</span>?
134+
Or maybe you're a
135+
<span class="accent-light-blue">React</span> wizard?
136+
Wanna learn <span class="accent-blue">Flutter</span>? Or
137+
build an
138+
<span class="accent-green">OSM tileserver</span>?
139+
</p>
140+
<a href="https://github.com/Kanttiinit" target="_blank"
141+
class="inline-block px-5 py-3 bg-green-500 hover:bg-green-400 text-black font-semibold rounded-lg transition"
142+
style="background-color: var(--kanttiinit-green)">
143+
Join the project
144+
</a>
145+
<a href="https://t.me/+zrcorCUwBW5iOTNk" target="_blank"
146+
class="inline-block px-5 py-3 bg-zinc-800 hover:bg-zinc-700 text-white font-semibold rounded-lg transition">
147+
Chat with us
148+
</a>
149+
</div>
150+
151+
<div class="bg-zinc-800 rounded-xl p-4 shadow-lg text-sm leading-relaxed font-mono">
152+
<div class="typewriter overflow-hidden">
153+
<div class="line text-green-400">
154+
$ npx drink-coffee --with kanttiinit
155+
</div>
156+
<div class="line text-zinc-300">
157+
☕ Drinking coffee with kanttiinit hackers... ✅
158+
<span>Ready! Enjoy your productivity boost.</span>
159+
</div>
160+
<div class="line text-zinc-300">
161+
✔ Help build critical infra for students?<br /><span>› Yes</span>
162+
</div>
163+
<div class="line text-zinc-300">
164+
✔ Get mentored by professionals?<br /><span>› Yes</span>
165+
</div>
166+
<div class="line text-zinc-300">
167+
✔ Level up your coding <span class="xp-highlight">XP</span> by contributing?<br /><span>› Yes</span>
168+
</div>
169+
</div>
170+
</div>
171+
</div>
172+
173+
<section class="text-zinc-300 space-y-4">
174+
<h2 class="text-2xl md:text-3xl font-semibold text-zinc-100">
175+
The Story So Far
176+
</h2>
177+
<p class="leading-relaxed">
178+
Wow, this is actually the first marketing that we've ever done.
179+
</p>
180+
<p class="leading-relaxed">
181+
In 2015, Otaniemi had no good website for finding the
182+
tastiest lunch between all the different canteens. We built
183+
it for our own use and shared the <a class="accent-blue text-link" href="https://kanttiinit.fi"
184+
target="_blank">link</a> with our friends.
185+
<br /><br />
186+
It solved a problem we ran into every day — and others
187+
noticed too. We always wanted it to be free and open source,
188+
forever, and will keep it that way.
189+
</p>
190+
<p class="leading-relaxed">
191+
Fast forward to 2025, it's used by thousands of students
192+
every day.
193+
</p>
194+
</section>
195+
<section class="text-zinc-300 space-y-4">
196+
<h2 class="text-2xl md:text-3xl font-semibold text-zinc-100">
197+
Tech Stack
198+
</h2>
199+
<p class="leading-relaxed">
200+
It's a mix of different technologies. We have a trusty
201+
<span class="accent-green">NodeJS</span> backend, a
202+
<span class="accent-blue-gray">PostgreSQL</span> database,
203+
and a <span class="accent-blue">SolidJS</span> frontend.
204+
</p>
205+
<p class="leading-relaxed">
206+
We've always chosen the tech that is relevant and that we
207+
want to learn. If you want to have an excuse to learn
208+
something new, pick what you want to learn and start
209+
hacking. You can contact us if you need help or mentoring.
210+
</p>
211+
<p class="leading-relaxed">
212+
<span class="accent-orange">SvelteKit</span> and static
213+
(pre)rendering is something we are playing with to learn and
214+
maybe modernise our app, if only we had time...
215+
</p>
216+
<div class="grid grid-cols-3 gap-6 max-w-md mx-auto p-6 rounded-2xl">
217+
<div class="flex flex-col items-center">
218+
<img src="https://www.solidjs.com/img/logo/without-wordmark/logo.svg" alt="SolidJS"
219+
class="h-12 mb-2" />
220+
<a href="https://www.solidjs.com/" target="_blank" class="text-white text-link text-sm">SolidJS</a>
221+
</div>
222+
223+
<div class="flex flex-col items-center">
224+
<img src="https://upload.wikimedia.org/wikipedia/commons/2/29/Postgresql_elephant.svg"
225+
alt="PostgreSQL" class="h-12 mb-2" />
226+
<a href="https://www.postgresql.org/" target="_blank"
227+
class="text-white text-link text-sm">PostgreSQL</a>
228+
</div>
229+
230+
<div class="flex flex-col items-center">
231+
<img src="https://upload.wikimedia.org/wikipedia/commons/6/67/NodeJS.png?20130122160021"
232+
alt="NodeJS" class="h-12 mb-2" />
233+
<a href="https://nodejs.org/en" target="_blank" class="text-white text-link text-sm">NodeJS</a>
234+
</div>
235+
</div>
236+
<div class="grid grid-cols-3 gap-6 max-w-md mx-auto p-6 rounded-2xl">
237+
<div class="flex flex-col items-center">
238+
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Svelte_Logo.svg/996px-Svelte_Logo.svg.png"
239+
alt="SvelteKit" class="h-12 mb-2" />
240+
<a href="https://svelte.dev/" target="_blank" class="text-white text-link text-sm">SvelteKit</a>
241+
</div>
242+
</div>
243+
</section>
244+
<section class="text-zinc-300 space-y-4">
245+
<h2 class="text-2xl md:text-3xl font-semibold text-zinc-100">
246+
The Team
247+
</h2>
248+
<p class="leading-relaxed">
249+
Together we have over 40 years of coding experience (no cap,
250+
👴) from startups and slightly bigger companies,
251+
both outside and inside Finland. Sprinkled with some
252+
experience from hackathons etc, also winning some...
253+
</p>
254+
<p class="leading-relaxed">
255+
Our backgrounds are in Aalto University, studying
256+
<span class="text-blue-300">Computer Science</span>
257+
and
258+
<span class="text-red-300">Information Networks</span>
259+
with some
260+
<span class="text-yellow-300">Arts</span> apparently in
261+
there as well.
262+
</p>
263+
<p class="leading-relaxed">
264+
We've all graduated, in one way or another, and are in the
265+
industry now. We've been working on this project for long
266+
and don't want to see it die, but also don't really have
267+
time to work on it.
268+
</p>
269+
</section>
270+
<section class="text-zinc-300 space-y-4">
271+
<h2 class="text-2xl md:text-3xl font-semibold text-zinc-100">
272+
What You Can Get
273+
</h2>
274+
<p class="leading-relaxed">
275+
By contributing to the project you can code with us, discuss
276+
with us, learn from us. And perhaps we can learn something
277+
from you. We're very open to mentoring junior developers who want to learn while doing.
278+
</p>
279+
<p class="leading-relaxed">
280+
We want to continue giving to the community and help like-minded
281+
students and perhaps someday give away the project to
282+
the student union or something if nothing else works.
283+
</p>
284+
<p class="leading-relaxed font-bold">
285+
We need help for supporting new restaurants, fixing parsers, maybe making some parsing more automagical,
286+
polish the UX, fix bugs, imagine new features.
287+
<br> <br>
288+
Talk to us: join our <a href="https://t.me/+zrcorCUwBW5iOTNk" target="_blank"
289+
class="text-blue-400 text-link">Telegram group</a>
290+
or connect with us on <a href="https://github.com/orgs/Kanttiinit/people" target="_blank"
291+
class="text-blue-400 text-link">GitHub</a> if that works for you.
292+
</p>
293+
</section>
294+
</main>
295+
296+
<footer class="text-center text-zinc-400 mt-24 text-sm">
297+
<p>
298+
Made with ❤️ by
299+
<a href="https://kanttiinit.fi" class="kanttiinit-green hover:underline">
300+
Kanttiinit
301+
<img src="./logo.png" height="24px" width="24px" style="
302+
display: inline;
303+
margin-bottom: 4px;
304+
margin-left: -6px;
305+
" />
306+
</a>
307+
</p>
308+
</footer>
309+
</body>
310+
311+
</html>

‎logo.png‎

1.39 MB
Loading

0 commit comments

Comments
 (0)