| Component | Function | Work as Intended? | Fix |
|---|---|---|---|
| CodeSonia logo | Takes user to homepage | Yes | N/A |
| Navbar: Home | Takes the user back to the Homepage | Yes | N/A |
| Navbar: About | Takes the user to the About section | Yes | N/A |
| Navbar: Skills | Takes the user to the Skills section | Yes | N/A |
| Navbar: Portfolio | Takes the user to the Portfolio section | Yes | N/A |
| Navbar: Projects | Takes the user to the Projects section | Yes | N/A |
| Navbar: Experience | Takes the user to the Experience section | Yes | N/A |
| Navbar: Education | Takes the user to the Education section | Yes | N/A |
| Navbar: Contact | Takes the user to the Contact section | Yes | N/A |
| Home: Dark mode button | Enables users to toggle off and on selecting their preference | Yes | N/A |
| Home: Social Media Links - GitHub | Allows the user to view CodeSonnia's GitHub account on a new tab | Yes | N/A |
| Home: Social Media Links - LinkedIn | Allows the user to view CodeSonnia's LinkedIn account on a new tab | Yes | N/A |
| Home: Social Media Links - Instagram | Allows the user to view CodeSonnia's Instagram account on a new tab | Yes | N/A |
| Home: Social Media Links - Facebook | Allows the user to view CodeSonnia's GitHub account on a new tab | Yes | N/A |
| Home: Download CV Button | Enables the user to view a traditional form of CV in a new tab | Yes | N/A |
| Home: Hire Me Button | Allows the user to contact CodeSonia via contact form | Yes | N/A |
| About: Get in touch link | Allows the user to contact CodeSonia via contact form | Yes | N/A |
| About: Mobile Number | Allows the user to click on the mobile number to easily call CodeSonia | Yes | N/A |
| About: Email | Enables the user to quickly email CodeSonia by being a clickable link | Yes | N/A |
| Projects: CV Project - External Link Button | Allowing the user to view a live link of project in a new tab | Yes | N/A |
| Projects: CV Project - GitHub Button | Enables the user to view CodeSonia's GitHub repo of the project | Yes | N/A |
| Projects: Whiskey Drop - External Link Button | Allowing the user to view a live link of project in a new tab | Yes | N/A |
| Projects: Whiskey Drop - GitHub Button | Enables the user to view CodeSonia's GitHub repo of the project | Yes | N/A |
| Projects: Love Running - External Link Button | Allowing the user to view a live link of project in a new tab | Yes | N/A |
| Projects: Love Running - GitHub Button | Enables the user to view CodeSonia's GitHub repo of the project | Yes | N/A |
| Projects: Candy Museum - External Link Button | Allowing the user to view a live link of project in a new tab | Yes | N/A |
| Projects: Candy Museum - GitHub Button | Enables the user to view CodeSonia's GitHub repo of the project | Yes | N/A |
| Experience: DWP - Read More Button | Allows the user to toggle read more or read less of experience section | Yes | N/A |
| Experience: Netcom Training - Read More Button | Allows the user to toggle read more or read less of experience section | Yes | N/A |
| Experience: Latham's Hardware - Read More Button | Allows the user to toggle read more or read less of experience section | Yes | N/A |
| Experience: School of Code - Read More Button | Allows the user to toggle read more or read less of experience section | Yes | N/A |
| Experience: WMGC - Read More Button | Allows the user to toggle read more or read less of experience section | Yes | N/A |
| Experience: Tulip ltd. - Read More Button | Allows the user to toggle read more or read less of experience section | Yes | N/A |
| Education: Code Institute - Read More Button | Allows the user to toggle read more or read less of experience section | Yes | N/A |
| Education: Aston University - Read More Button | Allows the user to toggle read more or read less of experience section | Yes | N/A |
| Contact: Email link | Enabling the user to use a clickable link to send an email as an alternative to filling out a form | Yes | N/A |
| Education: Send Message Button | Once user fills out required form inputs, it allows the user to send the message | Yes | N/A |
| Footer: Find Me On Social Buttons | Social Media Links link to external tab | Yes | N/A |
| Footer: View CV | User can view a traditional format of CodeSonia's CV | Yes | N/A |
| Component | Function | Work as Intended? | Fix |
|---|---|---|---|
| Navbar: Home | When user hovers on Home on navbar, an underline appears | Yes | N/A |
| Navbar: About | When user hovers on About on navbar, an underline appears | Yes | N/A |
| Navbar: Skills | When user hovers on Skills on navbar, an underline appears | Yes | N/A |
| Navbar: Portfolio | When user hovers on Portfolio on navbar, an underline appears | Yes | N/A |
| Navbar: Projects | When user hovers on Projects on navbar, an underline appears | Yes | N/A |
| Navbar: Experience | When user hovers on Experience on navbar, an underline appears | Yes | N/A |
| Navbar: Education | When user hovers on Education on navbar, an underline appears | Yes | N/A |
| Navbar: Contact | When user hovers on Home on navbar, an underline appears | Yes | N/A |
| Home: Flip Animation | Flip animation on home landing page element to entice user's interest | Yes | N/A |
| Home: Social Media Icons | When a user hovers over social media icons it turns to a pink color | Yes | N/A |
| Home: Download CV button | When a user hovers over Download CV Button user it turns to a pink color | Yes | N/A |
| Home: Hire Me button | When a user hovers over Hire Me button, the background color changes similar to Download CV | Yes | N/A |
| About: Get In touch link | When a user hovers over the Get in Touch link, it changes color | Yes | N/A |
| Home: Personal details - Mobile & Email | When a user hovers over the mobile number and email an underline appears, informing users that it is a clickable element | Yes | N/A |
| Skills: Tech Skills Progress Bars | When a user hovers over the progress bars it expands slightly | Yes | N/A |
| Skills: Strengths | When a user hovers over the strengths it bounces up slightly | Yes | N/A |
| Portfolio: Images | When a user hovers over the image, it grows/expands to reinforce messaging | Yes | N/A |
| Project: Images | When a user hovers over the project images, it grows/expands to entice user's interest | Yes | N/A |
| Project: Buttons | When a user hovers over the GitHub & external link button, it changes to a pink color and takes 1second | Yes | N/A |
| Contact: email link | When a user hovers the clickable email element, it changes color | Yes | N/A |
| Contact: form | When a user is typing their details on the form, a pink border comes alive, to show user where/highlighting when typing | Yes | N/A |
| Contact: Send Message button | When a user hovers the send message button, it changes color | Yes | N/A |
| Footer: Social Media Icons | When a user hovers the send message button, it changes color | Yes | N/A |
| Component | Function | Work as Intended? | Fix |
|---|---|---|---|
| Navbar: Home | On mobile, the hamburger icon animates | Yes | N/A |
Please note, alot of the user stories overlap.
- User Goal 1
As a recruiter/collaborator, I want to learn about the developer and who this person is beside the technical skills and view if they also have the right soft skills to assess if they can fit within the team.
- User Goal 2
As a recruiter/collaborator, I expect to be able to quickly get in contact via an easy to use contact form so that I can build a relationship or present any job opportunities at hand.
- User Goal 3
As a recruiter/collaborator, I want to be able to connect to the developer using LinkedIn or social media channels to keep up to date with the developer's work history or any changes.
- Users are able to view the social media links once they visit the landing page
- Once a user clicks on the button or hovers over, the color/state changes to provide feedback
-Once clicked, users will be directed to an external link
-Users are able to quickly view LinkedIn
- User Goal 4
As a recruiter/collaborator, I want to access CodeSonia's background and work history and overview of CodeSonia's competencies, technical & soft skills.
- User Goal 5
As a recruiter/collaborator, I want to see a word or PDF format of the CV so that I can assess the candidate's work history and skills to ascertain if they are the right person for the job and pass their details and link the portfolio to my clients.
- User Goal 6
As a product owner, I want to humanise my brand and showcase who CodeSonia is by providing an image, contact information, and a story to increase CodeSonia’s brand awareness.
The logo and main image brings CodeSonia to life and provides distinguish branding:
The contact image humanises CodeSonia by showing her in a work environment
- User Goal 7
As a product owner, I want users to quickly identify what page of the website they are on and can easily navigate from one section to another section without any hassle = ensure positive user journey at all touchpoints!.
Users are able to navigate easily using the hamburger icon/navigation as well as identifying each section with clear headings:
| Component | Function | Work as Intended? | Fix |
|---|---|---|---|
| Text | Should be clear, concise and visible on mobile, tablet and desktop devices | Yes | N/A |
| Layout | Layout should be easily organised with logical hierarchy and elements are not overcrowded | Yes | N/A |
| Images | Images should not appear distorted or pixelated and maintain it's aspect ratio | Yes | N/A |
| Functionality | Functionality should be maintained on all screen sizes | Yes | N/A |