Skip to content

update #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Sep 16, 2025
Merged

update #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
58715ad
Merge pull request #1 from symsoph/rework
symsoph Aug 28, 2025
c7dfe23
fixing soul haven post
symsoph Aug 28, 2025
c112b35
list style
symsoph Aug 28, 2025
9e8410c
happy with soul haven process html, need to create soulhaven css
symsoph Sep 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions assets/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,7 @@ for (let i = 0; i < navigationLinks.length; i++) {
pages[i].classList.add("active");
navigationLinks[i].classList.add("active");
window.scrollTo(0, 0);
console.log(this.innerHTML.toLowerCase(), 'active');
} else {
pages[i].classList.remove("active");
navigationLinks[i].classList.remove("active");
Expand Down
114 changes: 114 additions & 0 deletions assets/posts/soulhaven.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
<!DOCTYPE html>
<html lang="en">

<style type="text/css">
body {
padding: 0em 1em 1em;
}

/* article {
background: var(--eerie-black-2);
border: 1px solid var(--jet);
border-radius: 20px;
padding: 15px;
box-shadow: var(--shadow-1);
z-index: 1;
} didnt really work */

.container {
border: 2px solid rgb(75 70 74);
border-radius: 0.5em;
padding: 20px;
font: 1.2em sans-serif;

column-width: 20em;
column-rule: 1px solid rgb(75 70 74);
}

/* for handling sub classes under container class */
.container > * {
padding: 10px;
margin: 0 10px;
flex: 1;
}

div {
text-align: center;

}
small {
text-align: left;
}

ul {
list-style-type: "➡️ "; /* spaces count */
margin: 0.3 rem; /* above ul */
}
</style>

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Soul Haven</title>

<!--
- google font link
-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>

<body>

<h1> Soul Haven by The GoodDemons</h1>


<article class="container">
<h2> <font color='#FCBEBB'><u>Animation UI Process</u></font></h2>

<p>I was tasked with implementing interesting button animations and did some competitive research of other cozy, incremental games.

Then I referenced some tutorials, I created a customized shader and squish-and-squeeze animations.

These implementations are visible on the home screen - shown to the right. </p>

<!-- <img src="/assets/visual-media/showcase-home-buttons.gif" alt="Home Screen Animations]"/> -->
<div>
<img
src="/assets/visual-media/showcase-home-buttons.gif"
width="300" height="200"
alt="Home Screen Animations" />
</div>
</article>

<article class="container">
<h2> <font color='#FCBEBB'><u>Gameplay Synchronization</u></font></h2>


<p>While polishing and testing our final builds, we received feedback regarding the accessibility of customizing settings like the background music level, and I implemented this accessibility feature with C# scripting.</p>

<div>
<video controls width="300" height="200">
<source src="/assets/visual-media/soulhaven-sync.mp4"
type="video/mp4" />
alt="Settings Sync"
</video>
</div>

<small>Note: In the submission build of the Soul Haven, you can not adjust the music volume after leaving the home screen, but your adjusted music levels are saved in the next scenes!</small>

</article>

<ul>

<li>Check out <a href="https://tomchung.itch.io/soulhaven">SoulHaven</a></li>
<!-- custom back button image? -->
<li>Return to <a href="https://symsoph.github.io/personal-portfolio/">portfolio site</a></li>
</ul>


</body>

</html>
27 changes: 0 additions & 27 deletions assets/posts/soulhaven.md
View file
Open in desktop

This file was deleted.

Binary file added assets/visual-media/.DS_Store
View file
Open in desktop
Binary file not shown.
10 changes: 9 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,15 +103,21 @@ <h1 class="name" title="Sofia Nguyen">&#9728 Sofia Nguyen &#9728</h1>
<ul class="navbar-list">

<li class="navbar-item">
<a href="/#About">
<button class="navbar-link active" data-nav-link>About</button>
</a>
</li>

<li class="navbar-item">
<a href="/#Portfolio">
<button class="navbar-link" data-nav-link>Portfolio</button>
</a>
</li>

<li class="navbar-item">
<a href="/#Contact">
<button class="navbar-link" data-nav-link>Contact</button>
</a>
</li>

</ul>
Expand Down Expand Up @@ -400,7 +406,9 @@ <h2 class="h2 article-title">Portfolio</h2>
<ul class="filter-list">

<li class="filter-item">
<!-- link??? -->
<button class="active" data-filter-btn>All Games</button>

</li>

<li class="filter-item">
Expand Down Expand Up @@ -454,7 +462,7 @@ <h2 class="h2 article-title">Portfolio</h2>
<ul class="project-list">

<li class="project-item active" data-filter-item data-category="game programming">
<a href="https://tomchung.itch.io/soulhaven">
<a href="/assets/posts/soulhaven.html">

<figure class="project-img">
<div class="project-item-icon-box">
Expand Down
Empty file added portfolio.md
View file
Open in desktop
Empty file.