die

app/javascript/app.svelte

@@ -1,11 +1,19 @@
 <script>
-  export let name;
+  export let names;
 </script>
 
+<div width="100%" height="100%">
+  <div align="center">
+    <h1>jane {names[Math.floor(Math.random() * names.length)]} petrovna</h1>
+    <h2>jane#0009</h2>
+  </div>
+</div>
+
 <style>
   h1 {
-    color: #FF3E00;
+    color: #75004a;
+  }
+  h2 {
+    color: #753dad;
   }
 </style>
-
-<h1>Hello {name}!</h1>

app/javascript/packs/friends.js

@@ -0,0 +1,10 @@
+import App from '../friends.svelte'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const app = new App({
+    target: document.body,
+  });
+
+  window.app = app;
+})
+

app/javascript/packs/home.js

@@ -11,7 +11,9 @@ document.addEventListener('DOMContentLoaded', () => {
   const app = new App({
     target: document.body,
     props: {
-      name: 'Svelte'
+      names: ['sunset', 'luna', 'bonnibel', 'marceline', 'artemis', 
+    'diana', 'constanze', 'twilight', 'bianca', 'dawn', 'rosa', 'akemi',
+  'glimmer']
     }
   });
 

app/javascript/packs/portfolio.js

@@ -0,0 +1,10 @@
+import App from '../portfolio.svelte'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const app = new App({
+    target: document.body,
+  });
+
+  window.app = app;
+})
+

app/javascript/portfolio.svelte

@@ -0,0 +1,67 @@
+ <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>
+