updated content, added prev/next links, cleaned up files into folders…

…, added image+caption divs
you-create · Oct 13, 2024 · a825bf8 · a825bf8
1 parent d074698
commit a825bf8
Show file tree

Hide file tree

Showing 16 changed files with 142 additions and 73 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/grab.png b/grab.png
diff --git a/images/.DS_Store b/images/.DS_Store
diff --git a/images/ankiStats.png b/images/ankiStats.png
diff --git a/images/ankiStyle.png b/images/ankiStyle.png
diff --git a/images/grab.png b/images/grab.png
diff --git a/movingFish.gif → images/movingFish.gif b/movingFish.gif → images/movingFish.gif
diff --git a/pan.png → images/pan.png b/pan.png → images/pan.png
diff --git a/sharkMoment.png → images/sharkMoment.png b/sharkMoment.png → images/sharkMoment.png
diff --git a/index.html b/index.html
diff --git a/pageTemplate.html b/pageTemplate.html
diff --git a/pages/index.html b/pages/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lev's Project Page</title>
+ <link rel="icon" type="image/x-icon" href="../images/movingFish.gif">
+ <link rel="stylesheet" href="../styles.css">
+ <script>
+ function getRandomInt(max)
+ {
+ return Math.floor(Math.random() * max);
+ }
+ function changeColour() {
+ const movingText = document.getElementById("toChange");
+ const hexArr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
+ let color = "#"; // Start with the '#' for a hex color code
+ for (let i = 0; i < 6; i++) {
+ color += hexArr[getRandomInt(16)];
+ }
+ movingText.style.color = color;
+ }
+ </script>
+ </head>
+ <body>
+ <main>
+ <h1 id="toChange">Welcome to My Project Page</h1>
+ <hr>
+ <marquee direction="right" scrollamount="9" behavior="alternate"><img src="../images/movingFish.gif" height="50" width="50" onclick="changeColour()" ></marquee>
+ <hr>
+ <p>This website is a record of the personal projects that I have undertaken in the past few years. Each project has a dedicated page, which are linked below in order of newest to oldest.</p>
+ <ul>
+ <li><a href="page1.html">10/24: First 3D Game in Unity (GottaFish)</a></li>
+ <li><a href="page0.html">8/23: Auto-generated Anki Deck</a></li>
+ </ul>
+ <p>Also, try catching the fish!</p>
+ </main>
+ </body>
+</html>
diff --git a/pages/page0.html b/pages/page0.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lev's Project Page</title>
+ <link rel="icon" type="image/x-icon" href="../images/movingFish.gif">
+ <link rel="stylesheet" href="../styles.css">
+ </head>
+ <body>
+ <main>
+ <h1>Auto-generated Anki Deck</h1>
+ <hr>
+ <div class="returnToHome"><a href="index.html">Return to Home</a></div>
+ <div class="previousNext"><a href="page0.html">< Previous</a>&nbsp;&nbsp;&nbsp;<a href="page1.html">Next ></a></div>
+ <br>
+ <div class="imageAndCaption">
+ <img src="../images/ankiStats.png"/>
+ <div class="caption">Roughly 7K cards were added automatically.</div>
+ </div>
+ <p>This was my first independent coding project. I was learning Japanese and using a flashcard software called 'Anki' to help remember words I found. The problem was that making each card manually took on average 2 minutes (I timed this), and since I needed several thousand of these if I wanted to reach fluency, making these would take me several hundred hours. Specifically, I was aiming for 10k, and I was at 3K at the time, so 7K*2/60 = ~230 hours.</p>
+ <p>To ease this process, I wrote a Python program that would automatically generate cards in the format that I wanted based on a list of 10K words sorted by frequency. It would connect to the public APIs of an online Japanese dictionary and an example sentence website, retrieve data on a particular word, parse it, then print it into a csv file. Anki would then read the csv file and generate the cards.</p>
+ <p>The program took several hours to execute and crashed multiple times, so it was not really optimally written, but it got the job done. Python was probably not the best language to use as it is interpreted and hence slow.</p>
+ <p>What I learnt:</p>
+ <ul>
+ <li>Python: basics, how to open files, how to write to files, how to interact with JSON.</li>
+ <li>APIs: what they are and how to interact with them, what a JSON is.</li>
+ </ul>
+ <div class="imageAndCaption">
+ <img src="../images/ankiStyle.png"/>
+ <div class="caption">The specific format of each card required scraping data from multiple online sources.</div>
+ </div>
+ <br>
+ </main>
+ </body>
+</html>
diff --git a/page1.html → pages/page1.html b/page1.html → pages/page1.html
@@ -1,36 +1,34 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
  <head>
  <title>Lev's Project Page</title>
