+ + + Lorem we ipsum dolor sit amet consectetur adipisicing elit. Unde, tempore harum nihil, commodi deserunt nulla ipsum, culpa nesciunt quas eaque natus doloremque earum similique facere aspernatur perspiciatis. Nobis, corrupti? Amet, quos. Quae incidunt, debitis quasi, cumque vero voluptates nulla voluptatibus aut hic aliquam necessitatibus, aspernatur quia asperiores sapiente tenetur optio sequi rerum quam! Ducimus doloribus iste sint laudantium itaque quod iusto ipsum, est adipisci voluptatibus necessitatibus rerum, deleniti sunt non vero officia eos minima ratione quo. Similique doloremque neque nam? + ABOUT ME +About Me + +LinkedIn Github Email +Aaron Waruszewski + +
+
-
- - - I am a coder at heart. I've wanted to be one since I was a kid. - Seeing how machines moved, talk to each other, and held amazing - games always drove my curiosity. To see how they worked, what - made them move, to see what drove them. I love learning new things - to grow that knowledge and to grow as a better person. So, now I - continue that journey to write amazing code, make machines do amazing - things, and to push the envelope of what they can do. -
-Under construction.
- - - - \ No newline at end of file diff --git a/css/404.css b/css/404.css new file mode 100644 index 0000000..d56e569 --- /dev/null +++ b/css/404.css @@ -0,0 +1,7 @@ +section { + max-width: 400px; + margin: 30px auto; + text-align: center; +} + +/*# sourceMappingURL=404.css.map */ diff --git a/css/404.css.map b/css/404.css.map new file mode 100644 index 0000000..1cd5054 --- /dev/null +++ b/css/404.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../sass/404.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA","file":"404.css"} \ No newline at end of file diff --git a/css/about-me.css b/css/about-me.css new file mode 100644 index 0000000..9b4e0e5 --- /dev/null +++ b/css/about-me.css @@ -0,0 +1,125 @@ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-stretch: 100%; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v26/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2) format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +@font-face { + font-family: "Raleway"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/raleway/v22/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +html, body { + padding: 0; + margin: 0; + scroll-behavior: smooth; + color: #1E2019; + font-family: "Raleway", sans-serif; +} + +#nav-bar { + background: #1E2019; + height: 50px; +} + +nav { + height: 100%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + margin: auto; + max-width: 800px; +} + +#logo { + height: 40px; + width: 40px; + padding: 2px; +} + +#nav-bar a { + color: #EAC435; + text-decoration: none; + margin-right: 20px; +} + +#nav-bar a:last-child { + margin-right: 0; +} + +#about-me { + margin: 20px 15px 45px; + display: flex; + flex-direction: column; + align-items: center; +} +#about-me h1 { + text-align: center; +} +#about-me p { + max-width: 400px; +} +#about-me h2 { + margin: 45px 0 10px; +} + +#pic { + position: relative; +} +#pic img { + max-width: 450px; + border-bottom-left-radius: 50%; + border-bottom-right-radius: 50%; + z-index: 0; +} +#pic ::after { + content: ""; + height: 450px; + width: 450px; + position: absolute; + z-index: -1; + background: #EAC435; + border-radius: 100%; +} + +footer { + width: 100%; + height: 250px; + background: #282927; + color: #fb5546; + font-weight: 600; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +footer a { + text-decoration: none; +} +footer img { + height: 35px; + width: 35px; +} +footer div { + margin: 10px 0; +} + +#made-with a { + color: #fb5546; + text-decoration: none; +} + +#social-links { + width: 200px; + display: flex; + justify-content: space-between; +} + +/*# sourceMappingURL=about-me.css.map */ diff --git a/css/about-me.css.map b/css/about-me.css.map new file mode 100644 index 0000000..887eca8 --- /dev/null +++ b/css/about-me.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../sass/about-me.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EAEA;;;AAGJ;EACI;EACA;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EAEA;;;AAIJ;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;;AAGA;EACI;;AAGJ;EACI;;AAGJ;EACI;;;AAIR;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMR;EACI;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;;AAKR;EACI;EACA;;;AAGJ;EACI;EACA;EACA","file":"about-me.css"} \ No newline at end of file diff --git a/css/contactme.css b/css/contactme.css deleted file mode 100644 index 521e0fd..0000000 --- a/css/contactme.css +++ /dev/null @@ -1,34 +0,0 @@ -html, body { - margin: 0; - font-size: 18px; - font-family: 'Montserrat', sans-serif; - /* background: rgb(245, 245, 245); */ - --section-top-bottom-padding: 250px; -} - -/* Tablet */ -@media screen - and (max-width: 768px){ - -} - -/* Phone */ -@media screen - and (max-width: 425px){ - -} - -@media screen - and (min-width: 376px) and (max-width: 425px){ - -} - -@media screen - and (min-width: 321px) and (max-width: 375px){ - -} - -@media screen - and (max-width: 320px){ - -} \ No newline at end of file diff --git a/css/del_me.css b/css/del_me.css deleted file mode 100644 index e69de29..0000000 diff --git a/css/footer.css b/css/footer.css deleted file mode 100644 index 0b1dcb6..0000000 --- a/css/footer.css +++ /dev/null @@ -1,48 +0,0 @@ -footer{ - height: fit-content; - padding: 5px 0; - /* background: grey; */ - /* background-color: rgb(70, 108, 158); */ - background-color: #08346D; - color: white; - width: 100%; - /* padding: 0; */ - /* margin: 0; */ -} - -footer a{ - color: white; - display: block; - padding: 0 0 15px 15px; - /* width: 100px; */ - /* background-color: purple; */ -} - -footer a:hover{ - /*Maybe a different color for contrast*/ - /* padding: 20px 0; */ - color: rgb(0, 255, 255); -} - -footer div{ - padding: 10px 20px 0; - /* Doesn't seem to work */ - /* display: inline; */ - /* width: 100px; */ - /* background-color: red; */ -} - -footer h4{ - font-weight: 800; - padding:0; - margin-bottom: 5px; - /* background-color: orange; */ -} - -footer p{ - padding: 10px 20px 0; -} - -.copyright{ - background-image: url(http://76.89.152.77:8448/counter2.png) -} \ No newline at end of file diff --git a/css/main.css b/css/main.css index 8a6948a..52416af 100644 --- a/css/main.css +++ b/css/main.css @@ -1,188 +1,456 @@ +.grid { + height: var(--height, auto); + width: var(--width, 100%); + background: var(--bg, none); + display: grid; + grid-template-columns: var(--cols, 1fr); + grid-template-rows: var(--rows, 1fr); + grid-column-gap: var(--col-gap, 0); + grid-row-gap: var(--row-gap, 0); + grid-template-areas: var(--ga, ""); +} + +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-stretch: 100%; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v26/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2) format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +@font-face { + font-family: "Raleway"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/raleway/v22/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} html, body { + padding: 0; + margin: 0; + scroll-behavior: smooth; + color: #1E2019; + font-family: "Raleway", sans-serif; +} + +p, li { + font-family: sans-serif; +} + +.grid-item-1 { + grid-area: var(--grid-item-1); +} + +.grid-item-2 { + grid-area: var(--grid-item-2); +} + +.grid-item-3 { + grid-area: var(--grid-item-3); +} + +.grid-item-area-title { + grid-area: title; +} + +.grid-item-area-img1 { + grid-area: img1; +} + +.grid-item-area-img2 { + grid-area: img2; +} + +.grid-item-area-img3 { + grid-area: img3; +} + +.grid-item-area-text1 { + grid-area: text1; +} + +.grid-item-area-text2 { + grid-area: text2; +} + +.grid-item-area-text3 { + grid-area: text3; +} + +.sub-grid-item-1 { + grid-area: var(--sub-grid-item-1); +} + +.sub-grid-item-2 { + grid-area: var(--sub-grid-item-2); +} + +.sub-grid-item-3 { + grid-area: var(--sub-grid-item-3); +} + +#nav-bar { + background: #1E2019; + height: 50px; +} + +nav { + height: 100%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + margin: auto; + max-width: 800px; +} + +#logo { + height: 40px; + width: 40px; + padding: 2px; +} + +#nav-bar a { + color: #EAC435; + text-decoration: none; + margin-right: 20px; +} + +#nav-bar a:last-child { + margin-right: 0; +} + +#landing { + background-image: url(../img/full-sized/code-desk.webp); + background-size: cover; + background-position: center; + height: calc(100vh - 90px); + color: white; + isolation: isolate; + position: relative; + padding: 50px 10px 0; +} + +#landing::after { + content: ""; + inset: 0; + background-color: grey; + z-index: -1; + position: absolute; + mix-blend-mode: multiply; +} + +#landing-image { + max-width: 300px; +} + +#landing-text { + max-width: 500px; + margin: auto; + padding: 20vh 15px 0; + font-size: 1.4rem; +} + +#selling-points { + --height: auto; + --width: 100%; + --bg: none; + justify-items: center; + align-items: center; + --col-gap: 0; + --row-gap: 0; + --cols: [grid-col-start] 20px [col-start] repeat(1, [col] 1fr) [col-end] 20px [grid-col-end]; + --rows: [grid-row-start] repeat(3, auto) [grid-row-end]; + --grid-item-1: 1 / 2 / 2 / 3; + --grid-item-2: 2 / 2 / 3 / 3; + --grid-item-3: 3 / 2 / 4 / 3; +} +#selling-points div img { + height: 50px; + width: 50px; +} +@media screen and (min-width: 769px) { + #selling-points div img { + height: 60px; + width: 60px; + } +} + +#selling-text { + max-width: 500px; + padding: 15rem 0; + text-align: center; +} +@media screen and (min-width: 769px) { + #selling-text { + padding: 10rem 0; + } +} + +#selling-text h2 { + text-align: center; +} + +.yellow { + background-color: #EAC435; + height: 100%; + width: 100%; + z-index: -1; + grid-area: 1/1/3/4; +} + +#services { + --height: auto; + --width: 100%; + --bg: none; + justify-items: center; + align-items: center; + --col-gap: 10px; + --row-gap: 10px; + --cols: [sub-grid-col-start] repeat(1, [col] 1fr) [sub-grid-col-end]; + --rows: [sub-grid-row-start] repeat(3, [row] 1fr) [sub-grid-row-end]; + --sub-grid-item-1: 1 / 1 / 2 / 2; + --sub-grid-item-2: 2 / 1 / 3 / 2; + --sub-grid-item-3: 3 / 1 / 4 / 2; + border-radius: 5px; + box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2); + max-width: 950px; + grid-area: 2/2/4/3; + background: white; +} +@media screen and (min-width: 769px) { + #services { + --col-gap: 0; + --row-gap: 0; + --cols: [sub-grid-col-start] repeat(3, [col] 1fr) [sub-grid-col-end]; + --rows: [sub-grid-row-start] repeat(1, [row] 1fr) [sub-grid-row-end]; + --sub-grid-item-1: 1 / 1 / 2 / 2; + --sub-grid-item-2: 1 / 2 / 2 / 3; + --sub-grid-item-3: 1 / 3 / 2 / 4; + } +} +#services div { + padding: 30px; +} +#services h3 { + text-align: center; +} +#services ul { + list-style: none; + padding: 0; +} +#services img { + margin-left: calc(50% - 27px); +} +#services li { + margin: 20px 0; + text-align: center; +} +@media screen and (min-width: 769px) { + #services img { + margin-left: calc(50% - 30px); + } +} + +#projects { + --height: auto; + --width: 100%; + --bg: none; + justify-items: center; + align-items: center; + --col-gap: 0; + --row-gap: 0; + --ga: ". title ." ". img1 ." ". text1 ." ". img2 ." ". text2 ." ". img3 ." ". text3 ." ; + --cols: [grid-col-start] 20px [col-start] repeat(1, [col] 1fr) [col-end] 20px [grid-col-end]; + --rows: [grid-row-start] repeat(7, [row] 1fr) [grid-row-end]; + --grid-item-1: 1 / 2 / 2 / 3; + --grid-item-2: 2 / 2 / 3 / 3; + --grid-item-3: 3 / 2 / 4 / 3; + --grid-item-4: 4 / 2 / 5 / 3; + --grid-item-5: 5 / 2 / 6 / 3; + --grid-item-6: 6 / 2 / 7 / 3; + --grid-item-7: 7 / 2 / 8 / 3; + padding: 90px 0 50px; +} +@media screen and (min-width: 769px) { + #projects { + --col-gap: 20px; + --row-gap: 80px; + --ga: ". . title title . ." ". . img1 text1 . ." ". . text2 img2 . ." ". . img3 text3 . ." ; + --cols: [grid-col-start] 15px repeat(1, 1fr 300px 300px 1fr) 15px [grid-col-end]; + --rows: [grid-row-start] repeat(4, [row] 1fr) [grid-row-end]; + --grid-item-1: 1 / 2 / 2 / 3; + --grid-item-2: 1 / 3 / 2 / 4; + --grid-item-3: 1 / 4 / 2 / 5; + --grid-item-4: 1 / 5 / 2 / 6; + --grid-item-5: 2 / 2 / 3 / 3; + --grid-item-6: 2 / 3 / 3 / 4; + --grid-item-7: 2 / 4 / 3 / 5; + --grid-item-8: 2 / 5 / 3 / 6; + --grid-item-9: 3 / 2 / 4 / 3; + --grid-item-10: 3 / 3 / 4 / 4; + --grid-item-11: 3 / 4 / 4 / 5; + --grid-item-12: 3 / 5 / 4 / 6; + --grid-item-13: 4 / 2 / 5 / 3; + --grid-item-14: 4 / 3 / 5 / 4; + --grid-item-15: 4 / 4 / 5 / 5; + --grid-item-16: 4 / 5 / 5 / 6; + } +} +#projects img { + max-width: 250px; + background: white; + align-self: end; +} +@media screen and (min-width: 768px) { + #projects img { + align-self: start; + } +} +#projects h2 { + text-align: center; + font-size: 2rem; +} +#projects h3 { + text-align: center; +} +@media screen and (min-width: 768px) { + #projects h3 { + text-align: start; + } +} +#projects p { + max-width: 300px; + width: 100%; +} +#projects a { + color: #eb1805; + text-decoration: none; +} + +#project-text { + max-width: 500px; + padding: 5rem 0 2rem; + align-self: center; + justify-self: center; +} + +#project-text p { + max-width: 500px; + text-align: center; +} + +#projects .even-img { + justify-self: start; +} + +#projects .even-text { + justify-self: end; +} + +.simplySass { + height: 81.125px; + width: 250px; +} + +.template-img { + height: 167px; + width: 250px; +} + +.temp-img { + height: 200px; + width: 250px; +} + +#contact { + --height: auto; + --width: 100%; + --bg: none; + justify-items: center; + align-items: center; + --col-gap: 0; + --row-gap: 0; + --cols: [grid-col-start] 20px [col-start] repeat(1, [col] 1fr) [col-end] 20px [grid-col-end]; + --rows: [grid-row-start] repeat(3, [row] 1fr) [grid-row-end]; + --grid-item-1: 1 / 2 / 2 / 3; + --grid-item-2: 2 / 2 / 3 / 3; + --grid-item-3: 3 / 2 / 4 / 3; + --grid-item-1: 2 / 2 / 4 / 3; +} + +#contact a { + margin-top: 10px; + padding: 10px 15px; + background-color: #FB4D3D; + border-radius: 5px; + text-decoration: none; + color: #1E2019; +} +@media screen and (min-width: 769px) { + #contact a { margin: 0; - font-size: 18px; - font-family: 'Montserrat', sans-serif; - /* background: rgb(245, 245, 245); */ - --section-top-bottom-padding: 220px; -} - -main{ - background: rgb(255, 255, 255); -} - -/* main section{ - padding-top: 100px; -} */ - -.landing{ - --height: 100vh; - --bg: none; - --row-repeat: 5; - --row-repeat-size: 20%; - --grid-item-1: 1/1/6/4; - --grid-item-2: 1/1/6/4; - --grid-item-3: 3/2/4/3; - --grid-item-4: 5/2/6/3; - text-align: center; -} - -.landing-background{ - /* /Images/negative-space-laptop-camera-notepad-glass-water-daria-shevtsova.jpg */ - /* filter: grayscale(0.5); */ - filter: blur(0px) grayscale(0); - z-index: -2; - background-image: url(/Images/full-sized/negative-space-laptop-camera-notepad-glass-water-daria-shevtsova.jpg); - background-size: cover; - background-position: center; - animation-duration: 3s; - animation-name: outoffocus; -} - -.landing-text{ - font-size: 3rem; - color: floralwhite; - text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; -} - -.landing-text p{ - text-align: left; - line-height: 10px; - margin-top: 30px; - opacity: 0; - /* animation-duration: 3s; */ - animation: fadeandslidein 2.5s forwards; - /* animation-name: fadeandslidein; */ -} - -@keyframes outoffocus { - from { - filter: grayscale(0.5) blur(10px); - } - - - to { - filter: grayscale(0) blur(0px); - } -} - -/* @keyframes slidein { - from { - margin-left: 100%; - width: 300%; - } - - to { - margin-left: 0%; - width: 100%; - } -} */ - -@keyframes fadeandslidein { - from { - margin-top: 60px; - opacity: 0; - } - - to { - margin-top: 30px; - opacity: 1; - } -} - -.what{ - /* --height: 100vh; */ - --bg: none; - --row-repeat: 2; - /* --row-repeat-size: 20%; */ - --grid-item-1: 1/2/2/3; - --grid-item-2: 2/2/3/3; - --grid-item-3: 3/2/4/3; - --grid-item-4: 5/2/6/3; - text-align: center; - /* margin-top: 80px; */ - color: white; - /* background-color: rgb(156, 168, 184); */ - /* background-color: rgb(70, 108, 158); */ - background-color: #079F79; - background-color: #F4610B; - background-color: #F4B10B; - background-color: #1351A0; - /* padding: 200px 0; */ -} - -.what p{ - margin: 0 auto; - width: 60%; -} - -.portfolio{ - /* background-color: rgb(156, 168, 184); */ - background-color: white; - /* background-color: #F4B10B; */ - /* margin-top: 200px; */ -} - - - -.card-holder{ - /* --height: 100vh; */ - --bg: none; - --row-repeat: 4; - /* --row-repeat-size: 20%; */ - --grid-item-1: 1/2/2/3; - --grid-item-2: 2/2/3/3; - --grid-item-3: 3/2/4/3; - --grid-item-4: 4/2/5/3; - text-align: center; -} - -.github-projects{ - padding-bottom: 80px; -} - -.blog{ - - /* background-color: rgb(156, 168, 184); */ - /* background-color: rgb(70, 108, 158); */ - /* background-color: #F4B10B; */ - background-color: #1351A0; - /* background-color: #F4610B; */ - /* background-color: #1B31A7; */ - /* background-color: #069888; */ - /* background-color: #079F79; */ - color: white; -} - -#isoblocks, #simplyfit, #quote{ - color: white; -} - -.white-text{ - color: white; -} - -/* footer{ - height: fit-content; - padding: 20px 10px; */ - /* background: grey; */ - /* background-color: rgb(70, 108, 158); */ - /* background-color: #08346D; - color: white; -} */ -/* -footer a{ - color: white; -} - -footer a:hover{ - color: rgb(0, 255, 255); -} */ - -@media screen - and (max-width: 425px){ + } +} + +#hire { + background: #EAC435; + padding: 30px 0; + width: 100%; + max-width: 400px; + border-radius: 8px; + display: flex; + flex-direction: column; + align-items: center; +} +@media screen and (min-width: 768px) { + #hire { + flex-direction: row; + justify-content: space-around; + max-width: 800px; + } +} + +.dark-box { + background: #282927; + grid-area: 3/1/4/4; + height: 100%; + width: 100%; +} + +footer { + width: 100%; + height: 250px; + background: #282927; + color: #fb5546; + font-weight: 600; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +footer a { + text-decoration: none; +} +footer img { + height: 35px; + width: 35px; +} +footer div { + margin: 10px 0; +} - .landing-text{ - font-size: 2rem; - } +#made-with a { + color: #fb5546; + text-decoration: none; +} + +#social-links { + width: 200px; + display: flex; + justify-content: space-between; +} -} \ No newline at end of file +/*# sourceMappingURL=main.css.map */ diff --git a/css/main.css.map b/css/main.css.map new file mode 100644 index 0000000..8f1a8dc --- /dev/null +++ b/css/main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../sass/partials/_grid.scss","../sass/main.scss"],"names":[],"mappings":"AAeA;EACI;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;;;ACxBJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EAEA;;;AAGJ;EAEI;;;ADEI;EACI;;;AADJ;EACI;;;AADJ;EACI;;;AA6BI;EACI;;;AADJ;EACI;;;AADJ;EACI;;;AADJ;EACI;;;AADJ;EACI;;;AADJ;EACI;;;AADJ;EACI;;;AAkBZ;EACI;;;AADJ;EACI;;;AADJ;EACI;;;AC3CZ;EACI;EACA;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EAEA;;;AAIJ;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EAEI;EACA;EACA;EAGA;EACA;EACA;EACA;EAEA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;ED2EI;EACA;EACA;EACA;EACA;EACA;EACA;EAuBI;EAKA;EAaQ;EAAA;EAAA;;ACvHZ;EACI;EACA;;AAIJ;EACI;IACI;IACA;;;;AAKZ;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;;;;AAIR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAKJ;ED6RI;EACA;EACA;EACA;EACA;EACA;EACA;EAyBI;EAUA;EAQQ;EAAA;EAAA;EC5UZ;EACA;EACA;EAEA;EACA;;ADgVI;ECvVR;ID2WgB;IAGA;IAoBA;IAUA;IAQQ;IAAA;IAAA;;;AC1YpB;EACI;;AAWJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;IACI;;;;AAOZ;EDfI;EACA;EACA;EACA;EACA;EACA;EACA;EAWI;EAYA;EAUA;EAQQ;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECxBZ;;ADiCI;ECzCR;ID6DgB;IAGA;IAQA;IAOA;IAeA;IAQQ;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;;;AC5FpB;EAGI;EACA;EACA;;AAEA;EAPJ;IAQQ;;;AAYR;EACI;EACA;;AAGJ;EACI;;AAEA;EAHJ;IAIQ;;;AAIR;EACI;EACA;;AAGJ;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAIJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EDzGI;EACA;EACA;EACA;EACA;EACA;EACA;EAuBI;EAUA;EAQQ;EAAA;EAAA;EC4DZ;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EARJ;IASQ;;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EAXJ;IAYQ;IACA;IACA;;;;AAKR;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;;AAKR;EACI;EACA;;;AAGJ;EACI;EACA;EACA","file":"main.css"} \ No newline at end of file diff --git a/css/main_old.css b/css/main_old.css new file mode 100644 index 0000000..8a6948a --- /dev/null +++ b/css/main_old.css @@ -0,0 +1,188 @@ +html, body { + margin: 0; + font-size: 18px; + font-family: 'Montserrat', sans-serif; + /* background: rgb(245, 245, 245); */ + --section-top-bottom-padding: 220px; +} + +main{ + background: rgb(255, 255, 255); +} + +/* main section{ + padding-top: 100px; +} */ + +.landing{ + --height: 100vh; + --bg: none; + --row-repeat: 5; + --row-repeat-size: 20%; + --grid-item-1: 1/1/6/4; + --grid-item-2: 1/1/6/4; + --grid-item-3: 3/2/4/3; + --grid-item-4: 5/2/6/3; + text-align: center; +} + +.landing-background{ + /* /Images/negative-space-laptop-camera-notepad-glass-water-daria-shevtsova.jpg */ + /* filter: grayscale(0.5); */ + filter: blur(0px) grayscale(0); + z-index: -2; + background-image: url(/Images/full-sized/negative-space-laptop-camera-notepad-glass-water-daria-shevtsova.jpg); + background-size: cover; + background-position: center; + animation-duration: 3s; + animation-name: outoffocus; +} + +.landing-text{ + font-size: 3rem; + color: floralwhite; + text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; +} + +.landing-text p{ + text-align: left; + line-height: 10px; + margin-top: 30px; + opacity: 0; + /* animation-duration: 3s; */ + animation: fadeandslidein 2.5s forwards; + /* animation-name: fadeandslidein; */ +} + +@keyframes outoffocus { + from { + filter: grayscale(0.5) blur(10px); + } + + + to { + filter: grayscale(0) blur(0px); + } +} + +/* @keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + to { + margin-left: 0%; + width: 100%; + } +} */ + +@keyframes fadeandslidein { + from { + margin-top: 60px; + opacity: 0; + } + + to { + margin-top: 30px; + opacity: 1; + } +} + +.what{ + /* --height: 100vh; */ + --bg: none; + --row-repeat: 2; + /* --row-repeat-size: 20%; */ + --grid-item-1: 1/2/2/3; + --grid-item-2: 2/2/3/3; + --grid-item-3: 3/2/4/3; + --grid-item-4: 5/2/6/3; + text-align: center; + /* margin-top: 80px; */ + color: white; + /* background-color: rgb(156, 168, 184); */ + /* background-color: rgb(70, 108, 158); */ + background-color: #079F79; + background-color: #F4610B; + background-color: #F4B10B; + background-color: #1351A0; + /* padding: 200px 0; */ +} + +.what p{ + margin: 0 auto; + width: 60%; +} + +.portfolio{ + /* background-color: rgb(156, 168, 184); */ + background-color: white; + /* background-color: #F4B10B; */ + /* margin-top: 200px; */ +} + + + +.card-holder{ + /* --height: 100vh; */ + --bg: none; + --row-repeat: 4; + /* --row-repeat-size: 20%; */ + --grid-item-1: 1/2/2/3; + --grid-item-2: 2/2/3/3; + --grid-item-3: 3/2/4/3; + --grid-item-4: 4/2/5/3; + text-align: center; +} + +.github-projects{ + padding-bottom: 80px; +} + +.blog{ + + /* background-color: rgb(156, 168, 184); */ + /* background-color: rgb(70, 108, 158); */ + /* background-color: #F4B10B; */ + background-color: #1351A0; + /* background-color: #F4610B; */ + /* background-color: #1B31A7; */ + /* background-color: #069888; */ + /* background-color: #079F79; */ + color: white; +} + +#isoblocks, #simplyfit, #quote{ + color: white; +} + +.white-text{ + color: white; +} + +/* footer{ + height: fit-content; + padding: 20px 10px; */ + /* background: grey; */ + /* background-color: rgb(70, 108, 158); */ + /* background-color: #08346D; + color: white; +} */ +/* +footer a{ + color: white; +} + +footer a:hover{ + color: rgb(0, 255, 255); +} */ + +@media screen + and (max-width: 425px){ + + .landing-text{ + font-size: 2rem; + } + +} \ No newline at end of file diff --git a/css/under_construction.css b/css/under_construction.css deleted file mode 100644 index 7def0ce..0000000 --- a/css/under_construction.css +++ /dev/null @@ -1,17 +0,0 @@ -html, body { - margin: 0; - font-size: 18px; - font-family: 'Montserrat', sans-serif; - /* background: rgb(245, 245, 245); */ - --section-top-bottom-padding: 250px; -} - -main{ - height: 50vh; - text-align: center; -} - -main h2{ - padding: 20vh 0; - margin: 0; -} \ No newline at end of file diff --git a/Images/Thumbnail/Cloud Computing 3.svg b/img/Thumbnail/Cloud Computing 3.svg similarity index 100% rename from Images/Thumbnail/Cloud Computing 3.svg rename to img/Thumbnail/Cloud Computing 3.svg diff --git a/Images/Thumbnail/Cloud Computing2.svg b/img/Thumbnail/Cloud Computing2.svg similarity index 100% rename from Images/Thumbnail/Cloud Computing2.svg rename to img/Thumbnail/Cloud Computing2.svg diff --git a/Images/Thumbnail/Design 2.svg b/img/Thumbnail/Design 2.svg similarity index 100% rename from Images/Thumbnail/Design 2.svg rename to img/Thumbnail/Design 2.svg diff --git a/Images/Thumbnail/Design 3.svg b/img/Thumbnail/Design 3.svg similarity index 100% rename from Images/Thumbnail/Design 3.svg rename to img/Thumbnail/Design 3.svg diff --git a/Images/Thumbnail/Design 4.svg b/img/Thumbnail/Design 4.svg similarity index 100% rename from Images/Thumbnail/Design 4.svg rename to img/Thumbnail/Design 4.svg diff --git a/Images/Thumbnail/Design.svg b/img/Thumbnail/Design.svg similarity index 100% rename from Images/Thumbnail/Design.svg rename to img/Thumbnail/Design.svg diff --git a/Images/Thumbnail/FCC Logo.svg b/img/Thumbnail/FCC Logo.svg similarity index 100% rename from Images/Thumbnail/FCC Logo.svg rename to img/Thumbnail/FCC Logo.svg diff --git a/Images/Thumbnail/Quote-pic_ratio_400_resized2.jpg b/img/Thumbnail/Quote-pic_ratio_400_resized2.jpg similarity index 100% rename from Images/Thumbnail/Quote-pic_ratio_400_resized2.jpg rename to img/Thumbnail/Quote-pic_ratio_400_resized2.jpg diff --git a/Images/Thumbnail/Robin Williams_400_resized.jpg b/img/Thumbnail/Robin Williams_400_resized.jpg similarity index 100% rename from Images/Thumbnail/Robin Williams_400_resized.jpg rename to img/Thumbnail/Robin Williams_400_resized.jpg diff --git a/Images/Thumbnail/breakfast-Thumbnail.webp b/img/Thumbnail/breakfast-Thumbnail.webp similarity index 100% rename from Images/Thumbnail/breakfast-Thumbnail.webp rename to img/Thumbnail/breakfast-Thumbnail.webp diff --git a/Images/Thumbnail/code icon 2.svg b/img/Thumbnail/code icon 2.svg similarity index 100% rename from Images/Thumbnail/code icon 2.svg rename to img/Thumbnail/code icon 2.svg diff --git a/Images/Thumbnail/code icon 3.svg b/img/Thumbnail/code icon 3.svg similarity index 100% rename from Images/Thumbnail/code icon 3.svg rename to img/Thumbnail/code icon 3.svg diff --git a/Images/Thumbnail/code icon 5.svg b/img/Thumbnail/code icon 5.svg similarity index 100% rename from Images/Thumbnail/code icon 5.svg rename to img/Thumbnail/code icon 5.svg diff --git a/Images/Thumbnail/fog_ratio_400_resized2.jpg b/img/Thumbnail/fog_ratio_400_resized2.jpg similarity index 100% rename from Images/Thumbnail/fog_ratio_400_resized2.jpg rename to img/Thumbnail/fog_ratio_400_resized2.jpg diff --git a/Images/Thumbnail/python3_ratio_400_resized2.jpg b/img/Thumbnail/python3_ratio_400_resized2.jpg similarity index 100% rename from Images/Thumbnail/python3_ratio_400_resized2.jpg rename to img/Thumbnail/python3_ratio_400_resized2.jpg diff --git a/Images/Thumbnail/sass-thumbnail-logo.png b/img/Thumbnail/sass-thumbnail-logo.png similarity index 100% rename from Images/Thumbnail/sass-thumbnail-logo.png rename to img/Thumbnail/sass-thumbnail-logo.png diff --git a/Images/Thumbnail/simplySass Logo2.svg b/img/Thumbnail/simplySass Logo2.svg similarity index 100% rename from Images/Thumbnail/simplySass Logo2.svg rename to img/Thumbnail/simplySass Logo2.svg diff --git a/Images/Thumbnail/tracker.png b/img/Thumbnail/tracker.png similarity index 100% rename from Images/Thumbnail/tracker.png rename to img/Thumbnail/tracker.png diff --git a/Images/full-sized/About Me Pic2.webp b/img/full-sized/About Me Pic2.webp similarity index 100% rename from Images/full-sized/About Me Pic2.webp rename to img/full-sized/About Me Pic2.webp diff --git a/Images/full-sized/About Me Pic3.webp b/img/full-sized/About Me Pic3.webp similarity index 100% rename from Images/full-sized/About Me Pic3.webp rename to img/full-sized/About Me Pic3.webp diff --git a/img/full-sized/About Me Pic5.webp b/img/full-sized/About Me Pic5.webp new file mode 100644 index 0000000..8c68cf0 Binary files /dev/null and b/img/full-sized/About Me Pic5.webp differ diff --git a/Images/full-sized/Logo A Favicon.svg b/img/full-sized/Logo A Favicon.svg similarity index 100% rename from Images/full-sized/Logo A Favicon.svg rename to img/full-sized/Logo A Favicon.svg diff --git a/Images/full-sized/Logo A Favicon2.svg b/img/full-sized/Logo A Favicon2.svg similarity index 100% rename from Images/full-sized/Logo A Favicon2.svg rename to img/full-sized/Logo A Favicon2.svg diff --git a/Images/full-sized/Logo A Final2.svg b/img/full-sized/Logo A Final2.svg similarity index 100% rename from Images/full-sized/Logo A Final2.svg rename to img/full-sized/Logo A Final2.svg diff --git a/Images/full-sized/Quote-pic.jpg b/img/full-sized/Quote-pic.jpg similarity index 100% rename from Images/full-sized/Quote-pic.jpg rename to img/full-sized/Quote-pic.jpg diff --git a/Images/full-sized/Repeat Customers 2.svg b/img/full-sized/Repeat Customers 2.svg similarity index 100% rename from Images/full-sized/Repeat Customers 2.svg rename to img/full-sized/Repeat Customers 2.svg diff --git a/Images/full-sized/Repeat Customers.svg b/img/full-sized/Repeat Customers.svg similarity index 100% rename from Images/full-sized/Repeat Customers.svg rename to img/full-sized/Repeat Customers.svg diff --git a/Images/full-sized/Web Search 2.svg b/img/full-sized/Web Search 2.svg similarity index 100% rename from Images/full-sized/Web Search 2.svg rename to img/full-sized/Web Search 2.svg diff --git a/Images/full-sized/brand.svg b/img/full-sized/brand.svg similarity index 100% rename from Images/full-sized/brand.svg rename to img/full-sized/brand.svg diff --git a/Images/full-sized/code-desk.jpg b/img/full-sized/code-desk.jpg similarity index 100% rename from Images/full-sized/code-desk.jpg rename to img/full-sized/code-desk.jpg diff --git a/Images/full-sized/code-desk.webp b/img/full-sized/code-desk.webp similarity index 100% rename from Images/full-sized/code-desk.webp rename to img/full-sized/code-desk.webp diff --git a/Images/full-sized/css-puns-web-design-funny-jokes-3.jpg b/img/full-sized/css-puns-web-design-funny-jokes-3.jpg similarity index 100% rename from Images/full-sized/css-puns-web-design-funny-jokes-3.jpg rename to img/full-sized/css-puns-web-design-funny-jokes-3.jpg diff --git a/Images/full-sized/landing4.jpeg b/img/full-sized/landing4.jpeg similarity index 100% rename from Images/full-sized/landing4.jpeg rename to img/full-sized/landing4.jpeg diff --git a/Images/full-sized/me.jpg b/img/full-sized/me.jpg similarity index 100% rename from Images/full-sized/me.jpg rename to img/full-sized/me.jpg diff --git a/Images/full-sized/me2.jpg b/img/full-sized/me2.jpg similarity index 100% rename from Images/full-sized/me2.jpg rename to img/full-sized/me2.jpg diff --git a/Images/full-sized/negative-space-laptop-camera-notepad-glass-water-daria-shevtsova.jpg b/img/full-sized/negative-space-laptop-camera-notepad-glass-water-daria-shevtsova.jpg similarity index 100% rename from Images/full-sized/negative-space-laptop-camera-notepad-glass-water-daria-shevtsova.jpg rename to img/full-sized/negative-space-laptop-camera-notepad-glass-water-daria-shevtsova.jpg diff --git a/Images/full-sized/place holder.png b/img/full-sized/place holder.png similarity index 100% rename from Images/full-sized/place holder.png rename to img/full-sized/place holder.png diff --git a/Images/full-sized/python.jpg b/img/full-sized/python.jpg similarity index 100% rename from Images/full-sized/python.jpg rename to img/full-sized/python.jpg diff --git a/Images/full-sized/python3.jpg b/img/full-sized/python3.jpg similarity index 100% rename from Images/full-sized/python3.jpg rename to img/full-sized/python3.jpg diff --git a/Images/full-sized/sass-thumbnail-logo.png b/img/full-sized/sass-thumbnail-logo.png similarity index 100% rename from Images/full-sized/sass-thumbnail-logo.png rename to img/full-sized/sass-thumbnail-logo.png diff --git a/Images/full-sized/screenshot.png b/img/full-sized/screenshot.png similarity index 100% rename from Images/full-sized/screenshot.png rename to img/full-sized/screenshot.png diff --git a/Images/full-sized/screenshot2.png b/img/full-sized/screenshot2.png similarity index 100% rename from Images/full-sized/screenshot2.png rename to img/full-sized/screenshot2.png diff --git a/Images/large-sized/me2_ratio_400_resized.jpg b/img/large-sized/me2_ratio_400_resized.jpg similarity index 100% rename from Images/large-sized/me2_ratio_400_resized.jpg rename to img/large-sized/me2_ratio_400_resized.jpg diff --git a/Images/small-sized/me2_ratio_200_resized.jpg b/img/small-sized/me2_ratio_200_resized.jpg similarity index 100% rename from Images/small-sized/me2_ratio_200_resized.jpg rename to img/small-sized/me2_ratio_200_resized.jpg diff --git a/index.html b/index.html index c15b160..a3113a2 100644 --- a/index.html +++ b/index.html @@ -13,11 +13,11 @@ - + - - + +
+ 
+ 
+ 
+ 
-
+
If you want to see what simplySass is capable of, this page will help you get started.
- View Page > + View Page >
+ 
A product page for the Free Code Camp.
@@ -142,7 +142,7 @@