Skip to content

Instantly share code, notes, and snippets.

View Dionyso7's full-sized avatar

Dionyso7

View GitHub Profile
@Dionyso7
Dionyso7 / index.html
Created October 5, 2025 15:13
Play with Header on Page Transitions
<div id="app">
<div :class="['bg', bg]">
<header>
<nav>
<ul>
<li><a class="link-bio" href="#bio" @click="bg = 'bio'">Bio</a></li>
<li><a class="link-projects" href="#projects" @click="bg = 'projects'">Projects</a></li>
<li><a class="link-find-me" href="#findme" @click="bg = 'find-me'">Find Me</a></li>
</ul>
</nav>
@Dionyso7
Dionyso7 / gsap-lenis-layout-explorations-with-gsap-lenis-and-scrolltrigger-n-1.markdown
Created October 4, 2025 12:20
[gsap/lenis] ❍ Layout Explorations with Gsap, Lenis and ScrollTrigger N°1
@Dionyso7
Dionyso7 / index.html
Created October 3, 2025 16:29
[threejs/gsap] ❍ Explorations with GSAP and Scroll Trigger / 1004
<div class="content">
<section class="section">
<div class="section-inner">
<h1 class="title">Beyond<br>Time</h1>
<p class="description">The universe breathes in patterns we barely comprehend, revealing itself through silence and the spaces between moments.</p>
</div>
</section>
<section class="section">
<div class="section-inner">
<h1 class="title">Cosmic<br>Awareness</h1>
@Dionyso7
Dionyso7 / index.html
Created October 3, 2025 15:12
Play with Header on Page Transitions
<div id="app">
<div :class="['bg', bg]">
<header>
<nav>
<ul>
<li><a class="link-bio" href="#bio" @click="bg = 'bio'">Bio</a></li>
<li><a class="link-projects" href="#projects" @click="bg = 'projects'">Projects</a></li>
<li><a class="link-find-me" href="#findme" @click="bg = 'find-me'">Find Me</a></li>
</ul>
</nav>
@Dionyso7
Dionyso7 / index.html
Created October 3, 2025 14:35
ROSA-Restaurant
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>ROSA- Restaurant</title>
<meta name="description" content="ROSA is an enchanting Parallax Restaurant WordPress Theme that allows you to tell your story in an enjoyable way, perfect for restaurants or coffee shops.">
<meta name="viewport" content="width = device-width, initial-scale = 1, shrink-to-fit = no">
@Dionyso7
Dionyso7 / index.html
Created October 3, 2025 14:22
Play with Header on Page Transitions
<div id="app">
<div :class="['bg', bg]">
<header>
<nav>
<ul>
<li><a class="link-bio" href="#bio" @click="bg = 'bio'">Bio</a></li>
<li><a class="link-projects" href="#projects" @click="bg = 'projects'">Projects</a></li>
<li><a class="link-find-me" href="#findme" @click="bg = 'find-me'">Find Me</a></li>
</ul>
</nav>
@Dionyso7
Dionyso7 / firewatch-parallax-in-css.markdown
Created October 3, 2025 14:13
Firewatch Parallax in CSS

Firewatch Parallax in CSS

I recreated the parallax header on the Firewatch website in CSS. It was originally meant as a daft experiment but it seems to have blown-up.

I've base-64 encoded the images to avoid hot-linking to the Firewatch site.

A Pen by Sam Beckham on CodePen.

License.

@Dionyso7
Dionyso7 / index.html
Created October 3, 2025 13:50
Play with Header on Page Transitions
<div id="app">
<div :class="['bg', bg]">
<header>
<nav>
<ul>
<li><a class="link-bio" href="#bio" @click="bg = 'bio'">Bio</a></li>
<li><a class="link-projects" href="#projects" @click="bg = 'projects'">Projects</a></li>
<li><a class="link-find-me" href="#findme" @click="bg = 'find-me'">Find Me</a></li>
</ul>
</nav>
@Dionyso7
Dionyso7 / index.html
Created October 3, 2025 12:17
Play with Header on Page Transitions
<div id="app">
<div :class="['bg', bg]">
<header>
<nav>
<ul>
<li><a class="link-bio" href="#bio" @click="bg = 'bio'">Bio</a></li>
<li><a class="link-projects" href="#projects" @click="bg = 'projects'">Projects</a></li>
<li><a class="link-find-me" href="#findme" @click="bg = 'find-me'">Find Me</a></li>
</ul>
</nav>