From 9e3e60e1dd7983f98c35004f7f1a065d37959520 Mon Sep 17 00:00:00 2001 From: Patrick Daly Date: Thu, 16 Nov 2023 01:19:40 -0600 Subject: [PATCH] Redesign 2023 --- index.html | 56 +++++-------- queries.css | 9 ++ resources/images/hero-devices.svg | 112 +++++++++++++++++++++++++ style.css | 134 +++++++++++++++++++++++++----- 4 files changed, 252 insertions(+), 59 deletions(-) create mode 100644 resources/images/hero-devices.svg diff --git a/index.html b/index.html index fffcf55..1ad0785 100755 --- a/index.html +++ b/index.html @@ -42,19 +42,26 @@

Patrick Daly

- Software Engineer + Frontend Software Engineer

+ Created with getavataaars.com +
+
+
-
-
+
+

Portfolio

-

Senior Frontend Engineer at Khoros. Javascript is my preferred programming language. I have experience working with React.js, Angular, NativeScript, AngularJS, Backbone.js, jQuery, Sass, MaterialUI, Webpack, Gulp, CircleCI, Docker, Socket.io, Node.js, Express.js, MongoDB, and SQL. I was the lead instructor at one of the country's top software engineering bootcamps for 2 years. I am passionate about learning new technologies and always looking for opportunities to expand and hone my skills. A few of my personal projects can be seen below.

+

Hi, nice to meet you! I'm a Senior Frontend Engineer at Khoros. Javascript is my preferred programming language, and I'm comfortable working with most of the latest frontend frameworks used to build modern websites. I've also got experience working various build and CI/CD tools, testing libraries, databases, and Javascript server-side frameworks. +

+ I was the lead instructor at one of the country's top software engineering bootcamps for 2 years, and I truly enjoy collaborating with people who are excited about building cool things. I am passionate about learning new technologies and always looking for opportunities to expand and hone my skills. A few of my personal projects can be seen below.

- -
+
+
+
@@ -132,6 +139,7 @@

Github

PDF

+
@@ -146,38 +154,12 @@

Contact

