Skip to content

feat(ui): showcase github projects and link service cards #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Adiker merged 1 commit into from
Sep 27, 2026
Merged

feat(ui): showcase github projects and link service cards #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 16 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ server.

### Features

- Responsive service tabs with a compact status overview and one focused detail card
- Responsive service tabs with a compact status overview and one focused detail card; the entire card links to services with a web interface
- Live dashboard showing every service's status and latency as measured by this browser
- Collapsed browser-local history of the last 24 measurements with mini timelines and averages
- Health checks for all configured services
Expand All @@ -57,6 +57,7 @@ server.
- Dark / Light / OLED themes
- Always-visible client context in the header with OS, browser, and device detection
- Keyboard-accessible tabs and visible focus states
- Responsive GitHub project cards for the four profile-pinned repositories and the LiMusic fork; each whole card is a link

### Project Structure

Expand Down Expand Up @@ -135,6 +136,12 @@ User preferences are stored in `localStorage`:
- `adiker.lang`
- `adiker.statusHistory.v1`

The projects section is a static list in `index.html`, with EN/PL descriptions
in `js/app.js`. It links to the four repositories pinned on the
[Adiker GitHub profile](https://github.com/Adiker) and the
[LiMusic fork](https://github.com/Adiker/limusic). Update the list manually when
the profile pins change; the page makes no GitHub API requests.

### Accessibility

- Skip link to main content
Expand Down Expand Up @@ -211,7 +218,7 @@ albo dowolnym serwerze statycznym.

### Funkcje

- Responsywne zakładki usług z kompaktowym podsumowaniem i jednym aktywnym panelem szczegółów
- Responsywne zakładki usług z kompaktowym podsumowaniem i jednym aktywnym panelem szczegółów; cała karta prowadzi do usług z interfejsem WWW
- Dashboard pokazujący status i opóźnienie każdej usługi, mierzone z tej przeglądarki
- Zwijana lokalna historia ostatnich 24 pomiarów z mini-timeline i średnim opóźnieniem
- Health checki dla wszystkich skonfigurowanych usług
Expand All @@ -222,6 +229,7 @@ albo dowolnym serwerze statycznym.
- Motywy Dark / Light / OLED
- Zawsze widoczne w nagłówku informacje o kliencie: OS, przeglądarka i typ urządzenia
- Zakładki dostępne z klawiatury i czytelne stany focus
- Responsywne karty GitHub z czterema przypiętymi repozytoriami i forkiem LiMusic; cała karta jest linkiem

### Struktura projektu

Expand Down Expand Up @@ -299,6 +307,12 @@ Preferencje użytkownika zapisywane są w `localStorage`:
- `adiker.lang`
- `adiker.statusHistory.v1`

Sekcja projektów jest statyczną listą w `index.html`, a opisy EN/PL znajdują
się w `js/app.js`. Prowadzi do czterech repozytoriów przypiętych na
[profilu Adiker w GitHubie](https://github.com/Adiker) oraz do
[forka LiMusic](https://github.com/Adiker/limusic). Po zmianie przypiętych
repozytoriów należy ręcznie zaktualizować listę; strona nie odpytuje API GitHuba.

### Dostępność

- Link skip do głównej treści
Expand Down
256 changes: 227 additions & 29 deletions css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -774,10 +774,6 @@ main {
font-weight: 700;
}

.service-actions {
flex: 0 0 auto;
}

a {
color: var(--acc);
text-decoration: none;
Expand All @@ -788,40 +784,202 @@ a:hover {
text-decoration: underline;
}

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 46px;
padding: 11px 17px;
border: 1px solid color-mix(in srgb, var(--service-accent) 50%, transparent);
border-radius: 14px;
color: #fff;
background: linear-gradient(135deg, color-mix(in srgb, var(--service-accent) 82%, #0a2237), var(--service-accent));
box-shadow: 0 12px 28px color-mix(in srgb, var(--service-accent) 18%, transparent);
.card.active-card {
border-color: color-mix(in srgb, var(--service-accent) 32%, var(--line));
}

.service-section-link {
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.service-section-link .j-wrap {
padding-right: 24px;
}

.service-card-link {
position: absolute;
z-index: 1;
inset: 0;
border-radius: inherit;
}

.service-card-link::after {
content: "↗";
position: absolute;
top: 24px;
right: 26px;
color: var(--service-accent);
font-size: 1.15rem;
font-weight: 800;
line-height: 1;
opacity: .8;
transition: opacity .18s ease, transform .18s ease;
}

.service-section-link:hover,
.service-section-link:focus-within {
border-color: color-mix(in srgb, var(--service-accent) 52%, var(--line));
box-shadow: var(--shadow), inset 0 1px rgba(255, 255, 255, .025);
}

.service-section-link:hover {
transform: translateY(-2px);
}

.service-card-link:hover::after,
.service-card-link:focus-visible::after {
opacity: 1;
transform: translate(2px, -2px);
}

.service-card-link:focus-visible {
outline: 2px solid var(--service-accent);
outline-offset: -3px;
}

.projects-section {
margin-top: 24px;
}

.projects-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 20px;
margin-bottom: 20px;
}

.projects-heading h2 {
margin: 2px 0 2px;
font-size: clamp(1.35rem, 2.5vw, 1.8rem);
letter-spacing: -.025em;
}

.projects-heading .tag {
margin: 0;
}

.projects-eyebrow,
.project-kind {
color: var(--acc);
font-size: .68rem;
font-weight: 800;
letter-spacing: .12em;
}

.projects-eyebrow {
margin: 0;
}

.projects-profile {
flex: 0 0 auto;
padding: 8px 0;
font-size: .85rem;
font-weight: 750;
}

.projects-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}

.project-card {
display: flex;
align-items: flex-start;
gap: 16px;
min-width: 0;
padding: 19px;
border: 1px solid var(--line);
border-radius: 16px;
color: var(--fg);
background: linear-gradient(145deg, var(--surface-strong), var(--surface));
text-decoration: none;
transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.btn svg path {
stroke: currentColor;
.project-card::after {
content: "↗";
flex: 0 0 auto;
margin-left: auto;
color: var(--acc);
font-size: 1rem;
font-weight: 800;
line-height: 1;
opacity: .75;
transition: opacity .18s ease, transform .18s ease;
}

.btn:hover {
filter: brightness(1.08);
.project-card:hover {
border-color: color-mix(in srgb, var(--acc) 45%, var(--line));
box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
text-decoration: none;
transform: translateY(-2px);
}

.btn:focus-visible {
outline: 0;
box-shadow: var(--ring), 0 12px 28px color-mix(in srgb, var(--service-accent) 18%, transparent);
.project-card:focus-visible {
outline: 2px solid var(--acc);
outline-offset: 3px;
}

.project-card:hover::after,
.project-card:focus-visible::after {
opacity: 1;
transform: translate(2px, -2px);
}

.card.active-card {
border-color: color-mix(in srgb, var(--service-accent) 32%, var(--line));
.project-featured {
grid-column: 1 / -1;
padding: 24px;
background:
radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--acc) 18%, transparent), transparent 42%),
linear-gradient(145deg, var(--surface-strong), var(--surface));
}

.project-icon {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 48px;
height: 48px;
border: 1px solid color-mix(in srgb, var(--acc) 25%, var(--line));
border-radius: 14px;
color: var(--acc);
background: color-mix(in srgb, var(--acc) 10%, var(--surface));
font-size: 1.65rem;
font-weight: 700;
line-height: 1;
}

.project-icon-music { color: #c9a5ff; }
.project-icon-volume { color: #78c4ff; }
.project-icon-weather { color: #6fdec6; }
.project-icon-android { color: #a8db78; }
.project-icon-web { color: #f5bd7d; font-size: 1rem; }

.project-content {
display: grid;
flex: 1 1 auto;
justify-items: start;
gap: 5px;
min-width: 0;
}

.project-name {
font-size: 1.08rem;
font-weight: 800;
line-height: 1.3;
overflow-wrap: anywhere;
}

.project-featured .project-name {
font-size: 1.35rem;
}

.project-description {
color: var(--mut);
font-size: .88rem;
line-height: 1.5;
}

footer {
Expand Down Expand Up @@ -894,6 +1052,16 @@ footer {
background: rgba(246, 249, 252, .88);
}

.theme-light .project-card {
background: linear-gradient(145deg, #fff, var(--surface));
}

.theme-light .project-featured {
background:
radial-gradient(circle at 92% 10%, rgba(14, 165, 233, .12), transparent 42%),
linear-gradient(145deg, #fff, var(--surface));
}

/* OLED theme */
.theme-oled {
--bg: #000;
Expand Down Expand Up @@ -924,6 +1092,11 @@ footer {
background: #000;
}

.theme-oled .project-card,
.theme-oled .project-featured {
background: #000;
}

/* Toggle animation */
#theme-toggle .emoji {
display: inline-block;
Expand Down Expand Up @@ -1071,6 +1244,31 @@ footer {
border-radius: 18px;
}

.projects-heading {
align-items: flex-start;
flex-direction: column;
gap: 8px;
}

.projects-grid {
grid-template-columns: 1fr;
}

.project-featured {
grid-column: auto;
}

.project-card,
.project-featured {
padding: 16px;
}

.project-icon {
width: 42px;
height: 42px;
font-size: 1.4rem;
}

.j-wrap {
align-items: stretch;
flex-direction: column;
Expand Down Expand Up @@ -1099,9 +1297,9 @@ footer {
font-size: 1.3rem;
}

.service-actions,
.btn {
width: 100%;
.service-card-link::after {
top: 18px;
right: 18px;
}

footer {
Expand Down
Loading
Loading