206 lines
9.9 KiB
Twig
206 lines
9.9 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block title %}{{ profile.name }} — {{ profile.role }}{% endblock %}
|
|
|
|
{% block body %}
|
|
<header class="site-header">
|
|
<div class="wrap">
|
|
<a href="#top" class="brand"><span class="mark">◆</span> {{ profile.name }}</a>
|
|
<nav class="nav">
|
|
<a href="#o-mnie">o mnie</a>
|
|
<a href="#stack">stack</a>
|
|
<a href="#projekty">projekty <span class="nav-count">[{{ projects|length }}]</span></a>
|
|
<a href="#homelab">homelab</a>
|
|
<a href="#kontakt">kontakt</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="top">
|
|
{# ---- HERO ---- #}
|
|
<section class="hero">
|
|
<div class="wrap">
|
|
{% if profile.available %}
|
|
<span class="status"><span class="dot"></span> dostępny do współpracy</span>
|
|
{% endif %}
|
|
<h1 class="hero-title">
|
|
Full Stack Developer<br>
|
|
od pomysłu <span class="accent">do wdrożenia</span>.
|
|
</h1>
|
|
<p class="hero-role">{{ profile.role }} · {{ profile.location }}</p>
|
|
<p class="hero-summary">{{ profile.summary }}</p>
|
|
<div class="hero-cta">
|
|
<a class="btn btn-primary" href="#projekty">Zobacz projekty</a>
|
|
<a class="btn" href="mailto:{{ profile.email }}">Napisz do mnie</a>
|
|
<a class="btn" href="{{ profile.gitea }}" target="_blank" rel="noopener">Gitea</a>
|
|
<a class="btn" href="{{ profile.github }}" target="_blank" rel="noopener">GitHub</a>
|
|
<a class="btn" href="{{ profile.bitbucket }}" target="_blank" rel="noopener">BitBucket</a>
|
|
</div>
|
|
<div class="hero-meta">
|
|
<span><b>{{ profile.location }}</b> — lokalizacja</span>
|
|
<span><b>{{ projects|length }}</b> wybrane projekty</span>
|
|
<span><b>PHP · JavaScript / jQuery</b> — główny stack</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{# ---- O MNIE ---- #}
|
|
<section class="section reveal" id="o-mnie">
|
|
<div class="wrap">
|
|
<div class="about-grid">
|
|
<div>
|
|
<p class="eyebrow">o mnie</p>
|
|
<h2 class="section-title">Inżynier, nie tylko programista</h2>
|
|
</div>
|
|
<div>
|
|
<div class="about-body">
|
|
{% for paragraph in profile.about %}
|
|
<p>{{ paragraph }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
{# <dl class="about-aside" style="margin-top: 28px;">#}
|
|
{# <dt>rola</dt><dd>{{ profile.role }}</dd>#}
|
|
{# <dt>podejście</dt><dd>domena → API → interfejs → deploy</dd>#}
|
|
{# <dt>lokalizacja</dt><dd>{{ profile.location }}</dd>#}
|
|
{# </dl>#}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{# ---- STACK ---- #}
|
|
<section class="section reveal" id="stack">
|
|
<div class="wrap">
|
|
<div class="section-head">
|
|
<p class="eyebrow">stack</p>
|
|
<h2 class="section-title">Technologie, którymi się zajmuję</h2>
|
|
<p class="section-lead">Narzędzia, których używam na co dzień — od backendu po wdrożenie.</p>
|
|
</div>
|
|
<div class="tech-grid">
|
|
{% for tech in technologies %}
|
|
<div class="tech-card">
|
|
<p class="tech-group">{{ tech.group }}</p>
|
|
<div class="tech-chips">
|
|
{% for item in tech.items %}
|
|
<span class="chip">{{ item }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{# ---- PROJEKTY ---- #}
|
|
<section class="section reveal" id="projekty" data-controller="webview">
|
|
<div class="wrap">
|
|
<div class="section-head">
|
|
<p class="eyebrow">projekty</p>
|
|
<h2 class="section-title">Wybrane realizacje</h2>
|
|
<p class="section-lead">Kliknij <b>Live view</b>, aby zobaczyć projekt bez opuszczania strony.</p>
|
|
</div>
|
|
|
|
<div class="projects-grid">
|
|
{% for project in projects %}
|
|
<article class="project">
|
|
<img class="project-thumb" src="{{ asset(project.thumbnail) }}" alt="Podgląd projektu {{ project.name }}" loading="lazy" width="480" height="270">
|
|
<div class="project-body">
|
|
<div class="project-meta">
|
|
<span>{{ project.year }}</span>
|
|
<span>·</span>
|
|
<span>{{ project.role }}</span>
|
|
</div>
|
|
<h3 class="project-name">{{ project.name }}</h3>
|
|
<p class="project-desc">{{ project.description }}</p>
|
|
<div class="project-stack">
|
|
{% for tech in project.stack %}
|
|
<span class="chip">{{ tech }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="project-actions">
|
|
<button type="button" class="action action-live"
|
|
data-action="webview#open"
|
|
data-webview-url-param="{{ project.live }}"
|
|
data-webview-title-param="{{ project.name }}">
|
|
{{ include('home/_icon.html.twig', { name: 'play' }) }}
|
|
Live view
|
|
</button>
|
|
<a class="action" href="{{ project.github }}" target="_blank" rel="noopener">
|
|
{{ include('home/_icon.html.twig', { name: 'github' }) }}
|
|
Gitea
|
|
</a>
|
|
{% if project.githubfront is defined %}
|
|
<a class="action" href="{{ project.githubfront }}" target="_blank" rel="noopener">
|
|
{{ include('home/_icon.html.twig', { name: 'github' }) }}
|
|
Gitea-Front
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
{# ---- WEBVIEW (podgląd live w oknie "przeglądarki") ---- #}
|
|
<dialog class="webview" data-webview-target="dialog" data-action="click->webview#backdrop">
|
|
<div class="webview-bar">
|
|
<div class="webview-dots"><span></span><span></span><span></span></div>
|
|
<div class="webview-address" data-webview-target="address">about:blank</div>
|
|
<div class="webview-actions">
|
|
<a class="webview-btn" data-webview-target="external" href="#" target="_blank" rel="noopener" title="Otwórz w nowej karcie" aria-label="Otwórz w nowej karcie">
|
|
{{ include('home/_icon.html.twig', { name: 'external' }) }}
|
|
</a>
|
|
<button type="button" class="webview-btn" data-action="webview#close" title="Zamknij" aria-label="Zamknij podgląd">
|
|
{{ include('home/_icon.html.twig', { name: 'close' }) }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="webview-stage">
|
|
<iframe class="webview-frame" data-webview-target="frame" title="Podgląd projektu" referrerpolicy="no-referrer"></iframe>
|
|
<div class="webview-fallback" data-webview-target="fallback" hidden>
|
|
<span class="title" data-webview-target="title"></span>
|
|
<p>Ta strona nie pozwala na osadzanie w podglądzie.</p>
|
|
<a class="btn btn-primary" data-webview-target="external" href="#" target="_blank" rel="noopener">Otwórz w nowej karcie</a>
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
</section>
|
|
|
|
{# ---- HOMELAB ---- #}
|
|
<section class="section reveal" id="homelab">
|
|
<div class="wrap">
|
|
<div class="section-head">
|
|
<p class="eyebrow">homelab</p>
|
|
<h2 class="section-title">Własna infrastruktura, self-hosted</h2>
|
|
<p class="section-lead">{{ homelab.lead }}</p>
|
|
</div>
|
|
<div class="lab-grid">
|
|
{% for service in homelab.services %}
|
|
<div class="lab-card{{ service.featured is defined and service.featured ? ' lab-card--featured' : '' }}">
|
|
<div class="lab-head">
|
|
<span class="lab-name">{{ service.name }}</span>
|
|
<span class="lab-tag">{{ service.role }}</span>
|
|
</div>
|
|
<p class="lab-desc">{{ service.description }}</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-footer" id="kontakt">
|
|
<div class="wrap">
|
|
<span>© {{ 'now'|date('Y') }} {{ profile.name }} — zbudowane w Symfony</span>
|
|
<div class="footer-links">
|
|
<a href="mailto:{{ profile.email }}">e-mail</a>
|
|
<a href="{{ profile.gitea }}" target="_blank" rel="noopener">Gitea</a>
|
|
<a href="{{ profile.github }}" target="_blank" rel="noopener">GitHub</a>
|
|
<a href="{{ profile.bitbucket }}" target="_blank" rel="noopener">BitBucket</a>
|
|
<a href="{{ profile.linkedin }}" target="_blank" rel="noopener">LinkedIn</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
{% endblock %}
|