From baae576739c2fc0083e13699522c5a2019b65ccb Mon Sep 17 00:00:00 2001 From: Tim Zoltie Date: Mon, 11 Mar 2024 17:47:47 +0000 Subject: [PATCH] portfolio --- .vscode/settings.json | 3 + index.html | 73 ++++++++++++++++++- style.css | 163 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 238 insertions(+), 1 deletion(-) create mode 100644 .vscode/settings.json create mode 100644 style.css diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.html b/index.html index dc73fbe..01ecf41 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,77 @@ Full Stack Portfolio - +
+
+
+
+

Tim Zoltie

+ +
+
+
+
+

Hiring a Full-Stack Developer?

+

I have experience with React, NodeJS and Typescript. I would love to work in an exciting enviornment that is striving to be at the cutting edge of software engineering.

+
+
+
+ +
+

ABOUT ME

+
+

Introduction

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi magni explicabo eligendi. Est nulla aut libero non tenetur ullam fuga magnam voluptate in esse a, tempora vitae accusantium distinctio quo.

+
+
+

Technical Skills

+
    +
  • HTML & CSS
    • +
  • Javasctipt
    • +
  • Typescript
    • +
  • React
    • +
  • Redux
    • +
  • NodeJS
    • +
+
+
+
+

PORTFOLIO

+
+
+

Scrabble Challenge

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi laudantium officiis aliquid consequatur hic perspiciatis voluptatibus tempora nam corrupti maiores ullam, quis natus iusto doloremque alias provident soluta quam reprehenderit.

+

READ MORE

+

GitHub Repo

+
+
+

FizzBuzz

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae laboriosam atque adipisci similique. Sequi eaque, minima illo reiciendis magnam reprehenderit recusandae ducimus numquam quasi eius laborum eos quibusdam officia dolore!

+

READ MORE

+

GitHub Repo

+
+
+

Softplay

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam quod animi earum ipsum mollitia omnis amet voluptatibus architecto temporibus libero nisi, voluptatem perferendis autem aliquid numquam sunt laborum ducimus? Id.

+

READ MORE

+

GitHub Repo

+
+
+
+
+

EXPERIENCE

+

Job Title

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate similique quos obcaecati reiciendis? Tempore neque expedita non dolore animi placeat vero quidem! Asperiores at voluptates ratione perferendis. Possimus, ducimus temporibus.

+

Job Title

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum architecto earum reiciendis labore accusamus, laudantium nihil. Assumenda pariatur, aut ipsam velit corrupti, quo obcaecati reprehenderit quia esse porro accusantium quaerat!

+
+
+ \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..4b81c5a --- /dev/null +++ b/style.css @@ -0,0 +1,163 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + + display: grid; + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; +} + + +script, title { + display: none; +} + +.page-open { + height: 100vh; + background-color: rgb(26, 208, 181); +} + +.header-container { + grid-auto-columns: 1fr; + grid-auto-flow: column; + gap: 1rem; + margin: 20px; +} + +.list-container { + list-style: none; + grid-auto-columns: 6rem; + grid-auto-flow: column; + gap: 2rem; + margin-left: 50%; +} + +.list-container li { + border: 2px solid white; + background-color: white; + border-radius: 6px; + padding: 5%; +} +.list-container li a { + background-color: white; + color: rgb(26, 208, 181); + text-decoration: none; +} + +.main-heading { + grid-auto-rows: 1fr; + grid-auto-flow: row; + place-content: center; + margin: 10rem; + color: white; + gap: 8%; +} +.main-heading h1 { + font-size: 7rem; + margin: 0 15rem; +} + +.main-heading p { + margin: 0 15rem; +} + +#about-me { + width: 100%; + background-color: white; + padding: 3rem 0; + height: 100%; + border-top: 6px solid black; + border-bottom: 6px solid black; +} +.intro { + margin: 2rem 25rem 2rem 25rem; + gap: 1rem; + background-color: white; +} + + +#about-me h2 { + place-items: center; + font-size: 200%; +} + +#about-me h2, #about-me h4, #about-me p, #about-me li { + background-color: white; +} + +.skills { + background-color: white; + margin: 2rem 25rem 2rem 25rem; + gap: 1rem; +} +.skills-list { + display: grid; + grid-template-columns: 1fr 1fr; +} + +#portfolio { + place-items: center; + background-color: rgb(255, 227, 232); + height: 123%; + border-bottom: 6px solid black; +} +#portfolio h2 { + background-color: rgb(255, 227, 232); + font-size: 200%; +} +#portfolio h3 { + font-size: 150%; +} +.portfolio-container { + grid-auto-columns: 1fr; + grid-auto-flow: column; + background-color: rgb(255, 227, 232); + +} + +.portfolio-container .item-1, .portfolio-container .item-2, .portfolio-container .item-3 { + border: 6px solid rgb(185, 73, 73); + border-radius: 5%; + padding: 1rem 1rem; + background-color: white; + margin: 1rem 5rem; +} + +.portfolio-container h4 a { + border: 2px solid rgb(185, 73, 73); + border-radius: 5px; + padding: 5px; + background-color: rgb(185, 73, 73); + place-content: center; + color: white; +} + +.portfolio-container p, h3, a { + background-color: white; +} + +.portfolio-container p { + place-content: center; + color: rgb(185, 73, 73); + margin: 1rem; +} + +#experience h2, #experience h4, #experience p { + background-color: white; + margin: 1rem 25rem; + height: 100%; + gap: 1rem; +} + +#experience { + background-color: white; + margin-top: 7rem; + padding: 5%; +} + +footer h5 { + width: 100%; + background-color: black; + color: white; + padding: 1%; +}