100 Code Projects: A Journey

This is still a work in progress...

24

projects developed so far.

Hi, this is Guren! I'm working on my coding skills! Some places you can follow my coding journey are here, jordanislame.neocities.org, and my GitHub. Check out my About page if you want. Apart from that, let's just look at the projects! And maybe you should try some ambitious coding projects too! 🤔

Project #1: jordanislame.neocities.org
Estimated date of creation: October 20th, 2022 Status: Online 🟢
Details

I have spent tens of thousands of hours on the internet, and I must have some kind of encyclopedic knowledge of information of a lot of things. But a habit I have long had is that as soon as I see a word or thing I haven't seen before, I Google it, or research it. Well, I don't know where I heard about Neocities. But I hear about Geocities every couple of years, so maybe it was on the Wikipedia page. Anyways, first thing I checked out was the one YouTube video that existed about it, which was by Andrue. He had a site called voupie.lol, which had an HTML chao garden and some shrines and a lot of the typical indie web things like that.I was inspired, though, so I made a Neocities site like his Youtube video recommended.

Oh, I think I may have made my first Neocities site a few days before that, actually, my bad. It was just some basic text on a page, with this image of Goku as the background wallpaper.

Anyways, I had also been learning some HTML and CSS stuff from FreeCodeCamp, so I put that into practice on my Neocities site. I made a few shrines, a few site replicas (just with HTML and CSS), and I made a YouTube video talking about what I learned. So I basically copied Andrue through and through. lol

Anyways, my site looks a lot like an old Geocities website like what you would have seen circa 1999. Which is kind of the point. Unfortunately, I don't remember if I coded anything before this. This website is effectively my first coding project that I ever did. I will note that I made a website in Dreamweaver for school back in 2013, and it was hard! That was my photography, web design, and audio-video sort of class. Shooting videos was way easier than coding a website, I thought.

