Click on a screenshot to view the completed project.
Check out my code for these projects and more HERE.
------Back-End Projects------
To view my code for the back-end projects, check out the server directory. Each project has css styling in public, JS in routes, and EJS (html) in views
Here, I create a server to allow users to look at, add, modify, or delete blog posts. Once again, the hardest part of this project was integrating it into this server as a router after it was originally completed.
Now I get to have some fun! I constructed an Eve Echoes intelligence-gathering web application using the public API provided by echoes.mobi. The user enters a player's name and the application retrieves timestamps and locations from kill/loss-mails. This data is then processed and displayed as places and times most likely to find the player.
Interacting with other servers' API's was interesting, but only a fraction of what I learned is put on display here. Using the given setup, users retrieve a random secret from the app brewery server. However, I also learned how to create, modify, ane delete information using the API documentation from another server. I also learned how to generate and maintain actual backend secrets like usernames and passwords, bearer tokens, and API keys, but there was no opportunity to display any of this here.
This was a lot more work than it appears. I set up a server with Heroku, changed the structure of this site for compatibility, and successfully deployed the previous projects on github pages and this project on Heroku. Oh and made a band name generator...almost forgot.
------Front-End Projects------
You may remember this game from your childhood. The user has to watch buttons light up and reproduce the correct order by pressing the buttons. I used everything I've learned in JS except (surprisingly) loops to make this game to the course specs, which admittedly leaves much room for improvement. Nonetheless, it's simply a demonstration of my growing skills. Edit: I went back and made this mobile compatible.
I wasn't satisfied with the unpolished version of the drum kit that was supposed to be completed in this lesson. I knew there must be a more efficient way to load the sounds ahead of time and to avoid creating a new audio object whenever a sound was played. So here I simplify my code and got help from AI to learn how to preload sounds. It works noticibly faster in rendering sounds.
Here I use JS queries, event listeners for keypresses and clicks, and a switch to call various drum sounds when the user clicks the corresponding drum.
After a week or two to train up on JavaScript, I'm ready to begin applying it to the web. I made a dice game where two players compete to roll the highest and added a button to run it for extra credit. Just to show I haven't forgotten how to use HTML and CSS, I used things like flexbox and a custom font to make the page a little less boring. Give it a try!
This project showcases my knowledge of the combination of HTML and CSS. I redesigned Phishtopia to reflect my progress with a major update of the entire page.
I quickly created a hotel home page. I put something together but honestly didn't showcase what I learned. There should be more contrast in the title, serif and sans-serif should be mixed in title and subheading, and additional pages could have been added on. The purpose of my negligence is to show that in 20 minutes, I can make something decent enough to get started with an idea.
Click the image to visit my hotel site
I created a landing page for a dog dating app using Bootstrap. The page includes several sections which precisely replicates the goal image primarily using bootstrap for modified snippets and examples. Things are starting to come together to look like a real page.
My task here was to replicate Mondrian's artwork using grid, almost exclusively and from scratch.
Matching the goal visually and functionally, I made a three-part table using flexbox. This table includes item title, price, description, a button, and background. The table is adaptive to screen size and switches to a single column on mobile.
Given the specs of how the website should be laid out -- using only floats, widths, and block/inline-block displays (no flexbox, grid, or bootstrap) -- I managed to construct their site with a media query to be responsive to display size and stack the content accordingly
Following strict guidelines, I solved the puzzle of creating the flag of Laos using only CSS to style divs (boxes). Basically, I sized, positioned, shaped, and colored rectangles before sizing and positioning the text to create the flag.
Using HTML and CSS, I made a classic-style original meme with a custom font, borders, aligned and transformed text, margins, sizing, and a background.
Created a style.css file where I formatted html text color, font weight, and image height & width using class, tag, and element selectors.
Using html, this page showcases my knowledge on referencing images, creating hyperlinks, and structuring a simple webpage.
I learned to insert an image and made an unordered list.
I use different headers and a paragraph element to format my text to different sizes in an orderly fashion.
