sveske-juice/deprived-main-website
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Improved main page

Browse source
This commit is contained in:
BOT Alex 2025-04-06 01:21:16 +02:00
parent b56ef35802
commit 2408174b8b
8 changed files with 100 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package-lock.json generated
View file

@ -18,7 +18,7 @@
"devDependencies": {
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/adapter-static": "^3.0.1",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/kit": "^2.20.4",
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"@tailwindcss/typography": "^0.5.15",
"autoprefixer": "^10.4.20",

2
package.json
View file

@ -12,7 +12,7 @@
"devDependencies": {
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/adapter-static": "^3.0.1",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/kit": "^2.20.4",
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"@tailwindcss/typography": "^0.5.15",
"autoprefixer": "^10.4.20",

36
src/app.css
View file

@ -37,7 +37,7 @@
}
.bg-grid {
.bg-grid-100 {
background:
linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
@ -52,4 +52,38 @@
80px 80px,
80px 80px;
background-color: var(--color-base-100);
}
.bg-grid-200 {
background:
linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
#f2f2f2;
background-size:
4px 4px,
4px 4px,
80px 80px,
80px 80px,
80px 80px,
80px 80px,
80px 80px,
80px 80px;
background-color: var(--color-base-200);
}
.bg-grid-300 {
background:
linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
#f2f2f2;
background-size:
4px 4px,
4px 4px,
80px 80px,
80px 80px,
80px 80px,
80px 80px,
80px 80px,
80px 80px;
background-color: var(--color-base-300);
}

7
src/app.html
View file

@ -8,11 +8,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Change theme for site here -->
<link rel="stylesheet" href="/stylesheets/main-theme.css" />
<link rel="stylesheet" href="/stylesheets/global.css" />
%sveltekit.head%
</head>
<body style="display: contents">%sveltekit.body%</div>
<body style="display: contents">
<div class="inline relative w-full h-full">
%sveltekit.body%
</div>
</body>
</html>

84
src/routes/+page.svelte
View file

@ -76,49 +76,51 @@
<h2 class="prose main-title text-center" style="font-size: {!mobile ? 3 : 2}rem;">
Developers
</h2>
<div class="grid space-y-5 p-4 rounded" style="width: 100%; max-width: 21cm;">
<div>
<div class="grid space-y-1 p-4 rounded" style="width: 100%; max-width: 21cm;">
<Profile name="Zhen / Alex" tags={["Programmer", "3D artist", "UX Designer"]} isMobile={mobile}>
<span>
<p>Hi, I am Alex/Zhen, {@html !mobile ? "" : "<br/>"} I'm that chinese guy.</p>
<p>Here's my CV: <a href="/zhen/cv/rev2?hideOnPrint=1" style="color:lightblue;">pdf</a></p>
</span>
</Profile>
<ProfileSpacer/>
<Profile name="Sveske / Benjamin" tags={["Programmer", "Back-end Admin"]} isMobile={mobile}>
<span>
<p>Hi, I use Arch, btw.</p>
<p><a href="https://www.linkedin.com/in/benjamin-dreyer/" target="_blank" style="color:lightblue;">Linked-in</a></p>
</span>
</Profile>
<ProfileSpacer/>
<Profile isSnorre={true} tags={["Programmer"]} isMobile={mobile}/>
<Profile name="Zhen / Alex" tags={["Programmer", "3D artist", "UX Designer"]} isMobile={mobile}>
<span>
<p>Hi, I am Alex/Zhen, {@html !mobile ? "" : "<br/>"} I'm that chinese guy.</p>
<p>Here's my CV: <a href="/zhen/cv/rev2?hideOnPrint=1" style="color:lightblue;">pdf</a></p>
</span>
</Profile>
<ProfileSpacer/>
<Profile name="Sveske / Benjamin" tags={["Programmer", "Back-end Admin"]} isMobile={mobile}>
<span>
<p><span class="inline line-through">Hi, I use Arch, btw. </span> I use NixOS now</p>
<p><a href="https://www.linkedin.com/in/benjamin-dreyer/" target="_blank" style="color:lightblue;">Linked-in</a></p>
</span>
</Profile>
<ProfileSpacer/>
<Profile isSnorre={true} tags={["Programmer"]} isMobile={mobile}/>
<ProfileSpacer/>
<Profile name="Oliver" tags={["Sound designer", "Story designer","2D Artist", "Programmer"]} isMobile={mobile}>
<span>
<p>Snorre does not get paid.</p>
<p><a href="https://www.linkedin.com/in/oliver-schwenger-291944278/" target="_blank" style="color:lightblue;">Linked-in</a></p>
</span>
</Profile>
<ProfileSpacer/>
<Profile name="Oliver" tags={["Sound designer", "Story designer","2D Artist", "Programmer"]} isMobile={mobile}>
<span>
<p>Snorre does not get paid.</p>
<p><a href="https://www.linkedin.com/in/oliver-schwenger-291944278/" target="_blank" style="color:lightblue;">Linked-in</a></p>
</span>
</Profile>
<ProfileSpacer/>
<Profile name="Kim" tags={["Cinemachine", "3D Artist", "Programmer"]} isMobile={mobile}>
<span>
<p>Abla espaniol</p>
<p><a href="https://www.linkedin.com/in/kim-rex-de-dios-408860299/" target="_blank" style="color:lightblue;">Linked-in</a></p>
</span>
</Profile>
<ProfileSpacer/>
<Profile name="Zylvester" tags={["2D/3D Artist", "Sound designer", "Story designer"]} isMobile={mobile}>
<span>
<p>Hi, I am [insert text here]</p>
<p>Here's a joke about recursion: <a href="/" target="_blank" style="color:lightblue;">recursion</a></p>
</span>
</Profile>
<ProfileSpacer/>
<Profile name="Kim" tags={["Cinemachine", "3D Artist", "Programmer"]} isMobile={mobile}>
<span>
<p>Abla espaniol</p>
<p><a href="https://www.linkedin.com/in/kim-rex-de-dios-408860299/" target="_blank" style="color:lightblue;">Linked-in</a></p>
</span>
</Profile>
<ProfileSpacer/>
<Profile name="Zylvester" tags={["2D/3D Artist", "Sound designer", "Story designer"]} isMobile={mobile}>
<span>
<p>Hi, I am [insert text here]</p>
<p>Here's a joke about recursion: <a href="/" target="_blank" style="color:lightblue;">recursion</a></p>
</span>
</Profile>
</div>
</div>
</div>
@ -219,7 +221,7 @@
<div class="games card bg-base-100 w-96 shadow-xl">
<figure class="rounded-b-none" style="height: 15em;">
<div class="bg-grid flex w-full h-full"></div>
<div class="bg-grid-100 flex w-full h-full"></div>
</figure>
<div class="card-body">
<h2 class="card-title">What's next?</h2>

28
src/routes/comps/Profile.svelte
View file

@ -11,8 +11,9 @@
</script>
<div class="bg-grid-200 border-2 border-base-300 pr-4 rounded cozette">
{#if !isSnorre}
<div class="developersProfile {isSnorre ? "isSnorre" : ""} pl-4 font-mono">
<div class="developersProfile {isSnorre ? "isSnorre" : ""} pl-1 font-mono">
<NameAndTag name={name} tags={tags} isMobile={isMobile}/>
<slot/>
<MobileTags tags={tags} isMobile={isMobile}/>
@ -29,39 +30,38 @@
<pre> </pre>
{/if}
</div>
<div class="developersProfile snorre-overlay relative pl-4 font-mono">
<div class="developersProfile snorre-overlay relative pl-1 font-mono">
<NameAndTag name="Snorre" tags={tags} isMobile={isMobile}/>
<span>
<p>I'm the diversity hire. (Gay)</p>
<p><a href="https://www.linkedin.com/in/snorrealtschul/" target="_blank" style="color:lightblue;">Linked-in</a></p>
<!-- <p><a href="https://www.linkedin.com/in/snorrealtschul/" target="_blank" style="color:lightblue;">My website</a></p> -->
<p><a href="https://spoodythe.one/" target="_blank" style="color:lightblue;">My website</a></p>
</span>
<MobileTags tags={tags} isMobile={isMobile}/>
</div>
</div>
{/if}
</div>
<style>
.developersProfile:not(.snorre):not(.snorre-overlay){
background-image: linear-gradient(var(--color-neutral) 33%, rgba(255,255,255,0) 0%);
/* background-image: linear-gradient(var(--color-neutral) 33%, rgba(255,255,255,0) 0%); */
/* background-image: linear-gradient(var(--color-neutral) 100%);
background-position: left;
background-size: 0.1rem 0.5rem;
background-repeat: repeat-y;
}
.developersProfile {
background-repeat: repeat-y; */
}
.snorre {
border-left: dashed transparent 0.1rem;
/* border-left: dashed transparent 0.1rem;
border-image: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet);
border-image-slice: 1;
border-image-slice: 1; */
}
.snorre-overlay {
background-image: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, var(--color-base-200) 40%);
background-position: left;
/* background-image: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, var(--color-base-200) 40%); */
/* background-position: left;
background-size: 0.1rem 0.5rem;
background-repeat: repeat-y;
background-repeat: repeat-y; */
}
</style>

2
static/stylesheets/global.css
View file

@ -13,7 +13,7 @@
url("/fonts/NotoSans-VariableFont_wdth,wght.ttf") format("truetype");
}
.cozette {
.cozette *{
font-family: "CozetteVector";
}

13
static/stylesheets/main-theme.css
View file

@ -1,13 +0,0 @@
:root {
--title-font: 'CozetteVector';
--main-font: 'Segoe UI';
--text1: #eee; /* Primary text. */
--text2: #cac9c6; /* Secondary text. */
--text3: #b0afad; /* Third text color. */
--text4: #868584; /* Fourth text color. */
--background: #232222;
--background1: #1b1a1a;
--primary: #227c9d;
--secondary: #ffcb77;
--accent: #17c3b2;
}