(Note that I won't count the easy pages on here as "projects". For example, the site devlog page, or the GIF collection page.)

Project #2: Scrollable Pokedex in the style of the Bulbapedia page
Estimated date of creation: November 2022 Status: Online 🟢
Details

I scrutinized the code of Bulbapedia's webpage for the gen 1 Pokedex, and I feel like it was one of those things where there's some complicated stuff happening with their backend, and their attachd CSS files were hard to read, so I still made mine largely from scratch, but I made a page dedicated to the gen 1 Pokemon pokedex. I also kept it in a little square window that you have to scroll down, which is a little bit like how Nintendo has portrayed the fictional pokedex, but i also needed to learn how to make a little scrollable box anyways. Learned some stuff about HTML tables by doing this, and some stuff about scrollbars (they can be customized quite a lot).

Project #3: 4chan CSS replica
Estimated date of creation: November 19th, 2022 Status: Online 🟢
Details

I explain my attachment to 4chan in the Vichan project later in the list. I was a forum user in the 2000s of Gamespot and stuff, and people used to read my blogs for some reason, and I was a friend of one of Gamespot's moderators. He mentioned 4chan one day, I looked it up, and 4chan has had a very profound effect on my life since then.

This page is made of CSS based on kind of an eyeballing of a /v/ thread. I don't think I'm using flexbox or anything here. Seems dysfucntional. Also, nothing on this page actually does anything or hyperlinks anywhere.

I couldn't get the reply boxes to wrap around the OP image in the way I wanted.

Haven't actually looked at this code in-depth since 2022. Don't really care to now either, though.

Project #4: A clone of the Wii page on the /v/'s recommended games wiki
Estimated date of creation: November 2022 Status: Online 🟢
Details

When I was a teenager, I was broke, but whenever I got money, I liked collecting obscure Japanese games. When I got a job at 17 as a dishwasher, I started buying lots of game systems and games. I had a PS1, PS2, PS3, Sega Genesis, Sega Dreamcast, Nintendo 64, Gamecube, Wii, Xbox, Xbox 360, etc, and I had some rare games like Xenosaga, GrimGrimoire, Alien Soldier, etc. Unfortunately I went broke and homeless, and ended up selling my $5,000 game collection for like $200 to a ruthless pawn shop.

Anyways, my penchant for 4chan and obscure games led me to sometimes spending a lot of time on Wikipedia and on /v/'s Recommended Games Wiki, looking into what the best games on each console were, including the cult classics like Gunstar Heroes and Bangai-O.

This is another glorified table page, but I made a replica page of the Wii page on the /v/'s Recommended Games Wiki. This is when they were on Fandom. Now that webpage is gone, by the way. The wiki is hosted somewhere else now.

Project #5: A simple car that drives left to right in Javascript. (and you can't control it)
Estimated date of creation: November 2022 Status: Online 🟢
Details

This was very early in my Javascript-learning journey. This isn't even controllable, and it's just an image going left to right. At least it's slightly interesting that it stops instead of going on forever.

Project #6: A choose-your-door game. (This game, like this website you're reading right now, was a ripoff of an idea by Jennifer DeWalt, at jenniferdewalt.com)
Estimated date of creation: November 2022 Status: Online 🟢
Details

This involved a tiny bit of logic, but they're just different webpages with different links. There is no infinite loop like in that Super Mario Bros Bowser's Castle level, there's no persistent memory between the pages, it's just pages with different stuff shown on them. But it's theoretically a branching paths game. And this is one of the earliest Jennifer DeWalt games on her site, and I just totally copied her idea. But when I copy people's ideas, I do like to admit it, and also fully understand how everything works when I do it. So that's good.

Project #7: Dice face generator
Estimated date of creation: November 2022 Status: Online 🟢
Details

I forget if this was from some tutorial. When you click the button, it generates a dice face. I think it's kind of a cool idea, actually. We create a DOM entity called "img", and store it in the variable img. But then, depending on what the randomizer number is, we download a source image file from Google Drive to that DOM element "img". I think it's kind of a cool idea. By the way, I try not to take credit for other people's work too much, or add other people's work to a list like this of my projects, but I include some of the tutorial followalongs that I do, and I also don't remember if this project was from a course or not.

Project #8: Chrome dino game (but the dino and cactuses are just squares)
Estimated date of creation: December 2022 Status: Online 🟢
Details

This was just following a tutorial. Involved learning some JavaScript. Reverse engineer the code if you want to see how it works — it's all there in the HTML and/or JS files.

Project #9: A meme soundboard (plays meme sounds when you click the buttons)
Estimated date of creation: December 2022 Status: Online 🟢
Details

This is a simple soundboard concept. I don't know if they're still common with the younguns, but when I was in high school in the early 2010s, people had apps and websites on their phones that would play stupid sounds. It's one of those silly things from that era probably, like those apps where you "shoot a gun". Like you point the phone around and click the screen.

This is a fairly simple onclick/button experiment where I had to learn about the "this" keyword, functions, and a few other things in Javascript. Whatever you click, the name of that button has ".mp3" appended to it, and then that short MP3 is played. If you click them really fast, the sounds get pretty wild, like shoegaze music in some cases. I like the Curb Your Enthusiasm one when clicked about 100 times quickly, it sounds like a Caretaker album.

A lot of this is kind of coombrain humor.

This was hosted on the Cloudflare Pages hosting service.

Project #10: Javascript piano
Estimated date of creation: December 2022 Status: Online 🟢
Details

This is a playable piano keyboard for your browser. But it is pretty simple. It's pretty much the same onClick button system as I used in the meme soundboard. I did also use event listeners though, which wait for a key to be pressed. So you can use your text keyboard to play the piano. But I also didn't map every key, it seems. And also, for some reason, when the note is pressed with your computer keyboard key, it doesn't visually go down. But it visually goes down if you use your mouse to click on the key. So that's weird.

In the Javascript, everything that isn't the first 4 lines in that file was about mapping the computer keyboard so it would play the piano.

For some reason, I have an AJAX/JQuery download in my html head, but I don't thik those were used in this at all.

The piano shape was based on the piano we had to draw out of CSS in the FreeCodeCamp course. They don't teach about how to turn it into an instrument, though. That was just putting rectangles next to each other. I had to learn about event listeners from StackOverflow quite a bit. And I spent a lot of time reading about them on MDN.

Project #11: Raining matrix-style code with a custom sentence
Estimated date of creation: December 2022 Status: Online 🟢
Details

I don't know the "where they at though" meme, but my friend was working on this project, and it was pretty broken. I couldn't get it to work either, but after working on this for a few days and consulting StackOverflow about something, we got it to work.

One thing I don't like about this is that it has to hit the bottom of the screen before it randomizes the rain streams. In the Matrix scenes it's usually random-looking code-rain streams. So if I approached a project like this again I'd try to get rid of the first 5 seconds of this program where a block of text is raining down as one.

Project #12: Golf Island (minimalistic text-based golf game, in Javascript)
Estimated date of creation: December 2022 Status: Online 🟢
Details

A simple text-based golf game with RNG, a birdie/eagle/etc system, different endings, different numbers displayed for how hard you strike the ball, etc. This is one-dimensional. Just left-and-right, and I think that if you shoot past the hole it still goes in. There's gold, silver, and bronze trophies displayed at the end. There's a chance to lose entirely, and you're given like a pile of shit, but I think it's quite rare with how the numbers are.

Project #13: Cookie Clicker clone (Very minimalistic)
Estimated date of creation: December 2022 Status: Online 🟢
Details

This is set up in the format of Cookie Clicker as well, with the upgrades on the right side, the rows of pictures in the center, and the giant cookie and your current number of cookies on the left. I didn't end up putting pictures of your upgrades in the middle section. I did put images to the upgrades on the right. I like the images of the grandmas, and there's a picture of Filthy Frank sticking a gun in his mouth. lol

This isn't the version with saving, accounts, or any form of PHP. I want to create a version of this soon with a base64 code save system, and the ability to make accounts and/or possibly use an API to pay for multipliers.

I'm interested in figuring out how companies like Hyper Hippo set up payment methods to give gated upgrades in their idle clicker games. I might try to make some other idle clicker game concept and come back to the code in this.

The code in this is very repetitive Javascript. Lots of variables for multipliers. The variable names got very long.

Project #14: Golf Island revisited (Python text game with multiple playabale characters, multiple stages, pseudo-3D ball directionality, and many RNG event chances.)
Estimated date of creation: May 9th, 2024 Status: Online 🟢
Details

This is a Python program, and an update to an old Javascript game I published to my website in 2022. This Python game was made in 2024. It adds multiple characters, multiple stages, the possibility to land in a pond or the rough, and both wind and cardinal directions that cause some calculations to be applied to the distance of the ball. Although, as I recall, these calculations were still effectively one-dimensional back and forth sort of ball directions, just magnitudes, effected by multipliers and whatnot.

The characters have strength attributes. They say things, whihch are pulled from an array of dialogue lines. You can pick the opponents you want to play against. There's a ranking system of who won at the end.

If Spider Man is one of the players, there's a chance his spidey senses will go off and he'll abandon the game to go fight crime. This causes the game instance to end. When rounds get jammed, or if you want to restart the game, you have to restart the program. I unfortunately did not end up adding a restart function to the game that wipes all the variables.

Project #15: Haunted Mansion text adventure with inventory, weapons, talking, map, etc. (Java)
Estimated date of creation: May 20th, 2024 Status: Online 🟢
Details

This is one of my proudest creations. It's a text adventure game with a fairly complicated text-understanding terminal (basically like Zork) with rooms, a map, items, etc. This was the first truly ambitious code project I ever made, in my opinion. It's made in Java, and was made for a computer science degree Java class. (I dropped out of the CS degree again, btw, although I was like 70% done, I hate college) You can pick up a chainsaw and other weapons, you can look at rooms and things, there's bosses, etc. This game is supposed to be a horror game, based on a mixture of Resident Evil, Devil May Cry 1, and Evil Dead. There's a giant spider, a ghost in knight's armor, a room with a horde of zombies, etc.

It has cursed text, a NWSE directional navigation system, you can say "go north", "north", or "n" to go north, there's a maximum of 100 moves before you run out of time and the zombies break in, there's a function to wait a few turns at a time to wait for them to break in, there's a "take" function, "look at" function, "drop" function, "inventory" function, "map" function, etc. Every time you hit a new room, it tells you where you are. If you can't go there, it tells you. If you need a key, it tells you. There's a story to the game.

The program involved learning Java objects, classes, the map data structure, and has some fairly complicated if else logic.

I have a hard time understanding my old programs, sometimes, so this one will be difficult for me to wrap my head around if I want to make another complicated text adventure.

I actually don't know how to run Java programs from NetBeans or the command line or anything, so this will have to keep sitting on Replit, I guess.

Project #16: Vichan 4chan imageboard clone
Estimated date of creation: April 20th, 2025 Status: Dead 🔴
Details

This is something that used to exist but which may not exist anymore. I have been using 4chan since 2009, and there are certain downsides that come from that, such as having part of my identity unfortunately tangled up with people's negative perception of /r9k/, /b/, /pol/, etc. That is, I like a lot of the 4channer YouTubers like Luke Smith, I get the culture through and through, including all of the conspiracy theories, and even when I have a girlfriend or am going through a normie streak, my habit of browsing 4chan kind of programs me to think like the incels and losers on there do. Kind of bad.

Anyways, I do find it the be the funniest website on the internet, and I like it a lot.

When 4chan was hacked in 2025 and went down for 2 weeks, I had been browsing 4chan like 4 hours a day for the previous year. Kind of a band aid ripping off moment. But it actually got me off of it. Shows the power of cold turkey fasting. But those two weeks were painful.

Anyways, during that time, I checked out some of the altchans, but I also tried to make my own chan, "Maochan". I followed Denshi's "Comfy Guide to Installing Vichan", which is a YouTube video that comes with a webpage guide, and although his installation guide doesn't quite work anymore, I was able to get my Vichan site to work somehow anyways.

And that, I believe, is the first NGINX server I have ever run? And that was the moment that I finally figured out how HTTP servers work. It just sits there, waits for requests on a port to the IP, and will send a page through the HTTP protocols if everything is logically sound. I spent like 6 months in 2023 trying to understand how the fuck I could get a backend set up for an HTML page. And it made no sense to me. It wasn't until 2025 and the 4chan hack that it clicked for me.

Actually, I credit the 4chan hack with getting me back into coding. And for finally teaching me full stack. I'm kind of glad it happened, in a way. I also finally learned how to use Linux, which I needed to do to host my Vichan imageboard.

I used Linode VPS as the Linux server for this, and the reason I always use Debian Linux now seems to stem from its use in this tutorial.

Project #17: JordanIsLame.com running on a Debian server
Estimated date of creation: May 2nd, 2025 Status: Online 🟢
Details

I consider this distinct from the Neocities site because this was the moment I pretty much made my first full-stack website on my own. This was the moment I set up VMware Workstation, ran command-line Linux on a VM from my Windows PC, and set up Apache for the first time. And this website is served with Apache. This was in 2025, a week or two after the 4chan hack. Back in 2022 I put my Neocities page on GitHub, thankfully, so it was as easy as typing "git clone" to get my Neocities website onto my Linux server.

Many of the pages were broken, actually, and had been sitting broken on my Neocities page for years (although I think they might have worked before?) So I fixed many of the pages on this site with the rest of my first night of full stack programming.

Project #18: "Farmer Ditto"
Estimated date of creation: May 4th, 2025 Status: Online 🟢
Details

This is a 3d model of a Ditto that I got from Models Resource. It's supposed to be extracted from Super Smash Bros Melee. I'm not sure if this is actually directly out of SSBM source code, it might be some replication. But anyways, it came in a ZIP with an OBJ file, an LMF file, and texture PNGs. I was able to connect them to ThreeJS, a javascript library that has 3d modeling abilities, and I was able to add a skybox and use controls to spin the ditto and stuff. The skybox is of some prairie/farm area. I like to call this Ditto "Farmer Ditto".

Project #19: Functioning SMTP email/contact page (PHP)
Estimated date of creation: May 2025 Status: Online 🟢
Details

This uses PHPMailer (which you'd have to have installed) and the SMTP protocol to send an email on a contact page. Not sure if this is possible in the same way on WIndows. I have PHPMailer installed on Linux. I used Gmail SMTP as my host. That makes it a bit easier when you're setting this up. I've had this contact page send things from another email address to my Gmail address. However, I'm not sure if this works with sending from sending between like Proton and Yahoo, for instance. This is being operated by Google. Not sure how that works. The page you're reading this on may have a contact form by the time you're reading this, but when I wrote this, I was still figuring this out.

This is written in just an HTML document and a PHP document. It's just forms, buttons, and when submitting, the HTML forms refers to the PHP file. It uses a POST request.

Project #20: A booru-style system of images-across-pages (where removing an image doesn't mess up the pages or the stack)
Estimated date of creation: April 2025 Status: Online 🟢
Details

This is trickier than one might expect. Set up a page system where PHP pages are added or culled based on how many images we're dealing with. It reads the SQL database to tell. If an image is removed from the database, it won't show anymore on the pages, but the stack also won't be weird. The next thing over will fill the space, and everything that should move over by one will move over by one. But also, if 1000 things are deleted, things will still work out normally.

Project #21: 3D trophy viewer gallery like Super Smash Bros Melee (ThreeJS)
Estimated date of creation: May 2025 Status: Online 🟢
Details

This was the logical extension of my foray into 3d models with ThreeJS, since I got into this with the idea of remaking the trophy gallery from Super Smash Bros Melee.

This version of the idea has cards that you can scroll between (like YouTube shorts or something), and there's different spinning 3d models to look at. They each have a description on the side.

I feel like this concept would be easier to accomplish with a 3d engine like Unity that doesn't have universe-breaking attributes like the ability to zoom in and out on a page. That ends up messing up my ThreeJS program.

What I'd like to do with the idea now is have it so you can look closer at the model, and spin it how you want, in the same way that you can in the actual Smash Bros trophy galleries. Then go back to reading the description. Basically, have it so the simulation responds to buttons that let you manipulate the 3d model, or go back to scrolling between the cards. But I also have no real use for this project, so it's just kind of an idea. Just go play Super Smash Bros if you want to look at a 3d trophy gallery.

Project #22: GurenCodes website (what you're looking at) and learning Apache virtual hosts and Bootstrap
Estimated date of creation: May 7th, 2025 (in progress) Status: Online 🟢
Details

I had learned a lot about hosting websites when I hosted by Vichan 4chan clone to www.maochan.org using Nginx, and when I hosted Jordanislame.com on an Apache server. But my two things I run Linux servers through are usually a VMware Workstation emulation (which would involve using my own personal network for serving), and a Linode cloud VPS server. For a few reasons, hosting from my own PC doesn't really work. I'm also a bit paranoid about hackers attacking my home network anyways. So I usually use the cloud. But running 10 different servers to run 10 different websites would be expensive, wouldn't it? Linode charges you for each one that is running. So I decided to start running multiple websites from my server computers in all cases. With Apache, that involves learning virtual hosts. (there's a similar concept possible for Nginx btw) The easiest video I've seen on how to set this up is this one. Apache is an HTTP server, and having multiple websites stored in the website folders is not necessarily harder on the computer or the server than haveing one site per server. That's because if one site is dead and the other is busy, the only thing the dead site is doing to the computer is taking up some storage space in the site folder. And if both sites are busy, it just means twice the number of HTTP requests as one site of that traffic level.

The virtual host thing is the interesting part about this website you're reading. I forget if I had to do something special to make the domain names resolve to the same IP address. Check out this GitHub repo (I may or may not have it set to public) if you want to see how I set up the virtual hosts for an Apache server.

And I was lazy with the CSS on this website, so I just used Bootstrap, so a lot of the tables and fonts that you're looking at are made out of prebuilt Bootstrap things. I built the animated rainbow text myself, though, and I made that like 3 years ago for the meme soundboard.

Project #23: Recreating the GurenCodes page out of SQL data that is fetched from the database at page load
Estimated date of creation: May 12th, 2025 Status: Online 🟢
Details

Is it annoying you how I'm breaking these projects up into little pieces? One could say that a single project should be an entire major website made, or a massive app made, and little side projects shouldn't be included. However, this was a major step for me. This may be the first time I've used SQL for anything practical before. And I had to learn how to route PHP's MySQLi driver to communicate between PHP, HTML, and SQL.

This main homepage is currently just typed out in text as HTML. It just sits in an HTML file. It's not fancy. What was cool about this homepage was that I used Bootstrap and had put this on a server. But what's cool about this other project is that I learned PHP, SQL, and MySQLi in order to use it. As of this writing, I only put two tables on the page, and other than that the page is a remake of this page you're already on, but the table is entirely scraped out of PHP and SQL code. A PHP file tends to contain a bunch of HTML code that just is left untouched and treated like an HTML file. But in this case, we echoed out entire tables worth of data, that was sitting in a database, that was written into the HTML file by the PHP. I think that's cool.

The other thing is that this is a major step, because now that I know how to pull data out of a database and display it on a webpage, I can soon make a modern changing mechanical sort of site like Reddit or Newgrounds or something

Project #24: Remake of the PC-98 shrine from my old site but with database usage for the image paths
Estimated date of creation: May 14th, 2025 Status: Online 🟢
Details

On my original jordanislame.neocities.org indie web website, I had made a page sort of celebrating the aesthetic of the PC-98. It has images all over it of some of the more spectacular images and animations from those games. Games like Snatcher, etc. I made a mild remake of that page, but where the image paths are stored as a string in MySQL, and the string is fetched by a PHP loop to use in the "src" attribute of HTML image tags. Just like the Gurencodes main page database-ification I did right before this, it looks like the same exact webpage.

So is this even exciting? Maybe not to you. But for me, these are steps towards being able to make advanced websites with videos that have data (like a name and view count) attached to their SQL table row, login systems, etc. It's always good to get comfortable learning backend database systems if you want to get into web development.

I used some Bootstrap on this so it looks a little different than the original.

Omochao: more projects to go!
You got this!
Omochao

*Omochao is a little robot assistant character from Sonic the Hedgehog. It's OK if you don't know what this is.