diff --git a/index.html b/index.html index dc73fbe..11d585f 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,171 @@ - + - + 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. + +
+ +
+
+ + + View on GitHub + +
+
+
+

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. + +
+ +
+
+ + + View on GitHub + +
+
+
+

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. + +
+ +
+
+ + + View on GitHub + +
+
+
+
+
+
+

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..fb7e59f --- /dev/null +++ b/style.css @@ -0,0 +1,256 @@ +@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: #f5f5f5; +} + +body { + height: 100%; + width: 100%; + background-color: #181818; +} + +header { + height: auto; + width: 100%; + display: grid; + grid-template-columns: auto 1fr auto; + align-items: center; + padding: 35px 5vw 20px 5vw; + background-color: #181818; + position: fixed; +} + +.header-logo-container { + display: grid; + grid-auto-flow: row; +} + +.header-logo { + font-weight: bold; +} + +.header-logo-heb { + font-family: 'Alef', sans-serif; + text-align: right; + font-weight: 700; + font-style: normal; +} + +.header-links-container { + font-weight: light; + grid-column: 3 / span 1; + display: grid; + grid-auto-flow: column; + column-gap: 3vw; +} + +.header-links-container a:hover { + text-decoration: underline; +} + +main { + display: grid; +} + +.splash .margin { + margin: 7vw; +} + +h1 { + text-align: center; +} + +.splash, +.about-me, +.experience { + margin: 25vh 15vw; + display: grid; + row-gap: 3vh; + justify-content: center; + align-items: center; +} + +section { + text-align: justify; +} + +.splash span, +.about-me span, +.experience span { + text-decoration: underline; +} + +.splash span:hover, +.about-me span:hover, +.experience 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-template-rows: auto 1fr auto auto; + margin: 4vh 7vw; + row-gap: 3vh; + padding: 20px; + border: solid #303030 0.5px; + border-radius: 15px; + background-color: #212121; +} + +.read-button { + display: grid; + justify-content: center; + align-items: center; +} + +.read-button button { + padding: 5px; + margin: 0 10vw; + height: auto; + width: fit-content; + background-color: #181818; +} + +.gh-button { + display: grid; + justify-content: center; + align-items: center; +} + +.gh-button a { + width: auto; + height: 50px; + display: grid; + justify-content: center; + align-items: center; + grid-template-columns: 50px 1fr; + grid-template-rows: 1fr; + background-color: white; + border-radius: 10px; + overflow: hidden; +} + +.gh-button a span { + grid-column: 2 / -1; + text-align: left; + color: black; + padding: 10px; +} + +.gh-button a img { + grid-column: 1 / span 1; + height: 50px; + width: 50px; + display: block; +} + +.card a { + text-align: center; + font-size: 12px; +} + +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: auto; + width: 100%; + padding: 20px 7vw 20px 7vw; + grid-template-columns: auto 1fr auto; + grid-template-rows: auto auto; + row-gap: 1vh; + background-color: #181818; + } + + header .header-links-container { + grid-row: 2 / -1; + grid-column: 2 / span 1; + grid-auto-flow: column; + column-gap: auto; + } + + header .header-links-container > *:nth-child(2) { + text-align: center; + } + + header .header-links-container > *:nth-child(3) { + text-align: right; + } + + header .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; + } +}