j4pm/app/javascript/portfolio.svelte

67 lines
1.8 KiB
Svelte

<script>
let type = 'tech';
let switchPortfolio = () => {
type = (
type === 'tech' ?
'arts' : 'tech'
);
};
</script>
<div width="100%" height="100%">
<div id='center'>
<button on:click={switchPortfolio}>switch to {type === 'tech' ? 'arts' : 'tech'} portfolio</button>
<ul>
{#if type === 'tech'}
<li><h1><a href="https://github.com/janeptrv">github</a></h1></li>
<li><h1><a href="https://gitlab.com/janeptrv">gitlab</a></h1></li>
<li><h1><a href="https://gitdab.com/jane">gitdab</a></h1></li>
<br/>
<li><h1><a href='https://gitdab.com/jane/pinbot'>democratic discord pins bot</a></h1></li>
<br/>
<li><h1><a href='https://gitdab.com/jane/leds'>ws2812b pi controller</a></h1></li>
<li><h1><a href='https://gitdab.com/jane/led-bot'>ws2812b discord bot interface</a></h1></li>
<br/>
<li><h1><a href='https://gitdab.com/jane/lastfm-wrapped'>last.fm statistics scraper</a></h1></li>
<br/>
<li><h1><a href='https://gitdab.com/makise'>public miscellaneous projects</a></h1></li>
{/if}
{#if type === 'arts'}
<li><h1>tbd</h1></li>
{/if}
</ul>
</div>
</div>
<style>
h1 {
font-size: 1.5em;
color: #75004a;
}
a {
color: #75004a;
}
li::marker {
color: #753dad;
}
#center {
position: absolute;
top: 50%;
left: 50%;
margin-top: -300px;
margin-left: -200px;
width: 400px;
height: 200px;
}
li {
text-align: center;
width: auto;
}
button {
background-color: #201020;
border: none;
text-align: center;
color: #fff;
width: inherit;
}
</style>