From f327136a72b38934a3619ca586b656eac8845b2c Mon Sep 17 00:00:00 2001 From: Thomas Jensen Date: Wed, 15 May 2024 16:14:00 +0200 Subject: [PATCH 1/2] Completed exercise and extension --- index.html | 141 ++++++++++++++++++++++++++++++++++- style.css | 210 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 347 insertions(+), 4 deletions(-) create mode 100644 style.css diff --git a/index.html b/index.html index dc73fbe..a40518c 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,146 @@ - + - + Full Stack Portfolio - +
+
+ + תומס ינסן +
+
+ 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

+
+ Introduction
+
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. + Officia odio a ex odit ipsa quidem eum quae minima ducimus + atque alias et provident veniam sequi, consequuntur magni + iusto saepe perspiciatis? Lorem ipsum dolor sit amet + consectetur adipisicing elit. Vero quis repellendus dolore + temporibus ratione sed ipsa assumenda maxime labore sint + enim, molestias alias fuga necessitatibus, dolor ipsam, iste + mollitia iusto. +
+
+ Technical Skills
+
+
+
    +
  • • HTML & CSS
    • +
  • • JavaScript
    • +
  • • TypeScript
    • +
  • • React
    • +
  • • Rust
    • +
  • • Swift
    • +
+
+
+
+
+
+
+

Portfolio

+
+
+

gitdonewithit

+ + gii (gitdonewithit) is a handy little git tool I made in + order to automate my git workflow.
+ It provides instructions on usage in the terminal and is + made in Rust. + + + GitHub Repo +
+
+

Title

+ + Lorem ipsum dolor sit amet consectetur adipisicing elit. + Temporibus commodi obcaecati iure consequuntur incidunt + eaque omnis, laudantium, dolorum qui quod dolor illum at + aliquid molestias quis officia nostrum esse autem. + + + GitHub Repo +
+
+

Title

+ + Lorem ipsum dolor sit amet consectetur adipisicing elit. + Temporibus commodi obcaecati iure consequuntur incidunt + eaque omnis, laudantium, dolorum qui quod dolor illum at + aliquid molestias quis officia nostrum esse autem. + + + GitHub Repo +
+
+
+
+
+
+

Experience

