diff options
| -rw-r--r-- | index.css | 109 | ||||
| -rw-r--r-- | index.html | 51 | ||||
| -rw-r--r-- | index.js | 16 | ||||
| -rwxr-xr-x | resume.css | 7 |
4 files changed, 99 insertions, 84 deletions
@@ -1,72 +1,75 @@ - body { - width: 100vw; + width: 60vw; height: 100vh; - font-family: Consolas, monaco, monospace; + font-family: Arial, Helvetica, sans-serif; font-size: 16px; - background-color: #231f1d; - color: white; + background-color: white; + color: black; padding: 0; - margin: 0; + margin: auto; - display: flex; - flex-direction: column; - align-items: center; } header { - text-align: center; - width: 60%; + width: 100%; } header > h1 { - font-family: Georgia, sans-serif; - font-weight: normal; - font-size: 30px; + font-weight: bold; + font-size: 3rem; padding-top: 1rem; padding-bottom: 0.5rem; margin: 0; - letter-spacing: 0.25rem; - border-bottom: 1px solid white; } header > nav { - font-family: Georgia, sans-serif; - padding-top: 0.5rem; + padding-top: 0.5rem; + padding-bottom: 1rem; + padding-left: 0.25rem; + border-bottom: 1px solid lightgray; } header > nav > ul { display: flex; flex-direction: row; - align-items: center; - justify-content: space-evenly; list-style-type: none; margin: 0; padding: 0; } +header > nav > ul > li { + padding-right: 1rem; +} + header > nav > ul a { text-decoration: none; - color: inherit; - font-size: 16px; + color: blueviolet; + font-size: 1.5rem; border-bottom: 1px solid transparent; - transition: border-color 100ms linear; - transition: opacity 100ms linear; } header > nav > ul a:hover { - opacity: 0.8; - border-color: white; + opacity: 0.7; +} + +h2 { + font-size: 1.5rem; +} + +section { + width: 100%; } -#landing_page { +p { text-align: center; - flex: 1 1 100%; - width: 50%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; +} + +section a { + color: blueviolet; +} + +section a:hover { + opacity: 0.7; } /* Carousel styling */ @@ -74,19 +77,20 @@ header > nav > ul a:hover { width: 100%; position: relative; overflow: hidden; + padding-top: 1rem; + padding-bottom: 1rem; } #carousel > button { position: absolute; - top: calc(50% - 2rem); - font-size: 4rem; + top: calc(50% - 3rem); + font-size: 6rem; border: none; background-color: transparent; - color: white; } #carousel > button:hover { - opacity: 0.8; + opacity: 0.5; cursor: pointer; } @@ -103,12 +107,12 @@ header > nav > ul a:hover { display: flex; flex-direction: row; height: 100%; - transition: transform 100ms linear; + transition: transform 50ms linear; } .carousel_image { width: 240px; - transition: opacity 100ms linear; + transition: opacity 50ms linear; padding: 0; margin: 0; padding-right: 12px; @@ -171,10 +175,13 @@ input:focus { width: 50%; display: flex; align-items: center; - justify-content: space-evenly; bottom: 1rem; } +#theme_selector > label { + font-weight: bold; +} + #theme_selector > button { width: 5rem; height: 2rem; @@ -184,6 +191,8 @@ input:focus { background-color: white; cursor: pointer; transition: opacity 100ms linear; + margin-right: 1rem; + margin-left: 1rem; } #theme_selector > button:hover { @@ -200,23 +209,7 @@ input:focus { /* Phone screen adjustments */ @media only screen and (device-width: 1280px), only screen and (max-width:1280px) { - body { - font-size: 12px; - } - - header { - width: 90%; + header > h1 { + font-size: 1.5rem; } - - section { - width: 100%; - } - - #landing_page { - width: 75%; - } - - #theme_selector { - width: 90%; - } } @@ -8,20 +8,20 @@ <link rel="shortcut icon" href="/favicon/favicon.ico" type="image/x-icon"> </head> <body> - <div id="theme_container"> - <canvas id="theme_canvas"></canvas> - </div> - - <header> - <h1>Matthew Kosarek</h1> - <nav> - <ul> - <li><a href='/'>🏡 Home</a></li> - <li><a href='/resume.html'>📘 CV</a></li> - <li style="display: none;"><a href='/posts.html'>📝 Posts</a></li> - </ul> - </nav> - </header> + <div id="theme_container"> + <canvas id="theme_canvas"></canvas> + </div> + + <header> + <h1>Matthew Kosarek</h1> + <nav> + <ul> + <li><a href='/'>🏡 Home</a></li> + <li><a href='/resume.html'>📘 CV</a></li> + <li style="display: none;"><a href='/posts.html'>📝 Posts</a></li> + </ul> + </nav> + </header> <section id='landing_page'> <p> @@ -52,17 +52,24 @@ </p> <p> - My name is Matthew Kosarek. I am a computer programmer currently living in Montreal. I keep my CV up to date on this website. - You can find a link to my Github <a href='https://github.com/mattkae'>here</a>. I am also building a website about physics simulation in video games which you can find <a href='https://physicsforgames.com/'>here</a>. + My name is Matthew Kosarek. I am a computer programmer from New Jersey and currently living in Montreal. I keep my CV up to date on this website, and also + provide some links to some other thinks that I am currently up to. I also have fun building themes in WASM/WebGL when I find the time. </p> - <br/> + </section> + <section> + <h2>Links</h2> + <ul> + <li><a href="https://github.com/mattkae">Github</a>: my personal github with most of my projects</li> + <li><a href="https://git.matthewkosarek.xyz">CGit</a>: my self-hosted git instance with a few of my projects</li> + <li><a href="https://physicsforgames.com">physicsforgames.com</a>: a project that I'm currently working on in my spare time where I explore the world of realtime physics</li> + </ul> </section> - <div id="theme_selector"> - <label>Theme:</label> - <button id="theme_button_default">Default</button> - <button id="theme_button_autumn">Autumn</button> - </div> + <div id="theme_selector"> + <label>Theme:</label> + <button id="theme_button_default">Default</button> + <button id="theme_button_autumn">Autumn</button> + </div> </body> <script src='/index.js'></script> @@ -2,6 +2,22 @@ function main() { runCarousel(); runPosts(); + + // -- Note! We require a black background to properly see the WebGL, so we handle that here. + var bodyElement = document.querySelector('body'); + var themeButtonList = document.querySelectorAll('#theme_selector > button'); + themeButtonList.forEach(function(themeButton) { + if (themeButton.id !== 'theme_button_default') { + themeButton.addEventListener('click', function() { + bodyElement.style.background = 'black'; + }); + } + else { + themeButton.addEventListener('click', function() { + bodyElement.style.background = 'white'; + }); + } + }) } function runCarousel() { @@ -1,6 +1,5 @@ body { font-size: 14px !important; - width: 100%; } header { @@ -16,20 +15,19 @@ header { } #resume { - width: 80%; position: relative; text-align: left; background-color: white; border-radius: 2px; color: black; - padding: 2rem; font-family: Arial,Helvetica Neue,Helvetica,sans-serif !important; line-height: 1.2rem; + padding-bottom: 1rem; } #resume_button_container { position: absolute; - top: 1rem; + top: 0; right: 1rem; text-align: right; @@ -49,6 +47,7 @@ header { position: fixed; top: 0; left: 0; + padding: 2rem; width: calc(100vw - 4rem); height: calc(100vh - 4rem); overflow: auto; |