My website is a personal portfolio, where there is information about my personal life, education, work experience, projects, and awards. There are also some extra bits of fun elements, such as my current favorite song and an inspirational quote searcher. Overall, I just created a website that would present all the importants pieces of information about me to whoever needed it -- whether that be a future connection, employer, or educator. I also have a contact form, which would allow visitors to the page to contact me directly.
I implemented an iTunes iFrame that displays my current favorite song and allows the user to play/pause the song directly on my webpage, or to sign into and visit iTunes on a separate page.
To make the page a bit more accessible, I decided to make use of react-speed-kit. This provides a simple way to use the browser's built-in speechSynthesis API in my React webapp. The user simply needs to click on the sound icon and the text-to-speech will begin to speak out the contents of that specific section to the user. The sound icon is:
I made use of React Icons, specifically "Remix Icon's" RiUserVoiceLine. This icon was used as a button for the user to click on to activate the text-to-speech functionality of the different sections of the webapp.
Lastly, since I'm a fan of quotes myself, I implemented the ZenQuotes API that allows users to retreieve up to 50 current inspirational quotes from various authors based on an entered keyword. The API supports specific keywords, so if the user does not enter a valid keyword, an alert pops up that asks the user to choose from a list of valid ones. Once they do, a table pops up with all the retrieves quotes for that keyword.
This is the first section. Here, you can click the speaker icon to activate text-to-speech. The "Projects" and "Contact" button take you to projects and contact form sections, respectively. The GitHub, LinkedIn, and Twitter logos each are actually buttons/links that take you to my profiles on each of the websites. So, if you click on the LinkedIn logo, you will be taken to my LinkedIn profile.
This section has a text-to-speech functionality as well. It also has an iTunes iFrame at the bottom of all the text that shows my favorite song. You can start playing the song directly on the website, or click to view it in Apple Music.
This section is just some images and texts, as well as text-to-speech functionality for each subsection.
Similar to "Education and Work", this section is just some images and texts, as well as text-to-speech functionality for each subsection.
This form is designed for people to contact me. To successfully submit the contact form, the user has to enter a full name (with a space in between), either a valid email or phone, message, and contact purpose. They also have the option to choose their industry, and/or multiple contact purposes. The form validates for all sorts of errors -- email with no "@", message exceeding 200 characters or being empty, etc. Lastly, the user can click the "clear" button, which just resets the form to default values. If all values are valid, then the form submits and an alert pops up to let the user know that their message has been received.
To get quotes, the user simply has to enter a keyword. You can start out with the placeholder keyword, scroll down a bit, and see the multiple quotes be listed. Each quote will have the actual quote itself, along with a picture and name of the author, as well as a button to perform text-to-speech on each individual quote. If you do not enter a valid keyword supported by the API, an alert will pop up asking you to pick from the list of valid ones. Then, you can just try again with one of the other valid words.