Hi, I'm Braden.

Mock landing page design for a fictional start-up.

Stack includes:

• HTML
• CSS
• Bootstrap 4

Github

Freelance project for a College Station, TX based brewery. I designed 5 different webpage templates as mockups and then implemented the designs in HTML5, CSS3, and Javascript. Working with one of the co-owners as a client, I went through an iterative process, including first producing different mockups in Photoshop, and then writing HTML/CSS/JavaScript for the concepts that the client liked best. The templates include animations and responsive elements already optimized for desktop, tablet, and mobile phone viewing of the website. You can find each of the templates hosted here on my site, while the site itself lives at oldmainbrewing.com

Stack includes:

• HTML
• CSS
• Javascript

Pokedex app based on the Pokemon series games, built in React. The app includes the full collection of 1000+ characters, sourced by the awesome PokeAPI. Clicking a Pokemon's card in the main list view will open a detailed view of the Pokemon with multiple images and stats about the monster. NES.css was used as a framework for styling the app to give it that nice nostalgic, Gameboy feel.

Stack includes:

• Javascript
• React
• TailwindCSS
• PokeAPI
• NES.css

Github

Weather conditions app built in React. A city name and country name are needed for input, and then the location name, current temperature, humidity, and conditions are pulled from OpenWeatherMap. More features to come soon!

Stack includes:

• HTML
• CSS
• Bootstrap 4
• React
• OpenWeatherMap API

Simple Tic Tac Toe game built in React based on the ReactJS.org intro tutorial, with a built-in move history and my own personal responsive design.

Stack includes:

• HTML
• CSS
• React

Github

Simple app that pulls jokes and their punchlines using the Official Joke API, built in both vanilla JS and React.

Stack includes:

• HTML
• CSS
• Vanilla Javascript / React
• Official Joke API

Github (React version)
Github (Vanilla JS version)

Javascript Bookmarklets created to assist when writing HTML in the web browser.

Usage: highlight text in a text field and then choose the bookmarklet with the corresponding function you would like to use. Supports creation of Bootstrap 4 grid components, e.g. col-md-6, etc.

Features include:

• Heading tags - h1, h2, h3, etc.
• Formatting tags - strong, em
• List maker - formats selected list of text broken up by line breaks into ul or ol with li elements
• Image tag with prompt for URL and alt text
• Anchor tags with prompt for URL and options for new window / tab
• Responsive YouTube / Vimeo videos with prompt for video ID
• Bootstrap 4 grid components
• Layout Maker - inserts indented divs with container and row classes around selection
• New Row Break - inserts div with class w-100 to force new row
• col-sm-#, col-mg-#, col-lg-#
• ...and more!