pauan8 / portfolio

Portfolio A portfolio site for career purposes

The problem Building an attractive portfolio by following a design made by Technigo.

I choose to follow the design very precise down to things like font-sizes, line height and dimensions. I used CSS grid for most of the structure of the website, but also some flexbox where it made more sense. This was a great practice in using CSS-grid and made me appriciate that technique more. When it comes to responsive design I used quite a few breakpoints as I wanted it to look appealing on all screen sizes and devices. This did amount to quite a lot of CSS code.

For accessability purposes I used aria-labelledby and id as well as tabindex. I aslo ran everything trough both WAVE and W3 and used NVDA screen reader.

The most challenging part was the accessability thinking and the exact following of an already set design, as this is something I'm less used to. It took some time getting every detail right. If I could do it all over again I probably would have written down every dimension/font-size for different devices and sketched up more on paper before to save time. The going back and forth to figma to check things was most time consuming. If I had more time I might have added some JavaScript or animatons to make the site stand out a bit and also look over my CSS code and see if it could be cleanded up or optimized.

Techniques: HTML5, CSS3, CSS-grid, flexbox, ARIA, Responsive design Tools: VS code, live server, W3 validation, WAVE, NVDA, unsplash.com, iconfinder.com, Slack, StackOverflow, Figma

Contributions: Icons: https://www.iconfinder.com/colebemis, https://www.iconfinder.com/milan.kohut, https://www.iconfinder.com/Picons Background picture: https://unsplash.com/@timmossholder

View it live https://paulines-portfolio.netlify.app