Excelsior!
My name is Kevin Annen and this website is a hub for my programming, design, and commentary about games I like to play.
I grew up in the greater Chicago suburbs. I started programming back in 2010 working on mods for minecraft, and have been programming as a hobby since. Some of my interests include: Game Development, Animal Resque, Martial Arts, Lego, and Tabletop Games.
At this time this website is still under construction, and is entirely constructed in React from scratch so please disregard any bugs or missing content.
React Book Viewer
Project Description
For this project my friend gave me a project to build with React.js that would emulate a code interview with the company he works for. He asked me to build a page that grabs data from a RestAPI and display it as a table, the table had to be sortable by multiple data categories from the page it self.
The Process
Once I started on the project it took me about 3 days to finish using my free time after work. Working on the project helped me feel more like I understood how to create a project using React, since before this point I needed a lot more research and to ask more questions in order to get any sort of result. To build this project I began with making sure I could get react working over on Codepen.io then I made sure to gather and store the API data that I needed to work with. Once I had the data I started building a table that could display it. I built the table using CSS Grid but now looking back at it I would have been better to use HTML table tags since it would be handled better by different device sizes. Next I created the functionality of the page by pushing my data through a sort function before displaying it. Only creating one function for the task was able to handle all the necessary types of data to be sorted. (but I'm sure that using a more precise function would be better for larger datasets) After finalizing all the mechanics of the page I wrote some more CSS to ensure all the data is displayed nicely to the viewer.
Book Viewer App
The Orchard Project
This project Is my first web development project that I got to do in service of another person. I'm even being paid for it which feels great for my self confidence in my web development abilities.
The project was to update a website for a local orchard to display the correct information for the current picking season. My client didn't have a whole lot of specifications on what they wanted me to do other then just correct the current hours, and schedule. I made sure to get what they needed for their business out for display as soon as I could. As I didn't want to cause any customers confusion or miss anyone coming to the website for information. As a second phase I improved the overall design of the website.
This is a screenshot of the homepage before I started working on it. (The top image is afterwards)The previous designer built the flow of the website using tables, which was making it difficult to read and understand when handling the update, I ended up just deleting almost the entire page and rebuilt it up from scratch using divs with Id's and managing the flow using CSS Flexbox and CSS Grid. I then added to the design by breaking up each part of the page into its own object defined by a low opacity white box with a shadow, which made each piece of information pop up and easier to sum up visually. After I got the flow and design of the main webpage completed. I then made it consistent across all of the pages on the site. Which I was able to do super quickly by using the CSS code and Div structures of the main page, I only had to make occasional adjustments to be able to fit various other data structures such as recipes and photo albums into the main format.
Woodstock Country Orchard Website
Web Portfolio Project
When first creating this webpage I wanted to try and create a project using React.js, but at the time I needed to make portfolio for my programming projects as well. To save the time I decided to combine the two.
Before starting on this website I used FreeCodeCamp to learn a lot of the basics about web development. It was a great resource to learn lots of Javascript, HTML, and CSS. and gave me a strong foothold which to move forward with. I started learning react using a course from Udemy, Following along up until I felt comfortable creating my own page using it. To keep it simpler for me I went ahead and installed an existing boilerplate using npm and webpack just to get the project going I plan on learning how to setup and customize it for myself later, but it wasn't my priority at the time.
Learning React was a bit daunting at first since there are a lot of basic syntax changes coming from Javascript. I managed to figure it out after working on it for a period of time. I tried making the web page to be as modular as possible as each button or visual block is tied to being its own React component, and each of my posts here are made as a single component and added to a list to allow searching, and filtering via the search bar on the right. Using react to build the website makes it not have to go and reload anytime you click a button or change what is displayed on the page and make the sorting function display my posts instantaneously.
Take a peek at the code over on the github repo
Ludum Dare 42 - Running out of space
This was a project I started for the Ludum Dare 42nd Game Jam. For those whom might not know a Game Jam is an event where someone makes a Video Game from scratch in a short period of time. (Usually 48 Hours) I used GamemakerStudio2 for the programming and Inkscape for the art.
Now having done more than 10 Game Jams I try to set particular goals for what I will be working on in order to improve my abilities and understanding of game design. For this particular jam I wanted to make a game that had some sort of progression system. I decided on building an isometric action rouge-like game. The progression I was going to add was a simple leveling system with a talent tree that added to the players abilities.
Difficulties
This story as most of the time, is not one about success but rather about learning in failure as I did not achieve the goal that I set about above. It came down to a bunch a problems going into the project. The first was that normally I set out a completely open block of time for the Jam, that is uninterrupted by daily living, but this time I was limited on the time I could dedicate to the project. In Addition I've noticed I tend to overscope my projects to be to much work for a single developer.
Some gameplay mechanicsBuilding an isometric view game is a bit more complicated than building a side scroller this makes it more difficult to achieve in a short period of time. The final and largest problem I had was that I choose to make all the art using vector art. Its one of the two art styles I could make I wanted to mix it up from my previous project. However, it was just way too time consuming for me to use, and took way to much time from me to actually program the game.
Lessons Learned
After finishing the Jam I didn't feel as though I had a complete enough game to be worth submitting to Ludum Dare. Next time I hope to learn from these mistakes and try to make smaller, but more complete games. Making sure that whenever I design a game, to make what I know first, then add new things to it afterwards, saving the experimenting with completely new ideas and skills to projects that don' t have the same time constraints.
Demo
You can play around with the prototype if you want by downloading it from my Itch.io
Play it hereFreeCodeCamp Project - Survey Form
Following the programming curriculum on FreeCodeCamp I went ahead and designed a survey form themed around the PC game League of Legends. It gave me more practice using CSS grid and Flexbox The survey doesn't send its data anywhere and is made just from HTML and CSS since it was a simple enough design that I didn't need to go into javascript to build it.
I Themed the survey to have a feel for the data it was asking about. I used lots of images from the game that correlate to the parts of the game I was asking for data about. All together it creates a nice League of Legends feeling webpage.
Shenanijam 2 - Slime Crafting
This was another of my game jam projects this time for the second Shenanijam hosted by award winning game designers Butterscotch Shenanigans. This project was worked on over 48 hours and was produced using GamemakerStudio2 for the programming and Aseprite for the art.
For this game jam the theme that I had got was "Slimey Justice" I decided to go for trying to make a crafting style game focused around having the typical roles reversed for the main characters. In most games slimes are used as a weak beginning enemy for the player to face off against. However for this game I had the player be the slimes trying to show the human characters whos boss.
This game was my first real attempt at making a crafting game. It posed many challenges for me. I've gotten used to making games with randomly generated maps in previous games I've built so I got that working pretty quickly. I had a nice top down island for which the player would live. It got trickier once I started to add in the main resource collection mechanics. Since I couldn't think of how to make a slime collecting stones and trees seem natural, I ended up making the main mechanic of the game about holding down the mouse button on a target, and your slime would start to send out pieces of itself in order to gather and collect the various items it would use for crafting.
Some gameplay mechanicsThis would create numerous problems do to the many interactions that the objects in the game would have with each other, and how I choose to handle those problems. When spawning each little piece of slime the "slimeling" as I called them had to figure out if it had to attack or destroy something, pickup an item, or combine with another slime, and it was very hard for me to keep track of what it was attempting to do so I was never able to get results that felt very good.
After a while of sorting out those mechanics, which also took most of my time for the game jam. I realized that I couldn't solve the problem of why the slime needed to gather items in the first place. It was not using items to collect things it had no need for better tools or weapons which is the main game loop that crafting games tended to uses.
After all the issues I faced with the overall design of the project and all the time lost to solving various bugs. I ended up with a game that's mostly just running around collecting sticks and killing npcs. But sometimes that's all someone can get out of a game jam.
You can play around with the prototype if you want by downloading it from my Itch.io
Play it here