From aa933c4948e66cbb9ac08cebb96d863d577ab381 Mon Sep 17 00:00:00 2001 From: Jack Kinsey Date: Sat, 22 Apr 2017 21:38:21 -0400 Subject: [PATCH] added Makefile to build subpages; added fake resume; finished basic page design/structure --- Makefile | 4 +++ about/index.html | 82 +++++++++++++++++++++++---------------------- code/index.html | 82 +++++++++++++++++++++++---------------------- index.html | 80 ++++++++++++++++++++++--------------------- js/script.js | 46 +++++++++++++++---------- kinsey17-resume.pdf | 0 res/style.css | 15 +++++---- writing/index.html | 82 +++++++++++++++++++++++---------------------- 8 files changed, 208 insertions(+), 183 deletions(-) create mode 100644 Makefile create mode 100644 kinsey17-resume.pdf diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..9422301 --- /dev/null +++ b/Makefile @@ -0,0 +1,4 @@ +build: + sed '/id=\"menu\"/s/middle/top/; /id=\"about\"/s/class=\".*\"/class=\"selected\"/; /data-name=\"about\"/s/class=\"\"/class=\"selected\"/' < index.html > about/index.html + sed '/id=\"menu\"/s/middle/top/; /id=\"code\"/s/class=\".*\"/class=\"selected\"/; /data-name=\"code\"/s/class=\"\"/class=\"selected\"/' < index.html > code/index.html + sed '/id=\"menu\"/s/middle/top/; /id=\"writing\"/s/class=\".*\"/class=\"selected\"/; /data-name=\"writing\"/s/class=\"\"/class=\"selected\"/' < index.html > writing/index.html diff --git a/about/index.html b/about/index.html index bb089b1..ec6594b 100644 --- a/about/index.html +++ b/about/index.html @@ -9,55 +9,57 @@ - + - - - +

+ + +

+ 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. +
+ 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. +

+ 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. +
+ 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. +

diff --git a/code/index.html b/code/index.html index bb089b1..75cf6bb 100644 --- a/code/index.html +++ b/code/index.html @@ -9,55 +9,57 @@ - + - - - +

+ +

+ 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. +
+ 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. +

+ +

diff --git a/index.html b/index.html index bb089b1..dc055f1 100644 --- a/index.html +++ b/index.html @@ -14,50 +14,52 @@

Jack Kinsey

- - - +

+ + + +

diff --git a/js/script.js b/js/script.js index c5f2c7a..6528aa3 100644 --- a/js/script.js +++ b/js/script.js @@ -1,27 +1,37 @@ window.addEventListener('load', function() { var links = document.getElementById("links").children[0].children; var home = document.getElementsByClassName("home"); - var directions = []; - for(var i = 0; i < links.length - 1; i++) { - directions.push(links[i]); - } - for(var i = 0; i < home.length; i++) { - directions.push(home[i]); - } var menu = document.getElementById("menu"); + var content = document.getElementById("content"); var menuLoc = parseInt(getComputedStyle(menu).getPropertyValue("top")); - for(var i = 0; i < directions.length; i++) { - directions[i].children[0].onclick = function(event) { - event.preventDefault(); - var node = event.currentTarget; - if(menuLoc != 10) { - menuLoc = 0; - menu.setAttribute("class", "top"); - window.history.pushState("object or string", "Title", node.href); - } else { - window.history.pushState("object or string", "Title", node.href); - } + function menuOperator(position, token="") { + event.preventDefault(); + var node = event.currentTarget; + menu.setAttribute("class", position); + for(var i = 0; i < links.length; i++) { + links[i].children[0].removeAttribute("class"); + } + node.setAttribute("class", "selected " + token); + for(var i = 0; i < content.children.length; i++) { + content.children[i].setAttribute("class", "hidden") + } + var name = node.getAttribute("data-name"); + if(name) { + var article = document.getElementById(name); + article.setAttribute("class", "selected"); + } + window.history.pushState("object or string", "Title", node.href); + } + + for(var i = 0; i < links.length - 1; i++) { + links[i].children[0].onclick = function(event) { + menuOperator("top"); }; } + for(var i = 0; i < home.length; i++) { + home[i].onclick = function(event) { + menuOperator("middle", "home"); + } + } }, false); diff --git a/kinsey17-resume.pdf b/kinsey17-resume.pdf new file mode 100644 index 0000000..e69de29 diff --git a/res/style.css b/res/style.css index fa49b94..d52b46f 100644 --- a/res/style.css +++ b/res/style.css @@ -37,7 +37,7 @@ menu.top { height:100px; } -menu, menu > *, menu img { +menu, menu > *, menu img, article { transition:all .6s cubic-bezier(0.23, 1, 0.32, 1); } @@ -142,7 +142,7 @@ menu nav ul li a:link, menu nav ul li a:visited { color:inherit; } -menu nav ul li a:hover { +menu nav ul li a:hover, menu nav ul li a.selected { text-decoration:underline; } @@ -156,15 +156,18 @@ article { left:calc(50% - 400px); width:800px; height:auto; - opacity:1; } -article.hidden { - display:none; +article.selected { + opacity:1; + visibility:visible; + top:150px; } -article.clear { +article.hidden { opacity:0; + visibility:hidden; + top:200px; } article > div { diff --git a/writing/index.html b/writing/index.html index bb089b1..91b050f 100644 --- a/writing/index.html +++ b/writing/index.html @@ -9,55 +9,57 @@ - + - - - +

+ 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. +
+ 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. +

+ + +

-- 2.26.2