Adding portfolio pages

+1 -1
package.json
··· 5 5 "main": "src/index.ts", 6 6 "scripts": { 7 7 "build": "tsc && npm run build:cp-public", 8 - "build:cp-public": "cp ./public/** ./dist", 8 + "build:cp-public": "cp -r ./public/** ./dist", 9 9 "type": "tsc --noEmit", 10 10 "netlify-build": "netlify build" 11 11 },
public/img/bullet-rush.png

This is a binary file and will not be displayed.

public/img/cansat.png

This is a binary file and will not be displayed.

public/img/dnd-combatsim.png

This is a binary file and will not be displayed.

public/img/four-woods.png

This is a binary file and will not be displayed.

public/img/meme-machine.png

This is a binary file and will not be displayed.

public/img/self.png

This is a binary file and will not be displayed.

public/img/shut-in.png

This is a binary file and will not be displayed.

+1
public/index.html
··· 18 18 </div> 19 19 <div id="about-page" class="page"> 20 20 <h3>About</h3> 21 + <img src="/img/self.png" width="300px" alt="A picture of Cass Unterholzner sitting while playing the cello. They are holding their cello bow and have it resting on their knee upright. They are wearing a suit." class="floated" /> 21 22 <p>"Creativity is an energy. It's a precious energy, and it's something to be protected. A lot of people take for granted that they're a creative person, but I know from experience, feeling it in myself, it is a magic; it is an energy. And it can't be taken for granted." --Ava DuVernay</p> 22 23 <p>Every person is a story, and storyteller Cass Unterholzner is no different. They have been telling stories since they were younger. Their creative cravings have been sought after through short films, acting and playing music in musical theatre, developing and critiquing video games, and writing and recording music.</p> 23 24 <p>Cass is currently producing an audio drama podcast titled The Four Woods Podcast after developing it as a serial novel story with inspirations from the Magicians TV show and Percy Jackson novels.</p>
+65
public/portfolio/index.html
··· 1 + <!DOCTYPE html> 2 + <html> 3 + <head> 4 + <link rel="stylesheet" href="/style.css" /> 5 + <script type="text/javascript" src="/portfolio.js"></script> 6 + </head> 7 + <body> 8 + <div id="nav-links"> 9 + <span class="nav-link"><a href="/#">Home</a></span> 10 + <span class="nav-link"><a href="/#about">About</a></span> 11 + <span class="nav-link"><a href="/#portfolio">Portfolio</a></span> 12 + <span class="nav-link"><a href="/#blog">Blog</a></span> 13 + <span class="nav-link"><a href="/#links">Links</a></span> 14 + </div> 15 + <div id="shut-in-page" class="page"> 16 + <h3>Shut In</h3> 17 + <img src="/img/shut-in.png" alt="A close-up of a wireless home phone lying on its side" class="portfolio-image" /> 18 + <p>The San Joaquin County Office of Education held a two-week filmmaking workshop in June 2012. After a full day of shooting at a daycare in Manteca, CA, the crew premiered the film at the Lincoln High School theatre to a packed house. The crew then held a Q and A session with those in attendance.</p> 19 + <p><b>Skills</b>: Final Cut Pro X, Adobe Premiere Pro, Foley Art, Lighting Setup</p> 20 + <p><a href="https://www.imdb.com/title/tt2644836/">IMDB Link</a></p> 21 + <iframe width="854" height="480" src="https://youtube.com/embed/1g2i2bYbwC8">Your browser does not support iframes.</iframe> 22 + </div> 23 + <div id="cansat-page" class="page"> 24 + <h3>CanSat</h3> 25 + <img src="/img/cansat.png" alt="The 3D-printed CanSat enclosure. It has holes in it for aerodynamics. Through the holes, you can see the Arduino microcontroller with the specialized circuit board built for attaching the different sensors without soldering." class="portfolio-image" /> 26 + <p>During my junior year of high school, my dad approached me with an offer to work on a project involving a simulated sattelite in an enclosure the size and shape of a soda can run by an Arduino. He connected me and two of his students to Ted Tagami of Magnitude.io and we were all connected with Dr. Elizabeth Basha and her students at University of the Pacific. The CanSat project was eventually launched into low-Earth orbit in November 2019.</p> 27 + <p><b>Skills</b>: C++, Arduino</p> 28 + <p><a href="https://magnitude.io/exolab-and-cansat-designed-for-project-based-learning/">More Information</a></p> 29 + </div> 30 + <div id="meme-machine-page" class="page"> 31 + <h3>Meme Machine</h3> 32 + <img src="/img/meme-machine.png" alt="A screenshot of Python code from the GitHub repository" class="portfolio-image" /> 33 + <p>The Association for Computing Machinery, University of the Pacific chapter created a project in March 2017 that downloads and aggregates memes from various social media sites including Reddit, Imgur, Tumblr, and Imgflip using Python and Haskell. It included a plan to write a module that would gather ratings and use the data as input for machine learning to create its own memes.</p> 34 + <p><b>Skills</b>: Python, Python Reddit Aggregator Wrapper (PRAW), ImgurPython</p> 35 + <p><a href="https://github.com/uopacm/mememachinecollector">GitHub Repository</a></p> 36 + </div> 37 + <div id="dnd-combatsim-page" class="page"> 38 + <h3>Dungeons & Dragons Combat Simulator</h3> 39 + <img src="/img/dnd-combatsim.png" alt="A screenshot of the main menu from our Dungeons & Dragons combat simulator. The title reads 'Dungeons & Mistakes.' There are buttons that read 'New Character,' 'Load Character,' 'Options,' and 'Quit.' The text and buttons are laid over a low-quality image of a grassy mountain." class="portfolio-image" /> 40 + <p>I took the Application Development course at University of the Pacific to learn how to work on a team to develop an application. In our groups, we proposed our final projects for the class and began our work. There were no roles, so I took initiative to be the Project Manager along with doing basic coding on the JSON data and general backend programming.</p> 41 + <p><b>Skills</b>: Java, JavaScript, Project Management</p> 42 + <p>Due to using data from the website 5e.tools, I will not include the repository here.</p> 43 + </div> 44 + <div id="bullet-rush-page" class="page"> 45 + <h3>Bullet Rush</h3> 46 + <img src="/img/bullet-rush.png" alt="A screenshot from the video game. At the top of the screen, there is a bar representing the enemy's hit points (HP). It is partially full, and contains text reading 'Boss HP.' The game is a first-person shooter game, and the player is holding a weapon of some sort that is colored red. The enemy is a large semi-transparent rounded cube that is outputting several semi-transparent spheres." class="portfolio-image" /> 47 + <p>I took the Computer Game Technologies course at University of the Pacific in Fall 2019 to learn Video Game Design and Development. After pitching ideas to the class similarly to my earlier Application Development course, I was placed as the Project Manager of the Bullet Rush team along with a Lead Programmer, a general Programmer, and a Media Director. At the end of the course, we presented to the community for feedback.</p> 48 + <p><b>Skills</b>: Unity, C#, Project Management, Agile Development</p> 49 + <p><a href="https://bitbucket.org/jacob5567/bullet-rush">Bitbucket Repository</a></p> 50 + </div> 51 + <div id="four-woods-page" class="page"> 52 + <h3>The Four Woods Podcast</h3> 53 + <img src="/img/four-woods.png" alt="The logo for the Four Woods Podcast. In the top portion of the logo, there is a dark green circle against the lighter green background. The circle contains four differently colored trees (forest green, pink, light orange, and yellow-green). Underneath the circle are the words 'The Four Woods' in all caps." class="portfolio-image" /> 54 + <p>The Four Woods Podcast, part of my senior project for my Media X degree at University of the Pacific, is an audio drama podcast about Ross Hansen, a 16-year-old kid who attends magical high school for the first time in his life after meeting his parents who he hasn't seen for thirteen years. A pilot episode of the podcast is currently available wherever you get your podcasts. More may be coming soon.</p> 55 + <p><b>Skills</b>: Adobe Audition, Scriptwriting, Script editing, Voiceover casting, Directing for Voiceover</p> 56 + <ul> 57 + <li><a href="https://open.spotify.com/show/52RC9TpBXownRAKcwKFVQg">Spotify Page</a></li> 58 + <li><a href="https://podcasts.apple.com/us/podcast/1-1-call-of-the-ocean/id1564849635?i=1000518763677">Apple Podcasts Page</a></li> 59 + <li><a href="https://overcast.fm/itunes1564849635">Overcast Page</a></li> 60 + <li><a href="https://pca.st/kexc4wrj">PocketCast Page</a></li> 61 + <li><a href="https://anchor.fm/s/52005648/podcast/rss">RSS Feed</a></li> 62 + </ul> 63 + </div> 64 + </body> 65 + </html>
+9
public/style.css
··· 36 36 .portfolio-link .desc { 37 37 cursor: pointer; 38 38 } 39 + 40 + .floated { 41 + float: left; 42 + padding: 5px; 43 + } 44 + 45 + .portfolio-image { 46 + width: inherit; 47 + }
+25
src/portfolio.ts
··· 1 + window.onload = () => { 2 + const hash = window.location.hash.replace('#', ''); 3 + 4 + const el: HTMLElement | null = document.getElementById(hash + '-page'); 5 + 6 + if (el !== null) { 7 + el.classList.add('active'); 8 + } 9 + }; 10 + 11 + window.onhashchange = (event: HashChangeEvent) => { 12 + const oldHash = event.oldURL.substr(event.oldURL.indexOf('#') + 1); 13 + const newHash = event.newURL.substr(event.newURL.indexOf('#') + 1); 14 + const oldEl: HTMLElement | null = document.getElementById(oldHash + '-page'); 15 + 16 + if (oldEl !== null) { 17 + oldEl.classList.remove('active'); 18 + } 19 + 20 + const el: HTMLElement | null = document.getElementById(newHash + '-page'); 21 + 22 + if (el !== null) { 23 + el.classList.add('active'); 24 + } 25 + };