-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
- -
+
+ +
+ +
diff --git a/queries.css b/queries.css index f14c164..2774b6f 100644 --- a/queries.css +++ b/queries.css @@ -5,6 +5,11 @@ } .row { padding: 0 2%; } + + .portfolio-body { + padding: 40px; + max-width: 90%; + } } @media only screen and (max-width: 1023px) { @@ -29,6 +34,10 @@ .row, .header-text-box { padding: 0 4%; } + .portfolio-body { + padding: 20px; + } + .main-nav { display: none; } .section-portfolio .span-1-of-3 { diff --git a/resources/images/hero-devices.svg b/resources/images/hero-devices.svg new file mode 100644 index 0000000..1187580 --- /dev/null +++ b/resources/images/hero-devices.svg @@ -0,0 +1,112 @@ + + Group 28 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css index 5841a40..0e39e93 100755 --- a/style.css +++ b/style.css @@ -33,7 +33,8 @@ section { /* ---------- HEADER ---------- */ header { - background-image: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url(resources/images/web-design.jpg); + background: #ffffff; + /* background-image: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url(resources/images/web-design.jpg); */ background-size: cover; background-position: center; height: 100vh; @@ -42,18 +43,36 @@ header { .header-text-box { position: absolute; width: 1140px; - top: 50%; + top: 44%; left: 50%; transform: translate(-50%, -50%); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.hero-image { + height: 210px; + position: absolute; + bottom: -13%; + left: 50%; + transform: translate(-50%, -50%); } /* ---------- RESUME SECTION ---------- */ .section-resume { - background-color: #f4f4f4; + padding-top: 40px; + background: #ffffff; text-align: center; } +.section-resume h2, +.section-form h2 { + color: #023047; +} + .box img { max-width: 230px; width: 100%; @@ -93,7 +112,7 @@ img.screenshot { .main-nav li a:link, .main-nav li a:visited { padding: 8px 0; - color: #fff; + color: #023047; text-decoration: none; text-transform: uppercase; font-size: 90%; @@ -102,8 +121,9 @@ img.screenshot { } .main-nav li a:hover, +.main-nav li a:focus, .main-nav li a:active { - border-bottom: 2px solid #e67e22; + border-bottom: 2px solid #fb8500; } /* HEADINGS */ @@ -111,20 +131,23 @@ img.screenshot { h1 { margin-top: 0; margin-bottom: 20px; - color: #fff; + color: #219ebc; font-size: 240%; font-weight: 400; letter-spacing: 1px; - text-transform: uppercase; word-spacing: 4px; } .subtitle { - color: #e67e22; + color: #023047; font-size: 180%; font-weight: 300; letter-spacing: 1px; - padding-left: 4px; /*HACKY FIX*/ + margin-bottom: 20px; +} + +.avatar { + height: 200px; } h2, h3 { @@ -133,6 +156,7 @@ h2, h3 { } h2 { + color: #ffb703; font-size: 180%; word-spacing: 2px; text-align: center; @@ -148,7 +172,7 @@ h3 { h2:after { display: block; height: 2px; - background-color: #e67e22; + background-color: #fb8500; content: " "; width: 100px; margin: 0 auto; @@ -171,8 +195,8 @@ input[type=submit] { .btn-full:link, .btn-full:visited, input[type=submit] { - background-color: #e67e22; - border: 1px solid #e67e22; + background-color: #023047; + border: 1px solid #023047; color: #fff; margin-right: 15px; } @@ -184,18 +208,24 @@ input[type=submit] { } .btn:hover, +.btn:focus, .btn:active, input[type=submit]:hover, input[type=submit]:active { - background-color: #cf6d17; + background-color: #219ebc; + color: #023047; } .btn-full:hover, -.btn-full:active { - border: 1px solid #cf6d17; +.btn-full:focus, +.btn-full:active, +input[type=submit]:hover, +input[type=submit]:active { + border: 1px solid #219ebc; } .btn-ghost:hover, +.btn-ghost:focus, .btn-ghost:active { border: 1px solid #cf6d17; color: #fff; @@ -204,10 +234,12 @@ input[type=submit]:active { /* PARAGRAPHS */ .long-copy { + color: #ffffff; line-height: 145%; width: 88%; padding-bottom: 1em; margin-left: 6%; /* width + margin-left + margin-right = 100% */ + text-align: center; } .box p { @@ -215,6 +247,31 @@ input[type=submit]:active { line-height: 145% } +.section-copy { + padding-bottom: 120px; + background: #023047; +} + +.section-portfolio { + padding-bottom: 0; + background: transparent; +} + +.portfolio-copy { + margin-bottom: 100px; +} + +.portfolio-body { + margin-top: -220px; + box-shadow: 0 5px 5px 0 rgba(233, 240, 243, 0.5), 0 0 0 1px #E6ECF8; + background-color: #ffffff; + border-radius: 40px; + padding: 40px; + max-width: 1240px; + text-align: center; + margin-bottom: 80px; +} + .section-portfolio i, .section-portfolio h3 { text-align: center; @@ -236,7 +293,7 @@ input[type=submit]:active { a:link, a:visited { - color: #e67e22; + color: #023047; text-decoration: none; /* padding-bottom: 1px; */ /* border-bottom: 1px solid #e67e22; */ @@ -244,29 +301,59 @@ a:visited { } a:hover, +a:focus, a:active { - color: #555; + color: #8ecae6; + /* border-bottom: 1px solid transparent; */ +} + +.section-resume a:hover, +.section-resume a:focus, +.section-resume a:active { + color: #fb8500; /* border-bottom: 1px solid transparent; */ } /* CONTACT FORM */ +.section-form { + background-color: #8ecae6; +} + .contact-form { width: 60%; margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + gap: 7px; +} + +.contact-form .small-inputs { + display: flex; + gap: 7px; + width: 100% } input[type=text], -input[type=email], +input[type=email] { + border-radius: 3px; + border: 1px solid #ccc; + width: 100%; + height: 32px; + padding-left: 7px; +} + textarea { width: 100%; padding: 7px; border-radius: 3px; border: 1px solid #ccc; + min-height: 160px; } -textarea { - height: 100px; +input[type=submit] { + margin: 16px 0; } *:focus { @@ -313,6 +400,7 @@ footer { } .footer-nav li a:hover, +.footer-nav li a:focus, .footer-nav li a:active { color: #ddd; } @@ -334,11 +422,13 @@ footer { transition: fill 0.2s; } -.linkedin-icon:hover path { +.linkedin-icon:hover path, +.linkedin-icon:focus path { fill: #007bb5; } -.github-icon:hover path { +.github-icon:hover path, +.github-icon:focus path { fill: #2fcb53; }