The aim of this website is to create a portfolio showcasing my journey as a new full stack developer and to highlight my existing work as an experienced digital designer. Not only will it exhibit the skills I've acquired through my Coder Academy bootcamp and previous learning experiences, but it will also offer insights into my personality and non-coding-related experiences.
The primary target audience for this website consists of recruiters and hiring managers looking to fill entry-level design and full stack development/engineering positions. They may either be actively searching for candidates or have come across my application for a posted role.
The key functionality and features of my portfolio website are:
-
Bento Grid System – an imersive bento style grid system on the home page with each tile linking to one of the following:
-
Projects - case studies of my design and developemnt work that includes rational and images of the work (includes placeholders to add future work)
-
Articles - Long form articles where I can write about topics that relate to desing/development and can showcase my way of thinking (includes placeholders to add future posts)
-
-
Footer Widgets – a personal touch
-
Currently Listening - A cool little script that captures what I am currently listening to on Spotify in real time and displays it in the footer of my website.
-
Local Time & Weather - A small feature that displays the current time and tempreture of my current location. This feature is great to show international audience the current time and if they should expect a fast respnse or if it's 3am in the morning for me!
-
-
Animations and Interactions – Smooth as butter (sometimes)
-
Hover Animations - There are subtle fades on all links that depict clearly to the user when a link is being targeted. This also includes the tiles that on hover reavelas the tile's label. The tile hover animations are even translated into the mobile version so key label information is not hidden due to the lack of hover function on touch devices.
-
Page Transitions - Subtle fade in and outs on elements and entrie sections when navigating between pages creates a more seamless less abrupt experience and displays a level of polish that hopfuly impresses the target auidence.
-
-
Accessibility
-
Simple Design and Layout - A simple design, that isnt busy or difficult to understand and navigate. The inclusion of a full site link list in the footer also provides a fail safe incase someone is unable to navigate the beto tiles comfortably.
-
Colour - Simple colour pallet that is concious of contrast.
-
Alt Text - Descriptive alt text added to all visual elements.
-
Semantic Tags - Used throughout the site to aid screenreaders in understanding my site.
-
Through the entire process from planning to deployment I used the following tech:
- Figma - sitemap, wireframes and UI/UX design
- VS Code - integrated development environment for developing the website code
- Markdown - for writing this README.md
- HTML - for the content and structure for all pages
- CSS - styling and animations for all pages
- JavaScript - for page transitions, animations, currently playing widget, local time and weather widget
- GitHub - version control
- Netlify - deployment and hosting
The sitemap image was crafted prior to diving into any coding tasks. Throughout the development process, its structure and page flow remained unchanged, serving as a solid guide.
Wireframes where designed based on the sitemap structure. I designed three breakpoints for the following devices:
- Mobile
- Tablet
- Desktop
In defining these wireframes I began to understand the similarities across the pages and the repeatable components that will be used, including:
- Nav Bar
- Header
- Footer
I also discovered how the nav bar and footer would best 'shrink' for smaller device sizes. Making the website design less dense and heavy on smaller screens.
A simple pallet and typography exploration was done to understand the aesthetic of the site
Below is the final deplayment. I am really happy with the overall design and functionality and I cant wait to add to it as I have more to show!
