kjao/homepage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: kjao:e981c35a8c60dae60c987deb44205ff8bc5d8e89
Branches Tags
kjao:main
...
compare: kjao:9c2a99e6023dd4422ad1bd4ca3f9b276a2993b2c
Branches Tags
kjao:main

10 Commits
e981c35a8c ... 9c2a99e602

Author SHA1 Message Date
Kenneth Jao
9c2a99e602 Minor correction 2024-02-08 21:37:46 -06:00
Kenneth Jao
12dbb7ab8b Removed broken media print query 2020-04-13 06:41:28 -04:00
Kenneth Jao
5d28727fb3 Updated info, CSS properly scales to screen size and aspect ratio 2020-04-13 06:41:28 -04:00
Kenneth Jao
c658cb2019 Fixed typo 2020-04-13 06:41:28 -04:00
Kenneth Jao
c8fa3b2988 Resume now can print from PDF, and added cover letter. 2020-04-13 06:41:28 -04:00
Kenneth Jao
260251ffc3 fix 2020-04-13 06:41:28 -04:00
Kenneth Jao
9152fefde6 added info to fit aspect ratio A4 2020-04-13 06:41:28 -04:00
Kenneth Jao
58519b219b more css changes 2020-04-13 06:41:28 -04:00
Kenneth Jao
71fd347f36 css changes, resume changes 2020-04-13 06:41:28 -04:00
Kenneth Jao
d4b00279f0 added resume folder 2020-04-13 06:41:28 -04:00
13 changed files with 860 additions and 0 deletions
Show Stats Expand all files Collapse all files

0
bg.css Normal file → Executable file
View File

BIN
cover/favicon.ico Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

52
cover/index.html Executable file
View File

@ -0,0 +1,52 @@
<!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">
<p>
<br><br><br><br>
To whom it may concern,<br><br>
My name is Kenneth Jao. My interests and expertise lie in both software and hardware design, supported by all relevant underlying mathematics. With experience in both front-end user interface design, implementing optimized and secure back-end algorithms, as well as an understanding of Unix system administration, I believe I would be a valuable asset to your software development team.
<br><br>
In my 6 years of programming experience, I have worked with several others on projects. We created a web application, Hourglass, to help students organize schoolwork collectively and more efficiently. Besides programming itself, I have taken the role of a project leader. I organize and structure the environment and requirements, to keep the workflow as smooth as possible. By having experienced the importance of standardization and documentation for projects, I believe I will easily adapt to far larger projects in the field, no matter what your team may be working on.
<br><br>
With regards to programming, I also have the following skills:
</p>
<ul>
<li>Abstraction for object oriented programming</li>
<li>Developing algorithms for mathematical concepts</li>
<li>Understanding of network structures</li>
<li>Data analysis and aggregation through scripting and scraping</li>
</ul>
<br>
<p>
Most importantly, I am confident in my ability to work with others in a high-paced environment, and will be a positive impact in the work that is done. Thank you for your time for reviewing my application among hundreds of others. I look forward to your response.
<br><br>
Sincerely,<br>
Kenneth Jao
</p>
</div>
</div>
</div>
</body>
<script src="./main.js"></script>
</html>

206
cover/main.css Executable file
View File

@ -0,0 +1,206 @@
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;
}
p, li {
font-family: 'Dosis', sans-serif;
font-weight: 300;
font-size: 140%;
margin: 0 10% 0 10%;
}
ul {
list-style-type: circle;
}
#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: 20vw;
}
.midCont {
width: 100%;
}
#mainCont .topCont h1 {
padding: 13% 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 {
font-size: 80%;
}
#mainCont .midCont .subsection {
padding: 0 10% 2% 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 0 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; }
}

110
cover/main.js Executable file
View File

@ -0,0 +1,110 @@
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: "GitHub",
value: "https://github.com/ksjdragon",
icon: "fab fa-github"
}
]
}
];
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();

0
cssgen.py Normal file → Executable file
View File

0
favicon.ico Normal file → Executable file
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

0
index.css Normal file → Executable file
View File

0
index.html Normal file → Executable file
View File

BIN
resume/favicon.ico Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

29
resume/index.html Executable file
View 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>

215
resume/main.css Executable file
View File

