summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--index.css109
-rw-r--r--index.html51
-rw-r--r--index.js16
-rwxr-xr-xresume.css7
4 files changed, 99 insertions, 84 deletions
diff --git a/index.css b/index.css
index 76b7187..a77f5d1 100644
--- a/index.css
+++ b/index.css
@@ -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%;
- }
}
diff --git a/index.html b/index.html
index f76e3ab..fbee791 100644
--- a/index.html
+++ b/index.html
@@ -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='/'>&#127969; Home</a></li>
- <li><a href='/resume.html'>&#128216; CV</a></li>
- <li style="display: none;"><a href='/posts.html'>&#128221; 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='/'>&#127969; Home</a></li>
+ <li><a href='/resume.html'>&#128216; CV</a></li>
+ <li style="display: none;"><a href='/posts.html'>&#128221; 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>
diff --git a/index.js b/index.js
index 72fcc2e..fbe9ba9 100644
--- a/index.js
+++ b/index.js
@@ -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() {
diff --git a/resume.css b/resume.css
index d580d80..6d0e45f 100755
--- a/resume.css
+++ b/resume.css
@@ -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;