diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..fafc1de Binary files /dev/null and b/.DS_Store differ diff --git a/.github/.DS_Store b/.github/.DS_Store new file mode 100644 index 0000000..5971a04 Binary files /dev/null and b/.github/.DS_Store differ diff --git a/images/.DS_Store b/images/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/images/.DS_Store differ diff --git a/images/.organ-hands-keyboards.jpg.icloud b/images/.organ-hands-keyboards.jpg.icloud new file mode 100644 index 0000000..0ec355a Binary files /dev/null and b/images/.organ-hands-keyboards.jpg.icloud differ diff --git a/images/.organ-pipes.jpg.icloud b/images/.organ-pipes.jpg.icloud new file mode 100644 index 0000000..7780a44 Binary files /dev/null and b/images/.organ-pipes.jpg.icloud differ diff --git a/images/.sharee-feet-pedals.jpg.icloud b/images/.sharee-feet-pedals.jpg.icloud new file mode 100644 index 0000000..a2471ed Binary files /dev/null and b/images/.sharee-feet-pedals.jpg.icloud differ diff --git a/images/.sharee-tabernacle-organ.jpg.icloud b/images/.sharee-tabernacle-organ.jpg.icloud new file mode 100644 index 0000000..e69a037 Binary files /dev/null and b/images/.sharee-tabernacle-organ.jpg.icloud differ diff --git a/images/female-programmer-01.svg b/images/female-programmer-01.svg new file mode 100644 index 0000000..c722ff4 --- /dev/null +++ b/images/female-programmer-01.svg @@ -0,0 +1,156 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/female-programmer.png b/images/female-programmer.png new file mode 100644 index 0000000..e789dbd Binary files /dev/null and b/images/female-programmer.png differ diff --git a/images/headshot-optimized.jpg b/images/headshot-optimized.jpg new file mode 100644 index 0000000..39d46a3 Binary files /dev/null and b/images/headshot-optimized.jpg differ diff --git a/images/headshot-transparent.jpg b/images/headshot-transparent.jpg new file mode 100644 index 0000000..60d0f13 Binary files /dev/null and b/images/headshot-transparent.jpg differ diff --git a/images/headshot-transparent.png b/images/headshot-transparent.png new file mode 100644 index 0000000..fb9b287 Binary files /dev/null and b/images/headshot-transparent.png differ diff --git a/images/headshot-white.jpg b/images/headshot-white.jpg new file mode 100644 index 0000000..04c180d Binary files /dev/null and b/images/headshot-white.jpg differ diff --git a/images/headshot.JPG b/images/headshot.JPG new file mode 100644 index 0000000..daf094f Binary files /dev/null and b/images/headshot.JPG differ diff --git a/images/ku-campanile.jpeg b/images/ku-campanile.jpeg new file mode 100644 index 0000000..4f49ff8 Binary files /dev/null and b/images/ku-campanile.jpeg differ diff --git a/images/mathematics-optimized.jpg b/images/mathematics-optimized.jpg new file mode 100644 index 0000000..19ad02f Binary files /dev/null and b/images/mathematics-optimized.jpg differ diff --git a/images/mathematics.jpg b/images/mathematics.jpg new file mode 100644 index 0000000..66b4b1a Binary files /dev/null and b/images/mathematics.jpg differ diff --git a/images/organ-hands-keyboards-optimized.jpg b/images/organ-hands-keyboards-optimized.jpg new file mode 100644 index 0000000..5687f52 Binary files /dev/null and b/images/organ-hands-keyboards-optimized.jpg differ diff --git a/images/organ-pipes-optimized.jpg b/images/organ-pipes-optimized.jpg new file mode 100644 index 0000000..519a931 Binary files /dev/null and b/images/organ-pipes-optimized.jpg differ diff --git a/images/sharee-feet-pedals-optimized.jpg b/images/sharee-feet-pedals-optimized.jpg new file mode 100644 index 0000000..3db2a6d Binary files /dev/null and b/images/sharee-feet-pedals-optimized.jpg differ diff --git a/images/sharee-tabernacle-organ-optimized.jpg b/images/sharee-tabernacle-organ-optimized.jpg new file mode 100644 index 0000000..7b2ca56 Binary files /dev/null and b/images/sharee-tabernacle-organ-optimized.jpg differ diff --git a/images/utah-state-university.jpeg b/images/utah-state-university.jpeg new file mode 100644 index 0000000..d329b60 Binary files /dev/null and b/images/utah-state-university.jpeg differ diff --git a/images/woman-programmer.jpg b/images/woman-programmer.jpg new file mode 100644 index 0000000..9f696a5 Binary files /dev/null and b/images/woman-programmer.jpg differ diff --git a/index.html b/index.html index cbb3d05..203a58f 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,183 @@ - - - - - - \ No newline at end of file + + + + + + My Personal Journey + + +
+ + + + +
+ +
+
+
+ Smiling Woman + + +
+
+
+

Mathematician to Musician to
Master Programmer

