@turnipxenon/pineapple 2.4.22 → 2.4.24

package/dist/template/Seaweed/ProjectSection.svelte

@@ -0,0 +1,289 @@
+<script>export let email = "turnipxenon@gmail.com";
+import "./seaweed.postcss";
+import { getModalStore } from "@skeletonlabs/skeleton";
+import LinkIcon from "../../assets/icons/link-icon.svg";
+import GithubIcon from "../../assets/icons/github-mark.svg";
+import WeaverFootage from "../../assets/others/weaver-footage.gif";
+import WindowSetGraph from "../../assets/others/window-set.png";
+import ThisWebsiteFootage from "../../assets/others/seaweed-showcase.mp4";
+import Card from "../../components/Card.svelte";
+import Chip from "../../components/Chip.svelte";
+const modalStore = getModalStore();
+const cmput401Info = {
+  type: "confirm",
+  title: "Information",
+  body: `As a full disclosure, this link will lead you to <a href='https://cmput401.ca/projects/e5b13586-09c7-4ddd-baf6-fdb078d23398' target='_blank'>https://cmput401.ca/projects/e5b13586-09c7-4ddd-baf6-fdb078d23398</a>. We currently don't have any tests yet ensuring that the link is correct. Click confirm to go to the site. Please report any bugs at <a href='mailto:${email}' target='_blank'>${email}</a>.`,
+  response: (r) => {
+    if (r) {
+      window.open("https://cmput401.ca/projects/e5b13586-09c7-4ddd-baf6-fdb078d23398");
+    }
+  }
+};
+</script>
+
+<Card>
+	<section class="section-card title-card" slot="content">
+		<h1 class="text-center">Projects</h1>
+	</section>
+</Card>
+
+<section class="projects-section">
+	<Card>
+		<section class="project-card" slot="content">
+			<iframe id="migrante-alberta"
+			        width="560" height="315" src="https://www.youtube.com/embed/ZemWwf8jh8E?si=RZwSfYHI-0Ael-RE"
+			        title="YouTube video player" style="border: none"
+			        allowfullscreen></iframe>
+			<div class="project-card-body">
+				<!-- todo: add regression to see if page is gone: https://cmput401.ca/api/projects/e5b13586-09c7-4ddd-baf6-fdb078d23398 -->
+
+				<h2>Migrante Alberta</h2>
+				<p>We developed a mobile-first cross-platform application to be used by the Canadian-based
+					Filipino non-profit advocacy group, Migrante Alberta, to help new immigrants navigate
+					through local services and events
+				</p>
+				<p>
+					<Chip>Flutter</Chip>
+					<Chip>Dart</Chip>
+					<Chip>Python</Chip>
+					<Chip>Django</Chip>
+					<Chip>Heroku</Chip>
+					<Chip>Android</Chip>
+					<Chip>Postgresql</Chip>
+				</p>
+				<!-- todo: add a way to ask what did i do via chat?  -->
+				<!--					<p>-->
+				<!--						I helped make reusable Flutter components for the application’s frontend, Dart utility files to-->
+				<!--						help ease writing and debugging calls to the backend, and a troubleshooting documentation-->
+				<!--						for handling common issues-->
+				<!--					</p>-->
+				<!--					<p>-->
+				<!--						Added Python unit tests to the backend endpoints, refactored the backend’s authentication-->
+				<!--						system from plain text to using Django’s authentication system, and wrote a script to ease-->
+				<!--						deployment to Heroku-->
+				<!--					</p>-->
+
+				<!-- todo: add tags with Dart, Flutter, Python, Django, Heroku, Android -->
+
+				<section class="game-link-section">
+					<button type="button" class="btn variant-filled-primary turnip-button"
+					        title="https://selk.io/birb-project/trunk/"
+					        on:click={() => modalStore.trigger(cmput401Info)}>
+						<img src={LinkIcon} class="long-btn-image" alt="itch icon">
+						<span>cmput401.ca</span>
+					</button>
+				</section>
+
+			</div>
+		</section>
+	</Card>
+
+	<Card>
+		<section class="project-card" slot="content">
+			<div class="project-card-body">
+
+				<h2>Decentralized social media</h2>
+
+				<p>We made a full stack decentralized social media app made with <span class="qt-react">React</span> +
+					<span class="qt-js">Javascript</span> for the client code, <span class="qt-django">Django</span> + <span
+						class="qt-python">Python</span> for the backend code, and <span class="qt-heroku">Heroku</span> for
+					deployment. This project was made
+					for
+					our Web Applications and Architecture class.</p>
+				<p>The application can connect with three other decentralized social media app in the same class:
+				</p>
+				<ul>
+					<li>
+						<a href="https://github.com/hgshah/cmput404-project/blob/main/docs/testing_other_teams.md#team-14"
+						   target="_blank">Also
+							a social media with the same Django + Python backend server where they act on behalf of
+							our users interacting with theirs</a></li>
+					<li>
+						<a href="https://github.com/hgshah/cmput404-project/blob/main/docs/testing_other_teams.md#team-7"
+						   target="_blank">A
+							social media that uses Fast API + Python for their backend server</a></li>
+					<li>
+						<a href="https://github.com/hgshah/cmput404-project/blob/main/docs/testing_other_teams.md#team-12"
+						   target="_blank">Another
+							social media that has Django + Python for their backend but we have to act on behalf of
+							our
+							users interacting with their users</a>
+					</li>
+				</ul>
+
+				<!-- todo: add tags with Javascript, React, Python, Django, Heroku -->
+
+				<section class="game-link-section">
+					<button type="button" class="game-button turnip-button"
+					        role="link"
+					        title="https://github.com/hgshah/cmput404-project"
+					        on:click={() => window.open("https://github.com/hgshah/cmput404-project")}>
+						<img src={GithubIcon} alt="github icon">
+					</button>
+				</section>
+			</div>
+		</section>
+	</Card>
+
+	<Card>
+		<section class="project-card" slot="content">
+			<img alt="Footage of a visual novel-like dynamic dialog interaction happening on the same page we are on"
+			     src={WeaverFootage} />
+
+			<div class="project-card-body">
+				<h2>Customized Yarnspinner interpreter and dialog runner</h2>
+
+				A custom dialog interpreter, written in <span class="qt-ts">Typescript</span>, that tokenizes then
+				transpiles custom Yarnspinner dialog into a <span class="qt-ts">Typescript</span> file. The said files can
+				be used on a corresponding runner or library, also implemented alongside it, allowing the ability to play a
+				custom-flavor of YarnSpinner dialogs on <span class="qt-svelte">Svelte</span>.
+
+				<section class="game-link-section">
+					<button type="button" class="game-button turnip-button"
+					        role="link"
+					        title="https://github.com/TurnipXenon/pineapple/blob/main/docs/PineappleFiberSpec.md"
+					        on:click={() => window.open("https://github.com/TurnipXenon/pineapple/blob/main/docs/PineappleFiberSpec.md")}>
+						<img src={GithubIcon} alt="github icon">
+					</button>
+				</section>
+			</div>
+		</section>
+	</Card>
+
+	<Card>
+		<section class="project-card" slot="content">
+			<div class="project-card-body">
+				<h2>Full-stack <span class="qt-c">C</span> app</h2>
+
+				<p>
+					A terminal-based app consisting of a server observing several terminal apps all concurrently
+					sending updates to the server, which then broadcasts these information concurrently to all the
+					other terminal apps connected.
+				</p>
+				<p>
+					The project involves <span class="qt-foundation">multiprocessing</span> programming featuring pthreads and
+					mutexes, and <span class="qt-foundation">networking</span> via sockets.
+				</p>
+
+				<section class="game-link-section">
+					<button type="button" class="game-button turnip-button"
+					        role="link"
+					        title="https://github.com/TurnipXenon/C380-1Code/blob/main/Assignment02/DESIGN.md"
+					        on:click={() => window.open("https://github.com/TurnipXenon/C380-1Code/blob/main/Assignment02/DESIGN.md")}>
+						<img src={GithubIcon} class="long-btn-image" alt="github icon">
+					</button>
+				</section>
+			</div>
+		</section>
+	</Card>
+
+	<Card>
+		<section class="project-card" slot="content">
+			<img
+				alt="A graph that visualizes the number of memory pages made by Quicksort cached within the window set as
+						time goes by. The trend appears to look like a damping harmonic motion that does not go below the zero line. More
+						details include the data size being 200000 entries, each data point skips 1060174 data points, with a
+						page size of 4096 bytes, and window size of 100000 bytes."
+				src={WindowSetGraph} />
+			<div class="project-card-body">
+				<h2>Working set simulation</h2>
+
+				<p>
+					A <span class="qt-c">C</span> program that simulates the working set model based on the output of memory
+					addresses
+					<span class="qt-valgrind">valgrind</span> detects as being accessed by a program being ran. It's
+					implemented using a nested hashmap <span class="qt-foundation">data structure</span> implemented from
+					scratch. The working set is the collection of memory pages referenced by a program within a certain time
+					frame. It comes with a report analyzing and benchmarking how memory allocation, between sorting <span
+					class="qt-foundation">algorithms</span> heapsort, quicksort, and radixsort, is affected by the window set
+					size, page size, and their input size.
+				</p>
+
+				<section class="game-link-section">
+					<button type="button" class="game-button turnip-button"
+					        role="link"
+					        title="https://github.com/TurnipXenon/C380-1Code/blob/main/Assignment03/REPORT.pdf"
+					        on:click={() => window.open("https://github.com/TurnipXenon/C380-1Code/blob/main/Assignment03/REPORT.pdf")}>
+						<img src={GithubIcon} class="long-btn-image" alt="github icon">
+						<span>Benchmark report</span>
+					</button>
+					<button type="button" class="game-button turnip-button"
+					        role="link"
+					        title="https://github.com/TurnipXenon/C380-1Code/blob/main/Assignment03/DESIGN.md"
+					        on:click={() => window.open("https://github.com/TurnipXenon/C380-1Code/blob/main/Assignment03/DESIGN.md")}>
+						<img src={GithubIcon} class="long-btn-image" alt="github icon">
+						<span>Design</span>
+					</button>
+				</section>
+			</div>
+		</section>
+	</Card>
+
+	<Card>
+		<section class="project-card" slot="content">
+
+			<video playsinline autoplay muted loop preload="none">
+				<source src={ThisWebsiteFootage} type="video/mp4">
+				video unavailable. original video contains clips of this website being resized and light-dark mode being
+				toggled.
+			</video>
+			<div class="project-card-body">
+				<h2>This webpage!</h2>
+
+				<p>
+					The webpage is made of two parts. The webpage that has the content for everything here, I've
+					lovingly called Seaweed. I kept seaweed as a private package. On the other hand, the base package which I
+					want to use for all spin offs of my websites is called Pineapple and have kept that codebase public.
+				</p>
+
+				<p>
+					<Chip>Svelte</Chip>
+					<Chip>Skeleton (Svelte UI library)</Chip>
+					<Chip>Typescript</Chip>
+					<Chip>Vercel</Chip>
+					<Chip>YarnSpinner</Chip>
+				</p>
+
+				<section class="game-link-section">
+					<button type="button" class="btn variant-filled-primary turnip-button"
+					        role="link"
+					        title="https://github.com/TurnipXenon/pineapple"
+					        on:click={() => window.open("https://github.com/TurnipXenon/pineapple")}>
+						<img src={GithubIcon} class="long-btn-image" alt="github icon">
+					</button>
+				</section>
+			</div>
+		</section>
+	</Card>
+
+	<Card>
+		<section class="project-card" slot="content">
+			<div class="project-card-body">
+				<h2>Mock Uber App</h2>
+
+				<p>A course project app meant to emulate how Uber works by playing with <span
+					class="qt-google">Google Maps API</span>.
+				</p>
+				<p>
+					I implemented all interfaces related to the NoSQL cloud database <span
+					class="qt-firebase qt-google qt-infra">Firebase</span>, making writing code easier for other programmers
+					(<span
+					class="qt-android">Android</span> / <span class="qt-java">Java</span>). I also wrote documentation to said
+					code and added instrumented tests that are tested by the continuous integration tool <span
+					class="qt-infra">Travis CI</span>, ensuring that our code is tested
+				</p>
+
+				<section class="game-link-section">
+					<!-- todo: mock uber app find link -->
+					<button type="button" class="game-button turnip-button"
+					        role="link"
+					        title="https://github.com/CMPUT301W20T10/UberApp"
+					        on:click={() => window.open("https://github.com/CMPUT301W20T10/UberApp")}>
+						<img src={GithubIcon} class="long-btn-image" alt="github icon">
+					</button>
+				</section>
+			</div>
+		</section>
+	</Card>
+
+</section>

