When designing my portfolio, the thought process was "Always be able to locate me," information about me no matter where you are on the page—presenting an easy way to contact me and see all my work.
Build a portfolio webpage to showcase Projects, Knowledge, and Information about me. Use HTML, CSS, and Javascript to create a responsive design that has web accessibility in mind.
- HTML
- JavaScript
- CSS
Download or Clone this repo
Custom CSS file with Global Variables was created and set up.
:root {
/* ----------------------------------- Font & Spacing Size */
--sm: 5px;
--md: 25px;
--lg: 48px;
--xl: 85px;
--xxl: 200px;
--font-normal: 16px;
--font-md: 18px;
--font-lg: 24px;
--font-title: 128px;
--font-subtitle: 64px;
/* ------------------------------------------------ Nav bar */
--windowsize: 1080px;
--windowsizeX: 32px;
/* ---------------------------------------- animation timer */
--timer: 20s;
}
Using @media for the color scheme: Light and Dark
@media (prefers-color-scheme: light) {
:root {
/* -------------------------------------------- Font Color */
--font-color: rgb(0, 0, 0);
--font-color-alt: rgb(214, 214, 214);
--accent: rgb(111, 71, 255);
/* -------------------------------------- Background Color */
--bg-color: rgb(250, 250, 250);
/* ----------------------------------Background Variations */
--bg-color-1: rgb(220, 220, 220);
--bg-color-2: rgb(230, 230, 230);
--bg-color-Opacity: rgba(200, 200, 200, 0.8);
--bg-switch: rgba(41, 41, 41, 0.8);
}
}
@media (prefers-color-scheme: dark) {
:root {
/* -------------------------------------------- Font Color */
--font-color: rgb(214, 214, 214);
--font-color-alt: rgb(41, 41, 41);
--accent: rgb(111, 71, 255);
/* -------------------------------------- Background Color */
--bg-color: rgb(41, 41, 41);
/* ----------------------------------Background Variations */
--bg-color-1: rgb(50, 50, 50);
--bg-color-2: rgb(60, 60, 60);
--bg-color-Opacity: rgba(41, 41, 41, 0.8);
--bg-switch: rgba(250, 250, 250, 0.8);
}
}