diff --git a/.dockerignore b/.dockerignore index 2852939..b1d3674 100644 --- a/.dockerignore +++ b/.dockerignore @@ -10,3 +10,5 @@ backups logs docs/reference/*.docx docs/reference/*.pdf +docs/design/stitch-reference +docs/design/validation diff --git a/docs/design/STITCH_INTEGRATION_PLAN.md b/docs/design/STITCH_INTEGRATION_PLAN.md new file mode 100644 index 0000000..5531ee4 --- /dev/null +++ b/docs/design/STITCH_INTEGRATION_PLAN.md @@ -0,0 +1,55 @@ +# Stitch-integratieplan + +## Doel en bronhiërarchie + +Deze integratie vertaalt het Stitch-project **VacatureRadar Intelligence Cockpit** naar de bestaande Django-applicatie. De functionele repository blijft leidend voor routes, data, beveiliging, gebruikersscope en acties. Stitch levert de visuele taal en compositie, niet de domeinwaarheid. + +De volledige ontvangen referentie staat in `docs/design/stitch-reference/`. Deze map en de validatiescreenshots zijn uitgesloten van de productiecontainer via `.dockerignore`; er worden geen externe Tailwind-, font-, icoon-, afbeelding- of JavaScript-CDN's aan de applicatie toegevoegd. + +## Visuele richting + +- Donkere cockpit als standaard: diep marineblauw, tonale panelen, fijne slate-randen, signaalcyaan voor primaire interactie, emerald voor aantoonbaar gezonde status en koraal/amber voor fouten of aandacht. +- Een volwaardige lichte variant met dezelfde semantische tokens en contrastverhoudingen. +- Systeemfonts als lokale, snelle fallback voor Geist/Inter; monospace systeemfonts voor metadata. Geen netwerkfonts. +- Een vaste desktopzijbalk en compacte utilitybar, op mobiel een toegankelijke uitschuifnavigatie met overlay en focusbehoud. +- Dichte informatieweergave met een consistente 8px-ritmiek, zonder decoratieve data die niet uit het domeinmodel komt. + +## Schermmapping + +| Stitch-scherm | Django-route/template | Integratie | Bewuste aanpassing | +| --- | --- | --- | --- | +| Dashboard Overzicht | `/`, `dashboard/today.html` | KPI-strip, sterke-matchkaarten, bronstatus en snelle route-acties | Geen verzonnen trendgrafiek, notificaties of scannerstatus; alleen actuele databasecijfers. | +| Nieuwe Matches | `/jobs/`, `jobs/list.html` | Filterwerkbalk en responsive vacature-intelligentielijst | Geen client-side master/detail-SPA; detail blijft een eigen, deelbare route. | +| Vacature Intelligentie Detail | `/jobs//`, `jobs/detail.html` | Scorehero, componentanalyse, bronhistorie en sticky acties | Geen quick/direct apply, logo of kaart zonder betrouwbare brondata. Externe vacature opent alleen expliciet in een nieuw tabblad. | +| Sollicitatie Pipeline | `/jobs/applications/`, `applications/list.html` | Statuskolommen op breed scherm, lineaire kaarten op smal scherm | Alleen bestaande dossierstatussen en gebruikersgescopeerde data. Geen drag-and-drop zonder backendcontract. | +| Zoekprofiel Editor | `/profiles/` en `/profiles//` | Profielsummary, gegroepeerde editor, hulp- en risicotekst | Geen live scorepreview die servervalidatie kan tegenspreken. JSON-velden blijven functioneel maar krijgen duidelijke uitleg. | +| Bronnenbeheer & Gezondheid | `/sources/`, `sources/list.html` | KPI's, importpaneel, bronkaarten, uitklapbare runinformatie en bulkacties | Bestaande policy-, SSRF-, rate-limit- en CSRF-flows blijven intact. Geen algemene “gezond”-claim zonder readinessdata. | +| Automatisering Centrum | `/system/`, `system/status.html` | Readiness, echte bron-/vacaturestatus en veilige beheeropdrachten | Geen gefingeerde worker uptime, latency, cronprogressie of logregels. | +| Activiteitenlogboek | geen zelfstandige route | Recente, betrouwbare gebruikersactiviteit wordt op dashboard/dossiers getoond waar het model die al bezit | Geen samengestelde auditfeed: de huidige modellen hebben geen uniform, volledig gebruikersgescopeerd eventcontract. Dit wordt niet geforceerd. | +| Werkgevers Intelligentie | geen zelfstandige route | Werkgever blijft context op vacature- en sollicitatiekaarten | Geen “intelligence”-pagina zolang contact-, reputatie- en aggregatievelden niet betrouwbaar bestaan; dit voorkomt fictieve inzichten. | + +## Componenten en templatestructuur + +- `base.html`: skiplink, merkblok, utilitybar, desktop/mobile navigatie, gebruikerspaneel, meldingen en themawisselaar. +- `templates/components/`: herbruikbare SVG-iconen, paginakop, lege toestand, statuschip en vacaturekaart waar template-includes de duplicatie daadwerkelijk verlagen. +- `static/css/app.css`: uitsluitend semantische tokens en componentklassen; dark/light via `data-theme`, met systeemvoorkeur als fallback. +- `static/js/app.js`: alleen navigatie, details-disclosures en themaopslag. Alle kernacties blijven normale links of formulieren. + +## Functionele en veiligheidsgrenzen + +- Alle mutaties blijven POST + CSRF en gebruiken de bestaande services/views. +- Sanitized vacature-HTML blijft het enige HTML-fragment dat met `safe` wordt gerenderd. +- Externe URL's behouden `noopener noreferrer nofollow` en worden nooit automatisch geopend. +- Bronimport, retry en bulkreview veranderen inhoudelijk niet. +- Er worden geen secrets, persoonsgegevens, nepstatistieken, externe assets of nieuwe productieafhankelijkheden toegevoegd. + +## Responsive en toegankelijkheid + +- Validatiebreedtes: 1440×900, 1280×800, 1024×768, 768×1024, 390×844 en 360×800. +- Eén `h1` per pagina, semantische landmarks, zichtbare focus, toetsenbordbediening, 44px touchdoelen waar praktisch, tekstlabels naast statuskleur en een robuuste skiplink. +- Tabellen schakelen op smalle schermen naar kaartachtige rijen of blijven gecontroleerd horizontaal scrolbaar wanneer kolomvergelijking essentieel is. +- Animatie is subtiel en volledig uitgeschakeld bij `prefers-reduced-motion`. + +## Verificatie + +Na elke implementatiefase worden formattering, Ruff en relevante tests uitgevoerd. De afronding vereist `scripts/codex_verify.sh`, responsieve browserflows, console-/netwerkcontrole en screenshots per hoofdroute in beide thema's waar dat het ontwerp valideert. diff --git a/docs/design/stitch-reference/activiteitenlogboek/code.html b/docs/design/stitch-reference/activiteitenlogboek/code.html new file mode 100644 index 0000000..6bc8709 --- /dev/null +++ b/docs/design/stitch-reference/activiteitenlogboek/code.html @@ -0,0 +1,370 @@ + + + + + +VacatureRadar | Activiteit + + + + + + + + + + + +
+ +
+
+menu +

Activiteit

+
+
+ +notifications +account_circle +
+
+ +
+ +
+
+Filter Op +
+ + + + +
+
+
+ +Live Radar Monitoring +
+
+ +
+ +
+
+ +
+
+radar +
+
+
+

18 vacatures ontdekt

+10:42 • VANDAAG +
+

De radar heeft nieuwe matches geïdentificeerd op basis van je "Senior Developer" profiel bij diverse bronnen (LinkedIn, Indeed, StackOverflow).

+ +
+
+info +Besluitvorming +
+

Geïndexeerd vanuit 12 bronnen. 85% overlap met je huidige tech-stack en salarisindicatie. Verwerkt in 1.2ms.

+
+
+
+ +
+
+location_off +
+
+
+

7 uitgesloten wegens reistijd

+09:15 • VANDAAG +
+

Potentiële matches in Utrecht en Amersfoort zijn automatisch gefilterd om je focus te behouden.

+
+
+gavel +Logica +
+

Je profiel staat ingesteld op max. 45 min reistijd. De geschatte reistijd voor deze posities is 65+ min (OV) of 55+ min (auto in de spits).

+
+
+
+ +
+
+content_copy +
+
+
+

3 recruiter-kopieën samengevoegd

+GISTEREN • 18:30 +
+

De vacature voor "Lead Engineer" bij Booking.com werd door 3 bureaus geplaatst. We hebben deze geconsolideerd naar de bron.

+
+
+analytics +Analyse +
+

Match op tekstuele overlap (98.4%) en identieke functiebeschrijving. Alleen de meest recente posting is behouden in je overzicht.

+
+
+
+ +
+
+edit_calendar +
+
+
+

Deadline gewijzigd

+GISTEREN • 14:05 +
+

De sollicitatietermijn voor "Fullstack Architect" bij Adyen is verlengd met 2 weken.

+
+
+update +Tracking +
+

Gedetecteerd via wekelijkse herscan van de directe carrièrepagina. Je hebt nu tot 30 september om te reageren.

+
+
+
+
+
+ +
+
+Efficiëntie +
84%
+

Van ruwe data gefilterd vóór jouw review.

+
+
+Gescande Bronnen +
1.2k+
+

Continu monitoring van globale portalen.

+
+
+Bespaarde Tijd +
12u
+

Handmatig zoekwerk voorkomen deze week.

+
+
+
+
+ +
+ +
+ + + + \ No newline at end of file diff --git a/docs/design/stitch-reference/activiteitenlogboek/screen.png b/docs/design/stitch-reference/activiteitenlogboek/screen.png new file mode 100644 index 0000000..c65f357 Binary files /dev/null and b/docs/design/stitch-reference/activiteitenlogboek/screen.png differ diff --git a/docs/design/stitch-reference/automatisering_centrum/code.html b/docs/design/stitch-reference/automatisering_centrum/code.html new file mode 100644 index 0000000..b8deb41 --- /dev/null +++ b/docs/design/stitch-reference/automatisering_centrum/code.html @@ -0,0 +1,490 @@ + + + + + +VacatureRadar | Automation Center + + + + + + + + + + + + +
+
+
+search + +
+
+
+ + +
+
+SYSTEM LIVE +
+
+
+
+ +
+ +
+
+

Automation Center

+

Real-time status van uw AI-gedreven job radar.

+
+
+ + +
+
+ +
+
+
+Status +
+ +Systeem operationeel +
+
+
+
+Uptime +99.98% +
+
+
+Latentie +124ms +
+
+
+ + +
+
+ +
+

+route Verwerkingspipeline +

+
+ +
+explore +Ontdekken +
+ +
+cloud_download +Ophalen +
+ +
+data_exploration +Extraheren +
+ +
+schema +Normaliseren +
+ +
+difference +Dedupliceren +
+ +
+filter_alt +Filteren +
+ +
+psychology_alt +Analyseren +
+ +
+star +Rangschikken +
+
+
+ +
+
+language +

156

+

Bronnen gescand (24u)

+
+
+search +

412

+

Vacatures gevonden

+
+
+filter_list_off +

389

+

Gefilterd (geen match)

+
+
+
+verified +

23

+

Ter review beschikbaar

+
+
+ +
+ +
+
+

Bron Gezondheid

+
+152 OK +4 FAILED +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Bron NaamStatusLaatste ScanSuccesrate
+link + LinkedIn Alerts + + + Healthy + +14:23:0599.2%
+rss_feed + VDAB RSS + + + Healthy + +14:15:12100%
+apartment + Ziekenhuis Hasselt Carrière + + + Failed + +13:58:440.0%
+public + Indeed Search API + + + Healthy + +14:02:1198.5%
+link + Monsterboard Traineeships + + + Healthy + +13:45:00100%
+
+
+ +
+
+ +
+
+

+terminal Technische Logs +

+
+
+
+

[14:30:12] INFO Pipeline gestart voor 'LinkedIn'

+
+
+

[14:30:15] DATA 12 nieuwe URL's ontdekt

+
+
+

[14:30:22] INFO Extractie voltooid. 11/12 entiteiten herkend.

+
+
+ +expand_more + Toon normalisatie details (3) + +
+

[14:30:23] Mapped 'Senior Dev' to internal ID: JOB_042

+

[14:30:24] Location 'Brussel' matched to GEOS_BE_BRU

+

[14:30:25] Salary extracted: 4500-5200 EUR

+
+
+
+

[14:28:01] ERROR Verbinding verbroken: 'Hasselt API'

+

Reason: Timeout (5000ms)

+
+
+

[14:25:55] INFO Deduplicatie voltooid. 4 dubbelingen verwijderd.

+
+
+

[14:20:00] SYSTEM Dagelijkse backup succesvol afgerond.

+
+
+
+ + +
+
+
+
+ +
+
+© 2024 VacatureRadar AI +Service Status +Privacy Policy +
+
+ +memory CPU: 12% + + +database RAM: 4.2GB / 16GB + + +update V2.4.0-stable + +
+
+ + + \ No newline at end of file diff --git a/docs/design/stitch-reference/automatisering_centrum/screen.png b/docs/design/stitch-reference/automatisering_centrum/screen.png new file mode 100644 index 0000000..1a6dda2 Binary files /dev/null and b/docs/design/stitch-reference/automatisering_centrum/screen.png differ diff --git a/docs/design/stitch-reference/bronnenbeheer_gezondheid/code.html b/docs/design/stitch-reference/bronnenbeheer_gezondheid/code.html new file mode 100644 index 0000000..808d303 --- /dev/null +++ b/docs/design/stitch-reference/bronnenbeheer_gezondheid/code.html @@ -0,0 +1,486 @@ + + + + + +VacatureRadar - Bronnen & Source Health + + + + + + + + + + + + + + +
+ +
+
+

Bronbeheer

+

Beheer en monitor de actieve scan-endpoints van jouw radarprofiel.

+
+
+
+Actieve Bronnen +24 +
+
+Systeemstatus + + Gezond + + +
+
+
+ +
+ +
+
+
+
+mail +
+
+

LinkedIn Alerts

+
+Email Alert + +Laatste scan: 12 min geleden +
+
+
+
+
+Vacatures gevonden +142 +
+
+ +Gezond +
+ +
+
+ + +
+ +
+
+
+
+rss_feed +
+
+

VDAB RSS

+
+RSS Feed + +Laatste scan: 4u geleden +
+
+
+
+
+Vacatures gevonden +89 +
+
+ +Beperkt +
+ +
+
+ +
+ +
+
+
+
+web +
+
+

Ziekenhuis Hasselt Carrière

+
+Direct Scrape + +Laatste scan: Gisteren +
+
+
+
+
+Vacatures gevonden +-- +
+
+ +Controle nodig +
+ +
+
+ +
+ +
+
+
+
+error +
+
+

Indeed Search Query

+
+API Integration + +Laatste scan: mislukt +
+
+
+
+
+Vacatures gevonden +0 +
+
+ +Mislukt +
+ +
+
+ +
+
+ +
+

Radar Systeem Integriteit

+
+
+

Traffic Signal Flow

+ +
+98.2% +Scan Success Rate +
+
+
+

Parser Latency

+ +
+45ms +Gemiddelde Reactietijd +
+
+
+
+

Systeem Logboek

+
+
+ +
+

Backup Voltooid

+

Database sync succesvol naar EU-WEST-1.

+
+
+
+ +
+

Capaciteit Waarschuwing

+

Scan queue is 80% vol. Vertraging mogelijk.

+
+
+
+
+ +
+
+
+
+ + + + \ No newline at end of file diff --git a/docs/design/stitch-reference/bronnenbeheer_gezondheid/screen.png b/docs/design/stitch-reference/bronnenbeheer_gezondheid/screen.png new file mode 100644 index 0000000..9db1c78 Binary files /dev/null and b/docs/design/stitch-reference/bronnenbeheer_gezondheid/screen.png differ diff --git a/docs/design/stitch-reference/dashboard_overzicht/code.html b/docs/design/stitch-reference/dashboard_overzicht/code.html new file mode 100644 index 0000000..44b0e1b --- /dev/null +++ b/docs/design/stitch-reference/dashboard_overzicht/code.html @@ -0,0 +1,571 @@ + + + + + +VacatureRadar | Career Intelligence Dashboard + + + + + + + + + + + +
+ +
+
+
+search + +
+
+
+ + + +
+
+ +
+ +
+
+

Goedemorgen Jens.

+

Er zijn 3 nieuwe vacatures die je aandacht verdienen.

+
+
+
+

Systeem actief • Laatste scan 14 min geleden • Volgende om 06:00

+
+
+ +
+
+
+
+language +
++2 nieuwe +
+

42

+

Bronnen gecontroleerd

+
+
+
+
+fact_check +
+
+

18

+

Vacatures beoordeeld

+
+
+
+
+stars +
+Hot +
+

3

+

Sterke matches

+
+
+
+
+mail +
+ +
+

1

+

Sollicitatie opvolging

+
+
+ +
+ +
+
+

+ Beste nieuwe matches + Radar Feed +

+Bekijk alles +
+
+ +
+
+
+ +
+
+
+

IT Field Engineer

+94% STERKE MATCH +
+

ZorgGroep Nederland • Utrecht (Hybrid)

+

Als Field Engineer ben je verantwoordelijk voor de continuïteit van onze zorgsystemen op locatie. Je werkt nauw samen met het centrale IT-team om innovatieve zorgoplossingen te implementeren.

+
+Fulltime +€3.500 - €4.800 +Zorg & Welzijn +
+
+
+ + +
+
+
+ +
+
+
+ +
+
+
+

System Administrator (Public Sector)

+82% MATCH +
+

Gemeente Amsterdam • Amsterdam

+

Beheer complexe serveromgevingen en draag bij aan de digitale transformatie van onze publieke diensten. Ervaring met Azure en on-premise infra vereist.

+
+32-36 uur +Overheid +
+
+
+ + +
+
+
+ +
+
+
+ +
+
+
+

Network Specialist

+79% MATCH +
+

DataDynamics • Rotterdam (Remote option)

+

Versterk ons netwerkteam en werk aan grootschalige SD-WAN projecten voor internationale klanten. Focus op security en performance optimalisatie.

+
+Fulltime +Technologie +
+
+
+ + +
+
+
+
+
+ +
+ +
+
+

+priority_high + Actie vereist +

+
+
+
+
+mail +
+
+

Uitnodiging gesprek

+

Cloud Architect @ NexaGen

+ +
+
+
+ +
+
+
+ +
+

Recente activiteit

+
+ +
+
+check +
+

VANDAAG 10:15

+

Nieuwe bron gescand: LinkedIn Engineering

+

5 nieuwe vacatures gevonden, 0 matches.

+
+ +
+
+psychology +
+

GISTEREN 16:45

+

Zoekprofiel geoptimaliseerd

+

Match-threshold aangepast naar >75%.

+
+ +
+
+history +
+

GISTEREN 09:00

+

Wekelijks rapport gegenereerd

+

128 vacatures verwerkt in de afgelopen 7 dagen.

+
+
+
+ +
+
+
+
+
+robot_2 +
+

Radar AI

+
+

Mijn algoritme leert van jouw "Bewaar" acties om betere matches te vinden.

+
+
+
+

LEERPROCES: 65% VOLTOOID

+
+
+
+
+
+ +
+
+ +
+ + +
+ +
+ + +
+ + \ No newline at end of file diff --git a/docs/design/stitch-reference/dashboard_overzicht/screen.png b/docs/design/stitch-reference/dashboard_overzicht/screen.png new file mode 100644 index 0000000..6be166b Binary files /dev/null and b/docs/design/stitch-reference/dashboard_overzicht/screen.png differ diff --git a/docs/design/stitch-reference/intelligence_cockpit/DESIGN.md b/docs/design/stitch-reference/intelligence_cockpit/DESIGN.md new file mode 100644 index 0000000..d6cc6df --- /dev/null +++ b/docs/design/stitch-reference/intelligence_cockpit/DESIGN.md @@ -0,0 +1,181 @@ +--- +name: Intelligence Cockpit +colors: + surface: '#0b1326' + surface-dim: '#0b1326' + surface-bright: '#31394d' + surface-container-lowest: '#060e20' + surface-container-low: '#131b2e' + surface-container: '#171f33' + surface-container-high: '#222a3d' + surface-container-highest: '#2d3449' + on-surface: '#dae2fd' + on-surface-variant: '#b9caca' + inverse-surface: '#dae2fd' + inverse-on-surface: '#283044' + outline: '#849495' + outline-variant: '#3a494a' + surface-tint: '#00dce5' + primary: '#e9feff' + on-primary: '#003739' + primary-container: '#00f5ff' + on-primary-container: '#006c71' + inverse-primary: '#00696e' + secondary: '#4edea3' + on-secondary: '#003824' + secondary-container: '#00a572' + on-secondary-container: '#00311f' + tertiary: '#fcf8ff' + on-tertiary: '#1000a9' + tertiary-container: '#dbdaff' + on-tertiary-container: '#4c4ed9' + error: '#ffb4ab' + on-error: '#690005' + error-container: '#93000a' + on-error-container: '#ffdad6' + primary-fixed: '#63f7ff' + primary-fixed-dim: '#00dce5' + on-primary-fixed: '#002021' + on-primary-fixed-variant: '#004f53' + secondary-fixed: '#6ffbbe' + secondary-fixed-dim: '#4edea3' + on-secondary-fixed: '#002113' + on-secondary-fixed-variant: '#005236' + tertiary-fixed: '#e1e0ff' + tertiary-fixed-dim: '#c0c1ff' + on-tertiary-fixed: '#07006c' + on-tertiary-fixed-variant: '#2f2ebe' + background: '#0b1326' + on-background: '#dae2fd' + surface-variant: '#2d3449' +typography: + headline-lg: + fontFamily: Geist + fontSize: 32px + fontWeight: '600' + lineHeight: '1.2' + letterSpacing: -0.02em + headline-lg-mobile: + fontFamily: Geist + fontSize: 24px + fontWeight: '600' + lineHeight: '1.2' + headline-md: + fontFamily: Geist + fontSize: 20px + fontWeight: '500' + lineHeight: '1.4' + body-md: + fontFamily: Inter + fontSize: 16px + fontWeight: '400' + lineHeight: '1.6' + body-sm: + fontFamily: Inter + fontSize: 14px + fontWeight: '400' + lineHeight: '1.5' + metadata-caps: + fontFamily: JetBrains Mono + fontSize: 12px + fontWeight: '500' + lineHeight: '1.0' + letterSpacing: 0.05em + label-mono: + fontFamily: JetBrains Mono + fontSize: 13px + fontWeight: '400' + lineHeight: '1.0' +rounded: + sm: 0.125rem + DEFAULT: 0.25rem + md: 0.375rem + lg: 0.5rem + xl: 0.75rem + full: 9999px +spacing: + container-max: 1280px + gutter: 24px + margin-mobile: 16px + stack-sm: 8px + stack-md: 16px + stack-lg: 32px +--- + +## Brand & Style + +The design system is anchored in the concept of "Intelligent Discovery." It positions the product not just as a job board, but as a sophisticated radar system for career growth. The aesthetic is a refined blend of **Modern Corporate** and **Technical Minimalist**, evoking the feeling of a high-end data cockpit. + +The target audience consists of professionals who value efficiency, precision, and a calm user experience. The UI should feel like a trusted advisor: quiet until it finds something significant, then clear and authoritative in its presentation. We avoid literal military metaphors in favor of abstract "signal" patterns, subtle data visualizations, and high-quality finishes that suggest a premium, automated service. + +## Colors + +The palette is centered on a "Professional Dark" foundation to reduce cognitive load and emphasize the intelligence-gathering nature of the platform. + +* **Primary (Signal Cyan):** `#00F5FF`. Used for active radar pulses, high-confidence matches, and primary calls to action. It represents the "discovery" aspect. +* **Secondary (Success Emerald):** `#10B981`. Reserved for "Healthy" system statuses and finalized matches. +* **Tertiary (Intelligence Indigo):** `#6366F1`. Used for automation indicators and background accents to provide depth. +* **Neutrals:** A range of Slate and Navy tones (from `#0F172A` to `#94A3B8`) form the structural layers. + +In Light Mode, the deep navies are replaced with crisp whites and soft slates, but the Primary Cyan remains the focal point for interaction. + +## Typography + +This design system utilizes a tiered typographic approach to balance human readability with a technical edge. + +* **Headlines:** Using **Geist**, these are sharp and modern, providing a clear hierarchy for job titles and section headers. +* **Body:** **Inter** is used for all descriptive text, ensuring maximum legibility during long reading sessions of job descriptions. +* **Data & Metadata:** **JetBrains Mono** is employed for small labels, status indicators, and automation logs. This reinforces the "Radar" and "Automated" personality of the brand. + +Dutch language nuances (long compound words) are handled through generous line-heights and flexible container widths. + +## Layout & Spacing + +The layout follows a **Fixed Grid** model on desktop to maintain a controlled "Cockpit" feel, centered within the viewport. + +* **Desktop:** 12-column grid with 24px gutters. Content is often organized into a narrow sidebar for navigation/filters and a wide main area for the "Radar Feed." +* **Mobile:** A single-column fluid layout with 16px side margins. +* **Spacing Rhythm:** An 8px base unit drives all padding and margins. Vertical stacking uses "stack-md" (16px) for related elements and "stack-lg" (32px) for distinct sections. + +## Elevation & Depth + +Hierarchy is established through **Tonal Layers** and **Subtle Glows** rather than heavy shadows. + +* **Background:** The base layer uses the darkest neutral. +* **Surface-Low:** Cards and containers use a slightly lighter slate with a 1px low-opacity border. +* **Surface-High:** Elements in focus or "Strong Matches" utilize a "Signal Glow"—a faint, primary-colored outer shadow (`0 0 15px rgba(0, 245, 255, 0.15)`) and a subtle inner gradient. +* **Backdrop Blur:** Modals and navigation overlays use a 12px blur to maintain the glass-like cockpit aesthetic without sacrificing legibility. + +## Shapes + +The shape language is **Soft (0.25rem)**. This provides a professional, geometric look that feels precise and modern. + +* **Standard Elements:** Buttons and inputs use a 4px (0.25rem) radius. +* **Large Containers:** Main cards and sections use an 8px (0.5rem) radius. +* **Status Indicators:** Chips and small badges use a fully rounded (pill) shape to contrast against the structured grid of the cards. + +## Components + +### Cards (Vacaturekaarten) +Cards are the primary data vessel. They feature a 1px border (`#334155`). For "Sterke Matches" (Strong Matches), the border color transitions to the Primary Cyan, and a subtle glow is applied. + +### Score Indicators (Match-score) +A combination of a bold numeric percentage in `Geist` and a qualitative label in `JetBrains Mono`. +* *Example:* **94%** [STERKE MATCH] +* Color reflects the score: Cyan for >80%, Indigo for 50-80%, Slate for <50%. + +### Status Chips (Automatisering) +Small, pill-shaped indicators for system health: +* **Scanning:** Primary Cyan text with a pulsing dot icon. +* **Healthy:** Secondary Emerald background (low opacity) with dark text. +* **Degraded:** Amber/Orange for system warnings. + +### Buttons (Actieknoppen) +* **Primary:** Solid Cyan with dark text for high contrast. +* **Ghost:** Transparent with a Slate-400 border, used for secondary actions like "Bewaar" (Save). + +### Input Fields +Dark backgrounds with a 1px border. On focus, the border glows with the Primary Cyan signal. Labels use the mono font for a technical feel. + +### Navigation +Compact, icon-driven sidebar on desktop to maximize the workspace for the Radar Feed. Icons are stroke-based (2px weight) for a clean, technical look. \ No newline at end of file diff --git a/docs/design/stitch-reference/nieuwe_matches/code.html b/docs/design/stitch-reference/nieuwe_matches/code.html new file mode 100644 index 0000000..b0f55de --- /dev/null +++ b/docs/design/stitch-reference/nieuwe_matches/code.html @@ -0,0 +1,496 @@ + + + + + +VacatureRadar | New Matches Explorer + + + + + + + + + + + +
+ +
+
+
+search + +
+
+
+
+ + + + +Scanner Actief +
+
+notifications +sensors +
+
+LIST VIEW +view_list +
+
+
+
+ +
+
+ +
+ +
+location_on +Regio Hasselt +expand_more +
+
+ +
+ +
+schedule +30 min +expand_more +
+
+ +
+ +
+ + + +
+
+ +
+ +
+Direct / Publiek +expand_more +
+
+ +
+ +
+> 70% +tune +
+
+
+ +
+
+
+ +
+ +
+
+3 RESULTATEN GEVONDEN +
+ +
+
+ +
+
+
+

IT Field Engineer

+
+business +Zorgregio Hasselt +
+
+
+
92%
+
[STERKE MATCH]
+
+
+
+Publieke sector +Directe werkgever +Hasselt (5km) +
+

"Ideale match voor jouw profiel: focus op on-site support binnen een maatschappelijk relevante omgeving in de directe regio."

+
+Gevonden: 2u geleden +arrow_forward +
+
+ +
+
+
+

System Administrator

+
+business +Stad Genk +
+
+
+
88%
+
MATCH
+
+
+
+M365 Specialist +Genk (12km) +
+
+
+
cloud
+
security
+
+Skills match: Infrastructuur, Microsoft 365 +
+
+ +
+
+

Infrastructure Engineer

+Deduplicated +
+
+person_search +Recruiter Copy (Anonymous) +
+
+ Radar heeft 4 identieke plaatsingen gedetecteerd. Alleen de meest relevante bron wordt getoond. +
+
+
+ +
+ +
+ +
+
+
+
+
+ACTUEEL +Gepubliceerd op 12 Okt 2023 +
+

IT Field Engineer

+

+ Zorgregio Hasselt + + Hasselt, Limburg +

+
+
+
+ +
+ +
+
+ +
+
+Match Kwaliteit +
+92% +
+
+
+
+
+
+Reistijd (Auto) +
+commute +25 min +
+
+
+Salarisindicatie +
+payments +€3.4k - €4.8k +
+
+
+ +
+
+
+

Waarom deze match?

+
    +
  • +check_circle +

    Locatie: Binnen jouw opgegeven reistijd van 30 minuten vanuit regio Bilzen.

    +
    • +
  • +check_circle +

    Werkgever: Directe aanstelling bij een publieke organisatie, wat overeenkomt met jouw voorkeur voor stabiliteit.

    +
    • +
  • +check_circle +

    Tech Stack: Sterke overlap op Azure AD en Windows 11 deployment projecten.

    +
    • +
+
+
+

Over de functie

+

+ Als IT Field Engineer ben je verantwoordelijk voor het vlekkeloos functioneren van de hardware en software infrastructuur op diverse locaties binnen Zorgregio Hasselt. Je werkt nauw samen met het centrale systeembeheer team om nieuwe werkplekken in te richten en complexe incidenten on-site op te lossen. +

+
+
+
+
+

Functie Details

+
+
+Contract +Vast contract +
+
+Uren +36 - 40 uur +
+
+Opleidingsbudget +€2.500 / jr +
+
+Vakantiedagen +28 + 4 extra +
+
+
+
+

Locatie

+
+
+
Hasselt, Campus Salvador
+
+
+
+
+
+
+
+ +
+ + +
+
+ +
+ + \ No newline at end of file diff --git a/docs/design/stitch-reference/nieuwe_matches/screen.png b/docs/design/stitch-reference/nieuwe_matches/screen.png new file mode 100644 index 0000000..6cf3fac Binary files /dev/null and b/docs/design/stitch-reference/nieuwe_matches/screen.png differ diff --git a/docs/design/stitch-reference/sollicitatie_pipeline/code.html b/docs/design/stitch-reference/sollicitatie_pipeline/code.html new file mode 100644 index 0000000..032037e --- /dev/null +++ b/docs/design/stitch-reference/sollicitatie_pipeline/code.html @@ -0,0 +1,517 @@ + + + + + +Sollicitatiepipeline | VacatureRadar + + + + + + + + + + + +
+ +
+
+
+

Sollicitatiepipeline

+

Beheer je actieve trajecten en deadlines

+
+
+ +
+ + +
+
+filter_list +Filters +
+ +
+
+
+ +
+ +
+
+ + + Interessant (2) + +more_horiz +
+
+ +
+
+

IT Field Engineer

+open_in_new +
+

Zorgregio

+
+
+DATUM: 12 MEI +84% MATCH +
+
+
+ +
+
+

Data Architect

+open_in_new +
+

FinTech Solutions

+
+
+DATUM: 14 MEI +91% MATCH +
+
+
+
+
+ +
+
+ + + Voorbereiden (1) + +
+
+
+
+

Cloud Security Lead

+edit +
+

GovNet Dynamics

+
+Volgende stap: +CV aanpassen voor cloud focus +
+
+ +warning + DEADLINE: VANDAAG + +
+
+
+
+ +
+
+ + + Gesolliciteerd (1) + +
+
+
+
+

Infrastructure Lead

+mail +
+

EuroLogistix

+
+VERZONDEN: 10 MEI +BEVESTIGD +
+
+
+
+ +
+
+ + + Wacht op reactie (1) + +
+
+
+
+TE LAAT +
+
+

Senior SysOps

+alarm +
+

GreenEnergy NV

+
+Follow-up nodig: +Bell voor status update +
+
+DEADLINE: 2 DAGEN GELEDEN +
+
+
+
+ +
+
+ + + Gesprek (1) + +
+
+
+
+

Azure Consultant

+event +
+

SkyHigh Tech

+
+
+calendar_today +22 MEI • 10:30 +
+Eerste kennismaking +
+
+ +check_circle + VOORBEREID + +
+
+
+
+ +
+
+ + + Aanbod (0) + +
+
+Geen actieve aanbiedingen +
+
+ +
+
+ + + Afgerond (1) + +
+
+
+
+

DevOps Engineer

+check_circle +
+

CloudBase NL

+
+AFGEWEZEN DOOR MIJ +
+
+
+
+
+ + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/docs/design/stitch-reference/sollicitatie_pipeline/screen.png b/docs/design/stitch-reference/sollicitatie_pipeline/screen.png new file mode 100644 index 0000000..13d8ad2 Binary files /dev/null and b/docs/design/stitch-reference/sollicitatie_pipeline/screen.png differ diff --git a/docs/design/stitch-reference/vacature_intelligentie_detail/code.html b/docs/design/stitch-reference/vacature_intelligentie_detail/code.html new file mode 100644 index 0000000..8b585e9 --- /dev/null +++ b/docs/design/stitch-reference/vacature_intelligentie_detail/code.html @@ -0,0 +1,486 @@ + + + + + + + + + + + + + + + + +
+
+ +
+
+search + +
+
+
+
+ +Scanner actief +
+
+notifications +sensors +account_circle +
+
+
+ +
+
+ +
+ +
+
+
+
+
+
+ +
+
+ASML - Veldhoven +

Senior Cloud Solutions Architect

+
+
+
+
+
+
+Salaris +€6.500 - €8.200 p.m. +
+
+Uren +36 - 40 uur +
+
+Niveau +Senior / Lead +
+
+
+ + +
+
+
+ +
+ + + + +
+ +
+
+

Over de functie

+

+ Als Senior Cloud Solutions Architect bij ASML ben je de drijvende kracht achter onze hybride cloud-strategie. Je ontwerpt en implementeert schaalbare infrastructuren die cruciaal zijn voor onze wereldwijde engineering-operaties. Je werkt op het snijvlak van innovatie en betrouwbaarheid. +

+

+ Je bent verantwoordelijk voor het vertalen van complexe business requirements naar robuuste technische architecturen. Hierbij werk je nauw samen met stakeholders uit verschillende disciplines, van security experts tot data scientists. +

+
+
+

+auto_awesome + AI Samenvatting +

+
    +
  • Focus op Azure Cloud Native migraties en Kubernetes orkestratie.
    • +
  • Sterke nadruk op Security-by-Design en compliance binnen een high-tech omgeving.
    • +
  • Leidende rol in een team van 12 gespecialiseerde cloud engineers.
    • +
  • Hybride werken: 3 dagen op kantoor in Veldhoven, 2 dagen flexibel.
    • +
+
+
+

Wat wij vragen

+
+
+code +

Techniek

+

10+ jaar ervaring met Cloud Architectuur, Azure (Expert), Terraform, en Go.

+
+
+groups +

Leiderschap

+

Ervaring met het aansturen van technische teams en strategische besluitvorming.

+
+
+
+
+ +
+ + + + +
+ +
+
+ + +
+
+ + \ No newline at end of file diff --git a/docs/design/stitch-reference/vacature_intelligentie_detail/screen.png b/docs/design/stitch-reference/vacature_intelligentie_detail/screen.png new file mode 100644 index 0000000..d65568e Binary files /dev/null and b/docs/design/stitch-reference/vacature_intelligentie_detail/screen.png differ diff --git a/docs/design/stitch-reference/werkgevers_intelligentie/code.html b/docs/design/stitch-reference/werkgevers_intelligentie/code.html new file mode 100644 index 0000000..6da6e7c --- /dev/null +++ b/docs/design/stitch-reference/werkgevers_intelligentie/code.html @@ -0,0 +1,531 @@ + + + + + +VacatureRadar | Werkgevers Intelligence + + + + + + + + + +
+
+
+VacatureRadar + +
+
+ + +
+
+
+
+ + + +
+
+ +
+
+Intelligent Tracking +

Werkgevers Radar

+
+
+
+Gemonitord +142 +
+
+Actieve Vacatures +318 +
+
+
+ +
+
+
+radar +
+

Systeem Status

+
+
+
+Scanning 142 bronnen +
+Laatste update: 4 minuten geleden +
+
+
+

STRONGEST MATCH TREND

+

ASML Eindhoven

+

8 nieuwe matches gevonden vandaag

+
+
+

BRON GEZONDHEID

+

98.4% Optimal

+

Geen kritieke foutmeldingen

+
+
+
+
+
+

Radar Intelligence

+

AI Analyse van wervingsgedrag

+
+
+
+Directe kanalen +82% +
+
+
+
+
+Recruitment bureaus +18% +
+
+
+
+
+ +
+
+ +
+
+

Gevolgde Werkgevers

+
+ + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WerkgeverTypeLocatieVacaturesCheckGezondheidStatus
+
+
+ +
+ASML +
+		DIRECTVeldhoven, NL +42 ++3 +4m geleden +
+ +HEALTHY +
+		 +PRIORITY + +insights +
+
+
+medical_services +
+Zorgregio Hasselt +
+		OVERHEIDHasselt, BE121u geleden +
+ +HEALTHY +
+		 +STANDARD + +insights +
+
+
+account_balance +
+Gemeente Genk +
+		DIRECTGenk, BE53u geleden +
+ +FAILED +
+		 +IGNORED + +insights +
+
+
+
+
+
+ +
+
+
+
+INTEL REPORT #8421 +

ASML Intelligence

+
+ +
+
+ +
+

Match Patroon Historie

+
+ +
+
+
+
+
+
+
+
+
+
+MAADINWOEDONVRIZATZON +
+
+
+ +
+
+Gem. Match Score +
+88% +HIGH +
+
+
+Wervings-snelheid +
+14d +FAST +
+
+
+ +
+
+

Historische Vacatures

+Toon alles +
+
+
+
+Senior Data Systems Engineer +94% MATCH +
+
+Gepost: 2 dagen geleden + Actief +
+
+
+
+Technical Project Manager +62% MATCH +
+
+Gepost: 12 dagen geleden +Ingevuld +
+
+
+
+ +
+ +

"ASML zoekt vaak op maandagochtend rond 09:00 naar nieuwe talenten."

+
+
+
+
+ + + \ No newline at end of file diff --git a/docs/design/stitch-reference/werkgevers_intelligentie/screen.png b/docs/design/stitch-reference/werkgevers_intelligentie/screen.png new file mode 100644 index 0000000..52fccad Binary files /dev/null and b/docs/design/stitch-reference/werkgevers_intelligentie/screen.png differ diff --git a/docs/design/stitch-reference/zoekprofiel_editor/code.html b/docs/design/stitch-reference/zoekprofiel_editor/code.html new file mode 100644 index 0000000..a7c7482 --- /dev/null +++ b/docs/design/stitch-reference/zoekprofiel_editor/code.html @@ -0,0 +1,471 @@ + + + + + +VacatureRadar | Zoekprofiel + + + + + + + + + +
+
+
+VacatureRadar +
+
+ +
+notifications +account_circle +
+
+
+
+ + + +
+ +
+ +
+

Configureer je Radar

+

Verfijn je zoekprofiel om alleen de meest relevante kansen in de gaten te houden. Ons systeem leert van je voorkeuren.

+
+ +
+
+work +

Gewenste Rollen

+
+
+
+
+engineering +Systeembeheerder +
+
+Sterke Voorkeur +
+
+
+
+cloud_done +Cloud Architect +
+
+Neutraal +
+
+ +
+
+ +
+
+terminal +

Technologieën & Stack

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TechnologieHarde UitsluitingNeutraalSterke Voorkeur
Microsoft 365 / Azure AD
VMware vSphere
Legacy Mainframe / COBOL
Veeam Backup
+
+
+ +
+
+
+ +
+
+map +

Regio & Reistijd

+
+
+
+ +
+location_on + +
+
+ + +
+5 MIN +120+ MIN +
+
+
+
+ +
+
+
+
+
+
+
+
+
+ Hasselt Straal (± 25km) +
+
+
+
+ +
+
+domain +

Organisatie & Cultuur

+
+
+
+
+check_circle +
+corporate_fare +

Private Sector

+

KMO's, Enterprises en Scale-ups.

+
+
+account_balance +

Overheid / Public

+

Steden, onderwijs en semipublieke instellingen.

+
+
+groups +

Non-profit

+

VZW's en maatschappelijke organisaties.

+
+
+
+ +
+
+block +

Harde Uitsluitingsregels

+
+
+
+
+ +
+
+

Sluit vacatures uit met 'On-call' diensten

+

Ik ben niet beschikbaar voor 24/7 bereikbaarheid.

+
+
+
+
+ +
+
+

Sluit vacatures uit zonder remote opties

+

Vereist minimaal 2 dagen home-office.

+
+
+
+
+
+ + +
+ + + +
+
+ + \ No newline at end of file diff --git a/docs/design/stitch-reference/zoekprofiel_editor/screen.png b/docs/design/stitch-reference/zoekprofiel_editor/screen.png new file mode 100644 index 0000000..770c314 Binary files /dev/null and b/docs/design/stitch-reference/zoekprofiel_editor/screen.png differ