Created by Michael Winter
https://thenativenomad.netlify.com/
Figma:
https://www.figma.com/file/JhXuQ1ryUe1rBdKRnSmcD8Db/Personal-Porfolio
Inspired by concept of digital nomadry I decided to play on the themes of adventure, trekking, and exploration, and link it back to the concept of mobile working.
When looking for imagery, I sought out depictions of broad spanning landscape, adventurers and hiking gear. I found myself most drawn to obcsured shots of individuals hiking and dusk and evening shots with a cold filter.
My logo's aesthetic was drawn from blending the core theme and isometric design.
I chose this style because I believed it could easily be integrated my site using svg assets created in Adobe Illustrator.
Attempting to encapsulate the feeling of adventure and new horizons, my design depict a rising sun behind two mountains. The silhouette of the mountains also creates soft "M", which when inversed, is also my initils.
I aimed to keep to a cooler colour scheme using a deep blue as my primary background to convey the sense of calm one feels when hiking at dusk. This also presented a valuable contrast against my coral red highlights, which were used to draw focus to individual elements and make the page more dynamic.
Working against my primary background I chose to use a bone white (FFF7EA) for all my type. This gave me ample contrast, earning a AAA rating in colour selector. I used an off-white palette to not only enhance readability but also to adhere to a grounded.
After story boarding and comparing colours in figma, I sketched up some ideas for potential layouts.
I chose a single page design because I wanted the header and foot images to bleed into each page, and create a seamless transition form section to section.
Working in Adobe Illustrator I create a series of svgs to support my site and aligned them to the concept of each page.
As I had planned to work with CSS Grid, I roughed up the approximate grid lines on each section.
Working with multiple layers of nested grids, while on one page, I found that alignment often reacted in unexpected ways. This was a particularly large challenge when working with a svg dominant design.
While time constraints limit my ability to format the css entirely as planned, I am happy with the overall result and look forward to further developing and streamlining the design and code.
Despite the difficulty present in layout, the overall design and functionality present the infortmation on myself and my skills in a easily readable manner.
In future iterations I will aim to:
• redesigning the css grid to reduce dependance on nested grids.
• correcting alignments and expanding on stylised formating.
• introducing an overlay nav.
• introduce a horizontal slider for the project preview and skills slider.
• include media queries for web
![project slider](https://drive.google.com/open?id=1UPm5SxrMoYanXmTwAc18QGOvBfLzVnbX"project slider")