+8

public/index.html

··· 27 27 <p>Cass hopes to further their storytelling career using their YouTube channel talking about gaming, music, and languages. Their free time consists of learning German, American Sign Language, Spanish, and Italian. When they're not crafting fantasy novels, Cass plays and runs sessions of various tabletop role-playing games for which they hope to develop a podcast in the future.</p> 28 28 </div> 29 29 <div id="portfolio-page" class="page"> 30 30 + <p><span class="portfolio-link"><a href="/portfolio#shut-in">Shut In - Jun 2012</a> <span class="desc" data-desc="Short Film - Gaffer, Foley Artist, Sound Editor" data-label="Shut In">Desc</span></span></p> 31 31 + <p><span class="portfolio-link"><a href="/portfolio#cansat">CanSat - Fall 2014:Nov 2019</a> <span class="desc" data-desc="A simulated sattelite in an enclosure the shape and size of a soda can - Programmer" data-label="CanSat">Desc</span></span></p> 32 32 + <p><span class="portfolio-link"><a href="/portfolio#meme-machine">Meme Machine - Mar 2017:Feb 2018</a> <span class="desc" data-desc="Download, rate, and create memes - Programmer" data-label="Meme Machine">Desc</span></span></p> 33 33 + <p><span class="portfolio-link"><a href="/portfolio#dnd-combatsim">Dungeons & Dragons Combat Simulator - Aug 2018:Dec 2018</a> <span class="desc" data-desc="Combat simulator for the 5th edition of the Tabletop RPG Dungeons & Dragons - Programmer, Project Manager" data-label="Dungeons & Dragons Combat Simulator">Desc</span></span></p> 34 34 + <p><span class="portfolio-link"><a href="/portfolio#bullet-rush">Bullet Rush - Aug 2019:Dec 2019</a> <span class="desc" data-desc="Cuphead meets First Person Shooter games - Programmer, Project Manager" data-label="Bullet Rush">Desc</span></span></p> 35 35 + <p><span class="portfolio-link"><a href="/portfolio#four-woods">The Four Woods Podcast - Jan 2021:Apr 2021</a> <span class="desc" data-desc="An audio drama podcast about myth and magic - Writer, Director, Editor, Producer" data-label="The Four Woods Podcast">Desc</span></span></p> 36 36 + <h3 id="desc-label"></h3> 37 37 + <p id="desc-box"></p> 30 38 </div> 31 39 <div id="blog-page" class="page"> 32 40 </div>

+4

public/style.css

··· 32 32 content: "\a"; 33 33 white-space: pre; 34 34 } 35 35 + 36 36 + .portfolio-link .desc { 37 37 + cursor: pointer; 38 38 + }

+12

src/index.ts

··· 10 10 } else { 11 11 el.classList.add('active'); 12 12 } 13 13 + 14 14 + const descs = document.querySelectorAll<HTMLSpanElement>('.portfolio-link .desc'); 15 15 + const descBox = document.getElementById('desc-box')! as HTMLParagraphElement; 16 16 + const descLabel = document.getElementById('desc-label')! as HTMLHeadingElement; 17 17 + 18 18 + descs.forEach((desc: HTMLSpanElement) => { 19 19 + desc.onclick = (event: PointerEvent) => { 20 20 + const target = event.target as HTMLElement; 21 21 + descBox.innerText = target.dataset.desc!; 22 22 + descLabel.innerText = target.dataset.label!; 23 23 + }; 24 24 + }); 13 25 }; 14 26 15 27 window.onhashchange = (event: HashChangeEvent) => {