The portfolio can be found using the below link: https://martyna-krawczyk.com/
Files can be accessed via Github link below: https://github.com/Martyna-krawczyk/portfolio
This portfolio website has been created to consolidate access to web and programming projects which I have completed both during the Fast Track course, as well as in the past. It is in itself, also an example of my HTML and CSS skills. The target audience would likely be future employers in the dev industry. I wanted the design to look clean, but not sterile and was inspired by many designs on dribble. Please use the below links to access screenshots: Dribble Moodboard Screenshot1
- HTML
- CSS
- Netlify
- Formspree
- Google Fonts
- Font Awesome
Most pages of the website display a header with a background image, with the exception of the Blog. All pages also include a navigation bar, social links block as well as footer which I will describe in more detail below:
The website is composed of the five below pages:
- Home
- About
- Portfolio
- Contact
- Blog
In order of appearance, please find some of the pages' functionalities below:
The home page includes a summary of what I am up to now, as well as a flexbox containing links to other pages. The page has media queries to handle the wrapping of the boxes to the narrower page-width and does this seamlessly thanks to the container width adjustment on each card. The cards also have a hover transformation with a slight scale-up. Home Wireframe
Under the header section is a short text paragraph about me, followed by a link to download my resume (as a direct download). This page also contains a timeline outlining my past experience. The timeline took significant work - particularly in making it responsive - I was introduced to new concepts including the pseudocodes :nthchild and :before :after whilst building this element. About Wireframe
The portfolio section of the website contains five card-style elements (flex-box), each containing images of each respective project as well as links to their sources. Portfolio Wireframe
This page contains a form, styled to the page, and thanks to Formspree (https://formspree.io/), will email me all submitted form field content. Contact Wireframe
The blog doesn't contain the header - instead it contains five [almost] page-width cards which are also responsive. The cards also have a hover transformation with a slight scale-up. The blog cards contain meta data such as author, date and tags, though these link to the current page, however therre is a Read More>> tag which sends the reader to the original LinkedIn article I have written. Blog Wireframe
The nav bar at the top of each page was particularly challenging as it was clear that I needed an hamburger menu on the smaller-width media queries. Once I had the code ready to go, I needed to make changes to the css so that on media query, the hamburger menu would become visible and the top menu links would hide, and vice-versa. The inclusion of the responsive navbar meant that much of my header section content was displaced and this required further rectification. The navbar now responds to different screen sizes nicely.
I ran the website through the aXe accessibility extension and was able to follow the recommendations on the home page to satisfy the requirements. The extension required that I added a title tag to all links which didn't contain any text, therefore I added these as well as adding the
tag to the page. AXe also recommended that I consider the h1 and p text being used over a background image to ensure that there was sufficient contrast asd it couldn't 'see' what the background image colours were. Please see the screenshot using the link below:
Because of the hamburge menu, the html validator was not happy that the menu div was within a child, label. It was the only outstanding error, however I decided to leave it as is in order to remain functional to the user.
There are three variations to the overall design and the three different 'looks' can be accessed via the below links:
Whilst pushing the README markdown file to Github, some of the changes to file names in docs meant that the png / jpg files didn't appear, therefore, many links here are to google drive.
I would like to thank my fellow classmates, who came to my aid on the day of submission (a Sunday), to help me try to fix this problem. We couldn't get it there, but I'm grateful for them giving up their time to help me.