SKN Artefakty - Strona WWW

Strona internetowa SKN Artefakty zbudowana w oparciu o Vite + React + TypeScript.

Wymagania

• Node.js 18+ (zalecane 20+)
• npm (wraz z Node)

Uruchomienie lokalne

1. Instalacja zależności:

npm install

2. Tryb developerski:

npm run dev

3. Build produkcyjny:

npm run build

4. Podgląd builda:

npm run preview

Najważniejsze katalogi

• src/pages/ - podstrony (Home / Projects / Events / Contact)
• src/components/ - komponenty UI
• src/styles/ - style w *.module.css
• src/data/ - dane do sekcji Projekty i Wydarzenia (edytujesz je ręcznie)
• src/assets/images/ - grafiki dla projektów i wydarzeń

Jak dodać projekt (Projects)

Projekty są trzymane w pliku: src/data/projects.ts.

Krok 1 - dodaj obrazek

1. Wrzuć miniaturę projektu do: src/assets/images/projects-images/
2. Najlepiej użyć formatu .jpg/.png i sensownej nazwy pliku (np. my-project.jpg).

Krok 2 - zaimportuj obrazek w projects.ts

Na górze pliku dopisz import, np.:

import imgMyProject from "../assets/images/projects-images/my-project.jpg";

Krok 3 - dodaj wpis do tablicy projects

W tej samej kolejności/konwencji dopisz nowy obiekt w export const projects: Project[] = [ ... ].

Minimalny przykład:

{
	id: "my-project",
	title: "My Project",
	description: "Krótki opis widoczny na kafelku.",
	status: "GRA",
	genre: "Platformer",
	authors: "Imię Nazwisko, Imię Nazwisko",
	projectLink: "https://example.com",
	image: imgMyProject,
	date: "2026-04-28",
},

Pola i konwencje

• id (wymagane)

  • Musi być unikalne.
  • Używane w URL: /projects/:id.
  • Zalecany format: kebab-case.

• status, genre, authors

  • To są stringi rozdzielane przecinkami.
  • UI zamienia je na „tagi”/listy poprzez split(','), więc wpisuj np. "GRA, Game Jam".
  • Dla autorów używaj formatu: "Osoba 1, Osoba 2".

• projectLink

  • Link do itch/strony/pobrania.
  • Jeśli projekt ma status Work-in-Progress (w dowolnym miejscu w status, wielkość liter bez znaczenia), na kafelku zamiast przycisku "ZAGRAJ" pokaże się "FAZA ROZWOJU".

• date

  • Wpływa na sekcję „najnowsze projekty” na stronie głównej.
  • Używaj formatu ISO: YYYY-MM-DD (np. 2026-04-28).

Opcjonalnie: opis długi, WebGL, galeria

Typ Project wspiera dodatkowe pola:

• longDescription - dłuższy opis na stronie szczegółów (/projects/:id).
• webGLUrl - URL do buildu WebGL (np. itch.io embed). Jeśli jest ustawiony, pojawi się iframe.
• screenshots - tablica stringów ze ścieżkami/URL do screenów.

Jeśli screeny trzymasz lokalnie, dodaj je do src/assets/images/projects-images/, zaimportuj (tak jak miniaturę) i użyj w screenshots: [img1, img2].

Jak dodać wydarzenie (Events)

Wydarzenia są trzymane w pliku: src/data/events.ts.

Krok 1 - dodaj obrazek

1. Wrzuć grafikę wydarzenia do: src/assets/images/events-images/
2. W projekcie jest przyjęta konwencja nazw plików jak data: YYYY-MM-DD.jpg (np. 2026-04-28.jpg).

Krok 2 - zaimportuj obrazek w events.ts

Na górze pliku dopisz import, np.:

import img20260428 from '../assets/images/events-images/2026-04-28.jpg'

Krok 3 - dodaj wpis do tablicy events

Dodaj nowy obiekt w export const events: EventItem[] = [ ... ].

Minimalny przykład:

{
	id: '2026-04-28-nazwa-wydarzenia',
	title: 'Nazwa wydarzenia',
	description: 'Opis wydarzenia (możesz używać wielu linii).',
	date: '2026-04-28',
	place: 'WFiIS, Łódź',
	image: img20260428,
	tag: 'INFORMATION',
	instagram: 'https://www.instagram.com/p/.../',
	facebook: 'https://www.facebook.com/photo?...',
	calendar: false,
}

Pola i konwencje

• id (wymagane)

  • Musi być unikalne.
  • Używane w URL: /events/:id.
  • W praktyce najlepiej: YYYY-MM-DD-jakas-nazwa.

• description

  • Na stronie szczegółów (/events/:id) tekst jest dzielony po \n na akapity.
  • Jeśli chcesz akapity, wstawiaj nowe linie w stringu (np. template string z backtickami).

• tag

  • Krótka etykieta widoczna w kafelku (np. INFORMATION, MEETING, WORKSHOP).

• instagram, facebook

  • Jeśli podasz link, na stronie szczegółów pojawią się przyciski do sociali.

Dodawanie do kalendarza (opcjonalne)

Jeśli ustawisz calendar: true, w kafelku wydarzenia pojawi się przycisk dodania do kalendarza. Wtedy uzupełnij też:

• startDate (format YYYY-MM-DD) - wymagane, żeby kalendarz miał poprawną datę
• endDate (format YYYY-MM-DD) - opcjonalne (domyślnie takie jak startDate)
• startTime / endTime (format HH:MM, np. 18:00)
• location - opcjonalne; jeśli pominięte, jest ustawiany domyślny adres wydziału

Autorstwo

• Jakub Gorządek - programowanie
• Ola Stopka - UI design