About ✦ Project Requirements ✦Wireframes ✦ Responsiveness ✦ Future Developments ✦ Resources ✦ License ✦ Contact
Personal Portfolio - created as part of She Codes Australia Plus Program, October 2023.
Version 1 created with purely HTML and CSS - October 2023.
For this project, I was required to provide the following items:
- At least one profile picture
- 100 word biography
- A Projects section
- Functional Contact form
- Links to two external sites.
Within the site, I have two images of myself, one more recent than the other! I have provided an indepth "About Me" section which gives an overview on myself and the skills I have. The image in the header swaps from my face to my logo, depending on the page you are on. This will always take users back to home when clicked.
My skills are listed within a collapsible container so that users are able to skip this if they do not need the information.
I have also provided users with the option to download my resume.
My project section lists three projects, two which link to their own indepth page. I also have a project which has a "coming soon!" button to demonstrate the button options I have designed.
My Contact form uses Formspree to assist in the function and provides users the opportunity to contact me directly via email.
My footer, which is universal in design, links users to my Github and LinkedIn account for further information.
For the technical aspects of this project, the following items were required:
- At least two webpages
- Version controlled with Git
- Deployed on GitHub pages.
- Implements responsive design principles.
- Uses semantic HTML
I have incorporated additional pages to provide indepth information on my previous projects. This will expand over time.
I have used git for version control and can be found within the github repo: https://github.com/caoimhejyoti/caoimheyoung
My page has been deployed via Github pages: https://caoimhejyoti.github.io/caoimheyoung/
Throughout my design, accessibility and mobile first has been two key aspects. The use of semantic HTML has provided a solid framework for the protfolio. Please see the Responsiveness section for further details.
Currently my accessibility additions include:
- Aria descriptions
- Alt text for relevant elements
- Active, Hover and Focus states
- Colour contrast that have a minimun WCAG standarf of AA
- All typography uses the base size of 16px
More information regarding Accessibility and my next steps can be found here.
An optional bonus for the project was to use Javascript to create dynamic elements to the site. I wanted to challenge myself and created this site using only HTML and CSS. I have been able to created a dynamic and functional hamburger menu which is visible on smaller devices.
See my ideas for Future Developements.
Original wireframe available here.
This portfolio is fully responsive to various device sizes. To display this, I have used the Responsivley App to demonstrate several devices at once. The devices i am deomstrating are:
- iPhone12 (390x844px)
- iPad (768x1024px)
- MacBookPro (1440x900px)
- Samsung Galaxy S20 Ultra (412x915px)
Further details of this app can be found in Resources.
This image shows the "Hero" section of the main portfolio page.
This image shows the "Who is Caoimhe" section of the main portfolio page.
This image shows the "Languages and Frameworks Used" section of the main portfolio page.
This image shows the "Previous Projects" section of the main portfolio page.
This image shows the "Contact"section of the main portfolio page.
This image shows the "Hero" section of the Out and About Project page.
This image shows the "Project Overview" section of the Out and About Project page.
This image shows the "Languages and Frameworks used" section of the Out and About Project page. The languages are expanded and visible in this image.
This image shows the "Languages and Frameworks used" section of the Out and About Project page. The languages are condensed in this image.
This image shows the "Hero" section of the Buddy Up Project page.
This image shows the Project Overview and "Want to know more?" section of the Buddy Up Project page.
This image shows the "Languages and Frameworks used" section of the Buddy Up Project page.
As I progress in my coding career, I will bring my projects to this proposal.
In terms of the development of this site, I would like to continue to work with accessibility as a high priority.
Key accessibility things that need I would like to resolve can be see below. I hope to gradually tick them off.
- Focus, Active and Hover CSS for my menus when on a small device.
- Look further into aria attributes and work with these as appropriate.
- Look at creating an interactive modal using Javascript to display languages and frameworks that I have worked with.
- Remove the requirement for Formspree with my contact form, using alternative languages.
I am still learning about accessible design so I welcome all feedback. If you have experienced any access restrictions, please let me know and I will work to reduce these in the future.
https://webaim.org/resources/contrastchecker/
http://colormind.io/bootstrap/
This project is using the following license:
MIT
For further information regarding the license, please follow the link below: https://opensource.org/licenses/MIT
If you have any further questions, please contact via email or github.
