A Tale of Two Modes
base
H:0
S:0
L:100
H:0
S:0
L:0
background
H:0
S:25
L:90
H:0
S:25
L:10
primary
H:0
S:25
L:50
H:0
S:25
L:50
emphasis
H:0
S:33
L:30
H:0
S:33
L:70
accent
H:200
S:85
L:30
H:200
S:85
L:70
text
H:0
S:0
L:33
H:0
S:0
L:66
Problem
Potential employers didn’t have a clear way to preview my design and technology strengths
Solution
Create a custom website that showcases current strengths, interests, and work, as well as past work
Problem
As a specialist, I had no digital home to point anyone to as a testament of what I’m knowledgeable in
Solution
Include a feature that gives the ability to share thoughts on my expertise
H1
The quick brown fox jumps over the lazy dog
Asap Regular / Andada Pro Italic
H2
The quick brown fox jumps over the lazy dog
Andada Pro Italic
H3
The quick brown fox jumps over the lazy dog
Asap Bold Uppercase
H4
The quick brown fox jumps over the lazy dog
Asap Bold
P
The quick brown fox jumps over the lazy dog
Asap Regular
Display
The quick brown fox jumps over the lazy dog
K2D ExtraBold
Style h1 Keywords
This function will look in a string for keywords and wrap them in an em tag to aid in styling those words different from the rest of the text.
const formatWords = (text, keywords) => {
const formattedWords = text.split(" ").map(word => {
if (!keywords.includes(word)) {
return word;
}
const em = document.createElement("em");
em.textContent = word;
return em.outerHTML;
});
return formattedWords.join(" ");
}Problem
My existing efforts to prove myself as a leader in Frontend Design and Development were weak
Solution
Include case studies to walk visitors through how I’ve used my skills to solve real problems
Do Not
Use border or stroke on most elements
Do
Use a stroke on icons and connectors, adjusting the weight for various size implementations
Do Not
Use a solid accent without texture as a fill to contain text or an icon
Do
Use a solid accent with texture as a fill to contain text or an icon
Do Not
Use serif font on a texture accent fill
Do
Use bold sans-serif and display fonts on a texture accent fill
Avoid
Using drop shadow effect on most elements
Avoid
Using display font on most text treatments
Avoid
Using overlapping texture fills
Tech Stack
Strapi: A headless CMS that provides a rich content and admin experience with a RESTful API
Next.js: The React Framework I use to deliver the content from the CMS
React: The library I use to create my components and view structures
TypeScript: The language my frontend work is in, with a nicely organized type library
Styled Components: My chosen method for styling and maintaining the design system and component library
Heroku & Vercel: The CI/CD platforms I use to build and deploy the Strapi admin/api and the Next.js frontend