👋 Hello!

I built foundation for this project by following the Intro to React Tutorial. After learning how to set up Create React App and going through the tutorial, I expanded on the main tutorial with custom styling and a responsive layout, color coding the X's and O's, highlighting the winning line, highlighting the currently selected turn and displaying the coordinates + mark made for each turn in the history list, and enhancing the status to handle win, lose, and draw conditions.

Although I'd completed the React and Redux lessons on FreeCodeCamp prior to this project, I'd consider this my first 'real' react app. This project a great learning experience for me because the app uses multi-level nested components and passes props all the way down from the top to bottom level. I had originally tried to track the winner and winning line in the Game component's state by using setState in Game.handleClick, but then I realized that doing so blocked the "rewind" functionality. Instead, I ended up just passing down the winning line from Game.update to Board and Square through props, exposing this data where it was needed and solving the problems I was facing with the rewind. Additonally, I had some trouble figuring out how to correctly import images using relative filepaths until I took a fifth look at the docs!

I obviously still have a lot to learn about React, but here's to one completed project on the books! 🍾

This is the the first full web app that I built in React entirely from scratch (with the exception of create-react-app of course). I wanted to take the lessons I'd learned from creating the Tic-Tac-Toe app, but this time structure the project in a more "React" style. My approach for this project was to start by building out the core functionality: since I knew my app needed to pull quote data from an API and enable users to tweet each quote, I split the UI component code into individual files, and housed most of the logic for the app in the top level QuoteMachine component. I have to say, although it was a bit confusing initially to work with so many files, after getting used to it I see now how it would make managing a large project easier.

After building out the primary app logic and component structure, I put my design skills to use by creating a style guide and mobile and desktop UI mockups in Figma. Taking a step back to think about this project with a design mindset gave me the idea to expand on my app with a new feature: a quote history section that would display all the quotes the user had previously looked at, with the option to tweet each of those quotes as well. Designing out the UI was also a great time to think about the different app states and user interactions, and gave me the opportunity to predetermine the button and quote card hover behavior rather than making it up on the spot.

With my mockups in hand, I built out the CSS styling... Which actually ended up being the most time-consuming part of the whole project! I relied heavily on flexbox to make the UI responsive. In the process of styling the page, I decided to deviate from my mockups by expanding the width of the main column while capping its maximum width at 1600px to keep the line length in a more optimal range. Having finished this app, I feel like I have a much better understanding of React component hierarchy, and state management. Although I went above and beyond the requirements, you can see the original project requirements here.

My markdown previewer app has one simple function: take markdown input in the "editor" section, and display the HTML result in the "preview" section. After a few times building out simple applications with React, this one went pretty quickly and smoothly. Behind the scenes, the app parses the editor input into HTML using the marked library each time the textarea content changes.

Although I really enjoy bright colors, funky typefaces, and the Memphis design style, the prevailing look of today's products is far more muted and Sans Serif, so I made a point to break from my typical UI aesthetic for this project to create something a bit more "commercial" looking.

I also dedicated some time to making UX improvements. I'd originally designed a single column layout, but after a bit of testing I realized it would be nicer for users to see the html result alongside the markup rather than having to scroll all the way down the page, and refactored the page for a responsive two-column layout that reverts to single column at smaller screen sizes. Additionally, I made sure that when the page loads, it auto-focuses on the editor text area so that users can begin typing immediately.

Project requirements here.

This project is a tribute page to my dog that passed away recently. I designed the page using Figma before I coded it up. Through this project, I practiced creating animations and a sidebar that disappears for smaller screen sizes. Project requirements here

This project is a quick survey form about music preferences. Through working on this project, I gained practice using different types of input fields and with HTML5 form validation. I also practiced creating a full-featured mobile friendly design. Creating this page was a bit of a challenge for me because I didn't stop to consider the final layout before building the site. As a result, I had to go back and restructure the HTML in a way that facilitated a clean layout. Project requirements here

This webpage is a landing page for the OP-1 synthesizer by Teenage Engineering. I pulled a lot of the copy for the page from the Guitar Center and Sweetwater websites. For this page, I was focused on creating a clean design that showed off the device, with calls to action to encourage checkout. Figuring out how to create a responsive video frame was a bit tricky. Project requirements here

For the technical documentation page, I decided to create a quick introduction to p5.js. While working on this project, I had fun creating a pastel color scheme after realizing that the colors I'd chosen initially clashed horribly. I also enjoyed leveraging some of my previous knowledge of p5.js to include multuple p5 sketches in the page as working demonstrations. I always feel that with docs such as these, it's great to see a working example along with the code. I'm not sure this tutorial is that helpful however - the real p5 docs are much better. Regardless, this was a great way to practice working with preformatted text, and to create a page for information consumption. Project requirements here

The final project for the Responsive Web Development certification was to create this portfolio page! I used flexbox, some sweet gradients, and everything I'd practiced up to this point to get it done. Honestly, this was probably the most fun of the five because it was completely up to me! Project requirements here