Skip to content

Commit b5d1165

Browse files
DevLabStudyDevLabStudy
authored
Add Garmin apps overview page
1 parent 7c5b573 commit b5d1165

1 file changed

Lines changed: 192 additions & 0 deletions

File tree

‎garmin.html‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
---
2+
layout: default
3+
title: Garmin Apps
4+
---
5+
6+
<style>
7+
.app-container {
8+
max-width: 900px;
9+
margin: 20px auto;
10+
}
11+
.app-header {
12+
margin-bottom: 40px;
13+
display: flex;
14+
justify-content: space-between;
15+
align-items: flex-start;
16+
flex-wrap: wrap;
17+
gap: 15px;
18+
}
19+
.app-title {
20+
font-size: 3rem;
21+
font-weight: 900;
22+
margin: 0 0 15px 0;
23+
font-family: 'Inter', sans-serif;
24+
letter-spacing: -1px;
25+
}
26+
.app-desc {
27+
color: var(--text-muted);
28+
font-size: 1.05rem;
29+
line-height: 1.7;
30+
}
31+
.status-badge {
32+
font-family: 'JetBrains Mono', monospace;
33+
font-size: 0.75rem;
34+
background: rgba(255, 94, 0, 0.15);
35+
color: var(--accent-contrast);
36+
padding: 6px 14px;
37+
border-radius: 20px;
38+
border: 1px solid rgba(255, 94, 0, 0.3);
39+
font-weight: 800;
40+
text-transform: uppercase;
41+
letter-spacing: 1px;
42+
}
43+
.garmin-grid {
44+
display: grid;
45+
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
46+
gap: 25px;
47+
margin-bottom: 30px;
48+
}
49+
.garmin-card {
50+
background: var(--card-bg);
51+
border: 1px solid var(--border);
52+
border-radius: 12px;
53+
padding: 30px;
54+
backdrop-filter: blur(10px);
55+
position: relative;
56+
overflow: hidden;
57+
display: flex;
58+
flex-direction: column;
59+
justify-content: space-between;
60+
transition: 0.3s;
61+
}
62+
.garmin-card::before {
63+
content: '';
64+
position: absolute;
65+
top: 0; left: 0; width: 4px; height: 100%;
66+
background: var(--accent-blue);
67+
}
68+
.garmin-card:hover {
69+
border-color: var(--accent-blue);
70+
transform: translateY(-3px);
71+
background: rgba(10, 15, 25, 0.85);
72+
}
73+
.card-meta {
74+
display: flex;
75+
gap: 10px;
76+
margin-bottom: 15px;
77+
font-family: 'JetBrains Mono', monospace;
78+
font-size: 0.7rem;
79+
}
80+
.tech-tag {
81+
background: rgba(0, 210, 255, 0.1);
82+
color: var(--accent-blue);
83+
padding: 3px 8px;
84+
border-radius: 4px;
85+
border: 1px solid rgba(0, 210, 255, 0.2);
86+
}
87+
.license-tag {
88+
background: rgba(255, 255, 255, 0.05);
89+
color: var(--text-muted);
90+
padding: 3px 8px;
91+
border-radius: 4px;
92+
border: 1px solid rgba(255, 255, 255, 0.1);
93+
}
94+
.btn-github {
95+
display: inline-flex;
96+
align-items: center;
97+
gap: 10px;
98+
background: rgba(255, 255, 255, 0.05);
99+
color: var(--text-main);
100+
border: 1px solid rgba(255, 255, 255, 0.2);
101+
padding: 10px 20px;
102+
font-weight: 800;
103+
font-size: 0.8rem;
104+
border-radius: 6px;
105+
text-transform: uppercase;
106+
font-family: 'JetBrains Mono', monospace;
107+
transition: 0.2s;
108+
text-decoration: none;
109+
margin-top: 20px;
110+
width: fit-content;
111+
}
112+
.btn-github:hover {
113+
background: var(--accent-blue);
114+
color: #030305;
115+
border-color: var(--accent-blue);
116+
transform: translateY(-2px);
117+
}
118+
.legal-note {
119+
background: rgba(255, 94, 0, 0.05);
120+
border: 1px solid rgba(255, 94, 0, 0.2);
121+
border-radius: 8px;
122+
padding: 20px;
123+
margin-top: 30px;
124+
font-size: 0.85rem;
125+
color: var(--text-muted);
126+
font-family: 'JetBrains Mono', monospace;
127+
line-height: 1.6;
128+
}
129+
.legal-note span {
130+
color: var(--accent-contrast);
131+
font-weight: 700;
132+
}
133+
134+
@media (max-width: 768px) {
135+
.garmin-grid { grid-template-columns: 1fr; }
136+
}
137+
</style>
138+
139+
<div class="app-container">
140+
<div class="app-header">
141+
<div>
142+
<span class="section-tag">WEARABLE DEVELOPMENT</span>
143+
<h1 class="app-title">Garmin Connect Apps</h1>
144+
<p class="app-desc">
145+
Autorskie aplikacje i tarcze zegarków (Watchfaces) stworzone na platformę Garmin w języku Monkey C.
146+
</p>
147+
</div>
148+
<div>
149+
<span class="status-badge">⚡ In Work</span>
150+
</div>
151+
</div>
152+
153+
<div class="garmin-grid">
154+
<!-- Garmin To-Do List -->
155+
<div class="garmin-card">
156+
<div>
157+
<div class="card-meta">
158+
<span class="tech-tag">Monkey C</span>
159+
<span class="license-tag">MIT License</span>
160+
</div>
161+
<h3 style="margin: 0 0 10px 0; font-family: 'JetBrains Mono', monospace; color: #fff; font-size: 1.1rem;">Garmin-to-do-list</h3>
162+
<p style="color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; margin-bottom: 20px;">
163+
Source code of my app to do list on Garmin. Lekka aplikacja do zarządzania listą zadań bezpośrednio na nadgarstku.
164+
</p>
165+
</div>
166+
<a href="https://github.com/DevLabStudy/Garmin-to-do-list" target="_blank" class="btn-github">
167+
Kod źródłowy (GitHub) ↗
168+
</a>
169+
</div>
170+
171+
<!-- Garmin Watchface -->
172+
<div class="garmin-card">
173+
<div>
174+
<div class="card-meta">
175+
<span class="tech-tag">Monkey C</span>
176+
<span class="license-tag">MIT License</span>
177+
</div>
178+
<h3 style="margin: 0 0 10px 0; font-family: 'JetBrains Mono', monospace; color: #fff; font-size: 1.1rem;">Garmin-watchface</h3>
179+
<p style="color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; margin-bottom: 20px;">
180+
Source code of my own garmin watch face. Autorska tarcza zegarka projektowana z myślą o czytelności i niskim zużyciu energii.
181+
</p>
182+
</div>
183+
<a href="https://github.com/DevLabStudy/Garmin-watchface" target="_blank" class="btn-github">
184+
Kod źródłowy (GitHub) ↗
185+
</a>
186+
</div>
187+
</div>
188+
189+
<div class="legal-note">
190+
<span>// INFORMACJA FORMALNA:</span> Projekty na urządzenia Garmin (w tym tarcze zegarków oraz aplikacje narzędziowe) są rozwijane hobbystycznie w ramach ekosystemu Connect IQ przez Tobiasza Kajzera.
191+
</div>
192+
</div>

0 commit comments

Comments
 (0)