first commit
This commit is contained in:
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script>document.documentElement.classList.add('js');</script>
|
||||
<title>{% block title %}Welcome!{% endblock %}</title>
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221em%22 font-size=%22104%22>◆</text></svg>">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
{% block stylesheets %}
|
||||
{% endblock %}
|
||||
|
||||
{% block javascripts %}
|
||||
{% block importmap %}{{ importmap('app') }}{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
{% set frankenphpHotReload = app.request.server.get('FRANKENPHP_HOT_RELOAD') %}
|
||||
{% if frankenphpHotReload %}
|
||||
<meta name="frankenphp-hot-reload:url" content="{{ frankenphpHotReload }}">
|
||||
<script src="https://cdn.jsdelivr.net/npm/idiomorph"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/frankenphp-hot-reload/+esm" type="module"></script>
|
||||
{% endif %}
|
||||
</head>
|
||||
<body>
|
||||
{% block body %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,11 @@
|
||||
{% apply spaceless %}
|
||||
{% if name == 'play' %}
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="6 4 20 12 6 20 6 4" fill="currentColor" stroke="none"></polygon></svg>
|
||||
{% elseif name == 'github' %}
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5C5.37.5 0 5.87 0 12.5c0 5.3 3.44 9.8 8.2 11.39.6.11.82-.26.82-.58v-2.03c-3.34.73-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.09-.75.08-.73.08-.73 1.2.09 1.84 1.24 1.84 1.24 1.07 1.84 2.81 1.31 3.5 1 .11-.78.42-1.31.76-1.61-2.67-.3-5.47-1.34-5.47-5.95 0-1.31.47-2.39 1.24-3.23-.13-.3-.54-1.52.11-3.18 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.29-1.55 3.3-1.23 3.3-1.23.65 1.66.24 2.88.12 3.18.77.84 1.23 1.92 1.23 3.23 0 4.62-2.81 5.64-5.49 5.94.43.37.82 1.1.82 2.22v3.29c0 .32.21.7.82.58C20.56 22.29 24 17.8 24 12.5 24 5.87 18.63.5 12 .5Z"></path></svg>
|
||||
{% elseif name == 'external' %}
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>
|
||||
{% elseif name == 'close' %}
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
|
||||
{% endif %}
|
||||
{% endapply %}
|
||||
@@ -0,0 +1,179 @@
|
||||
{% 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="#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>
|
||||
</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>
|
||||
</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.github }}" target="_blank" rel="noopener">GitHub</a>
|
||||
<a href="{{ profile.linkedin }}" target="_blank" rel="noopener">LinkedIn</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user