diff --git a/bg.css b/bg.css old mode 100644 new mode 100755 diff --git a/cssgen.py b/cssgen.py old mode 100644 new mode 100755 diff --git a/favicon.ico b/favicon.ico old mode 100644 new mode 100755 diff --git a/index.css b/index.css old mode 100644 new mode 100755 diff --git a/index.html b/index.html old mode 100644 new mode 100755 diff --git a/resume/favicon.ico b/resume/favicon.ico new file mode 100755 index 0000000..0901557 Binary files /dev/null and b/resume/favicon.ico differ diff --git a/resume/index.html b/resume/index.html new file mode 100755 index 0000000..abc2736 --- /dev/null +++ b/resume/index.html @@ -0,0 +1,29 @@ + + + + + Kenneth Jao + + + + + + + +
+ +
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/resume/main.css b/resume/main.css new file mode 100755 index 0000000..0ee2bea --- /dev/null +++ b/resume/main.css @@ -0,0 +1,191 @@ +html, body { + width: 100%; + height: 100%; + margin: 0; + overflow: hidden; +} + +h1, h2, h3, h4 { + margin: 0; +} + +h1 { + font-family: 'Josefin Sans', sans-serif; + font-weight: 700; +} + +h2 { + font-family: 'Josefin Sans', sans-serif; + font-weight: 400; + letter-spacing: 4px; +} + +h3 { + font-family: 'Dosis', sans-serif; + font-weight: 300; +} + +#wrapper { + overflow-x: hidden; + overflow-y: auto; + display: grid; + grid-template-columns: 3fr 7fr; + height: 100%; + width: 100%; +} + +#sidebar { + height: 100%; + grid-column: 1; + grid-row: 1; + background-color: #1F1F1F; +} + +#mainCont { + height: 100%; + grid-column: 2; + grid-row: 1; + background-color: #E5E5E5; +} + +.topCont { + width: 100%; + height: 25vw; +} + +.midCont { + width: 100%; +} + +#mainCont .topCont h1 { + padding: 15% 0 0 10%; + font-size: 300%; +} + +#mainCont .topCont h2 { + padding: 0 0 0 10%; + font-size: 95%; + color: #939393; +} + +#sidebar .midCont .subsection { + padding: 0 0 10% 10%; +} + +#sidebar .midCont .subsection h2 { + color: #E5E5E5; + padding: 3%; + border-bottom: 4px solid #E5E5E5; +} + +#sidebar .midCont .subsection .subValue { + display: grid; + padding: 2.5% 0 2.5% 0; + grid-template-columns: 15fr 75fr; + grid-template-rows: 1fr 1fr; +} + +#sidebar .midCont .subsection div:nth-child(2) { + padding-top: 5%; +} + +#sidebar .midCont .subValue i { + grid-column: 1; + grid-row: 1/3; + color: #E5E5E5; + margin: auto; + font-size: 120%; +} + +#sidebar .midCont .subValue h3:nth-child(2) { + grid-column: 2; + grid-row: 1; + color: #E5E5E5; + font-size: 90%; + padding-left: 5%; +} + +#sidebar .midCont .subValue h3:nth-child(n+3) { + grid-column: 2; + color: #939393; + font-size: 90%; + padding-left: 5%; +} + +#mainCont .midCont .subsection { + padding: 0 10% 5% 10%; + display: grid; + grid-template-columns: 1fr 9fr; + grid-template-rows: 1fr; +} + +#mainCont .midCont .subsection .subCircle { + display: grid; + grid-column: 1; + grid-row: 1; + margin: auto; + width: 4vw; + height: 4vw; + border: 3px solid #1F1F1F; + border-radius: 50px +} + +.subCircle i { + margin: auto; + color: #1F1F1F; + font-size: 120%; +} + +#mainCont .midCont .subsection h2 { + color: #1F1F1F; + padding: 3%; + border-bottom: 4px solid #1F1F1F; +} + +#mainCont .midCont .subValue { + padding: 2.5% 0 2.5% 0; + display: grid; + grid-column: 2; + grid-template-columns: 2fr 8fr; + grid-template-rows: 1fr; +} + +#mainCont .midCont .subValue h3:nth-child(1) { + grid-column: 1; + grid-row: 1; + color: #939393; +} + +#mainCont .midCont .subValue h3:nth-child(2) { + grid-column: 2; + font-weight: 700; + font-style: bold; +} + +#mainCont .midCont .subValue h3:nth-child(3) { + grid-column: 2; + font-style: italic; +} + +#mainCont .midCont .subValue h3:nth-child(4) { + grid-column: 2; + font-style: normal; +} + +#mainCont .midCont .subLine { + background-color: #1F1F1F; + margin: auto; + height: 100%; + width: 4px; +} + +#mainCont .midCont .subLine i { + color: #1F1F1f; + margin: 0 auto 0 auto; + padding: 10%; +} + +@media print { + + .subsection div{ page-break-before: always; } +} \ No newline at end of file diff --git a/resume/main.js b/resume/main.js new file mode 100755 index 0000000..63f7c22 --- /dev/null +++ b/resume/main.js @@ -0,0 +1,187 @@ +var titleInfo = { + name: "Kenneth Jao", + caption: "Engineer and Developer", + image: null +}; + +var sidebarInfo = [ + { + name: "Info", + subsections: [ + { + name: "Name", + value: "Kenneth Jao", + icon: "fas fa-user" + }, + { + name: "Address", + value: ["Lansing", "Michigan USA"], + icon: "fas fa-map-marker-alt" + }, + { + name: "Phone", + value: "+1-(248)-749-3439", + icon: "fas fa-phone" + }, + { + name: "Email", + value: ["kennethjao01 at gmail.com", "jaokenne at msu.edu"], + icon: "fas fa-envelope" + } + ] + }, + { + name: "Social", + subsections: [ + { + name: "Facebook", + value: "https://goo.gl/5rxxhH", + icon: "fab fa-facebook-f" + } + ] + } +]; + +var mainContInfo = [ + { + name: "Education", + icon: "fa-book-open", + values: [ + { + name: "Michigan State University, East Lansing", + caption: "Majoring in Computational Mathematics, Mathematics. Minoring in Computer Science", + date: "2018-2022", + desc: "Cumulative GPA: 3.91" + } + ] + }, + { + name: "Skills", + icon: "fa-wrench", + values: [ + { + name: "Programming", + caption: "Software engineering", + date: "Since 2014", + desc: "Fluent in HTML, CSS, JavaScript, Python, C, C++. Can pick up languages and libraries with ease. Full-stack web app developer, experience in bash scripting, and deep learning." + }, + { + name: "System Administrator", + caption: "Server setup and maintenance.", + date: "Since 2014", + desc: "Proficient in maintaining and configuring up servers, and organizing network systems. Can secure implementations of server applications with industry standard cybersecurity." + }, + { + name: "User Interface Design", + caption: "Interface, logo, and background design", + date: "Since 2012", + desc: "Proficient with GIMP and Blender for front-end web interfaces" + } + ] + }, + { + name: "Projects", + icon: "fa-list-ol", + values: [ + { + name: "Video Compression Research", + caption: "Compression through multi-dimensional transform analysis.", + date: "Since 2018", + desc: "Personal research into new compression techniques through extended applications of wave transforms, spatial and temporal data rearrangement, and component analysis." + }, + { + name: "VR Arm Tracking Device", + caption: "Virtual reality hardware development", + date: "2016", + desc: "Arm tracking done through gyroscope IMUs, with 9 degrees of freedom. A testing game was created to demonstrate tracking capabilities." + }, + { + name: "Haptic Feedback Through Wave Interference", + caption: "Mathematical investigation of applications of wave interference", + date: "2017", + desc: "A mathematical proof and experimentation of controllable wave interference to induce correct superposition. Explored multiple applications including a possibility of simulating highly accurate haptic feedback." + }, + { + name: "BinBin", + caption: "Cloud storage web interface application", + date: "2016", + desc: "Cloud database web app created to ease file downloading and storage for servers, with accounts and sharing systems." + }, + { + name: "Hourglass", + caption: "Collaborative school-wide online planner", + date: "2017", + desc: "Online planning web app designed for academic use. Enabled users to have a collaborative planner specific to individual classes and teachers. " + } + + ] + } +]; + +var sidebarTop = document.querySelectorAll("#sidebar .topCont")[0]; +var sidebarMid = document.querySelectorAll("#sidebar .midCont")[0]; +var mainTop = document.querySelectorAll("#mainCont .topCont")[0]; +var mainMid = document.querySelectorAll("#mainCont .midCont")[0]; + +function titleItems() { + var name = el("h1", titleInfo.name.toUpperCase()); + mainTop.appendChild(name); + var caption = el("h2", titleInfo.caption.toUpperCase()); + mainTop.appendChild(caption); +} + +function mainItems() { + mainContInfo.forEach(function(ele) { + var subsection = el("div", "", "", "subsection"); + var circle = el("div", "", "", "subCircle"); + circle.appendChild(el("i", "", "", "fas " + ele.icon)); + subsection.appendChild(circle); + subsection.appendChild(el("h2", ele.name.toUpperCase(), "", "subTitle")); + ele.values.forEach(function(item) { + var subValue = el("div", "", "", "subValue"); + subValue.appendChild(el("h3", item.date, "", "")); + subValue.appendChild(el("h3", item.name, "", "")); + subValue.appendChild(el("h3", item.caption, "", "")); + subValue.appendChild(el("h3", item.desc, "", "")); + subsection.appendChild(subValue); + }); + mainMid.appendChild(subsection); + }); +} + +function sidebarItems() { + sidebarInfo.forEach(function(ele) { + var subsection = el("div", "", "", "subsection"); + subsection.appendChild(el("h2", ele.name.toUpperCase(), "", "subTitle")); + ele.subsections.forEach(function(item) { + var subValue = el("div", "", "", "subValue"); + subValue.appendChild(el("i", "", "", item.icon)); + subValue.appendChild(el("h3", item.name, "", "")); + if(Array.isArray(item.value)) { + item.value.forEach(function(val, index) { + subValue.appendChild(el("h3", val, "", "")); + if(item.value.length != index+1) subValue.appendChild(el("br")); + }); + } else { + subValue.appendChild(el("h3", item.value, "", "")); + } + subsection.appendChild(subValue); + }); + sidebarMid.appendChild(subsection); + }); +} + +function el(DOM, textNode, id, className) { + id = id || ""; + className = className || ""; + textNode = textNode || ""; + var element = document.createElement(DOM); + if(id.length != 0) element.id = id; + if(className.length != 0) element.className = className; + if(textNode.length != 0) element.appendChild(document.createTextNode(textNode)); + return element; +} + +titleItems(); +sidebarItems(); +mainItems();