<html>
<head>
+ <base href="http://ibis:3000" target="_top">
<link rel="stylesheet" href="/res/reset.css" />
<link rel="stylesheet" href="/res/style.css" />
<body class="green">
<main>
- <menu id="menu" class="top">
+ <header id="menu" class="top">
<div id="avatar"><a href="/" data-color="yellow" class="home"><img src="/res/face.png"></img></a></div></a>
<div id="name"><a href="/" data-color="yellow" class="home"><h1>Jack Kinsey</h1></a></div>
<nav id="links">
<li><a href="/writing" class="" data-color="pink" data-name="writing">Writing</a></li>
<li><a href="/code" class="" data-color="blue" data-name="code">Code</a></li>
<li><a href="/about" class="selected" data-color="green" data-name="about">About</a></li>
- <li><a href="/kinsey17-resume.pdf" data-name="resume">Résumé</a></li>
+ <li><a href="/res/files/resume.pdf" data-name="resume">Résumé</a></li>
</ul>
</nav>
- </menu>
+ </header>
<div id="content">
<article id="writing" class="hidden">
- <div class="left">
- Writing. Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ <div>
+ <h2><a href="http://blog.jkinsey.net/">My tumblr.</a></h2>
+ <p>Game reviews and analysis, the details of whatever project I'm currently working on, and random updates whenever I do something cool enough that I think it merits description.</p>
</div>
- <div class="right">
- Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ <div>
+ <h2><a href="http://sites.psu.edu/jackkinseycivicissue/">Liberal elitism, and other civic issues.</a></h2>
+ <p>A few short essays discussing the idea of 'liberal elitism,' a subject of much debate in connection with the election of Donald Trump as President.</p>
+ </div>
+ <div>
+ <h2><a href="/res/files/epidemic.pdf">The unifying impact of the AIDS epidemic.</a></h2>
+ <p>An overview and discussion of the broad changes in the LGBTQ community resulting from the HIV/AIDS epidemic in the 80s and 90s.</p>
+ </div>
+ <div>
+ <h2><a href="/res/files/klk.pdf">The confusing and bombastic nudity of <em>Kill la Kill</em>.</a></h2>
+ <p>A brief analysis of the anime <em>Kill la Kill</em> using feminist tools, notably the concepts of objectification and the sexualization of violence. </p>
+ </div>
+ <div>
+ <h2><a href="/res/files/homelessness.pdf">Chronic homelessness: interviewing the future's home.</a></h2>
+ <p>An introduction to the problem of homelessness in the United States, focusing specifically on chronic homelessness, and a brief discussion of potential unusual solutions to housing shortages. Typeset in LaTeX.</p>
+ </div>
+ <div>
+ <h2><a href="http://personal.psu.edu/jfk5379/homelessness/">Homelessness in the United States.</a></h2>
+ <p>A website designed to deliver key facts about homelessness in the United States to casual viewers, using select government publications as reputable sources of high-quality information.</p>
</div>
</article>
<article id="code" class="hidden">
- <div class="left">
- Code. Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ <div>
+ <h2><a href="http://www.jkinsey.net/asterisk/">Project "<em>Asterisk</em>" beta</a></h2>
+ <p>A small 3D game prototype developed in JavaScript for the browser with <a href="https://threejs.org/">Three.js</a>.I <a href="http://blog.jkinsey.net/tagged/asterisk/chrono">blogged</a> about its development over the course of several weeks, but many details remain unrevealed.</p>
</div>
- <div class="right">
- Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ <div>
+ <h2><a href="https://github.com/jackkinsey/godfather">Godfather</a></h2>
+ <p>The final project for my CMPSC 122 (intro to algorithms and data structures) course at Penn State. Written in C++, we had to convert faux airport data into statistics on planes landed, departed, crashed, and so on. Hosted on GitHub.</p>
+ </div>
+ <div>
+ <h2><a href="">Other 122 work</a></h2>
+ <p>Smaller C++ programs also written for CMPSC 122. We had to write an email address validator, a dynamic array implemented with a physical array, and a dynamic array implemented with a linked list. Not the most exciting of projects, but I'm proud of the code quality.</p>
+ </div>
+ <div>
+ <h2><a href="https://github.com/jackkinsey/child-scare-kills">Child Scare Kills</a></h2>
+ <p>A 2D WarioWare-style browser game written in JavaScript using <a href="https://threejs.org/">Three.js</a>. Developed with <a href="https://liammcfalls.tumblr.com/">Liam McFalls</a> for a child care class in high school, so it's a bit goofy.</p>
</div>
</article>
<article id="about" class="selected">
- <div class="left">
- About. Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
- </div>
- <div class="right">
- Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ <div>
+ <h2>A short history.</h2>
+ <p>Born and raised in Lancaster, Pennsylvania. I attended Conestoga Valley High School as part of the Class of 2016. I now attend Penn State University at University Park, with the intent to graduate in 2019. My passions have always included media of all kinds and computers; I’ve been programming in some form since 2012, and I’ve been thinking and writing about stories nearly my entire life.</p>
</div>
</article>
</div>
<html>
<head>
+ <base href="http://ibis:3000" target="_top">
<link rel="stylesheet" href="/res/reset.css" />
<link rel="stylesheet" href="/res/style.css" />
<body class="blue">
<main>
- <menu id="menu" class="top">
+ <header id="menu" class="top">
<div id="avatar"><a href="/" data-color="yellow" class="home"><img src="/res/face.png"></img></a></div></a>
<div id="name"><a href="/" data-color="yellow" class="home"><h1>Jack Kinsey</h1></a></div>
<nav id="links">
<li><a href="/writing" class="" data-color="pink" data-name="writing">Writing</a></li>
<li><a href="/code" class="selected" data-color="blue" data-name="code">Code</a></li>
<li><a href="/about" class="" data-color="green" data-name="about">About</a></li>
- <li><a href="/kinsey17-resume.pdf" data-name="resume">Résumé</a></li>
+ <li><a href="/res/files/resume.pdf" data-name="resume">Résumé</a></li>
</ul>
</nav>
- </menu>
+ </header>
<div id="content">
<article id="writing" class="hidden">
- <div class="left">
- Writing. Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ <div>
+ <h2><a href="http://blog.jkinsey.net/">My tumblr.</a></h2>
+ <p>Game reviews and analysis, the details of whatever project I'm currently working on, and random updates whenever I do something cool enough that I think it merits description.</p>
</div>
- <div class="right">
- Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ <div>
+ <h2><a href="http://sites.psu.edu/jackkinseycivicissue/">Liberal elitism, and other civic issues.</a></h2>
+ <p>A few short essays discussing the idea of 'liberal elitism,' a subject of much debate in connection with the election of Donald Trump as President.</p>
+ </div>
+ <div>
+ <h2><a href="/res/files/epidemic.pdf">The unifying impact of the AIDS epidemic.</a></h2>
+ <p>An overview and discussion of the broad changes in the LGBTQ community resulting from the HIV/AIDS epidemic in the 80s and 90s.</p>
+ </div>
+ <div>
+ <h2><a href="/res/files/klk.pdf">The confusing and bombastic nudity of <em>Kill la Kill</em>.</a></h2>
+ <p>A brief analysis of the anime <em>Kill la Kill</em> using feminist tools, notably the concepts of objectification and the sexualization of violence. </p>
+ </div>
+ <div>
+ <h2><a href="/res/files/homelessness.pdf">Chronic homelessness: interviewing the future's home.</a></h2>
+ <p>An introduction to the problem of homelessness in the United States, focusing specifically on chronic homelessness, and a brief discussion of potential unusual solutions to housing shortages. Typeset in LaTeX.</p>
+ </div>
+ <div>
+ <h2><a href="http://personal.psu.edu/jfk5379/homelessness/">Homelessness in the United States.</a></h2>
+ <p>A website designed to deliver key facts about homelessness in the United States to casual viewers, using select government publications as reputable sources of high-quality information.</p>
</div>
</article>
<article id="code" class="selected">
- <div class="left">
- Code. Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ <div>
+ <h2><a href="http://www.jkinsey.net/asterisk/">Project "<em>Asterisk</em>" beta</a></h2>
+ <p>A small 3D game prototype developed in JavaScript for the browser with <a href="https://threejs.org/">Three.js</a>.I <a href="http://blog.jkinsey.net/tagged/asterisk/chrono">blogged</a> about its development over the course of several weeks, but many details remain unrevealed.</p>
</div>
- <div class="right">
- Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ <div>
+ <h2><a href="https://github.com/jackkinsey/godfather">Godfather</a></h2>
+ <p>The final project for my CMPSC 122 (intro to algorithms and data structures) course at Penn State. Written in C++, we had to convert faux airport data into statistics on planes landed, departed, crashed, and so on. Hosted on GitHub.</p>
+ </div>
+ <div>
+ <h2><a href="">Other 122 work</a></h2>
+ <p>Smaller C++ programs also written for CMPSC 122. We had to write an email address validator, a dynamic array implemented with a physical array, and a dynamic array implemented with a linked list. Not the most exciting of projects, but I'm proud of the code quality.</p>
+ </div>
+ <div>
+ <h2><a href="https://github.com/jackkinsey/child-scare-kills">Child Scare Kills</a></h2>
+ <p>A 2D WarioWare-style browser game written in JavaScript using <a href="https://threejs.org/">Three.js</a>. Developed with <a href="https://liammcfalls.tumblr.com/">Liam McFalls</a> for a child care class in high school, so it's a bit goofy.</p>
</div>
</article>
<article id="about" class="hidden">
- <div class="left">
- About. Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
- </div>
- <div class="right">
- Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ <div>
+ <h2>A short history.</h2>
+ <p>Born and raised in Lancaster, Pennsylvania. I attended Conestoga Valley High School as part of the Class of 2016. I now attend Penn State University at University Park, with the intent to graduate in 2019. My passions have always included media of all kinds and computers; I’ve been programming in some form since 2012, and I’ve been thinking and writing about stories nearly my entire life.</p>
</div>
</article>
</div>
<html>
<head>
+ <base href="http://ibis:3000" target="_top">
<link rel="stylesheet" href="/res/reset.css" />
<link rel="stylesheet" href="/res/style.css" />
<body class="yellow">
<main>
- <menu id="menu" class="middle">
+ <header id="menu" class="middle">
<div id="avatar"><a href="/" data-color="yellow" class="home"><img src="/res/face.png"></img></a></div></a>
<div id="name"><a href="/" data-color="yellow" class="home"><h1>Jack Kinsey</h1></a></div>
<nav id="links">
<li><a href="/writing" class="" data-color="pink" data-name="writing">Writing</a></li>
<li><a href="/code" class="" data-color="blue" data-name="code">Code</a></li>
<li><a href="/about" class="" data-color="green" data-name="about">About</a></li>
- <li><a href="/kinsey17-resume.pdf" data-name="resume">Résumé</a></li>
+ <li><a href="/res/files/resume.pdf" data-name="resume">Résumé</a></li>
</ul>
</nav>
- </menu>
+ </header>
<div id="content">
<article id="writing" class="hidden">
- <div class="left">
- Writing. Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ <div>
+ <h2><a href="http://blog.jkinsey.net/">My tumblr.</a></h2>
+ <p>Game reviews and analysis, the details of whatever project I'm currently working on, and random updates whenever I do something cool enough that I think it merits description.</p>
</div>
- <div class="right">
- Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ <div>
+ <h2><a href="http://sites.psu.edu/jackkinseycivicissue/">Liberal elitism, and other civic issues.</a></h2>
+ <p>A few short essays discussing the idea of 'liberal elitism,' a subject of much debate in connection with the election of Donald Trump as President.</p>
+ </div>
+ <div>
+ <h2><a href="/res/files/epidemic.pdf">The unifying impact of the AIDS epidemic.</a></h2>
+ <p>An overview and discussion of the broad changes in the LGBTQ community resulting from the HIV/AIDS epidemic in the 80s and 90s.</p>
+ </div>
+ <div>
+ <h2><a href="/res/files/klk.pdf">The confusing and bombastic nudity of <em>Kill la Kill</em>.</a></h2>
+ <p>A brief analysis of the anime <em>Kill la Kill</em> using feminist tools, notably the concepts of objectification and the sexualization of violence. </p>
+ </div>
+ <div>
+ <h2><a href="/res/files/homelessness.pdf">Chronic homelessness: interviewing the future's home.</a></h2>
+ <p>An introduction to the problem of homelessness in the United States, focusing specifically on chronic homelessness, and a brief discussion of potential unusual solutions to housing shortages. Typeset in LaTeX.</p>
+ </div>
+ <div>
+ <h2><a href="http://personal.psu.edu/jfk5379/homelessness/">Homelessness in the United States.</a></h2>
+ <p>A website designed to deliver key facts about homelessness in the United States to casual viewers, using select government publications as reputable sources of high-quality information.</p>
</div>
</article>
<article id="code" class="hidden">
- <div class="left">
- Code. Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ <div>
+ <h2><a href="http://www.jkinsey.net/asterisk/">Project "<em>Asterisk</em>" beta</a></h2>
+ <p>A small 3D game prototype developed in JavaScript for the browser with <a href="https://threejs.org/">Three.js</a>.I <a href="http://blog.jkinsey.net/tagged/asterisk/chrono">blogged</a> about its development over the course of several weeks, but many details remain unrevealed.</p>
+ </div>
+ <div>
+ <h2><a href="https://github.com/jackkinsey/godfather">Godfather</a></h2>
+ <p>The final project for my CMPSC 122 (intro to algorithms and data structures) course at Penn State. Written in C++, we had to convert faux airport data into statistics on planes landed, departed, crashed, and so on. Hosted on GitHub.</p>
+ </div>
+ <div>
+ <h2><a href="">Other 122 work</a></h2>
+ <p>Smaller C++ programs also written for CMPSC 122. We had to write an email address validator, a dynamic array implemented with a physical array, and a dynamic array implemented with a linked list. Not the most exciting of projects, but I'm proud of the code quality.</p>
</div>
- <div class="right">
- Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ <div>
+ <h2><a href="https://github.com/jackkinsey/child-scare-kills">Child Scare Kills</a></h2>
+ <p>A 2D WarioWare-style browser game written in JavaScript using <a href="https://threejs.org/">Three.js</a>. Developed with <a href="https://liammcfalls.tumblr.com/">Liam McFalls</a> for a child care class in high school, so it's a bit goofy.</p>
</div>
</article>
<article id="about" class="hidden">
- <div class="left">
- About. Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ <div>
+ <h2>A short history.</h2>
+ <p>Born and raised in Lancaster, Pennsylvania. I attended Conestoga Valley High School as part of the Class of 2016. I now attend Penn State University at University Park as a Computer Science major, with the intent to graduate in 2019. My passions have always included media of all kinds and computers; I've been programming in some form since 2012, and I've been thinking and writing about stories nearly my entire life.</p>
+ <p>In recent years I've developed a particular interest in Linux and open source software, and I've been working towards developing my skills in the hopes of contributing back to the FOSS community. I also care deeply about video games as an art form and source of potential for social change.</p>
</div>
- <div class="right">
- Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ <div>
+ <h2>Social media.</h2>
+ <p></p>
</div>
</article>
</div>
background:url(stars.png);
}
-menu {
+header {
position:absolute;
width:400px;
height:400px;
/*background-color:black;*/
}
-menu > div > a {
+header > div > a {
color:inherit;
text-decoration:none;
}
-menu.middle {
+header.middle {
left:calc(50% - 200px);
top:calc(50% - 400px);
height:400px;
}
-menu.top {
+header.top {
left:calc(50% - 200px);
top:10px;
height:100px;
}
-menu, menu > *, menu img, article {
+header, header > *, header img, article {
transition:all .6s cubic-bezier(0.23, 1, 0.32, 1);
}
-menu.middle #avatar {
+header.middle #avatar {
display:block;
position:absolute;
right:0px;
/*background-color:lightgrey;*/
}
-menu.middle #avatar img {
+header.middle #avatar img {
width:256px;
height:256px;
margin:22px;
border-radius:50%;
}
-menu.middle #name {
+header.middle #name {
position:absolute;
right:0px;
bottom:50px;
font-size:3em;
}
-menu.middle #name h1 {
+header.middle #name h1 {
display:block;
width:100%;
height:50px;
text-align:center;
}
-menu.top #avatar {
+header.top #avatar {
display:inline-block;
position:absolute;
right:300px;
/*background-color:lightgrey;*/
}
-menu.top #avatar img {
+header.top #avatar img {
display:inline-block;
width:50px;
height:50px;
border-radius:50%;
}
-menu.top #name {
+header.top #name {
display:inline-block;
position:absolute;
right:0px;
font-size:2.5em;
}
-menu.top #name h1 {
+header.top #name h1 {
display:inline-block;
width:100%;
height:50px;
text-align:center;
}
-menu nav {
+header nav {
position:absolute;
right:0px;
bottom:0px;
flex-direction:column;
}
-menu nav ul {
+header nav ul {
display:flex;
flex-direction:row;
width:400px;
height:50px;
}
-menu nav ul li {
+header nav ul li {
display:inline-block;
text-align:center;
width:25%;
line-height:50px;
}
-menu nav ul li a:link, menu nav ul li a:visited {
+header nav ul li a:link, header nav ul li a:visited {
text-decoration:none;
color:inherit;
}
-menu nav ul li a:hover, menu nav ul li a.selected {
+header nav ul li a:hover, header nav ul li a.selected {
text-decoration:underline;
}
article {
display:flex;
flex-direction:row;
+ flex-wrap:wrap;
justify-content:space-between;
position:absolute;
top:150px;
top:200px;
}
-article > div {
- width:375px;
- text-align:justify;
+article div {
+ width:350px;
+ margin:25px;
+}
+
+article div h2 {
+ margin-bottom:5px;
+ font-size:1.5em;
+}
+
+article div h2 a:link, article div h2 a:visited {
+ color:inherit;
+}
+
+article div h2 a:hover {
+}
+
+article div p {
+ margin-top:5px;
+ font-weight:bold;
+}
+
+article div p a:link, article div p a:visited {
+ color:inherit;
+}
+
+article div p a:hover {
+}
+
+#about div {
+ width:600px;
+ margin:25px 100px 25px 100px;
+}
+
+#about div h2 {
+
+}
+
+#about div p {
+
}
<html>
<head>
+ <base href="http://ibis:3000" target="_top">
<link rel="stylesheet" href="/res/reset.css" />
<link rel="stylesheet" href="/res/style.css" />
<body class="pink">
<main>
- <menu id="menu" class="top">
+ <header id="menu" class="top">
<div id="avatar"><a href="/" data-color="yellow" class="home"><img src="/res/face.png"></img></a></div></a>
<div id="name"><a href="/" data-color="yellow" class="home"><h1>Jack Kinsey</h1></a></div>
<nav id="links">
<li><a href="/writing" class="selected" data-color="pink" data-name="writing">Writing</a></li>
<li><a href="/code" class="" data-color="blue" data-name="code">Code</a></li>
<li><a href="/about" class="" data-color="green" data-name="about">About</a></li>
- <li><a href="/kinsey17-resume.pdf" data-name="resume">Résumé</a></li>
+ <li><a href="/res/files/resume.pdf" data-name="resume">Résumé</a></li>
</ul>
</nav>
- </menu>
+ </header>
<div id="content">
<article id="writing" class="selected">
- <div class="left">
- Writing. Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ <div>
+ <h2><a href="http://blog.jkinsey.net/">My tumblr.</a></h2>
+ <p>Game reviews and analysis, the details of whatever project I'm currently working on, and random updates whenever I do something cool enough that I think it merits description.</p>
</div>
- <div class="right">
- Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ <div>
+ <h2><a href="http://sites.psu.edu/jackkinseycivicissue/">Liberal elitism, and other civic issues.</a></h2>
+ <p>A few short essays discussing the idea of 'liberal elitism,' a subject of much debate in connection with the election of Donald Trump as President.</p>
+ </div>
+ <div>
+ <h2><a href="/res/files/epidemic.pdf">The unifying impact of the AIDS epidemic.</a></h2>
+ <p>An overview and discussion of the broad changes in the LGBTQ community resulting from the HIV/AIDS epidemic in the 80s and 90s.</p>
+ </div>
+ <div>
+ <h2><a href="/res/files/klk.pdf">The confusing and bombastic nudity of <em>Kill la Kill</em>.</a></h2>
+ <p>A brief analysis of the anime <em>Kill la Kill</em> using feminist tools, notably the concepts of objectification and the sexualization of violence. </p>
+ </div>
+ <div>
+ <h2><a href="/res/files/homelessness.pdf">Chronic homelessness: interviewing the future's home.</a></h2>
+ <p>An introduction to the problem of homelessness in the United States, focusing specifically on chronic homelessness, and a brief discussion of potential unusual solutions to housing shortages. Typeset in LaTeX.</p>
+ </div>
+ <div>
+ <h2><a href="http://personal.psu.edu/jfk5379/homelessness/">Homelessness in the United States.</a></h2>
+ <p>A website designed to deliver key facts about homelessness in the United States to casual viewers, using select government publications as reputable sources of high-quality information.</p>
</div>
</article>
<article id="code" class="hidden">
- <div class="left">
- Code. Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
+ <div>
+ <h2><a href="http://www.jkinsey.net/asterisk/">Project "<em>Asterisk</em>" beta</a></h2>
+ <p>A small 3D game prototype developed in JavaScript for the browser with <a href="https://threejs.org/">Three.js</a>.I <a href="http://blog.jkinsey.net/tagged/asterisk/chrono">blogged</a> about its development over the course of several weeks, but many details remain unrevealed.</p>
</div>
- <div class="right">
- Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ <div>
+ <h2><a href="https://github.com/jackkinsey/godfather">Godfather</a></h2>
+ <p>The final project for my CMPSC 122 (intro to algorithms and data structures) course at Penn State. Written in C++, we had to convert faux airport data into statistics on planes landed, departed, crashed, and so on. Hosted on GitHub.</p>
+ </div>
+ <div>
+ <h2><a href="">Other 122 work</a></h2>
+ <p>Smaller C++ programs also written for CMPSC 122. We had to write an email address validator, a dynamic array implemented with a physical array, and a dynamic array implemented with a linked list. Not the most exciting of projects, but I'm proud of the code quality.</p>
+ </div>
+ <div>
+ <h2><a href="https://github.com/jackkinsey/child-scare-kills">Child Scare Kills</a></h2>
+ <p>A 2D WarioWare-style browser game written in JavaScript using <a href="https://threejs.org/">Three.js</a>. Developed with <a href="https://liammcfalls.tumblr.com/">Liam McFalls</a> for a child care class in high school, so it's a bit goofy.</p>
</div>
</article>
<article id="about" class="hidden">
- <div class="left">
- About. Lorem ipsum dolor sit amet, consecteteur adipiscing. Id. Id velit ligula in suscipit quisque libero ac arcu id. Ut, torquent curae nam. Tempus mi. Cras, et. Iaculis a, rutrum etiam quam, cras senectus auctor, class iaculis nostra, venenatis. Egestas. Tempus urna orci imperdiet accumsan rutrum varius. Elit luctus. Quisque ad, velit platea felis ad. Lorem hymenaeos habitant.
- </div>
- <div class="right">
- Magna consequat nonummy consectetuer. Urna. Tempus dui orci vestibulum ad, lobortis est, feugiat eu, mattis inceptos risus in, ultricies massa ultricies. Mollis faucibus porta et. Fringilla. Ac dolor. Pede at elit ridiculus ut risus nec metus consequat mus, dignissim luctus justo risus. Pede. Diam eleifend cras, vivamus a. Nec, vehicula nonummy egestas taciti purus, vehicula sem. Rutrum et lobortis magna consectetuer, ultricies.
+ <div>
+ <h2>A short history.</h2>
+ <p>Born and raised in Lancaster, Pennsylvania. I attended Conestoga Valley High School as part of the Class of 2016. I now attend Penn State University at University Park, with the intent to graduate in 2019. My passions have always included media of all kinds and computers; I’ve been programming in some form since 2012, and I’ve been thinking and writing about stories nearly my entire life.</p>
</div>
</article>
</div>
projects / jkinsey.net.git / commitdiff