From c8aa0112273a3918020aa7139c3b23d6b538dcd4 Mon Sep 17 00:00:00 2001 From: Nathan Peckham <74386527+nwpeckham88@users.noreply.github.com> Date: Sat, 8 Jun 2024 15:02:26 -0500 Subject: [PATCH] Basic start --- README.md | 2 +- css/styles.css | 147 +++++++++++++++++++++++++++++++++++++++++++++ index.html | 41 +++++++++++++ scripts/scripts.js | 5 ++ 4 files changed, 194 insertions(+), 1 deletion(-) create mode 100644 css/styles.css create mode 100644 index.html create mode 100644 scripts/scripts.js diff --git a/README.md b/README.md index e15dcd1..21877a9 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,3 @@ # Profile-Page -My profile page, describing my work experience and certifications/achievements. \ No newline at end of file +My profile page, describing my work experience and certifications/achievements. diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..97acd4c --- /dev/null +++ b/css/styles.css @@ -0,0 +1,147 @@ +.body-class { + background-color: black; + color: whitesmoke; + width: 95dvw; +} + +#hero { + font-size: 7em; + line-height: 0.85; + text-align: center; + font-variant-caps: petite-caps; + top: 50dvh; + width: 98dvw; +} + +#hero-titles { + width: 100%; + height: 100%; + text-align: center; + font-size: 2em; + font-variant-caps: all-petite-caps; + transition: 0.2s ease-in-out; + position: absolute; + top: 55dvh; + /*left: 50vh; */ + width: 98dvw; + text-align: center; +} + +#viewport-portal { + width: 95dvw; + height: 101dvh; + vertical-align: middle; + align-content: center; + margin: 0; + padding: 0; + +} + +#certifications-page { + width: 98dvw; + height: 100dvh; + vertical-align: top; +} + +#certifications-title { + font-size: 4em; + line-height: 0.85; + text-align: center; + font-variant-caps: petite-caps; +} + +.certification { + font-size: 1em; + text-align: center; +} + +#arrow-hint { + position: absolute; + top: 94dvh; + /*left: 50vh; */ + width: 98dvw; + text-align: center; + color: rgb(255, 255, 255); + opacity: 0%; + transition: 4s ease-in-out 13s; + transition-property: opacity, visibility; +} + +#page-content { + opacity: 0%; + visibility: hidden; + transition: 3s ease-in 500ms; + margin: 0 auto; + padding: 10px; + position: relative; +} + +.material-symbols-outlined { + font-family: 'Material Symbols Outlined'; + font-weight: normal; + font-style: normal; + font-size: 24px; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + -webkit-font-feature-settings: 'liga'; + font-feature-settings: 'liga'; + -webkit-font-smoothing: antialiased; +} + +.sedan-sc-regular { + font-family: "Sedan SC", serif; + font-weight: 400; + font-style: normal; +} + +/* : Use a unique and descriptive class name */ +/* : Use a value from 100 to 700 */ +/* .josefin-slab- { + font-family: "Josefin Slab", serif; + font-optical-sizing: auto; + font-weight: ; + font-style: normal; + } +*/ + +.josefin-slab-500 { + font-family: "Josefin Slab", serif; + font-optical-sizing: auto; + font-weight: 500; + font-style: normal; +} + +/* : Use a unique and descriptive class name */ +/* : Use a value from 400 to 900 */ +.playfair-display-700 { + font-family: "Playfair Display", serif; + font-optical-sizing: auto; + font-weight: 700; + font-style: normal; +} + +.playfair-display-400 { + font-family: "Playfair Display", serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; +} + +.oswald-display-700 { + font-family: "Oswald", serif; + font-optical-sizing: auto; + font-weight: 700; + font-style: normal; +} + +.oswald-display-400 { + font-family: "Oswald", serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..9033196 --- /dev/null +++ b/index.html @@ -0,0 +1,41 @@ + + + + + + + + + + Nathan Peckham + + + + + + + + + + + + + + + + + +
+
+
Nathan Peckham
+
 
+
arrow_downward
+
+
+
Certifications
+
Google Professional Certificate
+
+
+ + + \ No newline at end of file diff --git a/scripts/scripts.js b/scripts/scripts.js new file mode 100644 index 0000000..dae6317 --- /dev/null +++ b/scripts/scripts.js @@ -0,0 +1,5 @@ +WebFont.load({ + google: { + families: ['Oswald', 'Josefin Slab', 'Playfair Display', 'Sedan SC', 'Material Symbols Outlined'] + } +});