Personal Website (PWP)
Everything looks great here - your project's Purpose, Audience, Goal and Persona are all appropriate and within scope. Nice touch basing your Persona on a real person. Having worked with John for a few years, I can tell you that he definitely appreciates an aesthetically pleasing and well put together portfolio, and he will certainly load the page on mobile - something to keep in mind perhaps? :-)
Your project and files are all set up to spec and your code looks great - nice work.
Your Milestone 1 passes at Tier IV. You are now clear to begin work on Milestone 2α. Looking forward to seeing your content and design ideas in the next phase.
Nice work on these wireframes and the accompanying content strategy. The plan you have for your UI and content is fairly clear and well defined. I do have some detailed questions:
- I see a search bar up at the top. For a site this small, I'm not so sure that a search field would be necessary here. And because we won't be integrating a back-end aside from the contact form - this would limit the methods by which you could integrate this functionality. I would recommed using Google Custom Search, but again I'm not sure how necessary it is here.
- What is the down arrow up at the top right corner? I'm guessing that this is a collapsed dropdown menu toggle button. These little things in the wireframe need to be explained in detail - a client or dev team will ask!
- In your portfolio section I see four boxes. I'm assuming that these are supposed to be images - but I'd like to see a bit more detail here. The more detailed the UI and content region becomes, the more necessary it is to accurately reflect all of the detail in the wireframes and explanation. This is to guide engineering and development. Are these images supposed to be interactive in any way? If so, this would necessitate the use of a JavaScript gallery tool. Should there be any accompanying text here? If these item past projects, some detail about the tech and your role might be good!
I would consider reducing the width of the contact form fields on the desktop view. 100% of the screen with on larger screens is generally far too wide for input fields visually. I would also consider reducing the scale of the footer icons as well - they are represented at a very large proportion here, and that generally won't contribute to a polished, professional look.
FontAwesome is a good quality free library for including iconography. Try this out for your footer icons. If you had something more custom in mind, custom vector iconography is always an option as well.
If you wanted to include a gallery-like pop-up animation for your gallery items, there are a few good JavaScript tools that I keep on my list. Some 3rd party JS tools are definitely better than others. Talk with me more if you'd like to add some JS-driven interactivity.
Overall this is good work, and I think you're ready to begin development after the Bootstrap Challenge. Be sure that you are clear on any and all interactive behavior before you begin, and we can guide you in that respect. Your Milestone 2a passes at Tier III. You are now clear to begin development on your PWP.
We'll be building PWP in a file named index.php inside of /public_html. Please note that no site files should live outside of the /public_html directory. Please use an organized and standards-compliant directory structure to house all images, JavaScript, CSS, etc. We are done with the /documentation directory for now!
Nice work! Meeting notes left via Slack. Your Milestone 2b passes at Tier IV
Nice work on a simple and attractive website. There is plenty of room to expand on what you have here, and based on what you've been able to achieve I think you're ready to try more challenging front end dev concepts going forward. Nice work! Keep challenging yourself with HTML, CSS and JavaScript in the future. You've got a great start.
Code Base: Your code looks great - everything is well formatted, standards-compliant, and I see no errors in your HTML, CSS or Javascript.
Git Commits: Nice work integrating good Git workflow.
Mobile-First Responsiveness: I've tested your page in devtools and on Chrome on both Linux and Android... your design works well on all the platforms tested.
Design, Content, & Overall Presentation: Nice work implementing a simple design that is attractive and functional. Nice use of white space and typography.
Contact Form: Works great!
Your PWP passes at Tier IV. Your cumulative PWP score including all Milestones is 38/40 points (95%).
- Milestone 1 - 20%: Tier IV 40(0.2) = 8
- Milestone 2a - 20%: Tier III 30(0.2) = 6
- Milestone 2b - 10%: Tier IV 40(0.1) = 4
- Milestone 3 - 50%: Tier IV 40(0.5) = 20
- We didn't discuss favicons, but you might want to consider adding one. Have a look at this tool which helps render multiple versions for cross-platform support: https://realfavicongenerator.net/
- I would strongly consider sizing your three images the same - this will increase the visual consistency and give your page a more professional "polish".