PROJECT NAME: My Personal portfolio
OVERVIEW OF THE PROJECT: I have created this personal portfolio website using HTML, CSS, and Javascript. The website is made to showcase my skills and let others know more about me. The main goal of this website is to project me in the best light and get hired by the employers who have seen my portfolio. This project has multiple focus points. They are content, aesthetics, and interactability. For the content, there are four sections in total, about me, education, skillsets, and lastly the contact me form. This content allows the employer to have a good understanding of me and also gives him the opportunity to contact me with the form.
For the aesthetics, it is achieved with CSS. I wanted my portfolio to be minimalistic and to be easy to read. The Lato font allows for readability and at the same time highlights the modern aesthetics. Each section of the website is also enclosed into a black border, this allows the reader to know which section they are reading. The duo pastel tone color of the website also contributes to a minimalistic background. This helps prevent the reader's eyes from being flooded with bright colors or rainbows.
Lastly, for interactability, javascript and CSS are used. The navigation bar allows the reader to navigate through different sections of the website. With the help of CSS, animations are also coded into the navigation bar. When hovering on the navigation bar links, a black line will appear to show which section the reader will enter when he clicks on the link. When the mouse hovers away, the black line will fade out. Another user interaction is the contact form. The contact form allows readers or employers to contact me by filling up the information required. Once the form is submitted, the website will alert the reader about the submission. Lastly, both desktops and phones will be able to use the website hassle-free. This is due to the consideration of smaller screens as the website was designed with a desktop. An example would be the navigation bar. The navigation bar will flow with the size of the screen while remaining aesthetics. Another would be the sections of the page. All content will always stay in the black border regardless of screen size, which will help readability and avoid weird issues.
FEATURES:
feature 1: Four different sections in the portfolio feature 2: Single scroll webpage for simplicity feature 3: Minimalistic and modern feature 4: Easy readability (Lato font) feature 5: Duo pastel color combination feature 6: Easy classification of each different sections feature 7: Navigation bar feature 8: Animated navigation bar when hovering across the links feature 9: Responsive navigation bar feature 10: Contact form for readers feature 11: Alert displayed after contact form is submitted feature 12: Multiple display size compatibilities such as mobile phones and monitors feature 13: Responsive content to the display size
FEATURES TO IMPLEMENT IN THE FUTURE:
feature 1: Animated scrolling of the website when the navigation bar link is clicked feature 2: Relevant social media links feature 3: Animated background
Technologies used:
- Github
- Stackoverflow
- Youtube
- Wix for inspiration of wireframe design
- Normalize.css
- W3C Validator for HTML & CSS
- Visual studios code
Testing:
The website works on most phones and computers. By using media queries, the website will automatically flow to the size of the display. For example, when the website is viewed on a phone, the navigation bar links will no longer be right-sided, instead, the navigation bar will be centered to align to maintain the aesthetics as well as usability. At the same time, all four sections including the contact form will flow according to the display size.
Credits media: Navigation bar icon: https://www.nicepng.com/ourpic/u2q8a9e6r5r5t4i1_arrow-heads-clip-art/
Acknowledgments: My own personal branding Wix website: https://s10223397.wixsite.com/changmingfeng