diff --git a/css/index.css b/css/index.css index 7dd97920d..f8fde4f0f 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,263 @@ -/* Compile your LESS file! */ \ No newline at end of file +/* 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: 62.5%; + 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; +} +* { + box-sizing: border-box; +} +/* Set every element's box-sizing to border-box */ +.ja-center { + justify-content: center; + align-items: center; +} +header { + background-color: lightgrey; + align-items: baseline; + display: flex; +} +header h1 { + font-size: 2rem; +} +header nav { + width: 80%; + display: flex; + justify-content: flex-end; +} +header nav a { + margin: 2%; + text-decoration: none; + color: black; +} +header nav a:hover { + color: white; +} +@media (max-width: 500px) { + header { + flex-direction: column; + } + header header { + display: flex; + justify-content: center; + align-items: center; + } +} +img { + width: 20rem; + height: auto; +} +.about-section { + margin: 1%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.about-section h2 { + font-size: 2rem; + text-align: center; + text-decoration: underline; + padding: 1%; +} +.about-section p { + width: 50%; + text-align: center; + justify-content: center; + align-items: center; +} +.why-me { + display: flex; + justify-content: space-around; + padding: 1%; + background-color: lightgrey; +} +.why-me h2 { + font-size: 1.5rem; +} +.why-me .exp p { + font-size: 1.2rem; + justify-content: center; + width: 45vw; +} +.why-me .pros { + width: 40vw; +} +.why-me .pros li { + border: 1px solid black; + font-size: 1.2rem; +} +@media (max-width: 500px) { + .why-me { + text-align: center; + flex-direction: column; + justify-content: center; + align-items: center; + } +} +.history { + display: flex; + flex-direction: column; + padding: 1%; +} +.history h2 { + font-size: 1.5rem; +} +.history .hist-container { + border: 1px solid black; + display: flex; + flex-direction: column; + justify-content: center; + padding: 1%; +} +.history .hist-container .context { + display: flex; + justify-content: space-between; +} +.history .hist-container .content1 { + display: flex; + justify-content: space-between; +} +.history .hist-container .content2 { + display: flex; + justify-content: space-between; +} +.history .hist-container .content3 { + display: flex; + justify-content: space-between; +} +@media (max-width: 500px) { + .history { + justify-content: center; + align-items: center; + } +} +footer { + display: flex; + justify-content: center; +} +footer h4 { + padding: 1%; +} diff --git a/index.html b/index.html index a7f9e3ad1..5d939cfa9 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,69 @@ -

My Resume

+
+

Clayton J. Wilkerson

+ +
+
+ random photo +

A little about me

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+
+

Why me?

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Felis bibendum ut tristique et egestas quis ipsum suspendisse ultrices. Velit dignissim sodales ut eu.

+
+
+

What I do best.

+
  • Lorem
    • +
  • Ipsum
    • +
  • Lorem
    • +
  • Ipsum
    • +
  • Lorem
    • +
    +
    +
    +

    Work History

    +
    +
    +

    Yrs

    +

    Company

    +

    Title

    +

    Tech Used

    +
    +
    +

    1

    +

    Apple

    +

    Software Engineer

    +

    Swift

    +
    +
    +

    2

    +

    Microsoft

    +

    Computer Scientist

    +

    .NET

    +
    +
    +

    3

    +

    Amazon

    +

    Dev Ops

    +

    AWS

    +
    +
    + +
    + \ No newline at end of file diff --git a/less/index.less b/less/index.less index 191ce142e..33400b0e6 100644 --- a/less/index.less +++ b/less/index.less @@ -20,7 +20,7 @@ time, mark, audio, video { margin: 0; padding: 0; border: 0; - font-size: 100%; + font-size: 62.5%; font: inherit; vertical-align: baseline; } @@ -47,13 +47,142 @@ table { border-collapse: collapse; border-spacing: 0; } - -/* Set every element's box-sizing to border-box */ * { - box-sizing: border-box; + box-sizing: border-box; +} +/* Set every element's box-sizing to border-box */ + +//My code begins here + +//Variables +@default-pad: 1%; +@theme1: lightgrey; +//Mix-Ins +.flex-flex() { + display: flex; + justify-content: space-between; +} +.ja-center { + justify-content: center; + align-items: center; } -html, body { - height: 100%; +header { + background-color: @theme1; + display: flex; + align-items: baseline; + display: flex; + h1 { + font-size: 2rem; + } + nav { + width: 80%; + display: flex; + justify-content: flex-end; + a { + margin: 2%; + text-decoration: none; + color: black; + } + a:hover { + color:white; + } + } + @media (max-width: 500px) { + flex-direction: column; + header { + display: flex; + .ja-center; + } + } } +img { + width: 20rem; + height: auto; +} + +.about-section { + margin: 1%; + display: flex; + flex-direction: column; + .ja-center; + h2 { + font-size: 2rem; + text-align: center; + text-decoration: underline; + padding: @default-pad; + } + p { + width: 50%; + text-align: center; + .ja-center; + } +} +.why-me { + display: flex; + justify-content: space-around; + padding: @default-pad; + background-color: @theme1; + + h2 { + font-size: 1.5rem; + } + .exp { + p{ + font-size: 1.2rem; + justify-content: center; + width: 45vw; + } + } + .pros { + width: 40vw; + li { + border: 1px solid black; + font-size: 1.2rem; + } + + } + @media (max-width: 500px) { + text-align: center; + flex-direction: column; + .ja-center; + } +} +.history { + display: flex; + flex-direction: column; + padding: @default-pad; + h2 { + font-size: 1.5rem; + } + .hist-container { + border: 1px solid black; + display: flex; + flex-direction: column; + justify-content: center; + padding: @default-pad; + .context { + .flex-flex(); + } + .content1 { + .flex-flex; + } + .content2 { + .flex-flex; + } + .content3 { + .flex-flex; + } + } + @media (max-width: 500px) { + .ja-center; + } +} +footer { + display: flex; + justify-content: center; + h4 { + padding: @default-pad; + } +} \ No newline at end of file