wouter/WebHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

background

Browse Source
This commit is contained in:
Wouter van Veelen
2025-11-23 16:54:18 +01:00
parent 9354f02819
commit 5e72feae8b
5 changed files with 53 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
assets/noise.svg Normal file
View File

@@ -0,0 +1,12 @@
<!-- see also: https://grainy-gradients.vercel.app/ -->
<svg viewBox='0 0 4000 4000' xmlns='http://www.w3.org/2000/svg'>
<filter id='noiseFilter'>
<feTurbulence
type='fractalNoise'
baseFrequency='0.62'
numOctaves='3'
stitchTiles='stitch'/>
</filter>
<rect width='100%' height='100%' filter='url(#noiseFilter)'/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 403 B

1
index.html
View File

@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="stylesheet" href="/src/App.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>cblt-website</title> <title>cblt-website</title>
</head> </head>

34
src/App.css
View File

@@ -48,8 +48,36 @@
font-display: swap; font-display: swap;
} }
:root { #root {
font-family: veramono, monospace; position: absolute;
background: #141516; overflow: scroll;
height: 100%; height: 100%;
width: 100%;
}
html {
min-height: 100%;
}
body {
font-family: veramono, monospace;
height: 100%;
filter: contrast(400%) brightness(1000%);
background: #190a52;
background:
linear-gradient(177deg, rgba(25, 10, 82, 1) 0%, rgba(29, 0, 43, 0) 100%),
url("/assets/noise.svg"),
rgba(29, 0, 43, 1);
background-blend-mode: overlay;
position: absolute;
isolation: isolate;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
#background {
} }

9
src/App.tsx
View File

@@ -1,4 +1,3 @@
import './App.css';
import { Card, CardContent, Container, ThemeProvider, Typography } from '@mui/material'; import { Card, CardContent, Container, ThemeProvider, Typography } from '@mui/material';
import { Theme } from './Theme.ts'; import { Theme } from './Theme.ts';
@@ -8,8 +7,12 @@ function App() {
<ThemeProvider theme={Theme}> <ThemeProvider theme={Theme}>
<Container> <Container>
<Card> <Card>
<CardContent> <CardContent sx={{ height: '2000px' }}>
<Typography fontSize={36} fontFamily='hammersmith-one'> <Typography
// sx={(theme) => ({ color: theme.palette.text.secondary })}
fontSize={36}
fontFamily='hammersmith-one'
>
Hello, World! Hello, World!
</Typography> </Typography>
</CardContent> </CardContent>

3
src/Theme.ts
View File

@@ -6,5 +6,8 @@ export const Theme = createTheme({
primary: { primary: {
main: '#b9121b', main: '#b9121b',
}, },
text: {
primary: '#b5b5b5',
},
}, },
}); });