diff --git a/debug.css b/debug.css new file mode 100644 index 0000000..a39c5bd --- /dev/null +++ b/debug.css @@ -0,0 +1,73 @@ +/* blue */ +.dbg-bg-blue { + background-color: #8da2fc; +} + +.dbg-border-blue { + border: 2px dotted #76a9fa; +} +/* gray */ +.dbg-bg-gray { + background-color: #6b7280; +} + +.dbg-border-gray { + border: 2px dotted #6b7280; +} +/* red */ +.dbg-bg-red { + background-color: #f98080; +} + +.dbg-border-red { + border: 2px dotted #f98080; +} + +/* green */ +.dbg-bg-green { + background-color: #def7ec; +} + +.dbg-border-green { + border: 2px dotted #30c48d; +} + +/* yellow */ +.dbg-bg-yellow { + background-color: #fdf6b2; +} + +.dbg-border-yellow { + border: 2px dotted #faca16; +} + +/* indigo */ +.dbg-bg-indigo { + background-color: #e4edff; +} + +.dbg-border-indigo { + border: 2px dotted #8da2fc; +} + +/* purple */ +.dbg-bg-purple { + background-color: #edebfe; +} + +.dbg-border-purple { + border: 2px dotted #ac94fa; +} + +/* pink */ +.dbg-bg-pink { + background-color: #fce8f3; +} + +.dbg-border-pink { + border: 2px dotted #f17eb8; +} + +.dbg-border-margin { + margin: 2px; +} diff --git a/index.html b/index.html index dc73fbe..aac5501 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,131 @@ - + + Full Stack Portfolio - +
+

James Canterbury

+
+ About Me + Portfolio + Experience +
+
+

Hiring A Full-Stack Developer?

+

+ I have experience with React, + NodeJS and + Typescript. I would love to work at an + innovative and + eco-friendly start-up in the + sustainable energy sector. +

+
+
+
+
+

ABOUT ME

+

Introdution

+

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

+
+

Technical Skills

+
+ +
+
+
+

PORTFOLIO

+
+
+

Title

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam. +

+ READ MORE + GitHub Repo +
+
+

Title

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam. +

+ READ MORE + GitHub Repo +
+
+

Title

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam. +

+ READ MORE + GitHub Repo +
+
+
+
+

EXPERIENCE

+
+
+

Job Title

+

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

+
+
+
+

Job Title

+

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

+
+
+
+
+

© James Canterbury

+
- \ No newline at end of file + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..7071f16 --- /dev/null +++ b/styles.css @@ -0,0 +1,181 @@ +* { + padding: 0px; + margin: 0px; + box-sizing: border-box; + font-family: Arial, Helvetica, sans-serif; +} + +html { + scroll-behavior: smooth; +} + +body { + background-color: darkslategray; +} + +.section { + min-height: 400px; + background-color: white; + margin: 15px 0; +} + +.introduction.section { + display: grid; + grid-template-columns: 25% auto 25%; + grid-template-rows: 80px auto; + background-color: darkcyan; + color: white; +} + +.introduction h3 { + grid-column: 1; + grid-row: 1; + margin: 15px 0 0 15px; +} + +.introduction .navbar { + display: flex; + flex: 1; + gap: 12px; + justify-content: end; + align-items: center; + height: 50px; + margin-right: 15px; +} + +.introduction .navbar > * { + background-color: white; + color: darkcyan; + font-size: 13px; + padding: 5px; + border-radius: 8px; +} + +.introduction .navbar { + grid-column: 3; + grid-row: 1; +} + +.introduction.main-text { + grid-column: 2; + grid-row: 2; + margin-bottom: 80px; +} + +.main-text h1 { + font-size: 65px; + font-weight: 600; +} + +.main-text .bold-text { + font-weight: bold; + color: darkslategray; +} + +.main-text .underlined-italics { + font-style: italic; + text-decoration: underline darkslategrey; +} + +.container { + margin: 0 25%; + color: darkslategray; +} + +.section-title { + margin: 0 auto; + padding: 25px 0; + text-align: center; + color: darkslategrey; +} + +.about-me .text-section { + padding: 8px 0; +} +.about-me .section-head { + font-weight: bolder; +} + +.about-me .skills-list { + column-count: 2; + column-gap: 20px; + margin-left: 35px; + padding-bottom: 30px; +} + +.about-me .skills-list li { + margin-bottom: 2px; +} + +.portfolio.section { + background-color: rgb(248, 200, 207); +} + +.portfolio h2 { + color: black; +} + +.portfolio-cards { + display: flex; + gap: 20px; + margin: 30px 80px; + padding-bottom: 30px; +} + +@media (max-width: 700px) { + .portfolio-cards { + flex-direction: column; + } +} + +.portfolio-cards .card { + border: 5px solid mediumvioletred; + background-color: white; + border-radius: 5px; + margin: 2px; +} + +.portfolio-cards .card > * { + margin: 25px; +} + +.portfolio-cards .read-more { + display: block; + text-align: center; + padding: 5px 0; + text-align: center; + background-color: mediumvioletred; + color: white; + border-radius: 5px; +} + +.portfolio-cards .repo-link { + display: block; + text-align: center; + font-size: 0.75em; + color: mediumvioletred; + text-decoration: underline; +} + +.experience-title { + font-weight: bolder; +} + +.experience-text > * { + margin: 5px 0 10px 0; +} + +.experience .container { + padding-bottom: 40px; +} + +.footer-bar { + height: 60px; +} + +.footer-bar p { + color: white; + text-justify: center; + margin-left: 40px; + font-size: 0.75em; +}