diff --git a/.ReadMe.md.swp b/.ReadMe.md.swp new file mode 100644 index 000000000..094c7c016 Binary files /dev/null and b/.ReadMe.md.swp differ diff --git a/Wireframe Options/Option 1.png b/Wireframe Options/Option 1.png index 48e6ec87f..3a13d21d1 100644 Binary files a/Wireframe Options/Option 1.png and b/Wireframe Options/Option 1.png differ diff --git a/assets/me.jpg b/assets/me.jpg new file mode 100644 index 000000000..6aadffcb0 Binary files /dev/null and b/assets/me.jpg differ diff --git a/assets/me_2.jpg b/assets/me_2.jpg new file mode 100644 index 000000000..d97278f37 Binary files /dev/null and b/assets/me_2.jpg differ diff --git a/index.html b/index.html index d01f779ff..a4688598a 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,105 @@ - Document + Trevor LeCroy + + + - +
+

Trevor

+

LeCroy

+ +
+ +
+ +
+

Trevor LeCroy

+ My projects +

I'm a game developer, and future web developer. I dabble in many fields, I'm very flexible in everything I do, including life (I'm double jointed). I'm a Lambda School Part time student who's eagar to work on anything thrown my direction. I love problem solving, design patterns, and writing code. Python and C# are my favorite tools for the job.

+
+
+ +
+
+
+ +
+

Project One

+

Lorem Ipsum project description goes here, please read more about it

+ Github +
+
+
+ +
+

Project Two

+

Lorem Ipsum project description goes here, please read more about it

+ Github +
+
+
+ +
+

Project Three

+

Lorem Ipsum project description goes here, please read more about it

+ Github +
+
+
+ +
+

Project Four

+

Lorem Ipsum project description goes here, please read more about it

+ Github +
+
+
+ +
+

Project Five

+

Lorem Ipsum project description goes here, please read more about it

+ Github +
+
+
+ +
+

Project Six

+

Lorem Ipsum project description goes here, please read more about it

+ Github +
+
+
+ +
+

Project Seven

+

Lorem Ipsum project description goes here, please read more about it

+ Github +
+
+
+ +
+

Project Eight

+

Lorem Ipsum project description goes here, please read more about it

+ Github +
+
+
+
+ \ No newline at end of file diff --git a/style/index.css b/style/index.css index 440e53514..865390800 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,259 @@ -/* Add CSS styling here */ \ No newline at end of file +html { + background: #6ddccf; + font-family: "Open Sans", sans-serif; +} + +body { + margin: 0px auto; + display: flex; + flex-flow: column nowrap; + min-height: 100vh; +} + +header { + z-index: 1; + margin: 0px auto; + background: #ffefa1; + padding: 20px; + width: 100%; + box-shadow: 0px 2px black; +} + +h1 { + display: inline; + font-family: "Dela Gothic One", sans-serif; + color: #94ebcd; + text-shadow: 1px 1px black; + margin-bottom: 80px; + font-size: xx-large; +} + +#last { + text-decoration: underline; +} + +nav { + display: flex; + flex: column, nowrap; + justify-content: flex-start; + margin-left: 4rem; + margin-top: 20px; +} + +a { + padding: 5px; + padding-right: 20px; + padding-left: 20px; + text-decoration: none; + color: white; + background: #94ebcd; + border: 4px solid white; + box-shadow: 2px 2px 2px 1px black; + transform: rotate(0deg); + z-index: 0; + transition: box-shadow .5s, transform .5s, z-index .5s; +} + +a:hover { + box-shadow: 6px 6px 4px 2px black; + transform: rotate(5deg); + z-index: 4; + transition: box-shadow .5s, transform .5s, z-index .5s; +} + +#top-content { + margin-top: 200px; +} + +h2 { + margin-bottom: 20px; + text-shadow: 2px 2px black; + color: #ffcb91; +} + +#top-content-text a { + margin-bottom: 50px; +} + +#top-content-text p { + margin-top: 20px; + color: white; + text-shadow: 2px 2px black; +} + +b { + color: #ffefa1; +} + +b:hover { + text-decoration: underline; +} + +#top-content-img { + display: inline-block; + position: relative; + bottom: 50px; + margin-top: 10px; + margin-left: 30px; + width: 40vw; + border: 2px solid #ffefa1; + box-shadow: 4px 4px 2px 2px black; + filter: saturate(40%) hue-rotate(-20deg); + z-index: 0; +} + +#top-content-text { + display: inline-block; + position:relative; + width: 40vw; + /* width: 55%; */ + left: 200px; + bottom: 100px; + margin-bottom: -50px; + font-size: x-large; +} + +#top-content-text p { + width: 50%; +} + +#main-img-container { + width: 100%; + background: #2adEcF; + border: 2px solid #ffefa1; + border-radius: 10px; +} + +#main-img-content { + margin: 0px auto; + margin-bottom: 30px; + width: 100%; + height: 50rem; + display: flex; + flex-flow: row wrap; + justify-content: space-between; + align-content: center; +} + +.container { + display: block; + width: 20vw; + height: auto; + margin-left: 10px; + margin-right: 10px; + margin-top: 20px; + border: 2px solid #ffefa1; + box-shadow: 4px 4px 2px 1px black; + filter: blur(3px) opacity(90%) saturate(50%); + transition: box-shadow .5s, blur .5s; +} + +.container:hover { + box-shadow: 8px 8px 4px 5px black; + filter: blur(0px); + transition: box-shadow .5s, blur .5s; +} + +.container:hover .overlay { + opacity: 95%; +} + +.main-img { + width: 100%; + height: 100%; +} + +.overlay { + position: absolute; + top: 50%; + bottom: 0; + right: 0; + left: 0; + height: 50%; + width: 100%; + opacity: 0; + transition: .5s ease; + background-color: #ffefa1; + text-align: center; +} + +.overlay h3 { + color: black; + text-shadow: -2px -2px white; + font-size: large; + text-decoration: underline; +} + +.overlay p { + color: black; + text-shadow: -2px -2px white; + margin-bottom: 20px; +} + +footer { + width: 100%; + background: #ffefa1; + margin-top: 20px; + box-shadow: 0px -2px black; +} + +#footer-content { + position: relative; + left: 50vw; + margin: 0px auto; + margin-bottom: 15px; +} + +#footer-content p { + color: white; + text-shadow: 2px 2px black; + margin-top: 20px; + margin-bottom: 20px; +} + +@media (max-width: 800px) { + header { + margin-bottom: 5rem; + } + h1 { + margin: 0px auto; + } + nav { + display: flex; + flex-flow: column nowrap; + align-items: center; + } + + nav a { + width: 5rem; + } + + #top-content { + margin: 0px auto; + display: flex; + flex-flow: column nowrap; + align-items: center; + justify-content: space-around; + } + + #top-content-text { + margin: 0px; + margin-top: 75px; + width: 100%; + } + + #top-content img { + width: 50%; + } + + #main-img-container { + } + + #main-img-content .container { + width: 25%; + } +} + +/* Styles from 800px are "acceptable" at 500px*/ +@media (max-width: 500px) { +} diff --git a/style/reset.css b/style/reset.css new file mode 100644 index 000000000..af944401f --- /dev/null +++ b/style/reset.css @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file