Complete overhaul of deprived website
This commit is contained in:
parent
ec1ff4ad57
commit
e546b1945d
10 changed files with 806 additions and 165 deletions
232
src/lib/images/DeprivedLogo.svelte
Normal file
232
src/lib/images/DeprivedLogo.svelte
Normal file
File diff suppressed because one or more lines are too long
228
src/lib/images/DeprivedLogo.svg
Normal file
228
src/lib/images/DeprivedLogo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 27 KiB |
20
src/lib/images/HamburgerMenuIcon.svelte
Normal file
20
src/lib/images/HamburgerMenuIcon.svelte
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<script>
|
||||
export let Class = '';
|
||||
export let Style = '';
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class={Class}
|
||||
style={Style}
|
||||
height="20"
|
||||
id="Layer_1"
|
||||
version="1.1"
|
||||
viewBox="0 0 28 20"
|
||||
width="28"
|
||||
xml:space="preserve"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><defs
|
||||
id="defs1" /><path
|
||||
d="M 2,4 H 26 C 27.104,4 28,3.104 28,2 28,0.896 27.104,0 26,0 H 2 C 0.896,0 0,0.896 0,2 0,3.104 0.896,4 2,4 Z M 26,8 H 2 c -1.104,0 -2,0.896 -2,2 0,1.104 0.896,2 2,2 h 24 c 1.104,0 2,-0.896 2,-2 0,-1.104 -0.896,-2 -2,-2 z m 0,8 H 2 c -1.104,0 -2,0.896 -2,2 0,1.104 0.896,2 2,2 h 24 c 1.104,0 2,-0.896 2,-2 0,-1.104 -0.896,-2 -2,-2 z"
|
||||
id="path1"
|
||||
style="fill-opacity:1" /></svg>
|
||||
BIN
src/lib/videos/DeprivedDevMontage.gif
Normal file
BIN
src/lib/videos/DeprivedDevMontage.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 MiB |
|
|
@ -6,6 +6,9 @@
|
|||
import MediaQuery from 'svelte-media-queries';
|
||||
export let hideOnPrint: boolean;
|
||||
|
||||
import DeprivedLogo from "$lib/images/DeprivedLogo.svelte";
|
||||
import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte";
|
||||
|
||||
const footerCollapseThreshold : string = '1000px';
|
||||
const headerCollapseThreshold : string = '1000px';
|
||||
let footerCollapse : boolean;
|
||||
|
|
@ -37,79 +40,81 @@
|
|||
<MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={headerCollapse} />
|
||||
|
||||
<!-- Nav bar -->
|
||||
<header class="{hideOnPrint ? 'hide-on-print' : ''}">
|
||||
<div class="nav-bar">
|
||||
{#if !headerCollapse}
|
||||
<div class="desktop">
|
||||
<a href="/" class="nav-head">
|
||||
<img id="logo-link" src="/images/logo.png" alt="The Deprived Devs Logo"/>
|
||||
<h3 id="logo-text">The Deprived Devs</h3>
|
||||
</a>
|
||||
<div class="nav-spacer" />
|
||||
<a href="/">Home</a>
|
||||
<a href="/games">Games</a>
|
||||
<a href="/posts">Blog</a>
|
||||
<a href="/about">About</a>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="collapsed">
|
||||
<div class="bg-base-200 p-0">
|
||||
<header class="{hideOnPrint ? 'hide-on-print' : ''}">
|
||||
<div class="nav-bar pr-4 bg-base-200">
|
||||
{#if !headerCollapse}
|
||||
<div class="desktop">
|
||||
<a href="/" class="nav-head">
|
||||
<DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/>
|
||||
<h3 id="logo-text">The Deprived Devs</h3>
|
||||
</a>
|
||||
<div class="nav-spacer" />
|
||||
<a href="/">Home</a>
|
||||
<a href="https://botalex.itch.io/">Games</a>
|
||||
<!-- <a href="/posts">Blog</a>
|
||||
<a href="/about">About</a> -->
|
||||
</div>
|
||||
{:else}
|
||||
<div class="collapsed">
|
||||
<a on:click={resetNavBar} href="/" class="nav-head">
|
||||
<img id="logo-link" src="/images/logo.png" alt="The Deprived Devs Logo"/>
|
||||
<DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/>
|
||||
<h3 id="logo-text">The Deprived Devs</h3>
|
||||
</a>
|
||||
<div class="nav-spacer" />
|
||||
<button id="toggle-nav" on:click={() => navbarHidden = !navbarHidden}>
|
||||
<img src="/images/icons/hamburger_menu.svg" alt="Toggle Navigation Bar" />
|
||||
<HamburgerMenuIcon Class="fill-base-content"/>
|
||||
</button>
|
||||
</div>
|
||||
{#if !navbarHidden}
|
||||
<div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
|
||||
<a on:click={resetNavBar} href="/">Home</a>
|
||||
<a on:click={resetNavBar} href="/games">Games</a>
|
||||
<a on:click={resetNavBar} href="/posts">Blog</a>
|
||||
<a on:click={resetNavBar} href="/about">About</a>
|
||||
</div>
|
||||
{#if !navbarHidden}
|
||||
<div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
|
||||
<a on:click={resetNavBar} href="/">Home</a>
|
||||
<a on:click={resetNavBar} href="https://botalex.itch.io/">Games</a>
|
||||
<!-- <a on:click={resetNavBar} href="/posts">Blog</a>
|
||||
<a on:click={resetNavBar} href="/about">About</a> -->
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Page content -->
|
||||
<slot />
|
||||
|
||||
<!-- About footer -->
|
||||
<footer class="{hideOnPrint ? 'hide-on-print' : ''}">
|
||||
<div class="about-container">
|
||||
<div class="credits">
|
||||
<span>© 2023-2024</span>
|
||||
<br>
|
||||
<span>Benjamin Dreyer</span>
|
||||
<br>
|
||||
<span>Oliver Schwenger</span>
|
||||
<br>
|
||||
<span>Sylvester Junge</span>
|
||||
<br>
|
||||
<span>Zhentao Wei</span>
|
||||
<br>
|
||||
<br>
|
||||
<span>Website <a href="https://gitea.deprived.dev/Sveskejuice/deprived-main-website" target="_blank">source code</a></span>
|
||||
</div>
|
||||
<div>
|
||||
<h3>About Us</h3>
|
||||
<a href="/about">About</a>
|
||||
</header>
|
||||
|
||||
<!-- Page content -->
|
||||
<slot />
|
||||
|
||||
<!-- About footer -->
|
||||
<footer class="{hideOnPrint ? 'hide-on-print' : ''}">
|
||||
<div class="about-container">
|
||||
<div class="credits">
|
||||
<span>© 2023-2024</span>
|
||||
<br>
|
||||
<span>Benjamin Dreyer</span>
|
||||
<br>
|
||||
<span>Oliver Schwenger</span>
|
||||
<br>
|
||||
<span>Sylvester Junge</span>
|
||||
<br>
|
||||
<span>Zhentao Wei</span>
|
||||
<br>
|
||||
<br>
|
||||
<span>Website <a href="https://gitea.deprived.dev/Sveskejuice/deprived-main-website" target="_blank">source code</a></span>
|
||||
</div>
|
||||
<div>
|
||||
<h3>About Us</h3>
|
||||
<a href="/about">About</a>
|
||||
</div>
|
||||
<div class="contact">
|
||||
<h3>Contact</h3>
|
||||
<a href="https://discord.gg/awatEEqc3M" target="_blank" class="social">
|
||||
<img src="/images/icons/discord.svg" alt="Discord"/>
|
||||
<span>Discord</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact">
|
||||
<h3>Contact</h3>
|
||||
<a href="https://discord.gg/awatEEqc3M" target="_blank" class="social">
|
||||
<img src="/images/icons/discord.svg" alt="Discord"/>
|
||||
<span>Discord</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
/* Nav bar. */
|
||||
header {
|
||||
display: flex;
|
||||
|
|
@ -163,7 +168,7 @@
|
|||
|
||||
#logo-text {
|
||||
font-size: 24px;
|
||||
color: var(--text2);
|
||||
color: oklch(var(--bc));
|
||||
font-family: var(--title-font);
|
||||
margin: 0;
|
||||
|
||||
|
|
@ -180,14 +185,15 @@
|
|||
|
||||
font-size: 22px;
|
||||
font-family: var(--title-font);
|
||||
color: var(--text2);
|
||||
// Text color
|
||||
color: oklch(var(--bc));
|
||||
}
|
||||
|
||||
/* Footer. */
|
||||
footer {
|
||||
margin-top: 50px;
|
||||
padding: 25px 0;
|
||||
background-color: var(--background1);
|
||||
background-color: oklch(var(--b3));
|
||||
|
||||
height: 100%;
|
||||
|
||||
|
|
@ -199,7 +205,7 @@
|
|||
width: 80%;
|
||||
height: 100%;
|
||||
|
||||
color: var(--text2);
|
||||
color: oklch(var(--bc));
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
|
|||
|
|
@ -5,111 +5,73 @@
|
|||
import Button from '$lib/IO/Button.svelte';
|
||||
import { ButtonType } from '$lib/IO/ButtonType.ts';
|
||||
import Timeline from '../comps/timeline/timeline.svelte';
|
||||
import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
|
||||
|
||||
|
||||
import BackgroundVideo from "$lib/videos/DeprivedDevMontage.gif"
|
||||
|
||||
export let data; // <- contains post data
|
||||
|
||||
$: most_recent_post = data.summaries[0];
|
||||
|
||||
const mobileThreshold : string = '1000px';
|
||||
const mobileThreshold : string = '600px'; // was 1000px. zhen testing
|
||||
let mobile : boolean;
|
||||
const post_show_count : number = 3;
|
||||
</script>
|
||||
|
||||
<!-- Detect mobile -->
|
||||
<MediaQuery query='(max-width: {mobileThreshold})' bind:matches={mobile} />
|
||||
|
||||
<div class="main-title">
|
||||
<h1>Deprived Devs</h1>
|
||||
<div class="collapse collapse-arrow bg-base-200 text-start">
|
||||
<input type="radio" name="my-accordion-2" checked/>
|
||||
<div class="collapse-title text-xl font-medium "><b>Alex / Zhen</b></div>
|
||||
<div class="collapse-content">
|
||||
<p>Hello, I am Zhen Aka. Alex.</p>
|
||||
<p>Here's my portfolio: <a href="/zhen/cv/rev1?hideOnPrint=1" style="color:lightblue;">pdf</a></p>
|
||||
<Parallax sections={1.2}>
|
||||
<ParallaxLayer span={0.6} rate={0.2}>
|
||||
<div style="position: relative; width: 100%; height: 100%; overflow: hidden;">
|
||||
<img src="{BackgroundVideo}" style="width: 100%; height: 100%; object-fit: cover; filter: blur(5px) brightness(0.6);" alt="Background video"/>
|
||||
<div class="main-title" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; gap: 2rem; color: white; padding: 1rem;">
|
||||
<h1 style="font-size: {!mobile ? 5 : 3}rem; text-shadow: 0.2rem 0.2rem 1rem rgba(0, 0, 0, 0.9); z-index: 100;">{@html !mobile ? "Deprived Devs" : "Deprived<br/>Devs"}</h1>
|
||||
{#if mobile}
|
||||
<div style="width: 100px; height: 100px;"></div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</ParallaxLayer>
|
||||
<ParallaxLayer offset={0.6} rate={0.3} class="bg-base-200">
|
||||
<div class="grid place-items-center">
|
||||
<div class="p-4 grid gap-4" style="{!mobile ? "max-width: 50vw;" : ""}">
|
||||
<div class="collapse collapse-arrow bg-base-100 text-start">
|
||||
<input type="radio" name="my-accordion-2" checked/>
|
||||
<div class="collapse-title text-xl font-medium "><b>Alex / Zhen</b></div>
|
||||
<div class="collapse-content">
|
||||
<p>Hi, I am Alex/Zhen, I'm that chinese guy.</p>
|
||||
<p>Here's my CV: <a href="/zhen/cv/rev1?hideOnPrint=1" style="color:lightblue;">pdf</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse collapse-arrow bg-base-100 text-start">
|
||||
<input type="radio" name="my-accordion-2"/>
|
||||
<div class="collapse-title text-xl font-medium "><b>Sveske / Benjamin</b></div>
|
||||
<div class="collapse-content">
|
||||
<p>Hi, I use Arch, btw.</p>
|
||||
<p>Here's my Linked-in: <a href="https://www.linkedin.com/in/benjamin-dreyer/" style="color:lightblue;">Linked-in</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse collapse-arrow bg-base-100 text-start">
|
||||
<input type="radio" name="my-accordion-2"/>
|
||||
<div class="collapse-title text-xl font-medium "><b>Zylvester</b></div>
|
||||
<div class="collapse-content">
|
||||
<p>Hi, I am [insert text here]</p>
|
||||
<p>Here's a joke about recursion: <a href="" style="color:lightblue;">recursion</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div>
|
||||
<div class="collapse collapse-arrow bg-base-200">
|
||||
<input type="radio" name="my-accordion-2" />
|
||||
<div class="collapse-title text-xl font-medium">Click to open this one and close others</div>
|
||||
<div class="collapse-content">
|
||||
<p>hello</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse collapse-arrow bg-base-200">
|
||||
<input type="radio" name="my-accordion-2" />
|
||||
<div class="collapse-title text-xl font-medium">Click to open this one and close others</div>
|
||||
<div class="collapse-content">
|
||||
<p>hello</p>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</ParallaxLayer>
|
||||
</Parallax>
|
||||
|
||||
<Timeline/>
|
||||
|
||||
<style>
|
||||
#news-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
transition-duration: 500ms;
|
||||
transition-property: width;
|
||||
width: 80%;
|
||||
max-width: 1400px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
#news-header {
|
||||
font-size: min(8vw, 36px);
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.news-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 25px;
|
||||
|
||||
width: 100%;
|
||||
align-items: left;
|
||||
}
|
||||
|
||||
.news-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
#news-footer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.dummy {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#more-posts {
|
||||
flex-grow: 1;
|
||||
min-width: 10em;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
color: var(--text1);
|
||||
margin: 0 auto;
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main-title > h1 {
|
||||
font-size: 9vw; /* Change if title changes */
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-family: var(--title-font);
|
||||
color: var(--text1);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
|
||||
<div class="cv-info-container hide-on-print">
|
||||
<div>
|
||||
Under here is my CV rev1 for an application. This page has been able to be saved as PDF.
|
||||
Under here is my CV rev1 for an application made entirely in HTML and CSS. The page is designed to be saved as PDF.
|
||||
This can be done by pressing <div class="keyboard-key">P</div> + <div class="keyboard-key">CTRL</div>, then set scaling to 100% and no margins. Lastly, select save to PDF or print.
|
||||
<br/>
|
||||
<br/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue