The purpose of this portfolio website is to showcase my work experience, professional knowledge and personal interests to prospective employers and freelance clients.
View the portfolio website here: https://karla-bucoy-portfolio.netlify.app/
View the GitHub repo here: https://github.com/KarlaB3/T1-A2-Portfolio
View the presentation video here: https://vimeo.com/768025343/3e9e1df24e
- Vanilla HTML & CSS source code, and markdown ReadMe file written in Visual Studio Code.
- GitHub for managing source code changes and tracking and controlling versions of the source code.
- Netlify/GitHub pages for deployment of the website.
The website is designed and built to be simple, navigable, responsive and accessible.
This is achieved through:
- Header navigation items pointing to key pieces of information about me - my work experience, professional knowledge and personal interests on the About page, personality and coding journey on the Blog page and posts and how to contact me on the Contact page.
- Footer navigation items pointing to my LinkedIn, Github and Twitter accounts for easy access to my personal and professional interests and work.
- All pages use the same header and footer to allow easy access to all pages at any point in the user journey, and minimise back clicking.
- CSS flexbox and media queries to ensure the website is responsive and can display properly on all types of devices: mobiles, tablets and desktops.
- Semantic HTML to ensure greater accessibility, meaning a better experience for the user.
- Pseudo class effects to change the hover colour of header navigation and footer items and buttons inject some dynamism into the website.
- 'Z' pattern visual hierarchy, placing my brand top left and the three main pages top right in the header to ensure users naturally gravitate towards these elements first. Hero content sits in the middle of the screen then copyright text bottom left and social accounts bottom right of screen for easy access by users.
- Content is displayed to accommodate natural reading patterns - vertical top to bottom and left to right for ordered reading.
For navigability and simplicity three main pages were built to clearly showcase key pieces of information about me. This ensures users are not overwhelmed on their first visit.
The three main page links - About, Blog & Contact - sit in the header so they are prioritised by the audience.
The About and Contact pages featured all necessary information about me and didn’t require sub-pages, reinforcing the requirement for navigability and simplicity.
The Blog page lists a teaser of individual blog posts, then users can click into each post to view the full content.
Note my LinkedIn account is currently in hibernation with the change in career path. It will be updated and reactivated in 2023.
- Unsplash images for blog posts: https://unsplash.com
- Device mock up templates: https://www.webmobilefirst.com
- Colour symbolism and meaning: https://www.canva.com/colors/color-meanings/teal
- Visual hierarchy information: https://99designs.com.au/blog/tips/visual-hierarchy-landing-page-designs