This is a simple Breakout game implemented in JavaScript using the HTML5 Canvas API. Installation Clone the repository to your local machine: git clone https://github.com/k8215/breakout.git Navigate to the project directory: cd breakout Open index.html in your web browser to start the game. Usage The game starts automatically when you open index.html in your browser. The […]
Read MoreCentipede is a bare-bones facsimile of the classic arcade game of the same name. Objective Continuing my exploration of Game Development with the Javascript Canvas API, I moved onto Centipede mostly by accident. Once again I avoided tutorials in order to try and work through the logic myself. The key goal with this game was handling […]
Read MoreThis is a simple Centipede game implemented in JavaScript using the HTML5 Canvas API. Installation Clone the repository to your local machine: https://github.com/K8215/centipede.git Navigate to the project directory: cd centipede Open index.html in your web browser to start the game. Usage The game starts automatically when you open index.html in your browser. Gameplay The player […]
Read MoreQuick presentational update to the Space Invaders project. Keep Shields Centered On Hit Shields will now automatically maintain a centered position when hit my an alien missile. I initially thought this was going to involve some math to determine whether the missile hit on the right or left side. I even put together a formula […]
Read MoreSpace Invaders is a bare-bones facsimile of the classic arcade game of the same name. Objective I wanted to take what I learned from the Asteroids Tutorial in my last project and iterate without the training wheels this time. Space Invaders has more lateral movement from the player and hostiles than in Asteroids, and has […]
Read MoreThis is a simple Space Invaders game implemented in JavaScript using the HTML5 Canvas API. Installation Clone the repository to your local machine: https://github.com/K8215/space-invaders.git Navigate to the project directory: cd space-invaders Open index.html in your web browser to start the game. Usage The game starts automatically when you open index.html in your browser. The player […]
Read MoreAsteroids is a bare-bones facsimile of the classic arcade game of the same name. Objective I want to focus on more creative projects this year in order to break up the grind of work skill development. I’ve always been passionate about game design, and there are a lot of free tools to chose from. My […]
Read MoreThis is a simple Asteroids game implemented in JavaScript using the HTML5 Canvas API. Installation Clone the repository to your local machine: git clone https://github.com/k8215/asteroids.git Navigate to the project directory: cd asteroids Open index.html in your web browser to start the game. Usage The game starts automatically when you open index.html in your browser. The […]
Read MoreThe Liturgical Date Checker project uses the Liturgical Calendar API to display information about Catholic Holy days. On page load it fetches info for today, tomorrow, and yesterday. It also has a search field that will return celebration info about a specific date. Objective This is just more basic API practice. I started this in […]
Read MoreA simple tool for checking Holy days. Uses the Liturgical Calendar API Installation Clone the repository git clone https://github.com/K8215/catholic-liturgical-date-checker.git Navigate to the project directory cd catholic-liturgical-date-checker Install dependencies npm install Usage Run the development server npm run dev Known Bugs This project does not work on the server due to content mixed content error. The […]
Read MoreAs part of my React API practice, I built a dirt simple Logo Finder using Clearbit’s Logo API. Simply enter a web domain, and the app will retrieve a logo image. Objective This is the third in a series of simple API fetching apps that I’ve built so far this year after the Public API’s […]
Read MoreApp that retrieves a logo image from a web domain using the Logo API by Clearbit. Installation Clone the repository git clone https://github.com/K8215/logo-finder.git Navigate to the project directory cd logo-finder Install dependencies npm install Usage Run the development server npm run dev Updates 3/7/2024 – Added enter key functionality.
Read MoreAdded another API fetching project, Open Library Search. The app pings the Internet Archive‘s Open Library Search API to retrieve author, publication, purchase, and topic data for a user-provided book title. Objective My goal is to continue cranking out simple fetch projects until I can do them without relying on a crutch. I used my […]
Read MoreApplication that takes user input and pings the Open Library Search API to return information about books. Installation Clone the repository git clone https://github.com/K8215/open-library-search.git Navigate to the project directory cd open-library-search Install dependencies npm install Usage Run the development server npm run dev Known Bugs I’m conditionally applying a link to each result depending on […]
Read MoreThere are several new enhancements to the Public APIs List project. Hide CORS APIs I added a checkbox at the top that will filter out any APIs that require CORS headers in order to fetch them. It was the first additional feature that came to mind as I was evaluating the available keys in the […]
Read MoreI updated the style for <code> elements in the Web Cave Theme so that they pop a bit more. Enhanced Readability It was too hard to distinguish code blocks from regular text before. They were just white text on black like the rest of the post content. Now they have the strawberry color scheme that […]
Read MoreI built a simple app called Public APIs List that prints a list of all the free APIs available through public-api. Objective I want to get more comfortable with the JavaScript fetch API. I needed inspiration for another project to work on and figured I’d start by looking at big lists of free APIs that […]
Read MoreA dead-simple React app that fetches a list of free APIs from public-api. Installation Clone the repository git clone https://github.com/K8215/publicapis-list.git Navigate to the project directory cd publicapis-list Install dependencies npm install Usage The app can be used to view a full list of available API titles in a responsive four-column layout. Updates 2/15/24 Added checkbox […]
Read MoreI decided to run through the Web Cave theme files and spruce a few things up. ADA Compliance Improvements I realized the images in the project posts and grid loop were missing alt text. They’re using WordPress’s the_post_thumbnail() function to render, which should cover the programmatic end. I just hadn’t added any alt text to […]
Read MoreThe Obligatory To-Do App is a simple React project that I whipped up to test out Vite. Objectives The most popular React scaffold, create-react-app, is no longer being maintained, so work needed to find an alternative for spinning up smaller SEO-agnostic React builds. The to-do app is one of the most basic coding projects so […]
Read MoreThe Obligatory To-Do App is exactly what it is. It’s a foundational project for testing new languages and frameworks. This one uses local browser storage only. Installation Run: npm install Then: npm run dev Usage Type a thing to do in the text area, then click the Add Item button to place the item in […]
Read MoreI re-built my Game Picker 9000 project in Next.js 13. The new routing system is very appealing, but as of right now the deployment documentation leaves something to be desired. Will need to investigate that further if I’m going to dip into headless WordPress. Features: Split original markup into components Converted vanilla JavaScript listeners to […]
Read MoreThe Game Picker Next is a re-build of my original Game Picker 9000, this time using Next.js. With create-react-app being depreciated, I made the recommended switch to create-next-app, and jumped right into the new app router that was just added in Next.js 13. Usage Just like the Game Picker 9000, Game Picker Next takes in […]
Read MoreI re-built my Responsive Web Portfolio project in react for practice. It went pretty smoothly and provided a good opportunity to practice some essential react concepts. React Features Employed: Split project out into nested components Converted vanilla JS event listeners to state Used effect hook to listen for user scrolling action Discovered react-router-hash-link package that […]
Read MoreThis is a re-branded copy of my Responsive Web Portfolio project built in React. I thought it would make good practice just to take a simple web page I was already familiar with and convert it. Turned out to be a perfect introductory-scale project. Routing and React Router Hash Link Even though there’s only one […]
Read MoreIt’s been a while since I updated my personal portfolio, so I figured I’d update the project version too. The aim was to get the code cleaner and more maintainable, and to do a fresh round of auditing for google and accessibility. I also made some aesthetic changes to create some variation in the design […]
Read MoreI added a React Lightbox Gallery to the projects archive. It is my first attempt at an independent React project. Lightbox Gallery Features Landing page with welcome text. Presentation page with image gallery and categorized navigation. Images expand to a detail view when clicked. The initial setup for this React project is minimally featured due to a […]
Read MoreThe React Lightbox Gallery is a simple lightbox app for displaying multiple images. It’s my first foray into the React JavaScript framework. React Lightbox Gallery Concept I needed to come up with a fun PowerPoint presentation for happy hour at work but decided to build an app instead. I’d recently built a marketing tool for […]
Read MoreNew year, new WordPress theme: introducing Web Cave 1.1.0. Readability The problem with having an ironic web theme that’s intentionally bad is that.. it’s bad. The original custom WordPress theme for this site sucks and I’m tired of looking at it. Web Cave 1.1.0 is a readability revision that maintains the “3edgy haxor” feel of […]
Read MoreBefore the holiday I noticed that the game listing in the Game Picker 9000 didn’t clear on submission. If the user performed a submission with the box unchecked, then checked the box and submitted again, the result would have both played and unplayed games in the listing. In order for the filter to work properly, […]
Read MoreI added some new CSS spinners and other loading effects to the CSS Animation Archive. I felt the loaders section in general could use a bit more fleshing out. Spinning loaders are an obligatory CSS effect so I had to throw a couple in there. CSS Spinners I added two spinners. The first is the […]
Read MoreSay hello to “Shiver”, a Halloween CSS effect that is definitely not ripped from a popular cult cinema streaming service. I added it to the the CSS Animation Archive project in the spirit of the season. Simple Halloween CSS Boyfriend and I have been pounding Giallo films on Shudder for the past two weeks, and […]
Read MoreI’ve furthered the UX enhancement to the Game Picker 9000. First I centered the loader and positioned it below the title output container. Previously it was jammed on top with no padding. If you searched more than once, the loader popped in awkwardly. The new alignment is more pleasing. I also added the player’s username […]
Read MorePursuant to my co-workers’ feedback, I added a playtime filter to the Game Picker 9000. Now the Game Picker can ignore games you’ve played already. Additionally, the Game Picker now prints the total playtime of each game in the main listing. Playtime Filter Implementation The Game Picker 9000 uses the GetOwnedGames method within the Steam […]
Read MoreI’ve added a linear gradient to the rainbow animation in the CSS Animation Archive. The previous rendition was too plain. By happenstance, I came across this video by Kevin Powell, and it inspired the revision. The gradient pattern looks swankier than the plain text color fade, but it comes with a problem. Linear Gradient Won’t […]
Read MoreThe CSS Animation Archive has been updated with more css animations, a mobile fix, and a new section for animated loaders. The most notable new addition is Neon. There are a million tutorials out there for this kind of effect. In static form it’s just a bunch of layered text-shadow properties, but I spiced it […]
Read MoreA de-branded version of this site’s WordPress custom theme is now available on GitHub. You too can be a late 90s edgelord with the Web Cave theme! WordPress Custom Theme Features The Web Cave theme features standard post, page, and comment functionality with custom navigation. In addition, I added a projects post type that emphasizes […]
Read MoreThe CSS Animation Archive consists of CSS-only animations that I’ve used in my work. Some of them are modified from tutorials, and some are completely unique. Currently available sections include fancy looping effects and some simple rollovers. I’ve applied them to buttons for demonstration purposes, but they can be transferred to any kind of element. […]
Read MoreThe Game Picker 9000 is a Node.js app with Express that queries the Steam Web API. It was designed to solve two problems: It’s hard to pick a new game to play when your backlog is over 100 games deep. I don’t get to do a lot of server-side fetching and routing in my day […]
Read More