oh fuck, even more cooking!!!
This commit is contained in:
parent
6d55a75aa4
commit
1dffd47bc1
5 changed files with 116 additions and 56 deletions
66
src/routes/comps/Profile.svelte
Normal file
66
src/routes/comps/Profile.svelte
Normal file
|
@ -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>
|
Loading…
Add table
Add a link
Reference in a new issue