Fixed layout issues
More responsive UI using proper bootstrap container and cols. Updating some colors and resume screen.
This commit is contained in:
Cameron Cordes
@@ -1,6 +1,8 @@
|
||||
<div style="text-align:center">
|
||||
<app-toolbar></app-toolbar>
|
||||
<div class="d-flex flex-column h-100">
|
||||
<app-toolbar></app-toolbar>
|
||||
<div class="container-fluid flex-grow-1">
|
||||
<main class="h-100" [@routerTransition]="o.isActivated ? o.activatedRoute : ''">
|
||||
<router-outlet #o="outlet"></router-outlet>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<main [@routerTransition]="o.isActivated ? o.activatedRoute : ''">
|
||||
<router-outlet #o="outlet"></router-outlet>
|
||||
</main>
|
||||
|
||||
@@ -24,28 +24,3 @@
|
||||
color: #0FA0CE;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.icon-layout {
|
||||
padding: .1em;
|
||||
margin: .5em .25em .5em .25em
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: 1em .5em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 425px) {
|
||||
.icon-layout {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: 1em .5em;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<div
|
||||
style="background: url(../../assets/terminal-background.jpg) repeat-y;width: 100%; height: 100%; background-size: contain">
|
||||
<div class="center-column" style="position: absolute; z-index: 1; margin-top: 2em">
|
||||
<div class="row text-center">
|
||||
<div class="col mt-3">
|
||||
<h2>Social Media</h2>
|
||||
|
||||
<div style="display: flex; justify-content: center; width: 100%">
|
||||
@@ -19,7 +18,6 @@
|
||||
<span class="icon-text">Email</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="subtitle">Contact me to connect, collaborate or just to chat.</p>
|
||||
<p class="subtitle mt-2">Contact me to connect, collaborate or just to chat.</p>
|
||||
</div>
|
||||
<div style="background: white; height: 100%; opacity: 0.78"></div>
|
||||
</div>
|
||||
|
||||
@@ -1,42 +1,14 @@
|
||||
.overlay {
|
||||
background: black;
|
||||
position: relative;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.image {
|
||||
opacity: 0.1;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.home-container {
|
||||
background: #2f2f31;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.overlay-text {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.headshot {
|
||||
width: 27%;
|
||||
margin: 2em 0 1em 0
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.headshot {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.overlay-text {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 425px) {
|
||||
.overlay-text {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,23 +1,29 @@
|
||||
<div class="home-container">
|
||||
<div class="overlay" style="position: absolute;">
|
||||
<img src="../../assets/CubeSpace.jpg" class="image" alt="background">
|
||||
</div>
|
||||
<div class="center-column" style="height: 100%">
|
||||
<div style="width: 100%; margin: 0 auto; position: absolute">
|
||||
<img src="../../assets/cameron-headshot.jpg" class="headshot" alt="headshot photo">
|
||||
<h1 class="overlay-text">Cameron Cordes</h1>
|
||||
<p
|
||||
class="thin-subtitle" style="color: white;">
|
||||
Android and iOS Developer</p>
|
||||
<p class="body-text">Hello! I'm Cameron, I am a software developer focusing on mobile Android and iOS
|
||||
applications. I love software development, I enjoy creating things, solving problems and making simple, smart
|
||||
solutions to business problems.</p>
|
||||
<p class="body-text">I first discovered programming by making bots for the classic Massively Multiplayer Online
|
||||
Role Playing Game Runescape. I learned that you could automate leveling up your skills by writing scripts to do
|
||||
the process for you. So I started reading other peoples scripts, learning the scripting language Pascal. I
|
||||
quickly realized that I could build something that could help myself and others level up their characters in the
|
||||
game and have fun learning and solving problems and thus sparked my love of programming and eventually software
|
||||
development.</p>
|
||||
<div class="row h-100 dark-bg">
|
||||
<!-- <div class="d-relative"> -->
|
||||
<!-- <img src="../../assets/CubeSpace.jpg" class="image" alt="background"> -->
|
||||
<!-- </div> -->
|
||||
<div class="col col-xl-9 col-lg-12 col-md-12 mx-auto text-center">
|
||||
<img src="../../assets/cameron-headshot.jpg" class="w-50 my-3" alt="headshot photo">
|
||||
<h1 class="overlay-text">Cameron Cordes</h1>
|
||||
<div class="row text-center">
|
||||
<div class="col-12 col-md-8 col-sm-12 mx-auto">
|
||||
<p class="thin-subtitle" style="color: white;">
|
||||
Android and iOS Developer
|
||||
</p>
|
||||
<p>
|
||||
Hello! I'm Cameron, I am a software developer focusing on mobile Android and iOS
|
||||
applications. I love software development, I enjoy creating things, solving problems and making simple, smart
|
||||
solutions to business problems.
|
||||
</p>
|
||||
<p>
|
||||
I first discovered programming by making bots for the classic Massively Multiplayer Online
|
||||
Role Playing Game Runescape. I learned that you could automate leveling up your skills by writing scripts to do
|
||||
the process for you. So I started reading other peoples scripts, learning the scripting language Pascal. I
|
||||
quickly realized that I could build something that could help myself and others level up their characters in the
|
||||
game and have fun learning and solving problems and thus sparked my love of programming and eventually software
|
||||
development.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,103 +0,0 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font: 16px Helvetica, Sans-Serif;
|
||||
line-height: 24px;
|
||||
background: url(../../assets/noise.jpg);
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#page-wrap {
|
||||
width: 800px;
|
||||
margin: 40px auto 60px;
|
||||
}
|
||||
|
||||
#pic {
|
||||
float: right;
|
||||
margin: -30px 0 0 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 16px 0;
|
||||
padding: 0 0 16px 0;
|
||||
font-size: 42px;
|
||||
font-weight: bold;
|
||||
letter-spacing: -2px;
|
||||
border-bottom: 1px solid #888;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
margin: 0 0 6px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h2 span {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
font-style: italic;
|
||||
font-family: Georgia, Serif;
|
||||
font-size: 16px;
|
||||
color: #888;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #888;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dotted #888;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
border-bottom-style: solid;
|
||||
color: black;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0 0 32px 17px;
|
||||
}
|
||||
|
||||
#objective {
|
||||
width: 500px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#objective p {
|
||||
font-family: Georgia, serif;
|
||||
font-style: italic;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
text-align: right;
|
||||
padding: 0 26px 0 0;
|
||||
width: 150px;
|
||||
float: left;
|
||||
height: 100px;
|
||||
border-right: 2px solid #888;
|
||||
}
|
||||
|
||||
dd {
|
||||
width: 600px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
dd.clear {
|
||||
float: none;
|
||||
margin: 0;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,16 @@
|
||||
<div id="page-wrap">
|
||||
<div class="row h-100">
|
||||
<div class="col-3 dark-bg text-center p-0">
|
||||
<h2 class="mt-3 px-2">Cameron Cordes</h2>
|
||||
<p class="tc-1">Android | iOS | Web</p>
|
||||
<img src="../../assets/cameron-headshot.jpg" class="w-75 shadow rounded" alt="headshot photo">
|
||||
<p class="my-3">Building things since 2015.</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span>Mobile Developer</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: none" id="page-wrap">
|
||||
|
||||
<img src="../../assets/cthulu.png" alt="Photo of Cthulu" id="pic"/>
|
||||
|
||||
@@ -23,36 +35,36 @@
|
||||
|
||||
<dt>Education</dt>
|
||||
<dd>
|
||||
<h2>Baldwin Wallace University</h2>
|
||||
<p><strong>Major:</strong> Computer Science<br/>
|
||||
<strong>Minor:</strong> Math</p>
|
||||
<h2>Baldwin Wallace University</h2>
|
||||
<p><strong>Major:</strong> Computer Science<br/>
|
||||
<strong>Minor:</strong> Math</p>
|
||||
</dd>
|
||||
|
||||
<dd class="clear"></dd>
|
||||
|
||||
<dt>Skills</dt>
|
||||
<dd>
|
||||
<h2>Computer skills</h2>
|
||||
<p>Windows, Linux, OSX, Android Studio, Visual Studio, XCode, Git, TFS, Microsoft productivity software (Word, Excel, etc).</p>
|
||||
<h2>Computer skills</h2>
|
||||
<p>Windows, Linux, OSX, Android Studio, Visual Studio, XCode, Git, TFS, Microsoft productivity software (Word, Excel, etc).</p>
|
||||
</dd>
|
||||
|
||||
<dd class="clear"></dd>
|
||||
|
||||
<dt>Experience</dt>
|
||||
<dd>
|
||||
<h2>Progressive Insurance <span>Mobile Developer Jan 2018 - Present</span></h2>
|
||||
<ul>
|
||||
<li>Used the Model-View-ViewModel pattern to create easily testable screens</li>
|
||||
<li>Collaborated with a large team to rapidly introduce new features</li>
|
||||
<li>Presented presentations demonstrating best practices using Git and Reactive Extensions</li>
|
||||
</ul>
|
||||
<h2>Progressive Insurance <span>Mobile Developer Jan 2018 - Present</span></h2>
|
||||
<ul>
|
||||
<li>Used the Model-View-ViewModel pattern to create easily testable screens</li>
|
||||
<li>Collaborated with a large team to rapidly introduce new features</li>
|
||||
<li>Presented presentations demonstrating best practices using Git and Reactive Extensions</li>
|
||||
</ul>
|
||||
|
||||
<h2>Hyland Software <span>Developer II - Westlake, OH - 2016 - 2018</span></h2>
|
||||
<ul>
|
||||
<li>Developed a camera interface and photo viewer using Android Camera API for a consistent method of capturing photos and reviewing them</li>
|
||||
<li>Wrote an image downloading module with in memory caching</li>
|
||||
<li>Started an initiative to use the Model View Presenter pattern to enable more testable code</li>
|
||||
</ul>
|
||||
<h2>Hyland Software <span>Developer II - Westlake, OH - 2016 - 2018</span></h2>
|
||||
<ul>
|
||||
<li>Developed a camera interface and photo viewer using Android Camera API for a consistent method of capturing photos and reviewing them</li>
|
||||
<li>Wrote an image downloading module with in memory caching</li>
|
||||
<li>Started an initiative to use the Model View Presenter pattern to enable more testable code</li>
|
||||
</ul>
|
||||
</dd>
|
||||
|
||||
<dd class="clear"></dd>
|
||||
|
||||
@@ -9,7 +9,7 @@ span {
|
||||
}
|
||||
|
||||
span:hover {
|
||||
color: #1DAEDD;
|
||||
color: var(--nord7);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user