From 12cc5b072faf1997726294d94ab9b185d3f4fa73 Mon Sep 17 00:00:00 2001 From: Cameron Cordes Date: Sat, 28 Sep 2019 00:09:04 -0400 Subject: [PATCH] Fixed layout issues More responsive UI using proper bootstrap container and cols. Updating some colors and resume screen. --- package-lock.json | 26 +- src/app/app.component.html | 12 +- src/app/contact/contact.component.css | 25 -- src/app/contact/contact.component.html | 8 +- src/app/home/home.component.css | 32 +- src/app/home/home.component.html | 46 +-- src/app/resume/resume.component.css | 103 ------ src/app/resume/resume.component.html | 48 +-- src/app/toolbar/toolbar.component.css | 2 +- src/assets/nord.css | 224 +++++++++++++ src/assets/normalize.css | 427 +++++++++++++++++++++++++ src/index.html | 3 +- src/styles.css | 39 ++- 13 files changed, 765 insertions(+), 230 deletions(-) create mode 100644 src/assets/nord.css create mode 100644 src/assets/normalize.css diff --git a/package-lock.json b/package-lock.json index 73fe084..994045a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1002,7 +1002,7 @@ }, "minimist": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=" }, "nan": { @@ -3876,7 +3876,7 @@ "argparse": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", - "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", + "integrity": "sha1-vNZ5HqWuCXJeF+WtmIE0zUCz2RE=", "dev": true, "requires": { "sprintf-js": "~1.0.2" @@ -4254,7 +4254,7 @@ "base": { "version": "0.11.2", "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz", - "integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==", + "integrity": "sha1-e95c7RRbbVUakNuH+DxVi060io8=", "requires": { "cache-base": "^1.0.1", "class-utils": "^0.3.5", @@ -4276,7 +4276,7 @@ "is-accessor-descriptor": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz", - "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==", + "integrity": "sha1-FpwvbT3x+ZJhgHI2XJsOofaHhlY=", "requires": { "kind-of": "^6.0.0" } @@ -4284,7 +4284,7 @@ "is-data-descriptor": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz", - "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==", + "integrity": "sha1-2Eh2Mh0Oet0DmQQGq7u9NrqSaMc=", "requires": { "kind-of": "^6.0.0" } @@ -4292,7 +4292,7 @@ "is-descriptor": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz", - "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==", + "integrity": "sha1-OxWXRqZmBLBPjIFSS6NlxfFNhuw=", "requires": { "is-accessor-descriptor": "^1.0.0", "is-data-descriptor": "^1.0.0", @@ -4563,7 +4563,7 @@ }, "buffer": { "version": "4.9.1", - "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz", + "resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz", "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=", "dev": true, "requires": { @@ -4696,7 +4696,7 @@ "cache-base": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz", - "integrity": "sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==", + "integrity": "sha1-Cn9GQWgxyLZi7jb+TnxZ129marI=", "requires": { "collection-visit": "^1.0.0", "component-emitter": "^1.2.1", @@ -4837,7 +4837,7 @@ "class-utils": { "version": "0.3.6", "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz", - "integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==", + "integrity": "sha1-+TNprouafOAv1B+q0MqDAzGQxGM=", "requires": { "arr-union": "^3.1.0", "define-property": "^0.2.5", @@ -8096,7 +8096,7 @@ "is-descriptor": { "version": "0.1.6", "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz", - "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==", + "integrity": "sha1-Nm2CQN3kh8pRgjsaufB6EKeCUco=", "requires": { "is-accessor-descriptor": "^0.1.6", "is-data-descriptor": "^0.1.4", @@ -8202,7 +8202,7 @@ "is-plain-object": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", - "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==", + "integrity": "sha1-LBY7P6+xtgbZ0Xko8FwqHDjgdnc=", "requires": { "isobject": "^3.0.1" } @@ -8241,7 +8241,7 @@ "is-windows": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz", - "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==" + "integrity": "sha1-0YUOuXkezRjmGCzhKjDzlmNLsZ0=" }, "is-wsl": { "version": "1.1.0", @@ -11774,7 +11774,7 @@ "split-string": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz", - "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==", + "integrity": "sha1-fLCd2jqGWFcFxks5pkZgOGguj+I=", "requires": { "extend-shallow": "^3.0.0" } diff --git a/src/app/app.component.html b/src/app/app.component.html index 07561ec..3cbc2a2 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,6 +1,8 @@ -
- +
+ +
+
+ +
+
-
- -
diff --git a/src/app/contact/contact.component.css b/src/app/contact/contact.component.css index f0ca285..b02cee5 100644 --- a/src/app/contact/contact.component.css +++ b/src/app/contact/contact.component.css @@ -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; - } -} diff --git a/src/app/contact/contact.component.html b/src/app/contact/contact.component.html index 432de3a..dd12482 100644 --- a/src/app/contact/contact.component.html +++ b/src/app/contact/contact.component.html @@ -1,6 +1,5 @@ -
-
+
+

Social Media

@@ -19,7 +18,6 @@ Email
-

Contact me to connect, collaborate or just to chat.

+

Contact me to connect, collaborate or just to chat.

-
diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css index 5d217fc..1463bb7 100644 --- a/src/app/home/home.component.css +++ b/src/app/home/home.component.css @@ -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; - } } diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 2c42c7e..d79abbb 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,23 +1,29 @@ -
-
- background -
-
-
- headshot photo -

Cameron Cordes

-

- Android and iOS Developer

-

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.

-

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.

+
+ + + +
+ headshot photo +

Cameron Cordes

+
+
+

+ Android and iOS Developer +

+

+ 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. +

+

+ 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. +

+
diff --git a/src/app/resume/resume.component.css b/src/app/resume/resume.component.css index f33391b..e69de29 100644 --- a/src/app/resume/resume.component.css +++ b/src/app/resume/resume.component.css @@ -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; -} diff --git a/src/app/resume/resume.component.html b/src/app/resume/resume.component.html index 1b7e17b..f114633 100644 --- a/src/app/resume/resume.component.html +++ b/src/app/resume/resume.component.html @@ -1,4 +1,16 @@ -
+
+
+

Cameron Cordes

+

Android | iOS | Web

+ headshot photo +

Building things since 2015.

+
+
+ Mobile Developer +
+
+ +