+

+ "Risk something or forever sit with your dreams." +

+

— Herb Brooks

+
+
+
+ +
+
+ + Utah State University +

Mathematician

+
+
+

+ I began my undergraduate studies in mathematics at Utah State + University. I grew up in a family of mathematicians and scientists, + so it was natural that I follow that path. I completed two years of + coursework in math prior to changing my major to music. +

+
+
+ +
+
+ +

Musician

+ Organist Hands On Organ Keyboards + Sharee At Tabernacle Organ + Organist Feet Playing Pedals +
+
+ Organ Pipes +

Utah State University

+

+ Though I had always loved music, I found myself drawn to the organ + because it evoked a wider range and deeper intensity of emotions + than I had experienced with any other instrument—from poignant + tender feelings, to dark struggle, to joyous jubilance. I discovered + I was finding and connecting with myself through this new found + medium. +

+

University of Kansas

+

+ After completing my bachelors degree at USU in organ performance, I + went to KU for grad school. As a new masters student in the organ + program, I was intimated by the playing of the veteran masters and + doctorate level students. Overwhelmed as I was, I dove into my + practicing and studies, and also worked as an organist in several + local congregations. +

+
+
+ +
+
+ Female Computer Programmer +
+
+
+

Programmer

+

+ My goal is to gain the skills necessary to be marketable in the + tech industry and use those abilities to solve problems in a way + that aligns with my strengths and interests. LaunchCode is giving + me a solid foundation in coding that will help me to build web + applications and create a portfolio to transition into a career in + software development and work on a team to solve real-world + problems. +

+
+
+
+ +
+

Inspirational Quotes

+
+
+
“
+

+ "Don't limit yourself. Many people limit themselves to what they + think they can do. You can go as far as you mind lets you. What + you believe you can achieve." +

+

Mary Kay Ash

+
+ +
+
“
+

+ "The important thing is not being afraid to take a chance. + Remember, the greatest failure is to not try. Once you find + something you love to do, be the best at doing it." +

+

Debbi Fields

+
+ +
+
“
+

+ "I learned that courage was not the absence of fear, but the + triumph over it. The brave man is not he who does not feel afraid, + but he who conquers that fear." +

+

Nelson Mandela