+
+ Job Title
+
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. + Officia odio a ex odit ipsa quidem eum quae minima ducimus + atque alias et provident veniam sequi, consequuntur magni + iusto saepe perspiciatis? Lorem ipsum dolor sit amet + consectetur adipisicing elit. Vero quis repellendus dolore + temporibus ratione sed ipsa assumenda maxime labore sint + enim, molestias alias fuga necessitatibus, dolor ipsam, iste + mollitia iusto. +
+
+ Job Title
+
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. + Officia odio a ex odit ipsa quidem eum quae minima ducimus + atque alias et provident veniam sequi, consequuntur magni + iusto saepe perspiciatis? Lorem ipsum dolor sit amet + consectetur adipisicing elit. Vero quis repellendus dolore + temporibus ratione sed ipsa assumenda maxime labore sint + enim, molestias alias fuga necessitatibus, dolor ipsam, iste + mollitia iusto. +
+
+
+ - \ No newline at end of file + diff --git a/style.css b/style.css new file mode 100644 index 0000000..84398da --- /dev/null +++ b/style.css @@ -0,0 +1,210 @@ +@import url('https://fonts.googleapis.com/css2?family=Alef:wght@400;700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap'); + +* { + font-family: JetBrains Mono; + margin: 0; + box-sizing: border-box; + text-decoration: none; + scroll-behavior: smooth; + color: white; +} + +body { + height: 100vh; + width: 100vw; + background-color: #181818; +} + +header { + height: 50px; + display: grid; + grid-template-columns: auto 1fr auto; + justify-content: center; + align-items: center; + margin: 25px 5vw; +} + +h1 { + text-align: center; +} + +header .logo-container { + display: grid; + grid-auto-flow: row; + font-family:; +} + +header .logo { + font-weight: bold; +} + +header .logo-heb { + font-family: 'Alef', sans-serif; + text-align: right; + font-weight: 700; + font-style: normal; +} + +header .links { + font-weight: light; + grid-column: 3 / span 1; + display: grid; + grid-auto-flow: column; + column-gap: 3vw; +} + +header .links a:hover { + text-decoration: underline; +} + +main { + display: grid; +} + +.splash, +.about-me, +.experience { + margin: 25vh 25vw; + display: grid; + row-gap: 3vh; + justify-content: center; + align-items: center; +} + +section { + text-align: justify; +} + +.splash section span, +.about-me section span, +.experience section span { + text-decoration: underline; +} + +.splash section span:hover, +.about-me section span:hover, +.experience section span:hover { + font-style: italic; +} + +.skill-list { + display: grid; + justify-content: center; + align-items: center; +} + +.about-me ul { + list-style: none; + display: grid; + grid-template-rows: repeat(2, auto); + grid-template-columns: repeat(3, auto); + row-gap: 1vh; + column-gap: 1vw; + padding: 0; +} + +.portfolio { + margin: 25vh 0; + display: grid; + row-gap: 3vh; + justify-content: center; + align-items: center; +} + +.cards-container { + display: grid; + grid-auto-flow: column; +} + +.card { + display: grid; + grid-auto-flow: row; + margin: 4vh 7vw; + row-gap: 3vh; + padding: 20px; + border: solid white 0.5px; + border-radius: 15px; +} + +.card button { + background-color: #181818; + margin: 0 10vw; +} + +.card a { + text-align: center; + font-size: 12px; +} + +.card a:hover { + text-decoration: underline; +} + +footer { + height: 5vh; + display: grid; + justify-content: center; + align-items: center; + margin: 5vw 5vh; + font-size: 10px; + font-weight: light; +} + +@media (max-width: 1300px) { + .cards-container { + grid-template-columns: 1fr 1fr; + grid-auto-flow: row; + } +} + +@media (max-width: 680px) { + .splash, + .about-me, + .experience { + margin: 25vh 15vw; + } + header { + height: 50px; + margin: 25px 0px; + grid-template-columns: 15vw 1fr 15vw; + grid-template-rows: auto auto; + row-gap: 1vh; + } + + header .links { + grid-row: 2 / -1; + grid-column: 2 / span 1; + grid-auto-flow: column; + column-gap: auto; + } + + header .links > *:nth-child(2) { + text-align: center; + } + + header .links > *:nth-child(3) { + text-align: right; + } + + header .logo-container { + grid-auto-flow: column; + grid-column: 2 / span 1; + } + + .cards-container { + grid-template-columns: 1fr; + grid-auto-flow: row; + } + + .skill-list { + display: grid; + justify-content: center; + align-items: center; + } + + .about-me ul { + grid-template-rows: repeat(3, auto); + grid-template-columns: repeat(2, auto); + column-gap: 5vw; + } +} From c790dc3e39fe63300b1b5567999ad50d0062fe71 Mon Sep 17 00:00:00 2001 From: Thomas Jensen Date: Wed, 15 May 2024 18:28:14 +0200 Subject: [PATCH 2/2] Added feedback --- index.html | 97 ++++++++++++++++++++++++++---------------- style.css | 122 ++++++++++++++++++++++++++++++++++++----------------- 2 files changed, 145 insertions(+), 74 deletions(-) diff --git a/index.html b/index.html index a40518c..11d585f 100644 --- a/index.html +++ b/index.html @@ -12,35 +12,34 @@
-
- - תומס ינסן +
+ + תומס ינסן
-
+
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

-
+
Introduction

Lorem ipsum dolor, sit amet consectetur adipisicing elit. @@ -51,8 +50,8 @@

About Me

temporibus ratione sed ipsa assumenda maxime labore sint enim, molestias alias fuga necessitatibus, dolor ipsam, iste mollitia iusto. -
-
+
+
Technical Skills

@@ -65,13 +64,12 @@

About Me

  • • Swift
    • - -
    + +
    -
    -
    +

    Portfolio

    -
    +

    gitdonewithit

    @@ -80,10 +78,18 @@

    gitdonewithit

    It provides instructions on usage in the terminal and is made in Rust.     - - GitHub Repo +
    + +
    +
    + + + View on GitHub + +

    Title

    @@ -93,8 +99,18 @@

    Title

    eaque omnis, laudantium, dolorum qui quod dolor illum at aliquid molestias quis officia nostrum esse autem. - - GitHub Repo +
    + +
    +
    + + + View on GitHub + +

    Title

    @@ -104,16 +120,25 @@

    Title

    eaque omnis, laudantium, dolorum qui quod dolor illum at aliquid molestias quis officia nostrum esse autem. - - GitHub Repo +
    + +
    +
    + + + View on GitHub + +
    -
    -
    + +
    -
    -
    +

    Experience

    -
    +
    Job Title

    Lorem ipsum dolor, sit amet consectetur adipisicing elit. @@ -124,8 +149,8 @@

    Experience

    temporibus ratione sed ipsa assumenda maxime labore sint enim, molestias alias fuga necessitatibus, dolor ipsam, iste mollitia iusto. -
    -
    +
    +
    Job Title

    Lorem ipsum dolor, sit amet consectetur adipisicing elit. @@ -136,8 +161,8 @@

    Experience

    temporibus ratione sed ipsa assumenda maxime labore sint enim, molestias alias fuga necessitatibus, dolor ipsam, iste mollitia iusto. - -
    + +