projects / jkinsey.net.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 4bbfb02)
subpage setup
authorJack Kinsey <j.jameskinsey@gmail.com>
Sat, 22 Apr 2017 21:50:14 +0000 (17:50 -0400)
committerJack Kinsey <j.jameskinsey@gmail.com>
Sat, 22 Apr 2017 21:50:14 +0000 (17:50 -0400)
about/index.html [new file with mode: 0644] patch | blob
code/index.html [new file with mode: 0644] patch | blob
index.html patch | blob | blame | history
js/script.js patch | blob | blame | history
res/face.png [new file with mode: 0644] patch | blob
res/style.css patch | blob | blame | history
writing/index.html [new file with mode: 0644] patch | blob

diff --git a/about/index.html b/about/index.html
new file mode 100644 (file)
index 0000000..feed348
--- /dev/null
+++ b/about/index.html
@@ -0,0 +1,30 @@
+<html>
+    <head>
+        <link rel="stylesheet" href="res/reset.css" />
+        <link rel="stylesheet" href="res/style.css" />
+
+        <script src="js/script.js"></script>
+
+        <title>Jack Kinsey</title>
+    </head>
+    <body>
+
+        <menu id="menu" class="middle">
+            <div id="avatar"><img src="res/face.png"></img></div>
+            <div id="name"><h1>Jack Kinsey</h1></div>
+            <nav id="links">
+                <ul>
+                    <li><a href="/writing" data-name="writing">Writing</a></li>
+                    <li><a href="/code" data-name="code">Code</a></li>
+                    <li><a href="/about" data-name="about">About</a></li>
+                    <li><a href="/kinsey17-resume.pdf" data-name="resume">R&eacute;sum&eacute;</a></li>
+                </ul>
+            </nav>
+        </menu>
+
+        <article></article>
+        <article></article>
+        <article></article>
+
+    </body>
+</html>
diff --git a/code/index.html b/code/index.html
new file mode 100644 (file)
index 0000000..feed348
--- /dev/null
+++ b/code/index.html
@@ -0,0 +1,30 @@
+<html>
+    <head>
+        <link rel="stylesheet" href="res/reset.css" />
+        <link rel="stylesheet" href="res/style.css" />
+
+        <script src="js/script.js"></script>
+
+        <title>Jack Kinsey</title>
+    </head>
+    <body>
+
+        <menu id="menu" class="middle">
+            <div id="avatar"><img src="res/face.png"></img></div>
+            <div id="name"><h1>Jack Kinsey</h1></div>
+            <nav id="links">
+                <ul>
+                    <li><a href="/writing" data-name="writing">Writing</a></li>
+                    <li><a href="/code" data-name="code">Code</a></li>
+                    <li><a href="/about" data-name="about">About</a></li>
+                    <li><a href="/kinsey17-resume.pdf" data-name="resume">R&eacute;sum&eacute;</a></li>
+                </ul>
+            </nav>
+        </menu>
+
+        <article></article>
+        <article></article>
+        <article></article>
+
+    </body>
+</html>
diff --git a/index.html b/index.html
index 83cd33416002f8529e056a0a5e4f1f2c457c5a44..feed3488018956af5218bdaaa7b405e3e8c20b58 100644 (file)
--- a/index.html
+++ b/index.html
@@ -9,14 +9,15 @@
     </head>
     <body>
 
     </head>
     <body>
 
-        <menu>
-            <div><img></img></div>
-            <nav>
+        <menu id="menu" class="middle">
+            <div id="avatar"><img src="res/face.png"></img></div>
+            <div id="name"><h1>Jack Kinsey</h1></div>
+            <nav id="links">
                 <ul>
                 <ul>
-                    <li><a href="">Words</a></li>
-                    <li><a href="">Code</a></li>
-                    <li><a href="">About</a></li>
-                    <li><a href="">R&eacute;sum&eacute;</a></li>
+                    <li><a href="/writing" data-name="writing">Writing</a></li>
+                    <li><a href="/code" data-name="code">Code</a></li>
+                    <li><a href="/about" data-name="about">About</a></li>
+                    <li><a href="/kinsey17-resume.pdf" data-name="resume">R&eacute;sum&eacute;</a></li>
                 </ul>
             </nav>
         </menu>
                 </ul>
             </nav>
         </menu>
