Welcome,
Marco Neves is a Photographer with focus on weddings, couples and families photography. What does his job required is the necessity of eternalize unique, happy and very important moments of the life, but as important as this is show his job and art to the world, there is no better way to do this than having his own website to show his portfolio.
Click here to see the project live
-
Introduce who is Marco Neves Photography and his job, so that the client can become familiar.
-
Show his portfolio, making his job seem credible by creating a simple and professional desing, so that the client can become confident.
-
Make sure that there is a easy and quickly way to reach the contact page, to potentially increase the client base.
-
Create a resposive design, wich works in different screen sizes and devices, due the fact that people use more mobile devices nowadays.
-
I am a bride who wants to record each moment of my wedding. I need to be convinced that the photographer is professional and I also want to navigate through the website easily, because I have plenty of things to deal during the organization of my wedding and I can't waste time.
-
We are a couple who wants a photographer to record our pre-wedding. we are looking for a photographer with authentic ideas and the website design would be like a business card, showing the style of the photographer work.
-
I am a pregnant who wants to have some photos of the final stage of my pregnancy and I am looking for a good professional by my phone, I expect to have a good experience on this device.
-
I began the design process by outlining the key features that I wanted my website to have and thought about what might be the most intuitive way to navigate through each page. This led me to decide on the four pages I would have on my website: 'Home', 'Portfolio', 'Bio' and 'Contact Us'.
-
In the same way, I decided to fix the navigation bar in the top of the page while the user scroll and navigate through the page, to keep a easy way to reach the another page, mainly the contact page.
-
I decided to build the 'Portfolio' as a dropdown menu, bringing different options like 'Weddings', 'pre-weddings' and 'family photos', each of these options redirect to another page with the same names as the options. Inside each of these pages there are different image links that redirect to an album.
-
I decided to apply breadcrumbs in the album pages to provide an easily navigation, the breadcrumb link go exactly to the point where the user was in the page before click in the link.
-
After receive the visual identity from the client I decided the body color would be a "shade of white", with details in orange and letter color in black, and using the Montserrat font for general content, Montserrat font in bolder weight for headings and the Arizonia font for signatures and some headings, Following The instructions from the visual identity. The style guide can be seen here: Style Guide
-
The layout changes in different screen sizes, I chose for take out some content in smaller screens to the content fits well in theses smaller screens, but the main content still in the website, and I changed The rows and columns arrangement to fit the content well.
- The wireframe can be seen here: Wireframe
This project has, at least, seven separate pages, the six main pages can be found by clicking on the corresponding name on the menu, the other pages are the albums and its quantity depends on how many album events would be plubished.
-
A navigation bar on the top of each page with The brand logo on the middle (which leads a user back to 'Home' when clicked) and two links, one to home page, and another Portfolio dropdown menu (with links to Wedding page portfolio, Pre-Wedding page portfolio and Family Photos page portfolio) on the left and two links on the right, one to Bio page, and another to Contact page. When in medium and small screens the navigation bar changes, the logo goes to the left side and the menu to the right side in a collpased form.
-
The footer is also consistent across all pages with links to social media profiles there, copyrights and a translation option.
-
The hero Image is a carousel with three photos.
-
There are three photo links that go to pre-wedding, wedding and family photos portfolio, each photo there is a zoom effect when is hovered.
-
The testimonial section called "Kind words" in small screens is a carousel with the photos, quotes and names.
-
Instagram section with the latest photos published on instagram profile brand, with likes quantity, comments, descriptions and link to instagram profile.
- There are photo links that go to event photo album, each photo link shows the event name, a comment, the event date and the event location when hovered.
- There is an overview about the brand and its beliefs.
-
There is a fixed hero image.
-
There is a contact form to prospect the main informations about the costumer.
-
Add a blog page to allows more engagement between the brand and the costumers.
-
Build a working form without third parties platforms.
-
Add a robust validation form.
-
Improve the how the google translation API works on this website.
-
- The language used to build the structure and add its content.
-
- The language used to style the HTML5 elements according to the design and color scheme.
-
- I decided to use Bootstrap's grid container system as I wanted to design my project with a 'mobile first' approach, but another bootstrap resources were used like the contact form.
-
- Balsamiq helped me crystalise my design ideas, creating the layout structure.
-
- FontAwesome icons is where I got most part of the icons for my design project.
-
- Icons8 is where I got two icons for the language option flags on footer.
-
- I used Google fonts to provide the fonts of the website.
-
- I used to provide the translation of the pages.
-
- A set of web developer tools built directly into the Google Chrome browser. I used these tools constantly thoughout the development cycle.
-
- I used an ElfSight plugin to provide the instagram section on home page.
-
- I used an Mike Tricking hover effect on portfolio pages.
-
- Netlify comes with built-in form handling that’s enabled by default. so there’s no need for you to make an API call or include extra JavaScript on your site. So there’s no need for you to make an API call or include extra script on your site. It can be used to host the website as well.
-
- A company that provides hosting for software development version control using Git.
-
- Gitpod is an open source platform for automated and ready-to-code development environments that blends into your existing workflow directly from your browser.
-
- Is a programming code editor created by Microsoft that I used extensively. It allows programmers to create, save and edit their code on their own pc's.
-
- I used as a basic template to kick start my project.
-
- I used the Canva platform to make the style guide.
-
- I used TinyPNG to compress my image files to try to reduce the loading time for each page.
-
- Great tool to support throught the web development that helps to test and find issues on markup file.
-
- Great tool to support throught the web development that helps to test and find issues on style file.
-
- W3C Schools is a great platform that covers all aspects of web development, great tools that provides information for developers.
-
- Although it isn't a technology, I found a lot of guidance on Stack Overflow.
-
- DN Web Docs, previously Mozilla Developer Network and formerly Mozilla Developer Center, is a documentation repository for web developers used by Mozilla, Microsoft, Google, and Samsung.
-
- Is a blog where you can find lots of tutorial and tricks to write a good css.
Based on the User Stories listed above:
-
The bride was convinced that the photographer is a reliable photographer and he will register her wedding with quality and creativity, she had a good experience on website where she found every information quickly.
-
the couple enjoyed the website design, making them confident that the photographer is creative and confirming this looking the photos on pre-wedding portfolio.
-
The pregnant liked the family portfolio, making her confident, she was capable to reach all website features by her smartphone.
I manually tested the website on the following web browsers, checking that buttons, responsiveness and design worked as planned:
- Google Chrome
- Mozilla Firefox
I manually tested the live project by doing the following:
- Using Google Developer Tools to view the project on devices with different screen sizes.
- Asking for feedback from friends and family who opened and interacted with the project on their devices.
-
I planned to open each photo on portfolios pages in a modal, I implemented the modal with a carousel, but when I click on any photo the modal opens always in the first photo in a carousel. I don't have yet the knowledge to fix it with JavaScript. All photos keep being shown in the modal carousel control. I will implement a function to to prevent this from happening in a similar situation.
-
I noted that the Mozilla Firefox render the photos better than the Google Chrome. I don't have yet the knowledge to fix it.
- Each image has an alt attribute describing the image's function
- Each anchor tag has an aria-label attribute describing where that link goes
- Each section has an aria-labelledby attribute
- Content has a contrast with the background to improve the visibility
- Contact form inputs have labels
I created my project on GitHub and used GitPod's development environment to write my code.
To make my project viewable to others, I deployed my project to Netlify with the following process:
- On Netlify website, you click "Sign up";
- During the sign up process you will be asked to fork your account with your GitHub repository, then allow;
- On your dashboard click on the button "New site from git";
- Choose GitHub as provider;
- Choose a repository;
- And deploy
Use the following link to view my live project: Marco Neves Photography
More information about this process can be found on the following link: Netlify Docs
If you would like to work on my project further you can clone it to your local machine using the following steps:
- Scroll to the top of my repository and click on the "clone or download button"
- Decide whether you want to clone the project using HTTPS or an SSH key and do the following: * HTTPS: click on the checklist icon to the right of the URL * SSH key: first click on 'Use SSH' then click on the same icon as above
- Open the 'Terminal'
- Change the current working directory to the location where you want the cloned directory
- Type 'git clone', and then paste the URL you copied earlier.
- Press 'Enter' to create your local clone.
You can find both the source of this information and learn more about the process on the following link: Cloning a Repository
The content of this website is entirely real developed by myself, designed by myself and Marco Neves Photography. The images are from Marco Neves portfolio.
Thank you to the following people who helped with support, inspiration and guidance at different stages in the project:
- My mentor Caleb Mbakwe
- Code Institute Mentors and Tutors
- Code Institute Student Care, which is always Kind
- My class on slack
- The supportive Code Institute community on Slack
- My family and friends for their patience and honest critique throughout