generated from Websites/symfony-template
Feat: Erstellt interaktiven Hero-Bereich mit Hintergrundanimation, neuen Styles und Template-Erweiterungen
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
@@ -0,0 +1,154 @@
|
||||
body {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* Scanline sweep */
|
||||
.scanline {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(0deg, transparent 0%, rgba(80, 167, 250, .05) 50%, transparent 100%);
|
||||
opacity: .1;
|
||||
animation: scanline 8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes scanline {
|
||||
0% {
|
||||
bottom: 100%;
|
||||
}
|
||||
100% {
|
||||
bottom: -100px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Primary hero button shimmer */
|
||||
.hero-btn-primary {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-btn-primary::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(255, 255, 255, .2);
|
||||
transform: translateY(100%);
|
||||
transition: transform .3s ease;
|
||||
}
|
||||
|
||||
.hero-btn-primary:hover::before {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Azure glow on hover */
|
||||
.glow-hover:hover {
|
||||
box-shadow: 0 0 25px rgba(80, 167, 250, .4);
|
||||
}
|
||||
|
||||
.badge {
|
||||
background: rgba(80, 167, 250, .1);
|
||||
border: 1px solid rgba(80, 167, 250, .3);
|
||||
}
|
||||
|
||||
.badge .text-label-sm {
|
||||
color: var(--color-primary-container);
|
||||
letter-spacing: .15em;
|
||||
}
|
||||
|
||||
/* Pulsing availability dot */
|
||||
.dot-pulse {
|
||||
animation: dot-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
|
||||
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #50a7fa;
|
||||
}
|
||||
|
||||
@keyframes dot-pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: .35;
|
||||
}
|
||||
}
|
||||
|
||||
.headline {
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, .8);
|
||||
}
|
||||
|
||||
.headline span {
|
||||
color: var(--color-primary-container);
|
||||
}
|
||||
|
||||
.subheadline {
|
||||
max-width: 640px;
|
||||
color: rgba(255, 255, 255, .85);
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
|
||||
}
|
||||
|
||||
/* Scroll indicator line */
|
||||
.scroll-line {
|
||||
width: 1px;
|
||||
height: 48px;
|
||||
background: linear-gradient(to bottom, #50a7fa, transparent);
|
||||
}
|
||||
|
||||
.hud-decorator-line {
|
||||
width: 128px;
|
||||
height: 1px;
|
||||
background-color: var(--color-primary-container);
|
||||
}
|
||||
|
||||
.hud-decorator {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
.hud-decorator p {
|
||||
color: var(--color-primary-container);
|
||||
letter-spacing: .3em;
|
||||
}
|
||||
|
||||
#bg {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#bg-img {
|
||||
filter: grayscale(.2) brightness(.75);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
#bg-overlay {
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0%, transparent 50%, rgba(0, 0, 0, .8) 100%);
|
||||
}
|
||||
|
||||
#content-div {
|
||||
z-index: 10;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#hud-decorator-top-left {
|
||||
margin-top: 96px;
|
||||
}
|
||||
|
||||
#hud-decorator-bottom-right {
|
||||
margin-bottom: 96px;
|
||||
}
|
||||
|
||||
#hud-decorator-bottom span {
|
||||
letter-spacing: .2em;
|
||||
}
|
||||
|
||||
#hero-content {
|
||||
max-width: 896px;
|
||||
}
|
||||
|
||||
#button-about-me {
|
||||
background: rgba(255, 255, 255, .05);
|
||||
border: 1px solid rgba(255, 255, 255, .2);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
import "../../styles/root/root.css";
|
||||
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
const bg = document.getElementById('bg-img');
|
||||
const x = (e.clientX - window.innerWidth / 2) * 0.005;
|
||||
const y = (e.clientY - window.innerHeight / 2) * 0.005;
|
||||
|
||||
if (bg) {
|
||||
bg.style.transform = `scale(1.05) translate(${x}px, ${y}px)`;
|
||||
}
|
||||
});
|
||||
@@ -1,20 +1,97 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}Hello RootController!{% endblock %}
|
||||
{% block title %}creative-dragonslayer.de | Deep Space Engineering{% endblock %}
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ parent() }}
|
||||
{{ encore_entry_link_tags('root') }}
|
||||
|
||||
<link rel="preload" href="{{ preload(asset('images/root/background.jpg'), { as: 'image' }) }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block javascripts %}
|
||||
{{ parent() }}
|
||||
{{ encore_entry_script_tags('root') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<style>
|
||||
.example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
|
||||
.example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
|
||||
</style>
|
||||
|
||||
<div class="example-wrapper">
|
||||
<h1>Hello {{ controller_name }}! ✅</h1>
|
||||
{# ── Fixed Background ────────────────────────────────────────────────────── #}
|
||||
<div id="bg" class="position-fixed top-0 start-0 w-100 h-100">
|
||||
<img
|
||||
id="bg-img"
|
||||
src="{{ asset('images/root/background.jpg') }}"
|
||||
alt="Hintergrundbild"
|
||||
class="w-100 h-100 object-fit-cover"
|
||||
>
|
||||
<div id="bg-overlay" class="position-absolute top-0 start-0 w-100 h-100"></div>
|
||||
<div class="scanline"></div>
|
||||
</div>
|
||||
|
||||
<div id="content-div" class="position-relative d-flex flex-column align-items-center justify-content-center
|
||||
w-100 text-center px-4">
|
||||
{# HUD Decorator — Top Left #}
|
||||
<div id="hud-decorator-top-left"
|
||||
class="hud-decorator position-absolute top-0 start-0 d-none d-xl-flex flex-column gap-3 ps-4">
|
||||
<div class="hud-decorator-line"></div>
|
||||
<p class="text-label-sm mb-0 text-uppercase">System.Status: Stable</p>
|
||||
<p class="text-label-sm mb-0 text-uppercase">Lat: 52.5200° N</p>
|
||||
</div>
|
||||
|
||||
{# HUD Decorator — Bottom Right #}
|
||||
<div id="hud-decorator-bottom-right"
|
||||
class="hud-decorator position-absolute bottom-0 end-0 d-none d-xl-flex flex-column align-items-end gap-3 pe-4">
|
||||
<p class="text-label-sm mb-0 text-end text-uppercase">V.0.9.0 // CORE</p>
|
||||
<p class="text-label-sm mb-0 text-end text-uppercase">Syncing Precision...</p>
|
||||
<div class="hud-decorator-line"></div>
|
||||
</div>
|
||||
|
||||
{# Hero Content #}
|
||||
<div id="hero-content" class="d-flex flex-column align-items-center gap-4">
|
||||
|
||||
{# Badge #}
|
||||
<div class="badge d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill">
|
||||
<span class="rounded-circle dot-pulse"></span>
|
||||
<span class="text-label-sm text-uppercase">
|
||||
Debugging Life Since 2018
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{# Headline #}
|
||||
<h1 class="text-display-lg mb-0 text-white lh-1 headline">
|
||||
CREATIVE
|
||||
<span class="fst-italic fw-light">
|
||||
DRAGONSLAYER
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
{# Subheadline #}
|
||||
<p class="text-body-lg mb-0 mx-auto subheadline">
|
||||
Code, Kommandozeile und Kaffee. Dies ist eine Sammlung meiner Hobbyprojekte, entwickelt mit
|
||||
Leidenschaft. Hier geht es nicht um Skalierung oder Marktanteile, sondern darum, Probleme zu lösen,
|
||||
die mich beschäftigen, und Techniken auszuprobieren, die mich neugierig machen.
|
||||
</p>
|
||||
|
||||
{# CTAs #}
|
||||
<div class="d-flex flex-column flex-sm-row gap-3 justify-content-center align-items-center mt-2">
|
||||
<a href="#projects"
|
||||
class="hero-btn-primary btn btn-primary text-white fw-bold px-5 py-3 rounded-3
|
||||
glow-hover d-inline-flex align-items-center gap-2">
|
||||
Zu den Projekten
|
||||
<span class="material-symbols-outlined">arrow_forward</span>
|
||||
</a>
|
||||
<a href="#about" id="button-about-me" class="btn fw-bold px-5 py-3 rounded-3 text-white">
|
||||
Werdegang
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Scroll Indicator #}
|
||||
<div id="hud-decorator-bottom" class="position-absolute bottom-0 start-50 translate-middle-x
|
||||
d-flex flex-column align-items-center gap-2 pb-4 hud-decorator">
|
||||
<span class="text-label-sm text-white text-uppercase">Deploying Scroll</span>
|
||||
<div class="scroll-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
This friendly message is coming from:
|
||||
<ul>
|
||||
<li>Your controller at <code>/var/www/html/src/Controller/RootController.php</code></li>
|
||||
<li>Your template at <code>/var/www/html/templates/root/index.html.twig</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user