Skip to content

Commit abab327

Browse files
escherliesescherlies
committed
Merge branch 'design'
2 parents 7a696b8 + 858d4f8 commit abab327

File tree

4 files changed

+131
-48
lines changed

4 files changed

+131
-48
lines changed

‎public/noisy-texture-100x100-o4-d10-c-f34379-t1.png

7.17 KB
Loading

‎src/App.tsx

Lines changed: 64 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,25 @@
11
import { startLavaAnimation } from "./lava/app"
22
import { createEffect } from 'solid-js';
33
import { useThemeStore, colorSchemes } from './stores/theme';
4+
import { JSX } from "solid-js";
5+
6+
// Content section component
7+
interface ContentSectionProps {
8+
id: string;
9+
title: string;
10+
children: JSX.Element;
11+
}
12+
13+
function ContentSection(props: ContentSectionProps) {
14+
return (
15+
<section id={props.id} class="group">
16+
<div class="flex flex-col items-center gap-5">
17+
<h2 class="text-4xl font-bold font-serif">{props.title}</h2>
18+
{props.children}
19+
</div>
20+
</section>
21+
);
22+
}
423

524
function App() {
625
const { currentTheme, cycleTheme } = useThemeStore();
@@ -18,7 +37,7 @@ function App() {
1837
{/* Theme toggle button */}
1938
<button
2039
onClick={cycleTheme}
21-
class="fixed top-4 right-4 z-10 px-4 py-2 bg-white/10 backdrop-blur-sm rounded-lg
40+
class="fixed top-4 right-4 z-10 px-4 py-2 bg-white/10 backdrop-blur-2xl rounded-lg
2241
hover:bg-white/20 transition-colors text-white font-medium"
2342
>
2443
Theme: {currentTheme()}
@@ -29,7 +48,7 @@ function App() {
2948
{/* Hero section */}
3049
<section class="flex flex-col gap-5 items-center py-12 pt-24 md:py-20 md:pt-40 px-4">
3150
<h1 class="font-bold text-5xl md:text-6xl lg:text-8xl font-serif text-white text-center">NixCon 2025</h1>
32-
<div class="flex flex-col gap-2 items-center text-lg md:text-2xl">
51+
<div class="flex flex-col gap-2 items-center text-lg md:text-2xl font-bold tracking-tight">
3352
<p class="flex items-center gap-2">
3453
<span class="text-2xl md:text-3xl">🗺️</span>
3554
Rapperswil-Jona, Switzerland
@@ -40,6 +59,7 @@ function App() {
4059
</p>
4160
</div>
4261

62+
{/* Nav */}
4363
<nav class="flex flex-wrap justify-center gap-4 md:gap-6 mt-6 md:mt-8 font-bold text-lg md:text-xl px-2">
4464
<a href="#location" class="hover:text-gray-300 transition-colors">Location</a>
4565
<a href="#tickets" class="hover:text-gray-300 transition-colors">Tickets</a>
@@ -48,48 +68,52 @@ function App() {
4868
<a href="#chat" class="hover:text-gray-300 transition-colors">Chat</a>
4969
<a href="#schedule" class="hover:text-gray-300 transition-colors">Schedule</a>
5070
</nav>
71+
5172
</section>
5273

53-
{/* Content sections */}
54-
<div class="w-full max-w-md mx-auto space-y-20 md:space-y-32 pb-16 px-4">
55-
<section id="location" class="flex flex-col items-center gap-5">
56-
<h2 class="text-4xl font-bold font-serif">Location</h2>
57-
<p class="text-center">Join us in Rapperswil-Jona, Switzerland for NixCon 2025!</p>
58-
<span class="text-4xl opacity-60 font-bold">~</span>
59-
</section>
60-
61-
<section id="tickets" class="flex flex-col items-center gap-5">
62-
<h2 class="text-4xl font-bold font-serif">Tickets</h2>
63-
<p class="text-center">Ticket information coming soon!</p>
64-
<span class="text-4xl opacity-60 font-bold">~</span>
65-
</section>
66-
67-
<section id="coc" class="flex flex-col items-center gap-5">
68-
<h2 class="text-4xl font-bold font-serif">Code of Conduct</h2>
69-
<p class="text-center">Our community guidelines and code of conduct will be available soon.</p>
70-
<span class="text-4xl opacity-60 font-bold">~</span>
71-
</section>
72-
73-
<section id="faq" class="flex flex-col items-center gap-5">
74-
<h2 class="text-4xl font-bold font-serif">FAQ</h2>
75-
<p class="text-center">Frequently asked questions will be posted here.</p>
76-
<span class="text-4xl opacity-60 font-bold">~</span>
77-
</section>
78-
79-
<section id="chat" class="flex flex-col items-center gap-5">
80-
<h2 class="text-4xl font-bold font-serif">Chat</h2>
81-
<p class="text-center">Join our community chat to connect with other attendees!</p>
82-
<span class="text-4xl opacity-60 font-bold">~</span>
83-
</section>
84-
85-
<section id="schedule" class="flex flex-col items-center gap-5">
86-
<h2 class="text-4xl font-bold font-serif">Schedule</h2>
87-
<p class="text-center">Conference schedule will be announced soon.</p>
88-
<span class="text-4xl opacity-60 font-bold">~</span>
89-
</section>
90-
</div>
74+
{/* Glass container for the whole page content */}
75+
<div class="max-w-3xl mx-auto p-8 bg-white/5 backdrop-blur-2xl border border-white/10 rounded-2xl shadow-xl glass-container-with-texture">
76+
77+
{/* Content sections */}
78+
<div class="w-full mx-auto space-y-12 px-4">
79+
<ContentSection id="location" title="Location">
80+
<p class="text-center">Join us in Rapperswil-Jona, Switzerland for NixCon 2025!</p>
81+
</ContentSection>
82+
83+
<hr class="h-[1px] w-full border-white/10" />
84+
85+
<ContentSection id="tickets" title="Tickets">
86+
<p class="text-center">Ticket information coming soon!</p>
87+
</ContentSection>
9188

89+
<hr class="h-[1px] w-full border-white/10" />
90+
91+
<ContentSection id="coc" title="Code of Conduct">
92+
<p class="text-center">Our community guidelines and code of conduct will be available soon.</p>
93+
</ContentSection>
94+
95+
<hr class="h-[1px] w-full border-white/10" />
96+
97+
<ContentSection id="faq" title="FAQ">
98+
<p class="text-center">Frequently asked questions will be posted here.</p>
99+
</ContentSection>
100+
101+
<hr class="h-[1px] w-full border-white/10" />
102+
103+
<ContentSection id="chat" title="Chat">
104+
<p class="text-center">Join our community chat to connect with other attendees!</p>
105+
</ContentSection>
106+
107+
<hr class="h-[1px] w-full border-white/10" />
108+
109+
<ContentSection id="schedule" title="Schedule">
110+
<p class="text-center">Conference schedule will be announced soon.</p>
111+
</ContentSection>
112+
</div>
113+
114+
</div>
92115

116+
<div class="h-20"></div>
93117
</div>
94118
</>
95119
)

‎src/index.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,4 +32,29 @@
3232
font-family: "WorkSans";
3333
src: url("/fonts/Work_Sans/WorkSans-Italic-VariableFont_wght.ttf") format("truetype");
3434
font-display: swap;
35+
}
36+
37+
/* Glass container with noisy texture overlay */
38+
.glass-container-with-texture {
39+
position: relative;
40+
}
41+
42+
.glass-container-with-texture::before {
43+
content: "";
44+
position: absolute;
45+
top: 0;
46+
left: 0;
47+
right: 0;
48+
bottom: 0;
49+
background-image: url('/noisy-texture-100x100-o4-d10-c-f34379-t1.png');
50+
background-repeat: repeat;
51+
opacity: 0.3;
52+
pointer-events: none;
53+
z-index: 1;
54+
border-radius: inherit;
55+
}
56+
57+
.glass-container-with-texture>* {
58+
position: relative;
59+
z-index: 2;
3560
}

‎src/lava/glsl/fragment.glsl

Lines changed: 42 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,23 @@ uniform vec3 uLavaColor;
88

99
// Based on https://www.shadertoy.com/view/fsKXDm
1010

11+
// Noise functions
12+
// Based on https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83
13+
float rand(vec2 n) {
14+
return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
15+
}
16+
17+
float noise(vec2 p) {
18+
vec2 ip = floor(p);
19+
vec2 u = fract(p);
20+
u = u*u*(3.0-2.0*u);
21+
22+
float res = mix(
23+
mix(rand(ip), rand(ip+vec2(1.0,0.0)), u.x),
24+
mix(rand(ip+vec2(0.0,1.0)), rand(ip+vec2(1.0,1.0)), u.x), u.y);
25+
return res*res;
26+
}
27+
1128
#define MAX_STEPS 30
1229
#define MAX_DIST 30.0
1330
#define MIN_DIST 1.5
@@ -116,12 +133,29 @@ void main() {
116133
col += vec3(1.0 - diff);
117134
col = col * 0.5;
118135

119-
gl_FragColor = vec4(
120-
mix(
121-
uBackgroundColor,
122-
uLavaColor,
123-
col
124-
),
125-
1.0
136+
// Generate noise with extremely decreased scale (extremely large pattern)
137+
float noiseScale = 0.7; // Decreased by 1000% from 11.11
138+
float noiseValue = noise(gl_FragCoord.xy / noiseScale + uTime * 0.01);
139+
140+
// Add a second layer of noise for more detail
141+
float noiseValue2 = noise(gl_FragCoord.xy / (noiseScale * 0.3) + vec2(uTime * 0.02, -uTime * 0.01));
142+
143+
// Add a third layer for even more fine detail
144+
float noiseValue3 = noise(gl_FragCoord.xy / (noiseScale * 0.1) + vec2(-uTime * 0.03, uTime * 0.02));
145+
146+
// Blend all noise layers with different weights
147+
noiseValue = (noiseValue * 0.5 + noiseValue2 * 0.3 + noiseValue3 * 0.2);
148+
149+
// Apply noise to the final color
150+
vec3 finalColor = mix(
151+
uBackgroundColor,
152+
uLavaColor,
153+
col
126154
);
127-
}
155+
156+
// Blend noise with the final color - increased strength for more visibility
157+
float noiseStrength = 0.06; // Increased strength to make it more noticeable
158+
finalColor = mix(finalColor, finalColor * (1.0 - noiseStrength) + vec3(noiseValue) * noiseStrength, 0.95);
159+
160+
gl_FragColor = vec4(finalColor, 1.0);
161+
}

0 commit comments

Comments
 (0)