Taking inspo from sites such as dribbble, I chalked up the following design in Figma.
To help with drafting the website, I used Zeplin to view the CSS styling of Figma components.
Zeplin is a service that provides some similar functionalities to Figma's Dev Mode, although they're inherently different.
Figma is a design tool, and Dev Mode is an interface within that design tool. It was made specifically to enhance the design tool so developers can view the technical specs of designs they need to build.
Zeplin, on the other hand, is a collaboration hub. Zeplin is purpose-built to support every team member and stakeholder involved in bringing a product design vision into a final product — which includes product owners, QA, marketing, legal, etc. You can view build-ready designs, grab technical specs, document design intent and behavior with structure and consistency across your team, manage tasks and approvals, and much more.
Continue reading here: Zeplin vs. Figma Dev Mode: a point-by-point breakdown
Using the Figma plugin for Zeplin, I imported my designs to view the styling of each element.
- Animated Active Menu Highlights in VueJS
- How to Deploy Your Vite/Vue 3 Application in GitHub Pages 2023
- A Guide to Vue $emit - How to Emit Custom Events in Vue
- Formspree - Submit forms with JavaScript (AJAX)
- Resizing of border/highlight surrounding navbar items needs to be consistent across different browsers. It currently appears different depending on whether it's a chromium based browser or mozilla.
- Remove repeating code for the blurred bubbles in the background and have it simply change it's styling or positioning depending on the page selected.
- Transitions:
- When scrolling through project cards. In case the user is unable to scroll, there should also be a button to click to go to the next card.
- When the contact form appears.
- Between pages.
- Redesign the contact button.
- Add link to blog.
- Change images for the project cards (two of the current images are from Unsplash).
- Improve resizing of content on different screen sizes.