package/dist/template/Seaweed/ProjectSection.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import "./seaweed.postcss";
+declare const __propDef: {
+    props: {
+        email?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ProjectSectionProps = typeof __propDef.props;
+export type ProjectSectionEvents = typeof __propDef.events;
+export type ProjectSectionSlots = typeof __propDef.slots;
+export default class ProjectSection extends SvelteComponent<ProjectSectionProps, ProjectSectionEvents, ProjectSectionSlots> {
+}
+export {};

package/dist/template/Seaweed/SeaweedTemplate.svelte

@@ -0,0 +1,246 @@
+<script>export let letChaos = true;
+export let name = "Turnip";
+export let email = "turnipxenon@gmail.com";
+export let linkedinSlug = "turnip-xenon";
+import SocialSection from "../../components/SocialSection.svelte";
+import "./seaweed.postcss";
+import SeaweedBaseLayout from "../../components/layouts/SeaweedBaseLayout.svelte";
+import { Accordion, AccordionItem, SlideToggle } from "@skeletonlabs/skeleton";
+import { page } from "$app/stores";
+import Card from "../../components/Card.svelte";
+import { onMount } from "svelte";
+import ElementVisbilityDetector from "../../components/ElementVisbilityDetector.svelte";
+import GameSection from "./GameSection.svelte";
+import ProjectSection from "./ProjectSection.svelte";
+let isVisible = true;
+let isAdvanceSettingOn = false;
+$:
+  isSocialsGone = !isVisible;
+let qtfontWeight = "normal";
+let additionalFontWeight = "";
+const filterSearchParams = (searchParams) => {
+  const qtValue = searchParams.get("qt")?.trim();
+  if (qtValue === void 0) {
+    qtfontWeight = "bold";
+    return;
+  }
+  qtfontWeight = "normal";
+  const dynamicStyle = qtValue.split(",").map((term) => {
+    return `span.qt-${term} { font-weight: bold !important; }`;
+  }).join("\n");
+  const style = document.createElement("style");
+  style.type = "text/css";
+  style.innerText = dynamicStyle;
+  document.head.appendChild(style);
+};
+const chaoticWordBank = ["niko", "toba", "seal", "aquarium", "ojisan", "baikal"];
+let chaosDone = false;
+const runChaos = (node) => {
+  for (let child of Array.from(node.children)) {
+    if (child.nodeType === Node.ELEMENT_NODE) {
+      runChaos(child);
+      for (const childOfChild of child.childNodes) {
+        if (childOfChild.nodeType === Node.TEXT_NODE && childOfChild.textContent?.trim()) {
+          const max = childOfChild.textContent.length;
+          childOfChild.textContent = "";
+          while (childOfChild.textContent.length < max) {
+            childOfChild.textContent += chaoticWordBank[Math.floor(Math.random() * chaoticWordBank.length)] + " ";
+          }
+        }
+      }
+      if (child.hasAttribute("href")) {
+        child.setAttribute("href", "https://crouton.net/");
+      }
+      if (child.hasAttribute("src") && !child.hasAttribute("aria-hidden")) {
+        if (child.hasAttribute("alt")) {
+          child.setAttribute("src", "https://p.potaufeu.asahi.com/a2b9-p/picture/21583312/5c3310aec77068e24844c663aa62b37c.jpg");
+        } else {
+          child.setAttribute("src", "https://video.twimg.com/ext_tw_video/1318728494256410624/pu/vid/640x360/TMklz6hiTkQu3xhn.mp4");
+          child.setAttribute("muted", "true");
+        }
+      }
+      if (child.tagName.trim() === "VIDEO") {
+        child.setAttribute("src", "https://video.twimg.com/ext_tw_video/1318728494256410624/pu/vid/640x360/TMklz6hiTkQu3xhn.mp4");
+        child.setAttribute("muted", "true");
+      }
+      if (child.tagName.trim() === "BUTTON") {
+        child.setAttribute("disabled", "true");
+      }
+    }
+  }
+};
+onMount(() => {
+  if (!letChaos && $page.url.searchParams) {
+    filterSearchParams($page.url.searchParams);
+  }
+  if (letChaos) {
+    runChaos(document.body);
+    chaosDone = true;
+  }
+});
+let mainVisibility = "visible";
+$:
+  mainVisibility = letChaos && !chaosDone ? "hidden" : "visible";
+</script>
+
+<SeaweedBaseLayout bind:shouldDisplayLeadingIcons={isSocialsGone}>
+	<!-- todo: limit main size to 1080 px? -->
+	<main style={`
+	--qt-font-weight: ${qtfontWeight};${additionalFontWeight};
+	visibility: ${mainVisibility};
+	`}>
+
+		<div class="experience-and-about-div">
+
+			<div class="greater-about-div">
+
+				<Card includeDataNoSnippet={false}>
+					<section class="section-card" slot="content">
+
+						<h1>About</h1>
+
+						<p>
+							Hi! My name is {name}! I work as a software developer. Outside of that, I like making games, and
+							trying to do everything in between required to make one. I have some showcased below, our visit
+							my itch.io page for more of them.
+						</p>
+						<!-- todo: link the degree details idk -->
+						<p>
+							I also graduated with BS Computing Science, Specializing in Software Practice, and a
+							certificate in Computer Game Development at University of Alberta.
+						</p>
+						<p>
+							I'm inspired by games like Harvest Moon: Friends of Mineral Town, Rune Factory 4, Theatrhythm,
+							Bravely Default: Flying Fairy, Boku no Natsuyasumi 2, and A Short Hike.
+						</p>
+
+						<!-- todo: maybe put cute stuff here -->
+						<!--						</ToggleableContent>-->
+					</section>
+				</Card>
+
+				<Card>
+					<section class="section-card" slot="content">
+						<SocialSection email={email} linkedinSlug={linkedinSlug}></SocialSection>
+						<ElementVisbilityDetector bind:isVisible={isVisible}>
+						</ElementVisbilityDetector>
+					</section>
+				</Card>
+
+			</div>
+
+			<Card>
+				<section class="section-card" slot="content">
+					<h1>Experience</h1>
+
+					<h2>Software Engineer</h2>
+					<div class="two-column-separated">
+						<div>July 2023 – January 2024</div>
+						<div style="text-align: end">Twitch, Remote</div>
+					</div>
+					<ul>
+						<li>Contributed to <span class="qt-go">Golang</span> and <span class="qt-ts">Typescript</span> codebases,
+							across several teams, to accommodate adjustments for public-facing user safety related features, to better
+							comply with EU’s <a target="_blank"
+							                    href="https://commission.europa.eu/strategy-and-policy/priorities-2019-2024/europe-fit-digital-age/digital-services-act/europe-fit-digital-age-new-online-rules-platforms_en">
+								Digital Services Act</a>, also including feature flags, alarms, unit tests, end-to-end testing, and
+							documentation
+						</li>
+						<li>Improved observability for upcoming features by setting up new <span class="qt-aws qt-infra">AWS</span>
+							resources to integrate internal data platform tools with existing alarms in our team’s microservice,
+							utilizing <span class="qt-aws qt-infra">Cloudwatch</span> and <span class="qt-aws qt-infra">Kinesis Data Stream</span>,
+							while adhering to best practices for <span class="qt-aws qt-infra">AWS CDK</span> (infrastructure as code)
+						</li>
+					</ul>
+					<br>
+
+					<h2>Software Engineer Intern</h2>
+					<div class="two-column-separated">
+						<div>May 2022 – Aug 2022</div>
+						<div style="text-align: end">Twitch, San Francisco</div>
+					</div>
+					<ul>
+						<li>
+							Built a <span class="qt-infra">load testing service</span> that can be configured to generate different
+							message types at different volumes that can be easily extended to target different chat services
+						</li>
+						<li>
+							Used Twitch’s set of custom tools, including Twitch’s custom RPC protocol, to create a backend
+							service with business logic written in <span class="qt-go">Go</span> and cloud infrastructure utilizing
+							<span
+								class="qt-infra qt-aws">ECS on Fargate, Cloudwatch, and DynamoDB</span>
+							, defined in <span class="qt-ts">Typescript</span>-flavored CDK
+						</li>
+						<li>
+							Wrote a technical specification document for the service’s MVP and possible future features, and
+							additional documentation on how to use the service and how to extend the load testing service to include
+							new services to test
+						</li>
+					</ul>
+					<br>
+					<!-- todo: turn off flashing when accordion is expanded -->
+					<Accordion>
+						<AccordionItem>
+							<div slot="summary">
+								<h2 class="accordion-header">More experience</h2>
+							</div>
+							<svelte:fragment slot="content">
+								<section class="more-section">
+									{#if (!letChaos)}
+										<h2>Software Engineer Intern</h2>
+										<div class="two-column-separated">
+											<div>May 2021 – Dec 2021</div>
+											<div style="text-align: end">Twitch / Amazon Web Services Canada, Remote</div>
+										</div>
+										<ul>
+											<li>
+												Implemented and wrote tests for a feature in Twitch’s backend authentication
+												systems and frontend web application that will help suggest security improvements to
+												over hundreds of thousands of users daily
+											</li>
+											<li>
+												Learned <span class="qt-go">Go</span>, <span class="qt-ts">Typescript</span>, <span
+												class="qt-react">React</span>, and other new technologies on the go to contribute to
+												the codebase
+											</li>
+										</ul>
+									{:else}
+										niko baikal seal from toba aquarium
+									{/if}
+									<br>
+								</section>
+							</svelte:fragment>
+						</AccordionItem>
+					</Accordion>
+				</section>
+			</Card>
+
+		</div>
+
+		<GameSection email={email}></GameSection>
+
+		<ProjectSection email={email}></ProjectSection>
+
+		<div aria-hidden="true" style="height: 25vh" />
+
+		<Card>
+			<div slot="content" class="default-card">
+				<h1>Advanced settings</h1>
+				<p>This one is for those curious how I customize this page.</p>
+				<SlideToggle name="slider-label" bind:checked={isAdvanceSettingOn}>
+					Advanced settings: {isAdvanceSettingOn ? "On" : "Off"}
+				</SlideToggle>
+				{#if (isAdvanceSettingOn)}
+					<br>
+				{/if}
+			</div>
+		</Card>
+
+	</main>
+
+	<SocialSection slot="extraLeadingIcons"
+	               isSlot={true}
+	               email={email}
+	               linkedinSlug={linkedinSlug}
+	               isSmallVersion={true}></SocialSection>
+</SeaweedBaseLayout>

package/dist/template/{SeaweedTemplate.svelte.d.ts → Seaweed/SeaweedTemplate.svelte.d.ts}

@@ -1,4 +1,5 @@
 import { SvelteComponent } from "svelte";
+import "./seaweed.postcss";
 declare const __propDef: {
     props: {
         letChaos?: boolean | undefined;