IMPORTANT: This is a work in progress and subject to major changes until version 0.1.0
Well, well, well..., now this is what my CV should look like, and I'm gonna be super proud of it! #whenItIsDone :)
The folder & file structure of my CV:
- assets
- src
-
-
- ab-cv-app.js
-
-
- store.js
- images
- manifest.json
- LICENSE
- package.json
- README.md
- web-dev-server.config.mjs
- index.html
NOTE: This is just a snippet.
git clone https://github.com/abraham-ukachi/ab-cv-app.git && cd ab-cv-app
npm start
NOTE: This will start a local server (i.e. http://localhost:8000) and automatically open my CV with default browser.
- Create and push assets, src and images folders
- Create and push root files (ie. manifest.json, package.json, web-dev-server.config.mjs)
- Optimize it :)
- Remove unnecessary comments
Browser | Version | Status | Date | Time |
---|---|---|---|---|
Brave |
- | Pending | - | - |
Chrome |
- | Pending | - | - |
Firefox |
- | Pending | - | - |
Safari |
- | Pending | - | - |
Opera |
- | Pending | - | - |
Edge |
- | Pending | - | - |
IE |
- | Pending | - | - |
NOTE:
IE
= Internet Explorer = 👎🏽
Name | Color (HEX) | Codename |
---|---|---|
Primary Color | #A67C52 | Melanin |
Secondary Color | #FFD700 | Gold |
Tertiary Color | #21FFFF | Cyan |
Neutral Color | #211A16 | Mud |
NOTE: These key colors - also refered to as seeds - were used in the Material Theme Builder to generate
Ab CV App
's M3 Baseline color scheme. However, the codenames are specific to this App :)
Name | Color (HEX) |
---|---|
P-Light | #D9AB7F |
P-Dark | #755028 |
S-Light | #FFFF52 |
S-Dark | #C7A600 |
Text On Primary | #2D1600 |
Text On Secondary | #000000 |
NOTE: These accessibility (a11y) colors were generated using Google's Color Tool with
Ab CV App
's Primary & Secondary colors.P-Light
andS-Light
are short for Primary Light and Secondary Light color respectively.
The Ab Theme consists of three parts, namely Classic, Light and Dark Theme.
Name | Classic ⭐️ | Light ☀️ | Dark 🌑 | Role |
---|---|---|---|---|
primary |
#FCFCFC | #8B5000 | #FFB86B | Primary |
onPrimary |
#201A17 | #FFFFFF | #4A2800 | On Primary |
primaryContainer |
#FFDCBA | #FFDCBA | #6A3C00 | Primary Container |
onPrimaryContainer |
#2D1600 | #2D1600 | #FFDCBA | On Primary Container |
secondary |
#EAC400 | #715D00 | #EAC400 | Secondary |
onSecondary |
#3A3000 | #FFFFFF | #3A3000 | On Secondary |
secondaryContainer |
#FFE15E | #FFE15E | #554600 | Secondary Container |
onSecondaryContainer |
#231B00 | #231B00 | #FFE15E | On Secondary Container |
tertiary |
#006A6B | #006A6B | #02DCDC | Tertiary |
onTertiary |
#FFFFFF | #FFFFFF | #003738 | On Tertiary |
tertiaryContainer |
#004F50 | #14FBFB | #004F50 | Tertiary Container |
onTertiaryContainer |
#14FBFB | #002020 | #14FBFB | On Tertiary Container |
error |
#680003 | #BA1B1B | #FFB4A9 | Error |
errorContainer |
#BA1B1B | #FFDAD4 | #930006 | Error Container |
onError |
#FF897A | #FFFFFF | #680003 | On Error |
onErrorContainer |
#FFDAD4 | #410001 | #FFDAD4 | On Error Container |
background |
#A67C52 | #FCFCFC | #201A17 | Background |
onBackground |
#2D1600 | #201A17 | #ECE0DB | On Background |
surface |
#A67C52 | #FCFCFC | #201A17 | Surface |
onSurface |
#2D1600 | #201A17 | #ECE0DB | On Surface |
surfaceVariant |
#755028 | #F2DFD1 | #51453A | Surface Variant |
onSurfaceVariant |
#D9AB7F | #51453A | #D4C3B5 | On Surface Variant |
outline |
#392E24 | #837569 | #9E8E81 | Outline |
inverseOnSurface |
#2D1600 | #FAEEE8 | #201A17 | Inverse On Surface |
inverseSurface |
#A67C52 | #362F2B | #ECE0DB | Inverse Surface |
primaryInverse |
#A67C52 | #FFB86B | #8B5000 | Primary Inverse |
NOTE: The Classic Theme ⭐️ was manually created for the
Ab CV App
, This is an addition to the dynamic color requirements from Material Design 3.primaryInverse
was used in thecolors.xml
file, which differs from the Inverse Primary "Role" mentioned in the Baseline color scheme tokens page.
NOTE: Custom theme colors for
Ab CV App
will be displayed or added here.
A tonal palette consists of thirteen tones, including white and black. A tone value of 100 is equivalent to the idea of light at its maximum and results in white. Every tone value between 0 and 100 expresses the amount of light present in the color.
Tone | Primary | Secondary | Tertiary | Error | Neutral | Neutral Variant |
---|---|---|---|---|---|---|
0 | #000000 | #000000 | #000000 | #000000 | #000000 | #000000 |
10 | #2d1600 | #231b00 | #002020 | #410001 | #201a17 | #231a11 |
20 | #4a2800 | #3a3000 | #003738 | #680003 | #362f2b | #392e24 |
30 | #6a3c00 | #554600 | #004f50 | #930006 | #4d4541 | #51453a |
40 | #8b5000 | #715d00 | #006a6b | #ba1b1b | #655d59 | #695c51 |
50 | #ac6604 | #8d7500 | #008586 | #dd3730 | #7e7571 | #837569 |
60 | #cb7f24 | #ab8e00 | #00a1a2 | #ff5449 | #998f8a | #9e8e81 |
70 | #ea993d | #caa800 | #00bebe | #ff897a | #b4a9a4 | #b9a89b |
80 | #ffb86b | #eac400 | #02dcdc | #ffb4a9 | #d0c4bf | #d4c3b5 |
90 | #ffdcba | #ffe15e | #14fbfb | #ffdad4 | #ece0db | #f2dfd1 |
95 | #ffeedf | #fff0bb | #a9ffff | #ffede9 | #faeee8 | #ffeddf |
99 | #fcfcfc | #fffbf7 | #efffff | #fcfcfc | #fcfcfc | #fcfcfc |
100 | #ffffff | #ffffff | #ffffff | #ffffff | #ffffff | #ffffff |
NOTE: These tonal palettes were generated by Material Theme Builder.
Name | Type | Size | Character | Line | Paragraph |
---|---|---|---|---|---|
H1 |
Light | 96 | -1.5 | 112 | 0 |
H2 |
Light | 60 | -0.5 | 71 | 0 |
H3 |
Regular | 48 | auto | 57 | 0 |
H4 |
Regular | 34 | 0.25 | 40 | 0 |
H5 |
Regular | 24 | auto | 28 | 0 |
H6 |
Medium | 20 | 0.25 | 24 | 0 |
Body 1 |
Regular | 16 | 0.5 | 28 | 0 |
Body 2 |
Regular | 14 | 0.25 | 20 | 0 |
Subtitle 1 |
Regular | 16 | 0.15 | 24 | 0 |
Subtitle 2 |
Medium | 14 | 0.1 | 24 | 0 |
Button |
Medium | 14 | 1.25 | 16 | 0 |
Caption |
Regular | 12 | 0.4 | 16 | 0 |
Overline |
Medium | 12 | 2 | 16 | 0 |
NOTE: Character = Letter Spacing & Line = Height
The supported shapes are Circle ⚪️, Square ◻️ and Squircle ⏺ .
Elevation | X | Y | Blur | Spread |
---|---|---|---|---|
01dp-1 |
0 | 1 | 1 | 0 |
01dp-2 |
0 | 2 | 1 | -1 |
01dp-3 |
0 | 1 | 3 | 0 |
02dp-1 |
0 | 2 | 2 | 0 |
02dp-2 |
0 | 3 | 1 | -2 |
02dp-3 |
0 | 1 | 5 | 0 |
03dp-1 |
0 | 3 | 4 | 0 |
03dp-2 |
0 | 3 | 3 | -2 |
03dp-3 |
0 | 1 | 8 | 0 |
04dp-1 |
0 | 4 | 5 | 0 |
04dp-2 |
0 | 1 | 10 | 0 |
04dp-3 |
0 | 2 | 4 | -1 |
06dp-1 |
0 | 6 | 10 | 0 |
06dp-2 |
0 | 1 | 18 | 0 |
06dp-3 |
0 | 3 | 5 | -1 |
08dp-1 |
0 | 8 | 10 | 1 |
08dp-2 |
0 | 3 | 14 | 2 |
08dp-3 |
0 | 5 | 5 | -3 |
09dp-1 |
0 | 9 | 12 | 1 |
09dp-2 |
0 | 3 | 16 | 2 |
09dp-3 |
0 | 5 | 6 | -3 |
12dp-1 |
0 | 12 | 17 | 2 |
12dp-2 |
0 | 5 | 22 | 4 |
12dp-3 |
0 | 7 | 8 | -4 |
16dp-1 |
0 | 16 | 24 | 2 |
16dp-2 |
0 | 6 | 30 | 5 |
16dp-3 |
0 | 8 | 10 | -5 |
24dp-1 |
0 | 24 | 38 | 3 |
24dp-2 |
0 | 9 | 46 | 8 |
24dp-3 |
0 | 11 | 15 | -7 |
NOTE: