diff --git a/graduately-home.webp b/graduately-home.webp new file mode 100644 index 0000000..cf43352 Binary files /dev/null and b/graduately-home.webp differ diff --git a/graduately-icon.webp b/graduately-icon.webp new file mode 100644 index 0000000..3098ec5 Binary files /dev/null and b/graduately-icon.webp differ diff --git a/index.html b/index.html index 33dd735..b42af0e 100644 --- a/index.html +++ b/index.html @@ -182,6 +182,57 @@ +
+
+ +
+
+

Featured project

+

+ Introducing + Graduately +

+

Maturita prep in one app — on every platform.

+

+ My biggest project yet: a free, open-source app for the Czech maturita exam. Lessons come with exercises and quizzes, + the C# course runs your code right beside the text, and progress stats keep track of it all. + It even updates itself — CI builds every push, and the app offers the new build. +

+
+ Download + + + Source code + +
+
+
+ The Graduately welcome screen on a Mac, with overall progress and the grid of subjects. + +
+
+ +
+
+

Self-hosted

diff --git a/style.css b/style.css index 1b9de4d..a8aeab4 100644 --- a/style.css +++ b/style.css @@ -359,7 +359,8 @@ a:hover { margin: 1.25rem 0 1.75rem; } -.hero-actions { +.hero-actions, +.feature-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; @@ -409,6 +410,12 @@ a:hover { border-color: var(--ink); } +.btn svg { + width: 1.05rem; + height: 1.05rem; + fill: currentColor; +} + /* —— About —— */ .about-text { max-width: 42rem; @@ -437,6 +444,187 @@ a:hover { font-weight: 650; } +/* —— Feature (Graduately) —— */ +.feature { + --feature-shadow: rgba(0, 0, 0, 0.55); + --feature-edge: transparent; + --feature-word: min(11.4vw, 12rem); + overflow: hidden; +} + +:root[data-theme="light"] .feature { + --feature-shadow: rgba(17, 21, 28, 0.22); + --feature-edge: rgba(17, 21, 28, 0.22); +} + +.feature-backdrop { + margin: 0 calc(50% - 50vw) 1.25rem; + font-family: var(--font-display); + font-size: var(--feature-word); + font-weight: 800; + letter-spacing: -0.05em; + line-height: 0.82; + text-align: center; + white-space: nowrap; + color: var(--ink); + opacity: 0.07; + mask-image: linear-gradient(180deg, #000 35%, transparent 105%); + pointer-events: none; + user-select: none; +} + +.feature-grid { + display: grid; + gap: 3rem; + align-items: center; +} + +.feature .feature-title { + margin: 0 0 1rem; + font-size: clamp(2.25rem, 11.5vw, 3.75rem); + letter-spacing: -0.04em; + line-height: 1; +} + +.feature-kicker { + display: block; + margin-bottom: 0.45rem; + font-family: var(--font-body); + font-size: clamp(1.05rem, 1.6vw, 1.25rem); + font-style: italic; + font-weight: 500; + letter-spacing: 0; + line-height: 1.2; + color: var(--ink-soft); +} + +.feature-tagline { + margin: 0 0 1rem; + font-family: var(--font-display); + font-size: 1.2rem; + font-weight: 600; + letter-spacing: -0.02em; + line-height: 1.35; +} + +.feature-text { + max-width: 34rem; + margin: 0 0 1.75rem; + color: var(--muted); +} + +.feature-media { + position: relative; + isolation: isolate; + padding: 1rem 0 2.5rem; + perspective: 1800px; +} + +.feature-media::before { + content: ""; + position: absolute; + inset: 5% 0 0 10%; + z-index: -1; + background: radial-gradient(closest-side, var(--glow), transparent); + filter: blur(24px); +} + +.feature-window { + width: 100%; + height: auto; + transform: rotateX(10deg) rotateY(-18deg) rotateZ(2deg); + transform-origin: 60% 50%; + filter: drop-shadow(0 0 1px var(--feature-edge)) drop-shadow(0 30px 40px var(--feature-shadow)); + transition: transform 0.8s var(--ease); +} + +.feature-media:hover .feature-window { + transform: rotateX(5deg) rotateY(-9deg) rotateZ(1deg); +} + +.feature-icon { + position: absolute; + left: -1rem; + bottom: 0; + width: clamp(4rem, 9vw, 6.5rem); + height: auto; + border-radius: 22%; + box-shadow: 0 18px 36px var(--feature-shadow); + transform: rotate(-8deg); + transition: transform 0.8s var(--ease); +} + +.feature-media:hover .feature-icon { + transform: rotate(-4deg) translateY(-4px); +} + +.feature-stats { + display: grid; + gap: 1.75rem 2rem; + margin: 3.5rem 0 0; + padding: 0; + list-style: none; +} + +.feature-stats li { + padding-top: 1.1rem; + border-top: 1px solid var(--line-strong); +} + +.feature-stats h3 { + margin: 0 0 0.45rem; + font-size: 0.75rem; + font-weight: 650; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--accent-ink); +} + +.feature-stats strong { + display: block; + margin-bottom: 0.3rem; + font-family: var(--font-display); + font-size: clamp(2rem, 3.2vw, 2.6rem); + font-weight: 750; + letter-spacing: -0.04em; + line-height: 1; + text-transform: none; + color: var(--ink); +} + +.feature-stats p { + margin: 0; + color: var(--muted); + font-size: 0.95rem; +} + +@media (min-width: 560px) { + .feature-stats { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@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) { + .feature-stats { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +} + /* —— Services —— */ .service-list { list-style: none;