diff --git a/js/script.js b/js/script.js
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..1fabcaf40b3a6ce0264fef3bff47136020f7b6b4 100644 (file)
--- a/js/script.js
+++ b/js/script.js
@@ -0,0 +1,14 @@
+window.addEventListener('load', function() {
+    var menuLoc = 0;
+    var links = document.getElementById("links").children[0].children;
+    var menu = document.getElementById("menu");
+    function menuMove(node) {
+        if(menuLoc) return;
+        menu.setAttribute("class", "top");
+        setTimeout(function() { menu.setAttribute("class", "left") }, 600);
+        menuLoc = 1;
+    }
+    for(var i = 0; i < links.length; i++) {
+        links[i].onclick = function(node) { menuMove(node); };
+    }
+}, false);
diff --git a/res/face.png b/res/face.png
new file mode 100644 (file)
index 0000000..d2661f5
Binary files /dev/null and b/res/face.png differ
diff --git a/res/style.css b/res/style.css
index 2f3e444868c346eabd6bc0c7ff3486d154a4cf84..82280192b66728f89333763c4450258dc766952e 100644 (file)
--- a/res/style.css
+++ b/res/style.css
@@ -1,7 +1,7 @@
 @import url('https://fonts.googleapis.com/css?family=Cutive+Mono|Source+Code+Pro:300');
 
 body {
 @import url('https://fonts.googleapis.com/css?family=Cutive+Mono|Source+Code+Pro:300');
 
 body {
-    background-color:grey;
+    background-color:#7F7977;
     width:100%;
     height:100%;
     overflow-x:hidden;
     width:100%;
     height:100%;
     overflow-x:hidden;
@@ -13,11 +13,25 @@ menu {
     position:absolute;
     width:400px;
     height:400px;
     position:absolute;
     width:400px;
     height:400px;
-    left:calc(50% - 200px);
-    top:calc(50% - 200px);
     font-smooth:never;
     -webkit-font-smoothing:none;
     font-smooth:never;
     -webkit-font-smoothing:none;
-    background-color:black;
+    /*background-color:black;*/
+    transition:all .125s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+menu.middle {
+    left:calc(50% - 200px);
+    top:calc(50% - 400px);
+}
+
+menu.top {
+    left:calc(50% - 200px);
+    top:0px;
+}
+
+menu.left {
+    left:0px;
+    top:0px;
 }
 
 menu nav {
 }
 
 menu nav {
@@ -25,19 +39,34 @@ menu nav {
     flex-direction:column;
 }
 
     flex-direction:column;
 }
 
-menu div {
+menu #avatar {
     display:block;
     width:300px;
     height:300px;
     margin-left:50px;
     margin-right:50px;
     display:block;
     width:300px;
     height:300px;
     margin-left:50px;
     margin-right:50px;
-    background-color:lightgrey;
+    /*background-color:lightgrey;*/
 }
 
 }
 
-menu div img {
+menu #avatar img {
     width:256px;
     height:256px;
     margin:22px;
     width:256px;
     height:256px;
     margin:22px;
+    border-radius:50%;
+}
+
+menu #name {
+    width:100%;
+    height:50px;
+    font-size:3em;
+}
+
+menu #name h1 {
+    display:block;
+    width:100%;
+    height:50px;
+    line-height:50px;
+    text-align:center;
 }
 
 menu nav ul {
 }
 
 menu nav ul {
@@ -46,14 +75,23 @@ menu nav ul {
     width:350px;
     margin-left:25px;
     margin-right:25px;
     width:350px;
     margin-left:25px;
     margin-right:25px;
-    height:100px;
+    height:50px;
 }
 
 menu nav ul li {
     display:inline-block;
     text-align:center;
     width:25%;
 }
 
 menu nav ul li {
     display:inline-block;
     text-align:center;
     width:25%;
-    height:100px;
+    height:50px;
     font-size:1.25em;
     font-size:1.25em;
-    line-height:100px;
+    line-height:50px;
+}
+
+menu nav ul li a:link, menu nav ul li a:visited {
+    text-decoration:none;
+    color:inherit;
+}
+
+menu nav ul li a:hover {
+    text-decoration:underline;
 }
 }
diff --git a/writing/index.html b/writing/index.html
new file mode 100644 (file)
index 0000000..feed348
--- /dev/null
+++ b/writing/index.html
@@ -0,0 +1,30 @@
+<html>
+    <head>
+        <link rel="stylesheet" href="res/reset.css" />
+        <link rel="stylesheet" href="res/style.css" />
+
+        <script src="js/script.js"></script>
+
+        <title>Jack Kinsey</title>
+    </head>
+    <body>
+
+        <menu id="menu" class="middle">
+            <div id="avatar"><img src="res/face.png"></img></div>
+            <div id="name"><h1>Jack Kinsey</h1></div>
+            <nav id="links">
+                <ul>
+                    <li><a href="/writing" data-name="writing">Writing</a></li>
+                    <li><a href="/code" data-name="code">Code</a></li>
+                    <li><a href="/about" data-name="about">About</a></li>
+                    <li><a href="/kinsey17-resume.pdf" data-name="resume">R&eacute;sum&eacute;</a></li>
+                </ul>
+            </nav>
+        </menu>
+
+        <article></article>
+        <article></article>
+        <article></article>
+
+    </body>
+</html>