@ -0,0 +1,215 @@
@media (min-aspect-ratio: 8.5/11) { /* Aspect ratio larger than 1. */
html {
height: 100%;
width: 100%;
display: flex;
align-items: center;
background: linear-gradient(0deg, #2a2a2a 0%, #4b4b4b 50%, #2a2a2a 100%);
font-size: calc(1vh * 8.5/11);
}
body {
height: 100%;
aspect-ratio: 8.5/11;
margin: auto;
}
}
@media (max-aspect-ratio: 8.5/11) { /* Aspect ratio less than 1 */
html {
height: 100%;
width: 100%;
display: flex;
align-items: center;
background: linear-gradient(0deg, #2a2a2a 0%, #4b4b4b 50%, #2a2a2a 100%);
font-size: 1vw;
}
body {
width: 100%;
aspect-ratio: 8.5/11;
margin: auto;
}
}
/** Fonts */
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: 0.5rem;
}
h3 {
font-family: 'Dosis', sans-serif;
font-weight: 300;
}
h1 {
font-size: 4rem;
}
h2 {
font-size: 1.5rem;
}
#sidebar h3, #sidebar i, .subCircle i {
font-size: 1.5rem;
}
#mainCont h3 {
font-size: 1.3rem;
}
/** Placement */
#wrapper {
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: 20rem;
}
.midCont {
width: 100%;
}
#mainCont .topCont h1 {
padding: 8rem 0 0 7rem;
}
#mainCont .topCont h2 {
padding: 0 0 0 7rem;
color: #939393;
}
#sidebar .midCont .subsection {
padding: 0 0 4rem 4rem;
}
#sidebar .midCont .subsection h2 {
color: #E5E5E5;
padding: 1rem;
border-bottom: 0.4rem solid #E5E5E5;
}
#sidebar .midCont .subsection .subValue {
display: grid;
padding: 1rem 0 1rem 0;
grid-template-columns: 15fr 75fr;
grid-template-rows: 1fr 1fr;
}
#sidebar .midCont .subsection div:nth-child(2) {
padding-top: 2rem;
}
#sidebar .midCont .subValue i {
grid-column: 1;
grid-row: 1/3;
color: #E5E5E5;
margin: auto;
}
#sidebar .midCont .subValue h3:nth-child(2) {
grid-column: 2;
grid-row: 1;
color: #E5E5E5;
padding-left: 1rem;
}
#sidebar .midCont .subValue h3:nth-child(n+3) {
grid-column: 2;
color: #939393;
padding-left: 1rem;
}
#mainCont .midCont .subsection {
padding: 0 6.5rem 1.3rem 6.5rem;
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: 80%;
aspect-ratio: 1;
border: 0.25rem solid #1F1F1F;
border-radius: 50%;
}
.subCircle i {margin: auto;
atcolor: #1F1F1F;
}
#mainCont .midCont .subsection h2 {
color: #1F1F1F;
padding: 1.5rem;
border-bottom: 0.4rem solid #1F1F1F;
}
#mainCont .midCont .subValue {
padding: 1.1rem 0 0 0;
display: grid;
grid-column: 2;
grid-template-columns: 2fr 9fr;
grid-template-rows: 1fr;
}
#mainCont .midCont .subsection div:nth-child(3) {
padding-top: 2rem;
}
#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 {
grid-column: 2;
font-style: normal;
}

248
resume/main.js Executable file
View File

