oh fuck, even more cooking!!!
This commit is contained in:
parent
6d55a75aa4
commit
1dffd47bc1
|
|
@ -30,6 +30,7 @@
|
|||
import Time5 from "$lib/GamePreviews/time-5.gif"
|
||||
import Tags from './comps/Tags.svelte';
|
||||
import NameAndTag from './comps/NameAndTag.svelte';
|
||||
import Profile from './comps/Profile.svelte';
|
||||
|
||||
const mobileThreshold : string = '600px'; // was 1000px. zhen testing
|
||||
let mobile : boolean;
|
||||
|
|
@ -65,59 +66,39 @@
|
|||
Developers
|
||||
</h1>
|
||||
|
||||
|
||||
<div class="developersProfile pl-4 font-mono">
|
||||
<NameAndTag name="Zhen / Alex" tags={["Programmer", "3D artist", "UX Designer"]} 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>
|
||||
</div>
|
||||
</Profile>
|
||||
|
||||
<ProfileSpacer/>
|
||||
<div class="developersProfile pl-4 font-mono">
|
||||
<NameAndTag name="Sveske / Benjamin" tags={["Programmer"]} isMobile={mobile}/>
|
||||
<Profile name="Sveske / Benjamin" tags={["Programmer"]} 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>
|
||||
</div>
|
||||
</Profile>
|
||||
|
||||
<ProfileSpacer/>
|
||||
<div class="w-full">
|
||||
<div class="developersProfile absolute snorre pl-4 font-mono pointer-events-none select-none">
|
||||
<pre style="font-size: {!mobile ? 1.5 : 1.5}rem;"> </pre>
|
||||
<span>
|
||||
<pre> </pre>
|
||||
<pre> </pre>
|
||||
</span>
|
||||
</div>
|
||||
<div class="developersProfile snorre-overlay relative pl-4 font-mono">
|
||||
<NameAndTag name="Snorre" tags={["Programmer"]} isMobile={mobile}/>
|
||||
<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>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Profile isSnorre={true} tags={["Programmer"]} isMobile={mobile}/>
|
||||
|
||||
<ProfileSpacer/>
|
||||
<div class="developersProfile pl-4 font-mono">
|
||||
<NameAndTag name="Oliver" tags={["Sound designer", "Story designer", "Programmer"]} isMobile={mobile}/>
|
||||
<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>
|
||||
</div>
|
||||
</Profile>
|
||||
|
||||
<ProfileSpacer/>
|
||||
<div class="developersProfile pl-4 font-mono">
|
||||
<NameAndTag name="Zylvester" tags={["2D Artist", "3D Artist", "Sound designer", "Story designer"]} isMobile={mobile}/>
|
||||
<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>
|
||||
</div>
|
||||
</Profile>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -241,27 +222,6 @@
|
|||
font-family: var(--title-font);
|
||||
}
|
||||
|
||||
.developersProfile:not(.snorre):not(.snorre-overlay){
|
||||
background-image: linear-gradient(oklch(var(--p)) 33%, rgba(255,255,255,0) 0%);
|
||||
background-position: left;
|
||||
background-size: 0.1rem 0.5rem;
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
.snorre {
|
||||
border-left: dashed transparent 0.1rem;
|
||||
border-image: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet);
|
||||
border-image-slice: 1;
|
||||
}
|
||||
|
||||
.snorre-overlay {
|
||||
background-image: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, oklch(var(--b1)) 40%);
|
||||
background-position: left;
|
||||
background-size: 0.1rem 0.5rem;
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
|
||||
#backgroundGif{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
<script>
|
||||
import Tags from "./Tags.svelte";
|
||||
|
||||
export let isMobile = false;
|
||||
export let tags = ["null"];
|
||||
</script>
|
||||
|
||||
{#if isMobile}
|
||||
<Tags Tags={tags} isMobile={isMobile}/>
|
||||
{/if}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import Tags from "./Tags.svelte";
|
||||
import Tags from "./Tags.svelte"; // Should've used better names lol
|
||||
|
||||
export let isMobile = false;
|
||||
export let name = "";
|
||||
|
|
@ -9,5 +9,7 @@
|
|||
<div class="flex items-center">
|
||||
<h2 style="font-size: {!isMobile ? 1.5 : 1.5}rem;">{name}</h2>
|
||||
<div class="flex flex-grow"/>
|
||||
<Tags Tags={tags}/>
|
||||
{#if !isMobile}
|
||||
<Tags Tags={tags} isMobile={isMobile}/>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<script>
|
||||
import MobileTags from "./MobileTags.svelte";
|
||||
import NameAndTag from "./NameAndTag.svelte";
|
||||
|
||||
export let isMobile = false;
|
||||
export let name = "";
|
||||
export let tags = ["null"];
|
||||
export let isSnorre = false;
|
||||
|
||||
// Shit code but who cares, if it works /shrug
|
||||
</script>
|
||||
|
||||
|
||||
{#if !isSnorre}
|
||||
<div class="developersProfile {isSnorre ? "isSnorre" : ""} pl-4 font-mono">
|
||||
<NameAndTag name={name} tags={tags} isMobile={isMobile}/>
|
||||
<span>
|
||||
<p>Hi, I am Alex/Zhen, {@html !isMobile ? "" : "<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>
|
||||
<MobileTags tags={tags} isMobile={isMobile}/>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="w-full">
|
||||
<div class="developersProfile absolute snorre pl-4 font-mono pointer-events-none select-none">
|
||||
<pre style="font-size: {!isMobile ? 1.5 : 1.5}rem;"> </pre>
|
||||
<span>
|
||||
<pre> </pre>
|
||||
<pre> </pre>
|
||||
</span>
|
||||
{#if isMobile}
|
||||
<pre> </pre>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="developersProfile snorre-overlay relative pl-4 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>
|
||||
</span>
|
||||
<MobileTags tags={tags} isMobile={isMobile}/>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.developersProfile:not(.snorre):not(.snorre-overlay){
|
||||
background-image: linear-gradient(oklch(var(--p)) 33%, rgba(255,255,255,0) 0%);
|
||||
background-position: left;
|
||||
background-size: 0.1rem 0.5rem;
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
.snorre {
|
||||
border-left: dashed transparent 0.1rem;
|
||||
border-image: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet);
|
||||
border-image-slice: 1;
|
||||
}
|
||||
|
||||
.snorre-overlay {
|
||||
background-image: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, oklch(var(--b1)) 40%);
|
||||
background-position: left;
|
||||
background-size: 0.1rem 0.5rem;
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,18 +1,40 @@
|
|||
<script lang="ts">
|
||||
export let Tags= ["null"];
|
||||
let colors: { [String: string]: string } = {
|
||||
export let isMobile = false;
|
||||
type ColorType = string | { color1: string; color2: string; rotation: string; offset: string };
|
||||
let colors: { [String: string]: ColorType} = {
|
||||
"programmer": "#0CC27F",
|
||||
"uxdesigner": "#027893",
|
||||
"3dartist": "#F4881C",
|
||||
"2dartist": "#F1EAC0",
|
||||
"2d/3dartist": {"color1":"#F1EAC0", "color2":"#F4881C","rotation": "-65deg", "offset": "71.5%"},
|
||||
"sounddesigner": "#F3EC2A",
|
||||
"storydesigner": "#EEC12A",
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<div class="flex gap-2" style='font-size: {!isMobile ? "0.875rem" : "2vw"};'>
|
||||
{#each Tags as tag}
|
||||
<div class="badge2 text-primary-content cozette" style="background-color: {colors[tag.replaceAll(" ", "").toLowerCase()] || "#ccc"};">{tag}</div>
|
||||
{@const key = tag.replaceAll(" ", "").toLowerCase()}
|
||||
{#if key.indexOf("/") < 0}
|
||||
<div class="badge2 text-primary-content cozette" style="background-color: {colors[key] || "#ccc"};">{tag}</div>
|
||||
{:else}
|
||||
<!-- Gradient Badge -->
|
||||
{#if typeof colors[key] === 'object' && colors[key] !== null}
|
||||
<div
|
||||
class="badge2 text-primary-content cozette"
|
||||
style="background: linear-gradient({colors[key].rotation}, {colors[key].color1} {colors[key].offset}, {colors[key].color2} {colors[key].offset});">
|
||||
{tag}
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="badge2 text-primary-content cozette"
|
||||
style="background-color: #ccc;">
|
||||
{tag}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
|
|
@ -22,11 +44,11 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 1.25rem /* 20px */;
|
||||
font-size: 0.875rem /* 14px */;
|
||||
line-height: 1.25rem /* 20px */;
|
||||
width: fit-content;
|
||||
padding-left: 0.563rem /* 9.008px */;
|
||||
padding-right: 0.563rem /* 9.008px */;
|
||||
border-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue