Design System

I built my portfolio using a component-based design system to help me seamlessly add new content as my collection of projects expands. I like to do things the right way the first time, and chose to use tools which wouldn’t limit my creative expression or restrict me to a certain feature set. Building this site was also an incredible learning experience, and I intend to continue using it as a tool to refine and expand my web design and development skills.

dmsasser@outlook.com
Utility Classes:

Each of the elements below have been given style properties (color, size,  

u-theme-light
u-theme-dark
u-inverse
u-brand-1
u-opacity-80

Web Components

Style:
Button Text
Primary
Secondary
No Padding
Transparent
Visibility:
Text Only
Icon Only
Layout:
Base
Reverse
Base - Scale Text
Reverse - Scale Text
Size:
XS
Small
Med
Large
XL
2XL
3XL
4XL
Spacer
Button
Home
Hi Mom!
Menu
Menu
Menu
Menu
Home
I'm with stupid
Featured Project
Found a bug?
Brand Icons

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Brand Icons

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Esri home page
SVG Logo Designed for the SVG Logo Contest in 2006 by Harvey Rayner, and adopted by W3C in 2009. It is available under the Creative Commons license for those who have an SVG product or who are using SVG on their site. SVG Logo 14-08-2009 W3C Harvey Rayner, designer See document description image/svg+xml
SVG
CodePen
Qgis
Creality
CodeSandbox
OctoPrint
LinkedIn
ESRI
Shopify
Webflow
Adobe Photoshop
Canva
Figma
Raspberry Pi
GitHub
Behance
HTML5
CSS3
Inkscape
Arduino
R
Framer
JavaScript
LightBurn
Meta
ESRI
ArcGIS
Shotcut
Blender
SVG
Instagram
Mode Switch

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Tab 1
Tab 2
Tab 3
Scroll Arrow
Personal Logos
Spacing and Layout
Typography

My type scale use EM and REM values, which are declared as variables for responsiveness across breakpoints. 

H1

H2

H3

H4

H5
H6
Paragraph
Caption
Subtitle
Overline
Button Text
Nav Link
Nav Link
Color Palette

My type scale use EM and REM values, which are declared as variables for responsiveness across breakpoints. 

Light Tan
hex
Medium Tan
hex
Dark Tan
hex
Green Tan
hex
Dark Green
hex
Medium Green
hex
Light Green
hex
Shadow
hex
Background
hex
Toggle Pill
hex
Card
hex
Accent-3
hex
Mode Icon
hex
Accent-1
hex
Icons
hex
Button
hex
Accent-2
hex
Accent-4
hex
Accent-5
hex
Text - Heading
hex
Text - Paragraph
hex
Text - Button
hex

Layout

One of my primary considerations in designing layouts was making my portfolio fully responsive across breakpoints, as I have seen designers request that their portfolio is viewed only on desktop due to static layouts and raster elements which don't scale properly. I used variable modes, component properties, and SVG elements  in my design to create layouts which resize fluidly, resulting in pages that appropriately  

Elements

With the exception of any trademarked materials, I created every component, element, and icon on this site. I used SVGs for the majority of elements to have more control over resizing, color, and interactions. To streamline my current and future workflow, I used a component-based design system and set up properties for any component variants I may need.