More technologies, more cats, more fetching (but, not by cats). This is my portfolio, built with React!
This is the module 20 challenge of the edX/Monash University Bootcamp. React is fun; it kind of felt like Handlebars... but on steroids. I wanted to have a bit of fun with it and see if I could pull all my GitHub repositories and build a portfolio with the data from the API. The only thing I wasn't able to get that was set out in the acceptance criteria, was that each application needed a "deployed application link". But I think I might try to think of a way once I've submitted this assignment! I would call this an MVP (Minimum Viable Product). It still feels a bit clunky, and I'm not all that happy with the styling, but for the challenge, this is what I could do in the timeframe. This challenge still needs a major code refactor as things became a little messy at the end, for those edX graders looking through my repo thinking, "Why did he put that there?". I really enjoyed React, and would like to delve much deeper in the upcoming assignments, watch for the next ones!
The acceptance criteria of this project were as follows:
GIVEN a single-page application portfolio for a web developer
WHEN I load the portfolio
THEN I am presented with a page containing a header, a section for content, and a footer
WHEN I view the header
THEN I am presented with the developer's name and navigation with titles corresponding to different sections of the portfolio
WHEN I view the navigation titles
THEN I am presented with the titles About Me, Portfolio, Contact, and Resume, and the title corresponding to the current section is highlighted
WHEN I click on a navigation title
THEN I am presented with the corresponding section below the navigation without the page reloading and that title is highlighted
WHEN I load the portfolio the first time
THEN the About Me title and section are selected by default
WHEN I am presented with the About Me section
THEN I see a recent photo or avatar of the developer and a short bio about them
WHEN I am presented with the Portfolio section
THEN I see titled images of six of the developer’s applications with links to both the deployed applications and the corresponding GitHub repository
WHEN I am presented with the Contact section
THEN I see a contact form with fields for a name, an email address, and a message
WHEN I move my cursor out of one of the form fields without entering text
THEN I receive a notification that this field is required
WHEN I enter text into the email address field
THEN I receive a notification if I have entered an invalid email address
WHEN I am presented with the Resume section
THEN I see a link to a downloadable resume and a list of the developer’s proficiencies
WHEN I view the footer
THEN I am presented with text or icon links to the developer’s GitHub and LinkedIn profiles, and their profile on a third platform (Stack Overflow, Twitter) - Portfolio projects with deployed application links will now show a button for the deployed application. I have added the walkthrough video link or the deployed application link where applicable to the "website" section of each of my repositories. In the GitHub API response, it returns as "data.homepage".
The deployed application can be viewed from the following link: https://xande-portfolio.netlify.app/.
This project is covered under the MIT License.
x4ndez: https://github.com/x4ndez
Questions may be directed to my LinkedIn: https://www.linkedin.com/in/alexandernanfro/.