+
+
+
+ + +
+ + diff --git a/styles.css b/styles.css index 067ff44..c48f19f 100644 --- a/styles.css +++ b/styles.css @@ -1 +1,490 @@ -/* Write your CSS here! */ \ No newline at end of file +/* Theming */ + +/* import fonts */ +@import url("https://fonts.googleapis.com/css2?family=News+Cycle:wght@400;700&display=swap"); + +@import url("https://fonts.googleapis.com/css2?family=Sono:wght@400;600&display=swap"); + +/* Variables */ +:root { + --primary: #000000; + --secondary: #ffd4c4; + --text: #f9f9f9; + --accent: #2d656f; + --accent1: #ffeddd; + --accent2: #a4bdc0; + --accent3: #ffb07f; + --white: #f9f9f9; + --gray: #acb0b0; +} + +/* Reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: "News Cycle", sans-serif; + background-color: var(--white); + overflow-x: hidden; +} + +a { + text-decoration: none; +} + +ul { + list-style: none; +} + +h2 { + font-size: 42px; +} + +h3 { + font-size: 32px; +} + +p { + font-size: 20px; +} + +/* -------------------- Main Nav --------------------*/ + +.header { + background-color: var(--accent1); + position: sticky; + top: 0; + width: 100%; + z-index: 4; +} + +.logo { + display: inline-block; + color: var(--accent); + font-size: 60px; + margin-left: 50px; +} + +.nav { + width: 100%; + height: 100%; + position: fixed; + background-color: var(--accent1); + overflow: hidden; + margin-right: 30px; +} + +.menu a { + display: block; + padding: 30px; + color: var(--accent); +} + +.menu a:hover { + background-color: var(--gray); +} + +.nav { + max-height: 0; + transition: max-height 0.5s ease-out; +} + +.hamb { + cursor: pointer; + float: right; + padding: 40px 20px; +} /* Style label tag */ + +.hamb-line { + background: var(--accent); + display: block; + height: 2px; + position: relative; + width: 24px; +} + +.hamb-line::before, +.hamb-line::after { + background: var(--accent); + content: ""; + display: block; + height: 100%; + position: absolute; + transition: all 0.2s ease-out; + width: 100%; +} +.hamb-line::before { + top: 5px; +} +.hamb-line::after { + top: -5px; +} + +/* Hide checkbox */ +.side-menu { + display: none; +} + +/* Toggle menu icon */ +.side-menu:checked ~ nav { + max-height: 50%; +} +.side-menu:checked ~ .hamb .hamb-line { + background: transparent; +} +.side-menu:checked ~ .hamb .hamb-line::before { + transform: rotate(-45deg); + top: 0; +} +.side-menu:checked ~ .hamb .hamb-line::after { + transform: rotate(45deg); + top: 0; +} + +@media (min-width: 768px) { + .nav { + max-height: none; + top: 0; + position: relative; + float: right; + width: fit-content; + background-color: transparent; + } + + .menu li { + float: left; + } + + .menu a:hover { + background-color: transparent; + color: var(--accent3); + } + + .hamb { + display: none; + } +} + +/* ------------------------Hero Section--------------------------- */ + +h1 { + font-size: 42px; + text-transform: uppercase; +} + +.hero-container { + background-color: var(--accent1); + display: flex; + min-height: 600px; +} + +.col1 { + width: 50%; + position: relative; +} + +#headshot { + max-height: 400px; + position: absolute; + bottom: 0; + margin-left: 30%; + margin-right: 50%; + z-index: 3; +} + +.circle1 { + height: 500px; + width: 500px; + border-radius: 1000px; + background-color: var(--accent3); + position: absolute; + top: 100px; + left: 100px; + z-index: 2; +} + +.circle2 { + height: 200px; + width: 200px; + border-radius: 1000px; + background-color: var(--secondary); + position: absolute; + bottom: 75px; + left: 40px; +} + +.col2 { + width: 50%; + position: relative; +} + +.title-quote { + position: absolute; + top: 45%; + color: var(--accent); +} + +.quote1 { + margin-top: 10%; + font-size: 24px; +} + +.name { + font-style: italic; + font-size: smaller; + margin-top: 2%; +} + +/* ----------------------usu container-------------------- */ +.usu-container { + display: flex; + min-height: 600px; +} + +.col { + width: 50%; + position: relative; +} + +.square { + position: absolute; + height: 400px; + width: 400px; + background-color: var(--accent); + z-index: 1; +} + +#usu { + position: absolute; + max-width: 500px; + z-index: 2; + top: 45%; + left: 30%; +} + +#math-title { + position: absolute; + z-index: 3; + color: var(--text); + top: 20%; + left: 10%; +} + +#math-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +/* ----------------------musician container-------------------- */ +.musician-container { + min-height: 900px; + display: flex; + margin-top: 15%; +} + +.cell1 { + width: 40%; + position: relative; +} + +#circle3 { + width: 300px; + height: 300px; + border-radius: 1000px; + background-color: var(--secondary); + position: absolute; + top: -2%; + left: 10%; + z-index: 1; +} + +.musician-title { + position: absolute; + z-index: 2; + color: var(--accent); + top: 10%; + left: 42%; +} + +.tabernacle-organ { + max-width: 600px; + position: absolute; + top: 20%; + left: 50%; + border-radius: 10000px; + z-index: 1; +} + +.organ-hands { + max-width: 400px; + position: absolute; + top: 50%; + left: 60%; + border-radius: 2000px; + z-index: 2; +} + +.organ-feet { + max-width: 400px; + position: absolute; + top: 60%; + left: 20%; + border-radius: 100000px; + z-index: 1; +} + +.cell2 { + width: 60%; + position: relative; +} + +.organ-pipes { + opacity: 0.2; + max-width: 100%; + max-height: 100%; +} + +#title1 { + position: absolute; + z-index: 2; + color: var(--primary); + top: 10%; + left: 40%; +} + +.par1 { + position: absolute; + z-index: 2; + color: var(--primary); + top: 15%; + right: 20%; + left: 40%; + font-size: 22px; +} + +#title2 { + position: absolute; + z-index: 2; + color: var(--primary); + top: 50%; + left: 40%; +} + +.par2 { + position: absolute; + z-index: 2; + color: var(--primary); + top: 55%; + right: 20%; + left: 40%; + font-size: 22px; +} + +/* */ +.programmer-container { + margin-top: 10%; + min-height: 600px; + display: flex; + padding: 0 10%; +} + +.col3, +.col4 { + width: 50%; + position: relative; +} + +.coder-girl { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + min-width: 500px; +} + +.programmer-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.programmer-title { + padding-bottom: 15px; +} + +/* */ + +.quotes-container { + margin-top: 100px; + min-height: 600px; + padding: 0% 10% 10% 10%; +} +.quote-title { + text-align: center; +} + +.quotes { + display: flex; + margin: 4% 0; + gap: 20px; +} + +.quote-block { + background-color: var(--accent1); + width: 100%; + padding: 100px; + box-sizing: border-box; + border-radius: 20px; +} + +.quote-symbol { + font-size: 7.5em; + color: var(--accent3); + margin-top: 0; + margin-left: -0.1em; + font-family: "Sono", sans-serif; +} + +.quote-par { + margin-top: -6em; +} + +.quote-name { + font-style: bold; + text-align: left; + text-align: right; + margin-left: 10px; + margin-top: 20px; +} + +/* */ + +footer { + background-color: var(--accent); + text-align: center; +} + +.footer-container { + max-width: 1200px; + margin: 0 auto; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: 250px; + font-size: 14px; +} + +.copyright { + color: var(--white); +} + +.design { + color: var(--white); +}