- <link rel="icon" type="image/x-icon" href="movingFish.gif">
- <link rel="stylesheet" href="styles.css">
+ <link rel="icon" type="image/x-icon" href="../images/movingFish.gif">
+ <link rel="stylesheet" href="../styles.css">
  </head>
  <body>
  <main>
  <h1>First 3D Game in Unity (GottaFish)</h1>
  <hr>
- <a href="index.html">Return to Home</a>
- <br>
- <center>
- <img src="sharkMoment.png" width="600" height="400"/>
- </center>
+ <div class="returnToHome"><a href="index.html">Return to Home</a></div>
+ <div class="previousNext"><a href="page0.html">< Previous</a>&nbsp;&nbsp;&nbsp;<a href="page1.html">Next ></a></div>
  <br>
+ <div class="imageAndCaption">
+ <img src="../images/sharkMoment.png"/>
+ <div class="caption">A screenshot of the animated shark in the second scene.</div>
+ </div>
  <p>This was my first time making a 3D game in Unity. Before this, I had followed a tutorial to make a 2D game to get acquainted with Unity and C#, but this was my first time making a game independently. I also only had a few days to work on it as this was during my university term.</p>
- <p>Things that I learnt:</p>
+ <p>What I learnt:</p>
  <ul>
  <li>C#: How classes and objects are handled, how Unity namespaces are used to interact with the editor (in-game time management, audio, player preferences, etc.). </li>
  <li>Unity editor: Scenes, prefabs, triggers, animation, timelines, how to draw terrain, how to use the asset store. </li>
  </ul>
  <p>As this was my first time making a game independently and as I didn't really have a plan for the gameplay, I made up my code architecture on the fly. This led to very convoluted interdependecies between classes and lots of bugs. I will try to plan future projects better to avoid this.</p>
- <p>The game follows a player that needs to fish. Once the player obtains a fishing rod, they must catch a fish in the lake, then put the fish on the campfire before the health bar reaches 0. Each time a fish is placed on the campfire, the difficutly increases. Once all levels are cleared, the player can interact with the boat to open the second scene. And finally, in the second scene, the player gets 'eaten by sharks' and the game ends.</p>
+ <p>The game follows a player that needs to fish. Once the player obtains a fishing rod, they must catch a fish in the lake, then put the fish on the campfire before the health bar reaches 0. Each time a fish is placed on the campfire, the difficutly increases. Once all levels are cleared, the player can interact with the boat to open the second scene. Finally, in the second scene, the player gets 'eaten by sharks' and the game ends.</p>
  <p>Below is a demonstration of the gameplay.</p>
- <center>
- <iframe width="600" height="400" allow="fullscreen"
- src="https://www.youtube.com/embed/lGAbxPuBOc8">
- </iframe>
- </center>
- <br>
- <br>
- <br>
+ <div class="imageAndCaption">
+ <iframe src="https://www.youtube.com/embed/lGAbxPuBOc8" allow="fullscreen"></iframe>
+ <div class="caption">A recording of the gameplay.</div>
+ </div>
  <br>
  </main>
  </body>

diff --git a/pages/pageTemplate.html b/pages/pageTemplate.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lev's Project Page</title>
+ <link rel="icon" type="image/x-icon" href="../images/movingFish.gif">
+ <link rel="stylesheet" href="../styles.css">
+ </head>
+ <body>
+ <main>
+ <h1>Title</h1>
+ <hr>
+ <div class="returnToHome"><a href="index.html">Return to Home</a></div>
+ <div class="previousNext"><a href="page0.html">< Previous</a>&nbsp;&nbsp;&nbsp;<a href="page1.html">Next ></a></div>
+ <br>
+ <p>This is another page!</p>
+ <br>
+ </main>
+ </body>
+</html>
diff --git a/styles.css b/styles.css
@@ -23,6 +23,41 @@ body {
  marquee {
  font-size: 22px;
  font-weight: bold;
- cursor: url('grab.png'), auto;
+ cursor: url('images/grab.png'), auto;
+ }
+ div.previousNext {
+ position: absolute;
+ top: 95px;
+ right: 10px;
+ }
+ div.returnToHome {
+ position: absolute;
+ top: 95px;
+ left: 10px;
+ }
+ div.imageAndCaption {
+ margin: auto;
+ width: 50%;
+ padding: 10px;
+ }
+ div.imageAndCaption img {
+ display: block;
+ margin: auto;
+ width: 600px;
+ height: 400px;
+ }
+ div.imageAndCaption iframe {
+ display: block;
+ margin: auto;
+ width: 600px;
+ height: 400px;
+ }
+ div.caption {
+ display: block;
+ padding-top: 2%;
+ text-align: center;
+ font-weight: bold;
+ font-style: italic;
+ font-size: 14;
  }