Technologies used: HTML5, CSS, JavaScript, Canvas

This is my adaptation of the classic game, Hangman. For this project, I relied heavily on vanilla JavaScript for the logic. This game starts out by asking Player 1 to enter in the word they would like their opponent to guess. Once a valid response is entered, Player 2 gets chances to guess what the word is by entering one letter at a time. If Player 2 guesses the wrong letter, then a body part of Hangman is drawn on the board. This equates to 6 chances for Player 2 to guess the incorrect letter. Player 2 also gets 1 chance to guess the entire word, but if it is incorrect then the game is over. Likewise, once all guesses are used then the game is over. Player 2 wins by either guessing the correct word or guessing letters until the correct word is revealed.

This project taught me how to handle form validation. This included displaying an error if non-alpha characters were entered or more than one character was entered for a guess (excluding guessing the entire word). This project also taught me how to dynamically generate HTML elements based on user input. Finally, I was able to learn how to use the HTML5 canvas element to draw the Hangman figure.

Technologies used: HTML5, CSS3, JavaScript, jQuery, ES5/ES6, SASS, Gulp, Node.js, Bootstrap, Adobe Illustrator

This project is my take at a classic trivia game. Instead of using questions of random facts, all of the questions pertain to me. Though it sounds narcissistic, the questions are only Brent-centric so that you can learn more about me and what I’m looking for in my next role. The game also provides links at the end to my social media for further information.

This project was heavily centered around JavaScript. I made some use of ES6 arrow functions. Event listeners were used heavily in this project, as the click events from buttons drove the interactivity. Transition animations were also used in CSS3 to control the hover effects of the buttons. CSS3 animations created the pulsing effect of the score at the end of the game. I created the illustrated guy using Adobe Illustrator.

I used Gulp during development in order to automate the process of refreshing the browser with new changes everytime a file was saved. I also used SCSS in order to handle the preprocessing of my CSS. Gulp again took over to automate the process of compiling the SCSS to CSS on every save. Node.js was used to run Gulp on a local server for development.

Technologies used: HTML5, CSS3, JQuery, Bootstrap, FlexBox, Adobe Illustrator

This project was a no brainer. I’m a developer and creator, so I needed to develop and create a portfolio site to showcase what I’ve developed and created. More specifically, I wanted to display my work for potential clients, while also giving them a glimpse of the individual they would be working with.

There are two iterations of my portfolio site. The first was built with Twitter Bootstrap, namely the navigation bar, buttons, and the very modal that you’re reading now. I made a custom border for each section on the page with Illustrator, which I thought was pretty cool since that’s the first time I’ve attempted it. The blurred picture hover effect was accomplished through custom JQuery. The same is true for the portfolio thumbnail hover effect. All of the icons in the “Contact Me” section are courtesy of the folks at Font Awesome.

The current version of the site was built on the WordPress platform. I built everything upon the Genesis Framework using the Agency Pro theme. I utilized the footer widgets and navigation bar from the Agency Pro theme, as well as the CSS styling that is used throughout the theme. However, I created the “Home Page” and “About Me Page” content from scratch using HTML, CSS, and JavaScript. In addition to creating the markup for these pages, I also had to use PHP in order to create/modify the template files in WordPress. I also used Adobe Illustrator to create the graphics. The portfolio showcase was created using the Essential Grid plugin by ThemePunch. The contact form was created using Contact Form 7.

Technologies used: HTML5, CSS3, Squarespace, Photoshop

This project was done for a non-profit that works to better the lives of the youth. All work was completed on the Squarespace platform, since the client already had an existing site hosted there. I decided to modify the existing template in order to give the overall site a better aesthetic, while adhering to sound UX principles. Custom HTML and CSS had to be used in order to create the majority of the elements on the page. Photoshop was also utilized to properly size the images that were used.

I started the process by interviewing the client in order to outline all of the requirements for the site (look and feel, functionality, purpose, etc.) From this session I was able to discern that they wanted a simple, yet modern site that got their message across and showed all of the good they were doing in the community. Since this is also a non-profit, receiving donations was very important. I took all of these factors into account when creating the website. I used large header images throughout to give the page more of a modern look. I highlighted the donation button throughout the content and in the navigation menu to generate more visits to that page. I included an Events section on the homepage that showed the events that the organization had in the works. I also included a gallery that showed the pictures that were taken at each event in order to show that the organization is relatable, fun, and actually cares about the community. I also implemented a scholarships section to better facilitate gathering scholarship applications from students. Lastly, I set up their blog on the site so that they could write engaging content for their audience, which would help with SEO.