mirror of
https://github.com/pepaskopec-blip/skopec.dev.git
synced 2026-10-27 07:04:33 +00:00
Join the hero and Graduately into one continuous layout.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
pepaskopec-blip
parent
d540e2a1b9
commit
e6789ca523
6 changed files with 138 additions and 22 deletions
2
404.html
2
404.html
|
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
})();
|
||||
</script>
|
||||
<link rel="stylesheet" href="style.css?v=20261012">
|
||||
<link rel="stylesheet" href="style.css?v=20261017">
|
||||
</head>
|
||||
<body>
|
||||
<a class="skip-link" href="#main">Skip to content</a>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
}
|
||||
})();
|
||||
</script>
|
||||
<link rel="stylesheet" href="style.css?v=20261012">
|
||||
<link rel="stylesheet" href="style.css?v=20261017">
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
}
|
||||
})();
|
||||
</script>
|
||||
<link rel="stylesheet" href="style.css?v=20261012">
|
||||
<link rel="stylesheet" href="style.css?v=20261017">
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
|
|
@ -156,6 +156,7 @@
|
|||
</header>
|
||||
|
||||
<main id="main" class="page">
|
||||
<div class="intro">
|
||||
<section class="hero wrap" id="about" aria-labelledby="about-title">
|
||||
<div class="hero-content">
|
||||
<h1 id="about-title" class="hero-about-title">Hey, I’m Josef.</h1>
|
||||
|
|
@ -183,7 +184,7 @@
|
|||
</section>
|
||||
|
||||
<section class="section feature" id="graduately" aria-labelledby="graduately-title">
|
||||
<div class="wrap reveal">
|
||||
<div class="wrap">
|
||||
<p class="feature-backdrop" aria-hidden="true">Graduately</p>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-copy">
|
||||
|
|
@ -212,7 +213,7 @@
|
|||
<img class="feature-icon" src="graduately-icon.webp" width="256" height="256" loading="lazy" decoding="async" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<ul class="feature-stats">
|
||||
<ul class="feature-stats reveal">
|
||||
<li>
|
||||
<h3><strong>13</strong> subjects</h3>
|
||||
<p>From German and Czech literature to computer networks, maths, AutoCAD and C#.</p>
|
||||
|
|
@ -232,6 +233,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="section" id="services" aria-labelledby="services-title">
|
||||
<div class="wrap reveal">
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
}
|
||||
})();
|
||||
</script>
|
||||
<link rel="stylesheet" href="style.css?v=20261012">
|
||||
<link rel="stylesheet" href="style.css?v=20261017">
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
}
|
||||
})();
|
||||
</script>
|
||||
<link rel="stylesheet" href="style.css?v=20261012">
|
||||
<link rel="stylesheet" href="style.css?v=20261017">
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
|
|
|
|||
144
style.css
144
style.css
|
|
@ -275,8 +275,23 @@ a:hover {
|
|||
padding: 4.5rem 0;
|
||||
}
|
||||
|
||||
.section + .section {
|
||||
border-top: 1px solid var(--line);
|
||||
.section + .section,
|
||||
.intro + .section {
|
||||
position: relative;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.section + .section::before,
|
||||
.intro + .section::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: min(100% - 2.5rem, var(--max));
|
||||
height: 1px;
|
||||
transform: translateX(-50%);
|
||||
background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
|
|
@ -309,7 +324,7 @@ a:hover {
|
|||
position: relative;
|
||||
display: grid;
|
||||
align-items: start;
|
||||
padding: 2.75rem 0 3.5rem;
|
||||
padding: 2.75rem 0 1.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -449,6 +464,7 @@ a:hover {
|
|||
--feature-shadow: rgba(0, 0, 0, 0.55);
|
||||
--feature-edge: transparent;
|
||||
--feature-word: min(11.4vw, 12rem);
|
||||
padding-top: 1.25rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -458,7 +474,7 @@ a:hover {
|
|||
}
|
||||
|
||||
.feature-backdrop {
|
||||
margin: 0 calc(50% - 50vw) 1.25rem;
|
||||
margin: 0 calc(50% - 50vw) -0.35rem;
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--feature-word);
|
||||
font-weight: 800;
|
||||
|
|
@ -468,7 +484,7 @@ a:hover {
|
|||
white-space: nowrap;
|
||||
color: var(--ink);
|
||||
opacity: 0.07;
|
||||
mask-image: linear-gradient(180deg, #000 35%, transparent 105%);
|
||||
mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 62%, transparent 100%);
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
|
@ -605,18 +621,9 @@ a:hover {
|
|||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.feature-grid {
|
||||
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
|
||||
}
|
||||
|
||||
.feature .feature-title {
|
||||
font-size: clamp(2.25rem, 5.5vw - 0.3rem, 3.75rem);
|
||||
}
|
||||
|
||||
.feature-media {
|
||||
align-self: start;
|
||||
margin-top: calc(var(--feature-word) * -0.7);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
|
|
@ -625,6 +632,109 @@ a:hover {
|
|||
}
|
||||
}
|
||||
|
||||
/* Hero and Graduately share one composition once the screen can hold both. */
|
||||
@media (min-width: 1080px) {
|
||||
.intro {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 42rem) minmax(15rem, 1fr);
|
||||
column-gap: clamp(2.25rem, 3vw, 3.25rem);
|
||||
align-items: start;
|
||||
justify-content: start;
|
||||
width: auto;
|
||||
max-width: 81rem;
|
||||
margin-left: max(1.25rem, calc((100% - var(--max)) / 2));
|
||||
margin-right: 3rem;
|
||||
}
|
||||
|
||||
.intro::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 8%;
|
||||
right: 0;
|
||||
width: min(32rem, 48%);
|
||||
height: min(32rem, 48%);
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--line);
|
||||
background:
|
||||
radial-gradient(circle at 35% 35%, var(--sheen), transparent 55%),
|
||||
conic-gradient(from 210deg at 50% 50%, transparent 0 55%, var(--glow) 70%, transparent 100%);
|
||||
opacity: 0.85;
|
||||
animation: drift 18s var(--ease) infinite alternate;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.intro .hero {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
padding: 2.75rem 0 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.intro .hero::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.intro .feature,
|
||||
.intro .feature > .wrap,
|
||||
.intro .feature-grid {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.intro .feature-backdrop {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 1 / 3;
|
||||
align-self: center;
|
||||
justify-self: stretch;
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
mask-image:
|
||||
linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%),
|
||||
linear-gradient(90deg, transparent 0 46%, #000 68%);
|
||||
mask-composite: intersect;
|
||||
-webkit-mask-image:
|
||||
linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%),
|
||||
linear-gradient(90deg, transparent 0 46%, #000 68%);
|
||||
-webkit-mask-composite: source-in;
|
||||
}
|
||||
|
||||
.intro .feature-copy {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-top: 2.5rem;
|
||||
}
|
||||
|
||||
.intro .feature-media {
|
||||
grid-column: 2;
|
||||
grid-row: 1 / 3;
|
||||
align-self: center;
|
||||
justify-self: start;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(100%, 36rem);
|
||||
margin: 0.5rem 0 0;
|
||||
padding: 0 0 1.25rem;
|
||||
}
|
||||
|
||||
.intro .feature-stats {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 3;
|
||||
justify-self: start;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(100%, var(--max));
|
||||
margin-top: 3.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* —— Services —— */
|
||||
.service-list {
|
||||
list-style: none;
|
||||
|
|
@ -1159,7 +1269,7 @@ a:hover {
|
|||
.hero {
|
||||
min-height: auto;
|
||||
padding-top: 2.5rem;
|
||||
padding-bottom: 3.25rem;
|
||||
padding-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.hero::after {
|
||||
|
|
@ -1173,4 +1283,8 @@ a:hover {
|
|||
.section {
|
||||
padding: 3.25rem 0;
|
||||
}
|
||||
|
||||
.section.feature {
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue