first commit

2026-07-14 18:13:44 +02:00
commit 92e0df7e37
71 changed files with 14242 additions and 0 deletions
@@ -0,0 +1,21 @@
+import './stimulus_bootstrap.js';
+import './styles/app.css';
+
+// Delikatne odsłanianie sekcji przy scrollu.
+const io = new IntersectionObserver((entries) => {
+    for (const entry of entries) {
+        if (entry.isIntersecting) {
+            entry.target.classList.add('is-visible');
+            io.unobserve(entry.target);
+        }
+    }
+}, { threshold: 0.12 });
+
+function initReveal() {
+    document.querySelectorAll('.reveal:not(.is-visible)').forEach((el) => io.observe(el));
+}
+
+// Ten plik ładuje się jako moduł (defer), więc DOM jest już sparsowany.
+// Startujemy od razu, a przy nawigacji Turbo ponawiamy obserwację.
+initReveal();
+document.addEventListener('turbo:load', initReveal);
@@ -0,0 +1,18 @@
+{
+    "controllers": {
+        "@symfony/ux-turbo": {
+            "turbo-core": {
+                "enabled": true,
+                "fetch": "eager",
+                "autoimport": {
+                    "@symfony/ux-turbo/dist/mercure_stream_source_element.js": true
+                }
+            },
+            "mercure-turbo-stream": {
+                "enabled": false,
+                "fetch": "eager"
+            }
+        }
+    },
+    "entrypoints": []
+}
@@ -0,0 +1,81 @@
+const nameCheck = /^[-_a-zA-Z0-9]{4,22}$/;
+const tokenCheck = /^[-_/+a-zA-Z0-9]{24,}$/;
+
+// Generate and double-submit a CSRF token in a form field and a cookie, as defined by Symfony's SameOriginCsrfTokenManager
+// Use `form.requestSubmit()` to ensure that the submit event is triggered. Using `form.submit()` will not trigger the event
+// and thus this event-listener will not be executed.
+document.addEventListener('submit', function (event) {
+    generateCsrfToken(event.target);
+}, true);
+
+// When @hotwired/turbo handles form submissions, send the CSRF token in a header in addition to a cookie
+// The `framework.csrf_protection.check_header` config option needs to be enabled for the header to be checked
+document.addEventListener('turbo:submit-start', function (event) {
+    const h = generateCsrfHeaders(event.detail.formSubmission.formElement);
+    Object.keys(h).map(function (k) {
+        event.detail.formSubmission.fetchRequest.headers[k] = h[k];
+    });
+});
+
+// When @hotwired/turbo handles form submissions, remove the CSRF cookie once a form has been submitted
+document.addEventListener('turbo:submit-end', function (event) {
+    removeCsrfToken(event.detail.formSubmission.formElement);
+});
+
+export function generateCsrfToken (formElement) {
+    const csrfField = formElement.querySelector('input[data-controller="csrf-protection"], input[name="_csrf_token"]');
+
+    if (!csrfField) {
+        return;
+    }
+
+    let csrfCookie = csrfField.getAttribute('data-csrf-protection-cookie-value');
+    let csrfToken = csrfField.value;
+
+    if (!csrfCookie && nameCheck.test(csrfToken)) {
+        csrfField.setAttribute('data-csrf-protection-cookie-value', csrfCookie = csrfToken);
+        csrfField.defaultValue = csrfToken = btoa(String.fromCharCode.apply(null, (window.crypto || window.msCrypto).getRandomValues(new Uint8Array(18))));
+    }
+    csrfField.dispatchEvent(new Event('change', { bubbles: true }));
+
+    if (csrfCookie && tokenCheck.test(csrfToken)) {
+        const cookie = csrfCookie + '_' + csrfToken + '=' + csrfCookie + '; path=/; samesite=strict';
+        document.cookie = window.location.protocol === 'https:' ? '__Host-' + cookie + '; secure' : cookie;
+    }
+}
+
+export function generateCsrfHeaders (formElement) {
+    const headers = {};
+    const csrfField = formElement.querySelector('input[data-controller="csrf-protection"], input[name="_csrf_token"]');
+
+    if (!csrfField) {
+        return headers;
+    }
+
+    const csrfCookie = csrfField.getAttribute('data-csrf-protection-cookie-value');
+
+    if (tokenCheck.test(csrfField.value) && nameCheck.test(csrfCookie)) {
+        headers[csrfCookie] = csrfField.value;
+    }
+
+    return headers;
+}
+
+export function removeCsrfToken (formElement) {
+    const csrfField = formElement.querySelector('input[data-controller="csrf-protection"], input[name="_csrf_token"]');
+
+    if (!csrfField) {
+        return;
+    }
+
+    const csrfCookie = csrfField.getAttribute('data-csrf-protection-cookie-value');
+
+    if (tokenCheck.test(csrfField.value) && nameCheck.test(csrfCookie)) {
+        const cookie = csrfCookie + '_' + csrfField.value + '=0; path=/; samesite=strict; max-age=0';
+
+        document.cookie = window.location.protocol === 'https:' ? '__Host-' + cookie + '; secure' : cookie;
+    }
+}
+
+/* stimulusFetch: 'lazy' */
+export default 'csrf-protection-controller';
@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/stimulus';
+
+/*
+ * This is an example Stimulus controller!
+ *
+ * Any element with a data-controller="hello" attribute will cause
+ * this controller to be executed. The name "hello" comes from the filename:
+ * hello_controller.js -> "hello"
+ *
+ * Delete this file or adapt it for your use!
+ */
+export default class extends Controller {
+    connect() {
+        this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
+    }
+}
@@ -0,0 +1,53 @@
+import { Controller } from '@hotwired/stimulus';
+
+/*
+ * Otwiera podgląd "live view" projektu w modalu stylizowanym na okno przeglądarki.
+ * Adres i tytuł są przekazywane przez przyciski z data-webview-url-param
+ * oraz data-webview-title-param. iframe ładuje się dopiero przy otwarciu.
+ */
+export default class extends Controller {
+    static targets = ['dialog', 'frame', 'address', 'title', 'external', 'fallback'];
+
+    connect() {
+        this.onKeydown = this.onKeydown.bind(this);
+    }
+
+    open(event) {
+        const { url, title } = event.params;
+
+        this.addressTarget.textContent = url.replace(/^https?:\/\//, '');
+        this.titleTarget.textContent = title;
+        this.externalTargets.forEach((el) => { el.href = url; });
+        this.fallbackTarget.hidden = true;
+
+        // Jeśli strona blokuje osadzanie (X-Frame-Options), pokaż podpowiedź.
+        this.frameTarget.onerror = () => { this.fallbackTarget.hidden = false; };
+        this.frameTarget.src = url;
+
+        this.dialogTarget.showModal();
+        this.dialogTarget.addEventListener('close', () => this.reset(), { once: true });
+        document.addEventListener('keydown', this.onKeydown);
+    }
+
+    close() {
+        this.dialogTarget.close();
+    }
+
+    backdrop(event) {
+        // Klik poza ramką (w tło <dialog>) zamyka podgląd.
+        if (event.target === this.dialogTarget) {
+            this.close();
+        }
+    }
+
+    onKeydown(event) {
+        if (event.key === 'Escape') {
+            this.close();
+        }
+    }
+
+    reset() {
+        this.frameTarget.src = 'about:blank';
+        document.removeEventListener('keydown', this.onKeydown);
+    }
+}
@@ -0,0 +1,5 @@
+import { startStimulusApp } from '@symfony/stimulus-bundle';
+
+const app = startStimulusApp();
+// register any custom, 3rd party controllers here
+// app.register('some_controller_name', SomeImportedController);
@@ -0,0 +1,448 @@
+/* =========================================================================
+   Portfolio — Midnight & Coral
+   Display: Space Grotesk · Body: Inter · Mono: JetBrains Mono
+   ========================================================================= */
+
+:root {
+    --bg: #0d1a2b;
+    --bg-soft: #102237;
+    --surface: #14293f;
+    --surface-2: #16304a;
+    --line: rgba(150, 178, 209, 0.14);
+    --line-strong: rgba(150, 178, 209, 0.28);
+    --text: #eaf1f8;
+    --muted: #93a7bd;
+    --faint: #64798f;
+    --coral: #ff8a5b;
+    --coral-soft: rgba(255, 138, 91, 0.14);
+    --mint: #5ee6c4;
+
+    --display: 'Space Grotesk', system-ui, sans-serif;
+    --body: 'Inter', system-ui, sans-serif;
+    --mono: 'JetBrains Mono', ui-monospace, monospace;
+
+    --wrap: 1080px;
+    --radius: 16px;
+}
+
+* { box-sizing: border-box; }
+
+html { scroll-behavior: smooth; }
+
+body {
+    margin: 0;
+    background:
+        radial-gradient(900px 500px at 82% -8%, rgba(255, 138, 91, 0.10), transparent 60%),
+        radial-gradient(760px 520px at 5% 8%, rgba(94, 230, 196, 0.07), transparent 55%),
+        var(--bg);
+    color: var(--text);
+    font-family: var(--body);
+    font-size: 17px;
+    line-height: 1.65;
+    -webkit-font-smoothing: antialiased;
+}
+
+a { color: inherit; text-decoration: none; }
+
+::selection { background: var(--coral); color: #0d1a2b; }
+
+:focus-visible {
+    outline: 2px solid var(--coral);
+    outline-offset: 3px;
+    border-radius: 4px;
+}
+
+.wrap {
+    width: 100%;
+    max-width: var(--wrap);
+    margin: 0 auto;
+    padding: 0 24px;
+}
+
+/* --- shared bits -------------------------------------------------------- */
+
+.eyebrow {
+    font-family: var(--mono);
+    font-size: 0.78rem;
+    letter-spacing: 0.04em;
+    color: var(--coral);
+    text-transform: none;
+    margin: 0 0 18px;
+}
+.eyebrow::before { content: '// '; color: var(--faint); }
+
+.section { padding: 92px 0; border-top: 1px solid var(--line); }
+.section-head { max-width: 640px; margin-bottom: 44px; }
+.section-title {
+    font-family: var(--display);
+    font-weight: 600;
+    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
+    letter-spacing: -0.02em;
+    line-height: 1.1;
+    margin: 0;
+}
+.section-lead { color: var(--muted); margin: 14px 0 0; }
+
+/* --- header ------------------------------------------------------------- */
+
+.site-header {
+    position: sticky;
+    top: 0;
+    z-index: 40;
+    backdrop-filter: blur(12px);
+    background: rgba(13, 26, 43, 0.72);
+    border-bottom: 1px solid var(--line);
+}
+.site-header .wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 66px;
+}
+.brand {
+    font-family: var(--display);
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+}
+.brand .mark { color: var(--coral); }
+.nav {
+    display: flex;
+    gap: 26px;
+    font-family: var(--mono);
+    font-size: 0.82rem;
+    color: var(--muted);
+}
+.nav a { transition: color 0.18s; }
+.nav a:hover { color: var(--text); }
+.nav-count { color: var(--faint); }
+
+/* --- hero --------------------------------------------------------------- */
+
+.hero { padding: 96px 0 84px; }
+.status {
+    display: inline-flex;
+    align-items: center;
+    gap: 9px;
+    font-family: var(--mono);
+    font-size: 0.78rem;
+    color: var(--mint);
+    padding: 6px 12px;
+    border: 1px solid var(--line-strong);
+    border-radius: 999px;
+    margin-bottom: 26px;
+}
+.status .dot {
+    width: 8px; height: 8px; border-radius: 50%;
+    background: var(--mint);
+    box-shadow: 0 0 0 0 rgba(94, 230, 196, 0.55);
+    animation: pulse 2.4s infinite;
+}
+@keyframes pulse {
+    0% { box-shadow: 0 0 0 0 rgba(94, 230, 196, 0.5); }
+    70% { box-shadow: 0 0 0 9px rgba(94, 230, 196, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(94, 230, 196, 0); }
+}
+.hero-title {
+    font-family: var(--display);
+    font-weight: 700;
+    font-size: clamp(2.6rem, 7vw, 4.6rem);
+    line-height: 1.02;
+    letter-spacing: -0.035em;
+    margin: 0;
+}
+.hero-title .accent { color: var(--coral); }
+.hero-role {
+    font-family: var(--mono);
+    color: var(--muted);
+    font-size: 1rem;
+    margin: 22px 0 0;
+}
+.hero-summary {
+    max-width: 620px;
+    color: var(--muted);
+    font-size: 1.12rem;
+    margin: 22px 0 0;
+}
+.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 9px;
+    font-family: var(--mono);
+    font-size: 0.9rem;
+    padding: 12px 20px;
+    border-radius: 10px;
+    border: 1px solid var(--line-strong);
+    color: var(--text);
+    transition: transform 0.16s ease, border-color 0.16s, background 0.16s;
+}
+.btn:hover { transform: translateY(-2px); border-color: var(--coral); }
+.btn-primary { background: var(--coral); color: #0d1a2b; border-color: var(--coral); font-weight: 500; }
+.btn-primary:hover { background: #ff9d74; }
+
+.hero-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 28px;
+    margin-top: 46px;
+    padding-top: 26px;
+    border-top: 1px solid var(--line);
+    font-family: var(--mono);
+    font-size: 0.82rem;
+    color: var(--muted);
+}
+.hero-meta b { color: var(--text); font-weight: 500; }
+
+/* --- about -------------------------------------------------------------- */
+
+.about-grid {
+    display: grid;
+    grid-template-columns: 1fr 1.4fr;
+    gap: 48px;
+}
+.about-body p { margin: 0 0 18px; color: var(--muted); }
+.about-body p:last-child { margin-bottom: 0; }
+.about-aside {
+    font-family: var(--mono);
+    font-size: 0.85rem;
+    color: var(--muted);
+    border-left: 2px solid var(--coral);
+    padding-left: 20px;
+}
+.about-aside dt { color: var(--faint); }
+.about-aside dd { margin: 2px 0 18px; color: var(--text); }
+.about-aside dd:last-child { margin-bottom: 0; }
+
+/* --- technologies ------------------------------------------------------- */
+
+.tech-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+    gap: 18px;
+}
+.tech-card {
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: var(--radius);
+    padding: 22px 22px 24px;
+    transition: border-color 0.18s;
+}
+.tech-card:hover { border-color: var(--line-strong); }
+.tech-group {
+    font-family: var(--mono);
+    font-size: 0.78rem;
+    color: var(--coral);
+    margin: 0 0 16px;
+}
+.tech-chips { display: flex; flex-wrap: wrap; gap: 8px; }
+.chip {
+    font-family: var(--mono);
+    font-size: 0.8rem;
+    color: var(--text);
+    background: var(--surface-2);
+    border: 1px solid var(--line);
+    border-radius: 7px;
+    padding: 5px 11px;
+}
+
+/* --- projects ----------------------------------------------------------- */
+
+.projects-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 22px;
+}
+.project {
+    display: flex;
+    flex-direction: column;
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: var(--radius);
+    overflow: hidden;
+    transition: transform 0.2s ease, border-color 0.2s;
+}
+.project:hover { transform: translateY(-4px); border-color: var(--line-strong); }
+.project-thumb {
+    aspect-ratio: 16 / 9;
+    width: 100%;
+    object-fit: cover;
+    display: block;
+    border-bottom: 1px solid var(--line);
+}
+.project-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
+.project-meta {
+    display: flex;
+    gap: 12px;
+    font-family: var(--mono);
+    font-size: 0.74rem;
+    color: var(--faint);
+    margin-bottom: 10px;
+}
+.project-name {
+    font-family: var(--display);
+    font-weight: 600;
+    font-size: 1.35rem;
+    letter-spacing: -0.015em;
+    margin: 0 0 10px;
+}
+.project-desc { color: var(--muted); font-size: 0.98rem; margin: 0 0 18px; }
+.project-stack { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
+.project-stack .chip { font-size: 0.74rem; padding: 4px 9px; }
+.project-actions {
+    display: flex;
+    gap: 10px;
+    margin-top: auto;
+    padding-top: 4px;
+}
+.action {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    font-family: var(--mono);
+    font-size: 0.82rem;
+    padding: 9px 14px;
+    border-radius: 9px;
+    border: 1px solid var(--line-strong);
+    transition: border-color 0.16s, background 0.16s, color 0.16s;
+    cursor: pointer;
+    background: transparent;
+    color: var(--text);
+}
+.action:hover { border-color: var(--coral); }
+.action-live { background: var(--coral-soft); border-color: transparent; color: var(--coral); }
+.action-live:hover { background: rgba(255, 138, 91, 0.24); }
+.action svg { width: 15px; height: 15px; }
+
+/* --- webview modal (signature) ------------------------------------------ */
+
+.webview {
+    width: min(1000px, 94vw);
+    height: min(680px, 88vh);
+    padding: 0;
+    border: 1px solid var(--line-strong);
+    border-radius: 14px;
+    background: var(--surface);
+    color: var(--text);
+    overflow: hidden;
+    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
+}
+.webview::backdrop {
+    background: rgba(6, 12, 20, 0.72);
+    backdrop-filter: blur(4px);
+}
+.webview[open] {
+    display: flex;
+    flex-direction: column;
+    animation: pop 0.22s ease;
+}
+@keyframes pop {
+    from { opacity: 0; transform: translateY(10px) scale(0.98); }
+    to { opacity: 1; transform: none; }
+}
+.webview-bar {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 12px 16px;
+    background: var(--bg-soft);
+    border-bottom: 1px solid var(--line);
+}
+.webview-dots { display: flex; gap: 7px; }
+.webview-dots span { width: 12px; height: 12px; border-radius: 50%; background: var(--line-strong); }
+.webview-dots span:nth-child(1) { background: #ff5f57; }
+.webview-dots span:nth-child(2) { background: #febc2e; }
+.webview-dots span:nth-child(3) { background: #28c840; }
+.webview-address {
+    flex: 1;
+    font-family: var(--mono);
+    font-size: 0.82rem;
+    color: var(--muted);
+    background: var(--surface-2);
+    border-radius: 8px;
+    padding: 7px 14px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.webview-address::before { content: '🔒 '; }
+.webview-actions { display: flex; gap: 8px; }
+.webview-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px; height: 34px;
+    border-radius: 8px;
+    border: 1px solid var(--line);
+    background: transparent;
+    color: var(--muted);
+    cursor: pointer;
+    transition: color 0.16s, border-color 0.16s;
+}
+.webview-btn:hover { color: var(--text); border-color: var(--line-strong); }
+.webview-btn svg { width: 16px; height: 16px; }
+.webview-stage { position: relative; flex: 1; background: #fff; }
+.webview-frame { width: 100%; height: 100%; border: 0; display: block; }
+.webview-fallback {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    text-align: center;
+    padding: 32px;
+    background: var(--surface);
+    color: var(--muted);
+    font-size: 0.95rem;
+}
+.webview-fallback[hidden] { display: none; }
+.webview-fallback .title { font-family: var(--display); font-size: 1.2rem; color: var(--text); }
+
+/* --- footer ------------------------------------------------------------- */
+
+.site-footer {
+    border-top: 1px solid var(--line);
+    padding: 44px 0;
+}
+.site-footer .wrap {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 18px;
+    font-family: var(--mono);
+    font-size: 0.82rem;
+    color: var(--muted);
+}
+.footer-links { display: flex; gap: 20px; }
+.footer-links a { transition: color 0.16s; }
+.footer-links a:hover { color: var(--coral); }
+
+/* --- scroll reveal ------------------------------------------------------ */
+
+.js .reveal {
+    opacity: 0;
+    transform: translateY(18px);
+    transition: opacity 0.6s ease, transform 0.6s ease;
+}
+.js .reveal.is-visible { opacity: 1; transform: none; }
+
+/* --- responsive --------------------------------------------------------- */
+
+@media (max-width: 760px) {
+    .nav { display: none; }
+    .about-grid { grid-template-columns: 1fr; gap: 30px; }
+    .section { padding: 68px 0; }
+    .hero { padding: 68px 0 60px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    * { animation: none !important; scroll-behavior: auto; }
+    .js .reveal { opacity: 1; transform: none; transition: none; }
+    .project:hover, .btn:hover { transform: none; }
+}