mauricemat / mauricemat.github.io Goto Github PK

• I interviewed my partner Alina (who is the stakeholder) to help her determine her needs,

• I turned the interview notes into Backlog.

4- Notice/Copyright

User story

As a user, I can the year of the creation and the copyright mention of the website.

Issues

1. HTML

• Use p to include the text.
• This issue will be developed on the branch 4-footer-html.

2. CSS

• Use centre align to place the navigation bar.
• Use Black colour for the paragraph font
• Use Sans serif as font type.
• This issue will be developed on the branch 4-footer-css.

5- About Me section

User story

As a user, I can find general info about Maurice.

• This will be a section on the home page.

Issues

1. HTML

• Use h2 to set a title for the section.
• Use p to include the main paragraph.
• This will be developed on the branch 5-about-me-html.

2. CSS

• Use Black color for the paragraph font.
• Use Sans Serif as font type.
• This will be developed on the branch 5-about-me-css.

6- Achievements section

User story

As a user, I can find explanations about Maurice's achievements and realisations in general.

• This will be a section on the home page.

Issues

1. HTML

• Use h2 to set a title for the section.
• Use p to include the main paragraph.
• This issue will be developed on the branch 6-portfolio-html.

2. CSS

• Use Black colour for the paragraph font.
• Use Sans Serif as font type.
• This issue will be developed on the branch 6-portfolio-css.

• I pushed my interview notes
• I sent a PR

Defining constraints in order to implement a realistic project.

3- Social media icons

User story

As a user, I can follow Maurice on social media.
This means I can see social media links and icons on the footer.

Issues

1. HTML

• Use href to turn icons into links.
• This issue will be developed on the branch 3-footer-html.

2. CSS

• use i class to add icons to the footer.
• This issue will be developed on the branch 3-footer-css.

7- Contact Me section

User story

As a user, I can easily get in touch with Maurice.
This means that the contact form is visible.

• This will be a section on the home page.

Issues

1. HTML

• Use h2 to set a title for the section.
• Use form to include the contact form.
• This will be developed on the branch 7-contact-me-html.

2. CSS

• Use Black colour for the paragraph font.
• Use Sans Serif as font type.
• This will be developed on the branch 7-contact-me-css.

To create a Figma file of my homepage

• I turned the interview notes into User Personas

9- Achievements section

User story

As a user, I can find images about Maurice's achievements and realisations in general.

• This will be a section on the home page.

Issues

1. HTML

• Use anchor and img to add the images.
• This issue will be developed on the branch 8-portfolio-html.

2. CSS

• Use flex-box to position the images.
• This issue will be developed on the branch 8-portfolio-css.

1- Logo (my name turned into the logo)

User story

As a user, I can see the logo of the webpage.

• It will present on all the pages.

Issues

1. HTML

• Use header to include the logo.
• Use anchor and img to add the logo.
• The issue will be developed on the branch 1-logo-html.

2. CSS

• use left align to place the logo.
• The issue will be developed on the branch 1-logo-css.

• I interviewed one user of the stakeholder webpage to determine her needs.

• I turned the interview notes into a complete Wireframe

Translating User Stories and design into specific coding tasks.

8- About Me section

User story

As a user, I can identify Maurice through his picture.

Issues

1. HTML

• Use header to include the logo.
• Use anchor and img to add the picture.
• The issue will be developed on the branch 8-about-me-html.

2. CSS

• use left align to place the picture.
• The issue will be developed on the branch 8-about-me-css.

2- Navigation bar (Menu)

User story

As a user, I can navigate comfortably the site.

• There is a navigation bar (sticky) centre on the top of the page.
• There are understanding menu titles.

Issues

1. HTML

• Use nav to include the navigation bar.
• Use ul and li to add the navigation links.
• This issue will be developed on the branch 2-navbar-html.

2. CSS

• Use centre align to place the navigation bar.
• Use sky blue color.
• Use Sans serif as font type.
• This issue will be developed on the branch 2-navbar-css.