added resume folder
This commit is contained in:
parent
e981c35a8c
commit
d4b00279f0
0
favicon.ico
Normal file → Executable file
0
favicon.ico
Normal file → Executable file
|
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 5.6 KiB |
0
index.html
Normal file → Executable file
0
index.html
Normal file → Executable file
BIN
resume/favicon.ico
Executable file
BIN
resume/favicon.ico
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
29
resume/index.html
Executable file
29
resume/index.html
Executable file
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<title>Kenneth Jao</title>
|
||||
<link rel="icon" href="./favicon.ico?v=2">
|
||||
<link rel="stylesheet" href="./main.css?v=2">
|
||||
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,700|Dosis:300,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
<div id="sidebar">
|
||||
<div class="topCont">
|
||||
</div>
|
||||
<div class="midCont">
|
||||
</div>
|
||||
</div>
|
||||
<div id="mainCont">
|
||||
<div class="topCont">
|
||||
</div>
|
||||
<div class="midCont">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="./main.js"></script>
|
||||
</html>
|
||||
191
resume/main.css
Executable file
191
resume/main.css
Executable file
@ -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; }
|
||||
}
|
||||
187
resume/main.js
Executable file
187
resume/main.js
Executable file
@ -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();
|
||||
Loading…
x
Reference in New Issue
Block a user