@ -0,0 +1,248 @@
var titleInfo = {
name: "Kenneth Jao",
caption: "Researcher, Engineer and Developer",
image: null
};
var sidebarInfo = [
{
name: "Info",
subsections: [
{
name: "Name",
value: "Kenneth Jao",
icon: "fas fa-user"
},
{
name: "Address",
value: ["Champaign", "Illinois 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", "ksjao2 at illinois.edu"],
icon: "fas fa-envelope"
}
]
},
{
name: "Social",
subsections: [
{
name: "GitHub",
value: ["https://github.com/ksjdragon", "https://git.acem.illinois.edu"],
icon: "fab fa-github"
},
{
name: "LinkedIn",
value: "https://linkedin.com/in/kjao",
icon: "fab fa-linkedin"
}
]
}
];
var mainContInfo = [
{
name: "Education",
icon: "fa-book-open",
values: [
{
name: "University of Illinois Urbana-Champaign (UIUC), Champaign",
caption: "MS in Electrical Engineering",
date: "2022-2024",
desc: "Cumulative GPA: 3.94, Expected Graduation: May 2024."
},
{
name: "Defects and frustration in the packing of soft balls",
caption: "Jao, Kenneth, et al. “Defects and frustration in the packing of Soft Balls.” Physica D: Nonlinear Phenomena, vol. 445, Mar. 2023, p. 133631, https://doi.org/10.1016/j.physd.2022.133631.",
date: "2022",
desc: "First author publication coauthored with Keith Promislow, creating modeling for star polymers, eliciting a complex energy landscape despite a simple model."
},
{
name: "Michigan State University (MSU), East Lansing",
caption: "BS in Computational Mathematics. BS in Mathematics. Minor in Computer Science",
date: "2018-2022",
desc: "Cumulative GPA: 3.9401"
}
]
},
{
name: "Work Experience",
icon: "fa-briefcase",
values: [
{
name: "Research Assistant in Electrical Engineering",
caption: "Researched with Zhen Peng, professor of Electrical Engineering at UIUC.",
date: "2022-2024",
desc: [
"Researched topics in large-scale computational simulation, quantum computing applications, and surrogate model creation and optimization with Gaussian Processes and Machine Learning, primarily applied to EE.",
"Handled DevOps within the lab: automated dependency management, created build process and library for CPU/GPU targets for rapid testing, and managed local Git servers"
]
},
{
name: "Undergraduate Researcher in Mathematics",
caption: "Researched with Keith Promislow, chairperson of the Mathematics Department at MSU.",
date: "2021-2022",
desc: [
"Conducted theoretical mathematical research into soft packing problems, modeling with partial differential equations.",
"Wrote custom software for all of the numerical simulations and analysis, compile into a Python package. [https://github.com/ksjdragon/squish]"
]
},
{
name: "Undergraduate Learning Assistant (ULA)",
caption: "Assistant to the professor (10 hours per week)",
date: "Fall 2021",
desc: "For the class 'CMSE/MTH 314 Matrix Algebra with Computational Applications', I aided in facilitating an interactive classroom, alongside grading assignments and hosting office hours."
}
]
},
{
name: "Skills",
icon: "fa-wrench",
values: [
{
name: "Programming",
caption: "Software engineering",
date: "Since 2014",
desc: [
"Fluent in Python, C/C++, CUDA, HTML/CSS/JavaScript, JQuery, Git, Bash.",
"Full-stack web app developer, significant experience with large-scale GPU/HPCC software, complex build environments.",
"Experience with scripting web-crawlers, data (pre)processors, small server-side middleware between APIs."
]
},
{
name: "(Linux) System Administrator",
caption: "Server setup, maintenance, and application management",
date: "Since 2014",
desc: [
"Proficient in maintaining and configuring Linux servers, and organizing network systems. Can secure implementations of server applications with industry standard cybersecurity.",
"Utilized Docker/Podman, AWS, Git, and NGINX web servers, load balancing for production-level external-facing and internal-facing applications."
]
}
]
}
// {
// name: "Other",
// icon: "fa-list-ol",
// values: [
// {
// name: "Google FooBar Challenge",
// caption: "Coding challenge hosted by Google for hiring",
// date: "Summer 2020",
// desc: "Completed all 5 levels of Google Foobar challenge."
// }
// {
// name: "Virtual Synthesizer",
// caption: "Designed custom synthesizer programs for self-use in music production",
// date: "Fall 2020",
// desc: "Using signal processing concepts and studying historical circuits, recreated virtual synthesizers."
// },
// {
// 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: "Investigated more complex haptic feedback through wave interference using linear resonant actuators."
// },
// {
// name: "Cloud Storage Web Application",
// caption: "Server side programming and account management with file security",
// date: "2016",
// desc: "Cloud database web app created to ease file downloading and storage for servers, with accounts and sharing systems. [https:github.com/ksjdragon/binbin]"
// },
// {
// name: "Collaborative Online Planner",
// caption: "Database management and responsive and reactive web design",
// date: "2017",
// desc: "Online planning web app designed for academic use. Enabled users to have a collaborative planner specific to individual classes and teachers. [https:github.com/ksjdragon/hourglass]"
// }
// ]
// }
];
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, "", ""));
if(Array.isArray(item.desc)) {
item.desc.forEach(function(val, index) {
subValue.appendChild(el("h3", val, "", ""));
});
} else {
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();