A journalist Portfolio

The project is based on the need of a journalist to have a portfolio were as well as employees and people who are not in the media business can take a look and contact the person in question.The information in this webpapage its taken from a real person who is a journalist in Sweden. The picture of the journalist and the information in the "work" and "educational" area are real. The information regarding the "Cv" and personal info are ficticious.

UX

The purpose of this portfolio is to :

• Get possible employees to be intrested in the person in question

• Reach out not only to companies but also people who'd like an interview

• Give the possibility to the journalist not only to be contacted but also for people who are just curious in reading who this journalist is.

• Here are links available to see the wireframes of the project.

  • Wireframe 1
  • Wireframe 2
  • Wireframe 3
  • Wireframe 4
  • Wireframe 5

User stories

As a user of this portfolio, i want to

1. Be able to easy navegate through the page.
2. Easy for people who enters the page to find my information.
3. The portfolio must be seen in different browsers.
4. The texts must be easy to read and understandable.
5. The CV button is important that it works all time.
6. Easy for the user to uppdate the text when available.
7. All links both to my work places and social media works.
8. Have the contact form to be working properly, since it is the part of the page were people can get in touch with me.

Features

My project is a portfolio one page, and its is divided in four section. The page consist in a navegation bar, witch make it possible to move to the different parts of the page. a home, work, my studies and a contact section. Also a footer with external and social links.

Let's take a look at the different parts of the page

• Portfolio (a link to the portoflio page)

• The home section is where you can download the CV as well as navegate through the menu. Have in mind that the CV is ficticious and taken from the course "miniproject" from Code Institute.

• In the work experiece section you can see the journalist work history, and go to the newspaper related to her work.

• The About section is a short description of the journalists profile.

• In the studies section, shows the information of the universities where the person in question study. The information shown in this section is real.

• The contact and footer are divided in two. The contact is a contact form where anyone who is interested can send a message to the journalist regarding any question.

• The footbar holds the social links, external links, a menu where the user can navegate back to each section and the journalist personal information. (As well as in the CV, the personal information shown here is also not real, only the name of the journalist in the mail)

Technologies used

For the making of this project, the following technologies has been used.

• Gitpod

  Gitpod is used as the enviroment program were the page was made.

• Github

  Github is used as the development platform, you can upload your code and make repositories. This platform, gives other users the opportunity to see your repositories if made as open source code.

• HTML

  HTML is the language use to make websites. Since it is the standard markup languages for webpages.

• CSS

  CSS is the language used to style the pages made in HTML.

• W3C Valitor HTML

  W3C validator is the tool we use to check the markup validity in HTML.

• WC Valitor CSS

  As mentioned above, this tool is use to check for errors in the css code.

• Fontawesome

  Used for the icons of the social media and the personal information section in the footer

• Googlefonts

  The fonts used in this project are taken from Googlefonts.

• Youtube

  I use this site to get inspiration from other projects and to search informtaion regarding source code.

• Bootstrap 4

  Front-end opensource toolkit that is use for the making of this project, and to customize the site to mobile responsive.

• Reposinator

  Reposinator is use to check how your website look in different devices in responsive mode.

• Devtool use to search for error in the making of the webpage.

Testing

During my test period i focus on the user stories.
The page has been tested in different browser, such as.

1. Chrome
2. Firefox
3. Safari
4. Microsoft edge

The responsive part has also been tested in http://www.responsinator.com/ for  

1. Ipad
2. Iphone
3. Android
4. Laptop

The language of the page both HTML and CSS were tested for errors and warnings in

1. W3C Validator HTML.
2. W3C validator CSS.

The following scenarios were tested during the project

CV download
1. Go to the home section of the page.
2. Press the "Download My CV" button.
3. A PDF file should appear in your monitor.
4. You could now be able to download it to your computer.

Navegation Menu
1. Press any section in the navmenu.
2. You can get to any section in the page.

Work section and external links section.
1. Go to the work section.
2. Press any of the links.
3. Another windows open and you can see the page you press for. 
4. The external link section is at the footer of the page.
5. For This links it is the same procedure.

Contact form
As written in the user stories sectio in this page. This part is very important for the user 
since is the section were people can get in touch.

1. Go to contact section.
2. Try to send an empty message. 
3. In the name field a warning text appears require to fill the name text box
4. After writting your name in the text box, try to send the message.
5. The same thing happens but now for the email section.
6. Do the same in the email section. Write an email and press the send button.
7. All the text fields must be written in able to send a message
8. For the last test. Try to write a name, a message, but in the email textbox, write anything but a mail address.
9. A text warning appears and request to write a valid mail address.

Deployments

To deploy this porject, i used the hosting platform of Github
The step to deploy this project were as follows.

1. After creating my repository
2. Go to settings
3. Under "GitHub Pages", use the None drop-down menu and select a publishing source.
4. Next choose the root.
5. Click save and you will get the link to your webpage where others can enter and interact. 

Credits

Content

Media

The photos use in this project were taken from

• Sara Johansson
• Pixabay
• Granos de cafe

For the social media icons

• Fontawesome

For the font i use

• Googlefonts

Code

• Template code in this project was taken from Starter template section at Bootstrap
• Code for the header, work experience, about me section was taken from granos de cafe tutorial in Youtube Granos de cafe
• Code for the contact form was taken from the miniproject tutorial from Code Institute
• Code for the footer was taken from The Providers

Acknowledgements

• I want to start thanking Sara Johansson for helping with this project and giving kindly information about her carrer and study background.
• Also want to thank Christian Mossberg, a friend and personal mentor for helping me with advise during the course of this project.
• To my mentor Antonio Rodriguez who had the patience to guide me whenever i did not understand a part of the project.
• To "Granos de cafe". where i got my inspiration from to the making of the page.
• To the Code institute tutorial were i also got ideas from to make my project.
• The Providers for their wonderful tutorials in Youtube.