This is my first experience with CSS and ReactJS. I began this project by following the following YouTube video: https://youtu.be/bmpI252DmiI . I am hosting the website using GitHub pages.
From this tutorial, I made a home page, about page, contact page, portfolio page, and linked sidebar. Once I created this baseline, I customized each page to fit my needs and expand on the video's teaching. I redesigned with a new color pallette and graphics, as well as page set-up. I eliminated the contact-page in favor of a more streamlined "contact" button on the home page.
My goal for this project was to experiment with front-end design, CSS, and React for the first time. I enjoy the creative design process and being able to create a personalized final product.
I designed my own simple letter logo and animated it on the home screen, in addition to including it on the sidebar. The remaining letters of the header are animated upon mouse-hover. Also, I hand-drew the flowers image, converted it to a transparent background, and added it to the home page.
The about page included a header that is animated upon mouse-hover, a text section with an animated transition, and an image gallery.
The portfolio items consist of an image and a link to the GitHub repository, so the website will redirect to the repo when the button is pressed. Each portfolio item is animated upon hover, and the page header has animated letters upon mouse-hover.
Looking forward, there is still a lot to learn about React, are many features I would like to develop further. For example, I would like to change how the Portfolio Page stores its data, and allow the user to press the button to view the repository in a sub-window, not leaving the window. Further, I would like to change the image gallery on the About Page to be a scrolling image display, no longer static. Also, I would like to incorporate more graphics and animations to make the websit for visually interesting and personal.