First Commit
This commit is contained in:
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
prepros-6.config
|
||||
.idea
|
||||
21
LICENSE
Normal file
21
LICENSE
Normal file
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) <year> <copyright holders>
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is furnished
|
||||
to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice (including the next
|
||||
paragraph) shall be included in all copies or substantial portions of the
|
||||
Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS
|
||||
OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF
|
||||
OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
3
README.md
Normal file
3
README.md
Normal file
@@ -0,0 +1,3 @@
|
||||
# Timeline
|
||||
|
||||
Example of a Responsive Timeline, uses HTML and CSS only, no images so that colors and position is easy to change.
|
||||
1
css/timeline-min.css
vendored
Normal file
1
css/timeline-min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");*{margin:0;padding:0}body,html{min-height:100%;min-width:100%}body{background:#ccc;font-family:"Arial", sans-serif}p{margin:10px 0}ul{display:table}ul>li{display:table-row}ul>li:before{content:"\21D2";display:table-cell;padding:5px 5px 0 0;text-align:right}#time-line{border-left:5px solid purple;z-index:-100;display:inline-block;height:100%;margin-left:49.75%;margin-top:70px;min-height:100%;position:absolute}.container{margin:auto;min-width:480px;overflow:hidden;position:relative;width:940px}header{background:#5e6482;color:white;height:70px;text-align:center}#timeline{height:100%;min-height:700px;margin:20px 0}.cube{margin-bottom:20px;min-height:100px;width:100%}.year{background:purple;display:block;height:70px;line-height:70px;width:70px;z-index:10;border-radius:35px;-webkit-border-radius:35px;-moz-border-radius:35px;margin:auto;text-align:center}.year div{color:white;display:block;font-size:18px;font-weight:bold;margin-top:20px;text-align:center}.event{margin:auto;overflow:hidden;visibility:visible;width:90%}.event div.circle-left{background:purple;display:inline-block;height:33px;line-height:33px;width:33px;z-index:10;border-radius:16.5px;-webkit-border-radius:16.5px;-moz-border-radius:16.5px;margin-left:26px}.event div.left{float:left;position:relative;width:45%;-webkit-animation:fade;-webkit-animation-duration:2s}.event div.left span{color:white;float:right;font-size:46px;position:relative;top:-10px}.event div.left div{background:white;border-radius:10px;margin-right:30px;padding:15px}.event div.circle-right{background:purple;display:inline-block;height:33px;line-height:33px;width:33px;z-index:10;border-radius:16.5px;-webkit-border-radius:16.5px;-moz-border-radius:16.5px;margin-left:407px}.event div.right{float:right;position:relative;width:45%;-webkit-animation:fade;-webkit-animation-duration:2s}.event div.right span{color:white;float:left;font-size:46px;position:relative;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.event div.right div{background:white;border-radius:10px;margin-left:30px;padding:15px}.event time{background:SlateBlue;color:white;font-size:12px;padding:5px;border-radius:5px}footer{background:#5e6482;bottom:0;color:white;height:40px;text-align:center}@media screen and (max-width:940px){.container{min-width:720px;width:800px}header{height:60px}h1{font-size:23px}#time-line{margin:25px 214px}.year{background:purple;display:block;height:70px;line-height:70px;width:70px;z-index:0;border-radius:35px;-webkit-border-radius:35px;-moz-border-radius:35px;margin:0 180px;text-align:left}.event div{position:relative;width:340px}.event div.circle-left{background:purple;display:inline-block;height:33px;line-height:33px;width:33px;z-index:10;border-radius:16.5px;-webkit-border-radius:16.5px;-moz-border-radius:16.5px;margin-left:160px}.event div.left{float:right;margin-right:180px;width:330px}.event div.left span{color:white;float:left;font-size:46px;position:relative;top:0;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.event div.right{margin-right:190px;width:320px}.event div.left div{margin-left:30px;margin-right:0}.event div.circle-right{background:purple;display:inline-block;height:33px;line-height:33px;width:33px;z-index:10;border-radius:16.5px;-webkit-border-radius:16.5px;-moz-border-radius:16.5px;margin-left:160px}}@media screen and (max-width:720px){.container{min-width:300px;width:480px}header{height:60px}h1{font-size:23px}#time-line{margin:25px 63px}.year{background:purple;display:block;height:70px;line-height:70px;width:70px;z-index:0;border-radius:35px;-webkit-border-radius:35px;-moz-border-radius:35px;margin:0 30px;text-align:left}.event div{position:relative;width:300px}.event div.circle-left{background:purple;display:inline-block;height:33px;line-height:33px;width:33px;z-index:10;border-radius:16.5px;-webkit-border-radius:16.5px;-moz-border-radius:16.5px;margin-left:24px}.event div.left{margin-right:50px;width:320px}.event div.left span{color:white;float:left;font-size:46px;position:relative;top:0;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.event div.right{margin-right:50px;width:320px}.event div.left div{margin-left:30px;margin-right:0}.event div.circle-right{background:purple;display:inline-block;height:33px;line-height:33px;width:33px;z-index:10;border-radius:16.5px;-webkit-border-radius:16.5px;-moz-border-radius:16.5px;margin-left:24px}}@-webkit-keyframes fade{0%{opacity:0}to{opacity:1}}
|
||||
307
css/timeline.css
Normal file
307
css/timeline.css
Normal file
@@ -0,0 +1,307 @@
|
||||
/* Example: .circle { @include circle(200px, #999); } */
|
||||
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
body, html {
|
||||
min-height: 100%;
|
||||
min-width: 100%; }
|
||||
|
||||
body {
|
||||
background: #ccc;
|
||||
font-family: "Arial", sans-serif; }
|
||||
|
||||
p {
|
||||
margin: 10px 0; }
|
||||
|
||||
ul {
|
||||
display: table; }
|
||||
|
||||
ul > li {
|
||||
display: table-row; }
|
||||
|
||||
ul > li::before {
|
||||
content: "\21D2";
|
||||
display: table-cell;
|
||||
padding: 5px 5px 0 0;
|
||||
text-align: right; }
|
||||
|
||||
#time-line {
|
||||
border-left: 5px solid purple;
|
||||
z-index: -100;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
margin-left: 49.75%;
|
||||
margin-top: 70px;
|
||||
min-height: 100%;
|
||||
position: absolute; }
|
||||
|
||||
.container {
|
||||
margin: auto;
|
||||
min-width: 480px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 940px; }
|
||||
|
||||
header {
|
||||
background: #5e6482;
|
||||
color: white;
|
||||
height: 70px;
|
||||
text-align: center; }
|
||||
|
||||
#timeline {
|
||||
height: 100%;
|
||||
min-height: 700px;
|
||||
margin: 20px 0; }
|
||||
|
||||
.cube {
|
||||
margin-bottom: 20px;
|
||||
min-height: 100px;
|
||||
width: 100%; }
|
||||
|
||||
.year {
|
||||
background: purple;
|
||||
display: block;
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
width: 70px;
|
||||
z-index: 10;
|
||||
border-radius: 35px;
|
||||
-webkit-border-radius: 35px;
|
||||
-moz-border-radius: 35px;
|
||||
margin: auto;
|
||||
text-align: center; }
|
||||
|
||||
.year div {
|
||||
color: white;
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-top: 20px;
|
||||
text-align: center; }
|
||||
|
||||
.event {
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
visibility: visible;
|
||||
width: 90%; }
|
||||
|
||||
.event div.circle-left {
|
||||
background: purple;
|
||||
display: inline-block;
|
||||
height: 33px;
|
||||
line-height: 33px;
|
||||
width: 33px;
|
||||
z-index: 10;
|
||||
border-radius: 16.5px;
|
||||
-webkit-border-radius: 16.5px;
|
||||
-moz-border-radius: 16.5px;
|
||||
margin-left: 26px; }
|
||||
|
||||
.event div.left {
|
||||
float: left;
|
||||
position: relative;
|
||||
width: 45%;
|
||||
-webkit-animation: fade;
|
||||
-webkit-animation-duration: 2s; }
|
||||
|
||||
.event div.left span {
|
||||
color: white;
|
||||
float: right;
|
||||
font-size: 46px;
|
||||
position: relative;
|
||||
top: -10px; }
|
||||
|
||||
.event div.left div {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
margin-right: 30px;
|
||||
padding: 15px; }
|
||||
|
||||
.event div.circle-right {
|
||||
background: purple;
|
||||
display: inline-block;
|
||||
height: 33px;
|
||||
line-height: 33px;
|
||||
width: 33px;
|
||||
z-index: 10;
|
||||
border-radius: 16.5px;
|
||||
-webkit-border-radius: 16.5px;
|
||||
-moz-border-radius: 16.5px;
|
||||
margin-left: 407px; }
|
||||
|
||||
.event div.right {
|
||||
float: right;
|
||||
position: relative;
|
||||
width: 45%;
|
||||
-webkit-animation: fade;
|
||||
-webkit-animation-duration: 2s; }
|
||||
|
||||
.event div.right span {
|
||||
color: white;
|
||||
float: left;
|
||||
font-size: 46px;
|
||||
position: relative;
|
||||
-webkit-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
transform: rotate(180deg); }
|
||||
|
||||
.event div.right div {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
margin-left: 30px;
|
||||
padding: 15px; }
|
||||
|
||||
.event time {
|
||||
background: SlateBlue;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
padding: 5px;
|
||||
border-radius: 5px; }
|
||||
|
||||
footer {
|
||||
background: #5e6482;
|
||||
bottom: 0;
|
||||
color: white;
|
||||
height: 40px;
|
||||
text-align: center; }
|
||||
|
||||
@media screen and (max-width: 940px) {
|
||||
.container {
|
||||
min-width: 720px;
|
||||
width: 800px; }
|
||||
header {
|
||||
height: 60px; }
|
||||
h1 {
|
||||
font-size: 23px; }
|
||||
#time-line {
|
||||
margin: 25px 214px; }
|
||||
.year {
|
||||
background: purple;
|
||||
display: block;
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
width: 70px;
|
||||
z-index: 0;
|
||||
border-radius: 35px;
|
||||
-webkit-border-radius: 35px;
|
||||
-moz-border-radius: 35px;
|
||||
margin: 0 180px;
|
||||
text-align: left; }
|
||||
.event div {
|
||||
position: relative;
|
||||
width: 340px; }
|
||||
.event div.circle-left {
|
||||
background: purple;
|
||||
display: inline-block;
|
||||
height: 33px;
|
||||
line-height: 33px;
|
||||
width: 33px;
|
||||
z-index: 10;
|
||||
border-radius: 16.5px;
|
||||
-webkit-border-radius: 16.5px;
|
||||
-moz-border-radius: 16.5px;
|
||||
margin-left: 160px; }
|
||||
.event div.left {
|
||||
float: right;
|
||||
margin-right: 180px;
|
||||
width: 330px; }
|
||||
.event div.left span {
|
||||
color: white;
|
||||
float: left;
|
||||
font-size: 46px;
|
||||
position: relative;
|
||||
top: 0;
|
||||
-webkit-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
transform: rotate(180deg); }
|
||||
.event div.right {
|
||||
margin-right: 190px;
|
||||
width: 320px; }
|
||||
.event div.left div {
|
||||
margin-left: 30px;
|
||||
margin-right: 0; }
|
||||
.event div.circle-right {
|
||||
background: purple;
|
||||
display: inline-block;
|
||||
height: 33px;
|
||||
line-height: 33px;
|
||||
width: 33px;
|
||||
z-index: 10;
|
||||
border-radius: 16.5px;
|
||||
-webkit-border-radius: 16.5px;
|
||||
-moz-border-radius: 16.5px;
|
||||
margin-left: 160px; } }
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
.container {
|
||||
min-width: 300px;
|
||||
width: 480px; }
|
||||
header {
|
||||
height: 60px; }
|
||||
h1 {
|
||||
font-size: 23px; }
|
||||
#time-line {
|
||||
margin: 25px 63px; }
|
||||
.year {
|
||||
background: purple;
|
||||
display: block;
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
width: 70px;
|
||||
z-index: 0;
|
||||
border-radius: 35px;
|
||||
-webkit-border-radius: 35px;
|
||||
-moz-border-radius: 35px;
|
||||
margin: 0 30px;
|
||||
text-align: left; }
|
||||
.event div {
|
||||
position: relative;
|
||||
width: 300px; }
|
||||
.event div.circle-left {
|
||||
background: purple;
|
||||
display: inline-block;
|
||||
height: 33px;
|
||||
line-height: 33px;
|
||||
width: 33px;
|
||||
z-index: 10;
|
||||
border-radius: 16.5px;
|
||||
-webkit-border-radius: 16.5px;
|
||||
-moz-border-radius: 16.5px;
|
||||
margin-left: 24px; }
|
||||
.event div.left {
|
||||
margin-right: 50px;
|
||||
width: 320px; }
|
||||
.event div.left span {
|
||||
color: white;
|
||||
float: left;
|
||||
font-size: 46px;
|
||||
position: relative;
|
||||
top: 0;
|
||||
-webkit-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
transform: rotate(180deg); }
|
||||
.event div.right {
|
||||
margin-right: 50px;
|
||||
width: 320px; }
|
||||
.event div.left div {
|
||||
margin-left: 30px;
|
||||
margin-right: 0; }
|
||||
.event div.circle-right {
|
||||
background: purple;
|
||||
display: inline-block;
|
||||
height: 33px;
|
||||
line-height: 33px;
|
||||
width: 33px;
|
||||
z-index: 10;
|
||||
border-radius: 16.5px;
|
||||
-webkit-border-radius: 16.5px;
|
||||
-moz-border-radius: 16.5px;
|
||||
margin-left: 24px; } }
|
||||
|
||||
@-webkit-keyframes fade {
|
||||
0% {
|
||||
opacity: 0; }
|
||||
100% {
|
||||
opacity: 1; } }
|
||||
412
index.html
Normal file
412
index.html
Normal file
@@ -0,0 +1,412 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
|
||||
<title>Time Line</title>
|
||||
<link rel="stylesheet" href="css/timeline-min.css" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="container">
|
||||
<h1> Work History </h1>
|
||||
</div>
|
||||
</header>
|
||||
<section>
|
||||
<div class="container">
|
||||
<div id="timeline">
|
||||
<div id="time-line"></div> <!-- time-line -->
|
||||
|
||||
<div class="cube">
|
||||
<div class="year">
|
||||
<div>2018</div>
|
||||
</div> <!-- year -->
|
||||
</div> <!-- cube -->
|
||||
|
||||
<div class="cube">
|
||||
<div class="event">
|
||||
<div class="circle-right"></div>
|
||||
<div class="right">
|
||||
<span class="glyphicon glyphicon-play"></span>
|
||||
<div>
|
||||
<h3>
|
||||
<time datetime="2018-10-01 00:00">Oct 2018</time>
|
||||
Software Engineer
|
||||
</h3>
|
||||
<p>
|
||||
MSTS<br/>
|
||||
Oct 2018 – May 2019<br/>
|
||||
Duration: 8 mos<br/>
|
||||
Location: Overland Park, KS<br/>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Full Stack Developer</li>
|
||||
<li>Agile development enviorment.</li>
|
||||
<li>Maintained client software using Ruby, Ruby on Rails, Perl, Javascript, HTML, CSS and Oracle DB</li>
|
||||
<li>Developed code fixes and enhancements for inclusion in future code releases and patches.</li>
|
||||
<li>Performed regression and system-level testing to verify software quality and function before it was released.</li>
|
||||
<li>Debugged and modified software components.</li>
|
||||
<li>Tools used: Rubymine, VS Code, Vi, Jira, Git</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- event -->
|
||||
</div> <!-- cube -->
|
||||
|
||||
<div class="cube">
|
||||
<div class="year">
|
||||
<div>2001</div>
|
||||
</div> <!-- year -->
|
||||
</div> <!-- cube -->
|
||||
|
||||
<div class="cube">
|
||||
<div class="event">
|
||||
<div class="circle-left"></div>
|
||||
<div class="left">
|
||||
<span class="glyphicon glyphicon-play"></span>
|
||||
<div>
|
||||
<h3>
|
||||
<time datetime="2001-03-01 00:00">Mar 2001</time>
|
||||
System Admin / Programmer
|
||||
</h3>
|
||||
<p>
|
||||
Creative Marketing Programs Kansas City<br/>
|
||||
Mar 2001 – May 2018<br/>
|
||||
Duration: 17 yrs 3 mos<br/>
|
||||
Location: Kansas City, MO<br/>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Full-Stack Development, Interactive Web Sites, Frameworks</li>
|
||||
<li>Evaluate, recommend, purchase, configure, and set up new IT equipment and software applications</li>
|
||||
<li>Evaluated, and recommended new hires.</li>
|
||||
<li>Maintain and troubleshoot 6 servers, 30 PC's and laptops, 8 printers, switches, SonicWall firewall</li>
|
||||
<li>Development of eBRC (electronic business reply card) system using ASP and SQL Server</li>
|
||||
<li>Development of a fully dynamic company website using PHP, Javascript, jQuery, CSS, MySQL, and CodeIgniter framework, C# backend work.</li>
|
||||
<li>Development of PURL (personalized URL) system with mapping using PHP, Javascript, CSS, MySQL, and CodeIgniter</li>
|
||||
<li>Built a fully dynamic email system that tracked and reported if the email was opened and attachments opened, using PHP, MySQL, Building on current API (Application Programming Interfaces).</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- event -->
|
||||
</div> <!-- cube -->
|
||||
|
||||
<div class="cube">
|
||||
<div class="year">
|
||||
<div>2000</div>
|
||||
</div> <!-- year -->
|
||||
</div> <!-- cube -->
|
||||
|
||||
<div class="cube">
|
||||
<div class="event">
|
||||
<div class="circle-right"></div>
|
||||
<div class="right">
|
||||
<span class="glyphicon glyphicon-play"></span>
|
||||
<div>
|
||||
<h3>
|
||||
<time datetime="2000-06-01 00:00">Jun 2000</time>
|
||||
Programmer III
|
||||
</h3>
|
||||
<p>
|
||||
Clay County Government department of Information Services<br/>
|
||||
Jun 2000 – Mar 2001<br/>
|
||||
Duration: 10 mos<br/>
|
||||
Location: Liberty, MO<br/>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Development of the county Intranet and Internet websites. Maintenance of existing systems</li>
|
||||
<li>Development of an Intranet Helpdesk system using ASP, Microsoft Access, and SQL 7.0</li>
|
||||
<li>Development an on-line phone directory for county employees using ASP and MS Access</li>
|
||||
<li>Assisted the web developer on Internet layout and design using Javascript, ASP, and HTML</li>
|
||||
<li>Maintenance of county taxation and budgeting systems using PL/B</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- event -->
|
||||
</div> <!-- cube -->
|
||||
|
||||
<div class="cube">
|
||||
<div class="year">
|
||||
<div>1997</div>
|
||||
</div> <!-- year -->
|
||||
</div> <!-- cube -->
|
||||
|
||||
<div class="cube">
|
||||
<div class="event">
|
||||
<div class="circle-left"></div>
|
||||
<div class="left">
|
||||
<span class="glyphicon glyphicon-play"></span>
|
||||
<div>
|
||||
<h3>
|
||||
<time datetime="1997-10-01 00:00">Oct 1997</time>
|
||||
Programmer / Analyst
|
||||
</h3>
|
||||
<p>
|
||||
Harte Hanks<br/>
|
||||
Oct 1997 – May 2000<br/>
|
||||
Duration: 2 yrs 8 mos<br/>
|
||||
Location: Lenexa, KS<br/>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Full project life cycle design and development</li>
|
||||
<li>Team Lead on a pharmacy sample, fulfillment and tracking system meeting FDA & client specs</li>
|
||||
<li>Used Visual Basic 6.0 with RDO connectivity to Oracle and DB2 databases</li>
|
||||
<li>Re-design of Oracle database system and re-write of COBOL programs into Visual Basic utilizing OLE</li>
|
||||
<li>Build all front-end screens connecting to a VSE/DB2 DB system using Visual Basic 5.0 with RDO</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- event -->
|
||||
</div> <!-- cube -->
|
||||
|
||||
<div class="cube">
|
||||
<div class="year">
|
||||
<div>1995</div>
|
||||
</div> <!-- year -->
|
||||
</div> <!-- cube -->
|
||||
|
||||
<div class="cube">
|
||||
<div class="event">
|
||||
<div class="circle-right"></div>
|
||||
<div class="right">
|
||||
<span class="glyphicon glyphicon-play"></span>
|
||||
<div>
|
||||
<h3>
|
||||
<time datetime="1995-02-01 00:00">Feb 1995</time>
|
||||
Programmer / Analyst
|
||||
</h3>
|
||||
<p>
|
||||
Professional Telemarketing Inc.<br/>
|
||||
Feb 1995 – Sep 1997<br/>
|
||||
Duration: 2 yrs 8 mos<br/>
|
||||
Location: Raytown, MO<br/>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Design, layout and programming of client projects</li>
|
||||
<li>IVR development including voice recording and setup utilizing Wygant Archietalk IVR language/script</li>
|
||||
<li>System administration of LAN and client computers, operating NT and the Alpha Micro 3000 servers</li>
|
||||
<li>Hardware/software installation and maintenance of computers, printers, fax systems, and modems</li>
|
||||
<li>Participated in the design of the company Website</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- event -->
|
||||
</div> <!-- cube -->
|
||||
|
||||
<div class="cube">
|
||||
<div class="year">
|
||||
<div>1992</div>
|
||||
</div> <!-- year -->
|
||||
</div> <!-- cube -->
|
||||
|
||||
<div class="cube">
|
||||
<div class="event">
|
||||
<div class="circle-left"></div>
|
||||
<div class="left">
|
||||
<span class="glyphicon glyphicon-play"></span>
|
||||
<div>
|
||||
<h3>
|
||||
<time datetime="1992-11-01 00:00">Nov 1992</time>
|
||||
Computer Programmer
|
||||
</h3>
|
||||
<p>
|
||||
Emergency System Services<br/>
|
||||
Nov 1992 – Feb 1995<br/>
|
||||
Duration: 2 yrs 4 mos<br/>
|
||||
Location: Kansas City, MO<br/>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Modified and Expanded the CAD (Computer Aided Dispatch) Ambulance Dispatching Software on Unix</li>
|
||||
<li>Provided customer service, 24-hour system support, training, setup and testing of hardware /software</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- event -->
|
||||
</div> <!-- cube -->
|
||||
|
||||
<div class="cube">
|
||||
<div class="year">
|
||||
<div>1989</div>
|
||||
</div> <!-- year -->
|
||||
</div> <!-- cube -->
|
||||
|
||||
<div class="cube">
|
||||
<div class="event">
|
||||
<div class="circle-right"></div>
|
||||
<div class="right">
|
||||
<span class="glyphicon glyphicon-play"></span>
|
||||
<div>
|
||||
<h3>
|
||||
<time datetime="1989-02-01 00:00">Feb 1989</time>
|
||||
Mechanic (Electronics)
|
||||
</h3>
|
||||
<p>
|
||||
TWA<br/>
|
||||
Feb 1989 – Oct 1992<br/>
|
||||
Duration: 3 yrs 9 mos<br/>
|
||||
Location: Kansas City, MO<br/>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Test and repair of various flight panel gauges and instruments</li>
|
||||
<li>Work in the Automated Test Equipment dept. on auto-pilot systems and navigational equipment</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- event -->
|
||||
</div> <!-- cube -->
|
||||
|
||||
<div class="cube">
|
||||
<div class="year">
|
||||
<div>1988</div>
|
||||
</div> <!-- year -->
|
||||
</div> <!-- cube -->
|
||||
|
||||
<div class="cube">
|
||||
<div class="event">
|
||||
<div class="circle-left"></div>
|
||||
<div class="left">
|
||||
<span class="glyphicon glyphicon-play"></span>
|
||||
<div>
|
||||
<h3>
|
||||
<time datetime="1988-07-01 00:00">Jul 1988</time>
|
||||
Owner
|
||||
</h3>
|
||||
<p>
|
||||
Repair Emporium<br/>
|
||||
Jul 1988 – Feb 1989<br/>
|
||||
Duration: 8 mos<br/>
|
||||
Location: North Kansas City, MO<br/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- event -->
|
||||
</div> <!-- cube -->
|
||||
|
||||
<div class="cube">
|
||||
<div class="year">
|
||||
<div>1985</div>
|
||||
</div> <!-- year -->
|
||||
</div> <!-- cube -->
|
||||
|
||||
<div class="cube">
|
||||
<div class="event">
|
||||
<div class="circle-right"></div>
|
||||
<div class="right">
|
||||
<span class="glyphicon glyphicon-play"></span>
|
||||
<div>
|
||||
<h3>
|
||||
<time datetime="1985-12-01 00:00">Dec 1985</time>
|
||||
Technical Engineer
|
||||
</h3>
|
||||
<p>
|
||||
Butler National Corporation<br/>
|
||||
Dec 1985 – Jul 1988<br/>
|
||||
Duration: 2 yrs 8 mos<br/>
|
||||
Location: Lenexa, KS<br/>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Testing and repair of automatic dialing alarm systems</li>
|
||||
<li>Provided customer service, training, on-site repairs, and assistance to several internal departments</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- event -->
|
||||
</div> <!-- cube -->
|
||||
|
||||
<div class="cube">
|
||||
<div class="year">
|
||||
<div>1984</div>
|
||||
</div> <!-- year -->
|
||||
</div> <!-- cube -->
|
||||
|
||||
<div class="cube">
|
||||
<div class="event">
|
||||
<div class="circle-left"></div>
|
||||
<div class="left">
|
||||
<span class="glyphicon glyphicon-play"></span>
|
||||
<div>
|
||||
<h3>
|
||||
<time datetime="1984-01-01 00:00">Jan 1984</time>
|
||||
Electronic Technician
|
||||
</h3>
|
||||
<p>
|
||||
CPS<br/>
|
||||
Jan 1984 – Dec 1985<br/>
|
||||
Duration: 2 yrs<br/>
|
||||
Location: Kansas City, MO<br/>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Troubleshoot, repair, and install car stereo equipment</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- event -->
|
||||
</div> <!-- cube -->
|
||||
|
||||
<div class="cube">
|
||||
<div class="year">
|
||||
<div>1982</div>
|
||||
</div> <!-- year -->
|
||||
</div> <!-- cube -->
|
||||
|
||||
<div class="cube">
|
||||
<div class="event">
|
||||
<div class="circle-right"></div>
|
||||
<div class="right">
|
||||
<span class="glyphicon glyphicon-play"></span>
|
||||
<div>
|
||||
<h3>
|
||||
<time datetime="1982-08-01 00:00">Aug 1982</time>
|
||||
Bio-medical Technician
|
||||
</h3>
|
||||
<p>
|
||||
American Monitor Corporation<br/>
|
||||
Aug 1982 – Nov 1983<br/>
|
||||
Duration: 1 yrs 4 mos<br/>
|
||||
Location: Indianapolis, IN<br/>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Troubleshoot and repair of medical equipment inside hospital laboratories</li>
|
||||
<li>I covered the Midwest region: MO, IL, AR, TN</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- event -->
|
||||
</div> <!-- cube -->
|
||||
|
||||
<div class="cube">
|
||||
<div class="event">
|
||||
<div class="circle-left"></div>
|
||||
<div class="left">
|
||||
<span class="glyphicon glyphicon-play"></span>
|
||||
<div>
|
||||
<h3>
|
||||
<time datetime="1982-06-21 00:00">Jun 1982</time>
|
||||
Electronics Institue
|
||||
</h3>
|
||||
<p>
|
||||
Electronics Institute<br/>
|
||||
Degree: Communications and Digital Technology<br/>
|
||||
Field Of Study: Electronics<br/>
|
||||
Grade: 3.7<br/>
|
||||
Dates attended or expected graduation 1981 – 1982<br/>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Graduated 06/21/1982</li>
|
||||
<li>Diploma in Communications and Digital Technology</li>
|
||||
<li>Award - Outstanding Achievement</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- event -->
|
||||
</div> <!-- cube -->
|
||||
</div> <!-- timeline -->
|
||||
</div> <!-- container -->
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>Copyright © 2019, Rick Hays</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
15
scss/_circle.scss
Normal file
15
scss/_circle.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
/* Example: .circle { @include circle(200px, #999); } */
|
||||
|
||||
@mixin circle($size, $color, $display, $zindex: 0)
|
||||
{
|
||||
background: $color;
|
||||
display: $display;
|
||||
height: $size;
|
||||
line-height: $size;
|
||||
width: $size;
|
||||
z-index: $zindex;
|
||||
|
||||
border-radius: $size/2;
|
||||
-webkit-border-radius: $size/2;
|
||||
-moz-border-radius: $size/2;
|
||||
}
|
||||
12
scss/_color.scss
Normal file
12
scss/_color.scss
Normal file
@@ -0,0 +1,12 @@
|
||||
$background-color: #ccc;
|
||||
$big-circle-color-bg: purple;
|
||||
$big-circle-color-fg: white;
|
||||
$event-color: white;
|
||||
$event-date-color: SlateBlue;
|
||||
$event-arrow-color: white;
|
||||
$footer-background-color: #5e6482;
|
||||
$footer-color: white;
|
||||
$header-background-color: #5e6482;
|
||||
$header-color: white;
|
||||
$line-color: purple;
|
||||
$little-circle-color: purple;
|
||||
1
scss/_font.scss
Normal file
1
scss/_font.scss
Normal file
@@ -0,0 +1 @@
|
||||
$font-stack: 'Arial', sans-serif;
|
||||
5
scss/_line.scss
Normal file
5
scss/_line.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
@mixin line($width, $color, $type, $zindex: 0)
|
||||
{
|
||||
border-left: $width $type $color;
|
||||
z-index: $zindex;
|
||||
}
|
||||
209
scss/timeline.scss
Normal file
209
scss/timeline.scss
Normal file
@@ -0,0 +1,209 @@
|
||||
@import "color.scss";
|
||||
@import "font.scss";
|
||||
@import "circle.scss";
|
||||
@import "line.scss";
|
||||
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
|
||||
|
||||
* { margin: 0; padding: 0; }
|
||||
|
||||
body, html { min-height: 100%; min-width: 100%}
|
||||
|
||||
body
|
||||
{
|
||||
background: $background-color;
|
||||
font-family: $font-stack;
|
||||
}
|
||||
|
||||
p { margin: 10px 0; }
|
||||
|
||||
ul { display: table}
|
||||
ul>li { display: table-row; }
|
||||
ul>li::before { content: "\21D2"; display: table-cell; padding: 5px 5px 0 0; text-align: right }
|
||||
|
||||
#time-line
|
||||
{
|
||||
@include line(5px, $line-color, solid, -100);
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
margin-left: 49.75%;
|
||||
margin-top: 70px;
|
||||
min-height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.container
|
||||
{
|
||||
margin: auto;
|
||||
min-width: 480px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 940px;
|
||||
}
|
||||
|
||||
header
|
||||
{
|
||||
background: $header-background-color;
|
||||
color: $header-color;
|
||||
height: 70px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#timeline
|
||||
{
|
||||
height: 100%;
|
||||
min-height: 700px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.cube
|
||||
{
|
||||
margin-bottom: 20px;
|
||||
min-height: 100px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.year
|
||||
{
|
||||
@include circle(70px, $big-circle-color-bg, block, 10);
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.year div
|
||||
{
|
||||
color: $big-circle-color-fg;
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.event
|
||||
{
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
visibility: visible;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.event div.circle-left
|
||||
{
|
||||
@include circle(33px, $little-circle-color, inline-block, 10);
|
||||
margin-left: 26px;
|
||||
}
|
||||
|
||||
.event div.left
|
||||
{
|
||||
float: left;
|
||||
position: relative;
|
||||
width: 45%;
|
||||
-webkit-animation: fade;
|
||||
-webkit-animation-duration: 2s;
|
||||
}
|
||||
|
||||
.event div.left span
|
||||
{
|
||||
color: $event-arrow-color;
|
||||
float: right;
|
||||
font-size: 46px;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
.event div.left div
|
||||
{
|
||||
background: $event-color;
|
||||
border-radius: 10px;
|
||||
margin-right: 30px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.event div.circle-right
|
||||
{
|
||||
@include circle(33px, $little-circle-color, inline-block, 10);
|
||||
margin-left: 407px;
|
||||
}
|
||||
|
||||
.event div.right
|
||||
{
|
||||
float: right;
|
||||
position: relative;
|
||||
width: 45%;
|
||||
-webkit-animation: fade;
|
||||
-webkit-animation-duration: 2s;
|
||||
}
|
||||
|
||||
.event div.right span
|
||||
{
|
||||
color: $event-arrow-color;
|
||||
float: left;
|
||||
font-size: 46px;
|
||||
position: relative;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
|
||||
.event div.right div
|
||||
{
|
||||
background: $event-color;
|
||||
border-radius: 10px;
|
||||
margin-left: 30px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.event time
|
||||
{
|
||||
background: $event-date-color;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
footer
|
||||
{
|
||||
background: $footer-background-color;
|
||||
bottom: 0;
|
||||
color: $footer-color;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 940px)
|
||||
{
|
||||
.container { min-width: 720px; width: 800px; }
|
||||
header { height: 60px; }
|
||||
h1{ font-size: 23px; }
|
||||
#time-line { margin: 25px 214px; }
|
||||
.year { @include circle(70px, $big-circle-color-bg, block); margin: 0 180px; text-align: left; }
|
||||
.event div { position: relative; width: 340px}
|
||||
.event div.circle-left { @include circle(33px, $little-circle-color, inline-block, 10); margin-left: 160px; }
|
||||
.event div.left { float: right; margin-right: 180px; width: 330px}
|
||||
.event div.left span { color: $event-arrow-color; float: left; font-size: 46px; position: relative; top: 0; transform: rotate(180deg); }
|
||||
.event div.right { margin-right: 190px; width: 320px}
|
||||
.event div.left div { margin-left: 30px; margin-right: 0 }
|
||||
.event div.circle-right { @include circle(33px, $little-circle-color, inline-block, 10); margin-left: 160px; }
|
||||
}
|
||||
|
||||
@media screen and (max-width: 720px)
|
||||
{
|
||||
.container { min-width: 300px; width: 480px; }
|
||||
header { height: 60px;}
|
||||
h1{ font-size: 23px; }
|
||||
#time-line { margin: 25px 63px; }
|
||||
.year { @include circle(70px, $big-circle-color-bg, block); margin: 0 30px; text-align: left; }
|
||||
.event div { position: relative; width: 300px}
|
||||
.event div.circle-left { @include circle(33px, $little-circle-color, inline-block, 10); margin-left: 24px; }
|
||||
.event div.left { margin-right: 50px; width: 320px}
|
||||
.event div.left span { color: $event-arrow-color; float: left; font-size: 46px; position: relative; top: 0; transform: rotate(180deg); }
|
||||
.event div.right { margin-right: 50px; width: 320px}
|
||||
.event div.left div { margin-left: 30px; margin-right: 0 }
|
||||
.event div.circle-right { @include circle(33px, $little-circle-color, inline-block, 10); margin-left: 24px; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes fade
|
||||
{
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
Reference in New Issue
Block a user