diff --git a/contact.html b/contact.html index 4180651..78259b3 100644 --- a/contact.html +++ b/contact.html @@ -7,7 +7,8 @@ Contact - + + @@ -21,7 +22,7 @@ -
+
-

Contact Me!

+

Contact Me

@@ -145,7 +146,11 @@

Number

Social Media

-

Placeholder Placeholder Placeholder

+

+ Instagram + Facebook + Github +

diff --git a/css/style.css b/css/style.css index e638a6a..ba2f0ee 100644 --- a/css/style.css +++ b/css/style.css @@ -54,9 +54,9 @@ span.visually-hidden { #menu-toggle { padding: 0.5em; - position: relative; - right: 0; - top: 0; + position: fixed; + right: 1.5vw; + top: 1.5vw; z-index: 10; background: transparent; @@ -66,6 +66,10 @@ span.visually-hidden { cursor: pointer; } +#menu-toggle[aria-expanded="false"] { + position: absolute; +} + div#primary-navigation { display: flex; position: fixed; @@ -85,7 +89,7 @@ div#primary-navigation { flex-direction: column; align-items: center; - justify-content: space-around; + /* justify-content: space-around; */ padding-bottom: 20vh; } @@ -126,30 +130,45 @@ div#primary-navigation { } +div#primary-navigation div { + /* height: 60%; */ + display: flex; + align-items: center; + /* padding: 15% 5% 15% 5%; */ + width: 40%; + height: 50%; + border-radius: 8px; +} - -div#primary-navigation a { - width: 50%; +div#primary-navigation div a { + width: 100%; + /* height: 30%; */ + text-align: center; align-self: center; text-align: center; - padding: 5% 5% 5% 5%; - background: radial-gradient(ellipse at bottom, #2e64a6 0%, #0c0d13 70%); - background-size: 100% 500%; - background-position-y: 0; + padding: 15% 0 15% 0; + border-radius: 8px; + /* background: radial-gradient(ellipse at bottom, #2e64a6 0%, #0c0d13 70%); + */ + /* background:transparent; */ + /* background-size: 100% 500%; */ + /* background-position-y: 0; */ text-decoration: none; font-size: 1.5em; - transition: background-position-y ease-in-out 700ms; + transition: background ease-in-out 150ms; text-transform: uppercase; } -div#primary-navigation a:hover { - background-position-y: 90%; +div#primary-navigation div a:hover { + /* background-position-y: 90%; */ + background-color: #ffffff15; + border-radius: 8px; } -div#primary-navigation a:active { +/* div#primary-navigation div a:active { background-position-y: 90%; -} +} */ header h1 { color: white; @@ -193,6 +212,7 @@ div#tag-item img { height: auto; align-self: center; justify-self: center; + box-shadow: 3px 3px 40px #00000040; } @@ -239,7 +259,7 @@ div#tag-item div.text-cont p { div.color-blobs { display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; @@ -266,9 +286,6 @@ div.color-blobs div.color-blob:nth-child(3) { background-color: rgb(0, 195, 255); } -div.color-blobs div.color-blob:nth-child(4) { - background-color: #C800FA; -} /* FIRST PAGE DONE */ @@ -301,6 +318,18 @@ footer section:last-child p { margin: 0; } +footer section p a{ + text-decoration: none; +} + +footer section p a::after{ + content: " "; + margin-inline-end: 2%; +} + +footer section p a:hover { + text-decoration: underline; +} @@ -320,12 +349,12 @@ div.resume-content { div.resume-content section div.box-item { width: 90%; height: auto; - margin: 20% 2% 20% 2%; + margin: 10% 2% 10% 2%; padding: 3%; } div.resume-content section div div.box-item:first-child { - margin-top: 10%; + margin-top: 2%; } div.resume-content section div div.box-item:last-child { @@ -357,7 +386,9 @@ div.resume-content section div.experiences p { } - +div.resume-content section:last-child div:nth-child(2) div.box-item:last-child { + margin-bottom: 5%; +} @@ -489,7 +520,7 @@ div.projects div.project { } -div.projects div.project img { +div.projects div.project div img { width: 90%; margin: 5%; } @@ -505,6 +536,10 @@ div.projects div.project img { background: radial-gradient(ellipse at left, #0f2642 30%, #0c0d13 190%); } +.blue-border { + border: solid 1px #2e64a6; +} + body::-webkit-scrollbar { @@ -526,10 +561,11 @@ body::-webkit-scrollbar-thumb { /* creates padding around scroll thumb */ } -body { +html { scrollbar-width: thin; /* "auto" or "thin" */ scrollbar-color: #2e64a6#0f2642; + /* Firefox */ } @@ -560,7 +596,7 @@ div#desktop-index-cover-container img#desktop-index-cover { } .extra-content { - display: inline; + display: block; } #menu-toggle { @@ -583,17 +619,26 @@ div#desktop-index-cover-container img#desktop-index-cover { margin: 0; } - div#primary-navigation a { + div#primary-navigation div { + height: 60%; + width: 100%; + } + + div#primary-navigation div a { + /* width: 50%; */ /* background: radial-gradient(ellipse at bottom, #2e64a6 0%, #0c0d1399 70%); */ display: flex; align-items: center; justify-content: center; width: 10vw; height: 100%; - + /* padding: 15% 5% 15% 5%; */ padding: 0; + border-radius: 8px; + background:transparent; + /* padding: 35% 0 35% 0; */ - margin: 0; + /* margin: 0; */ } @@ -620,28 +665,30 @@ div#desktop-index-cover-container img#desktop-index-cover { margin-top: 8%; } - footer section:first-child h3 { - margin: 0; - } - footer section p { margin: 0; } div.resume-content { - /* grid-template-columns: 1fr 1fr; - grid-template-rows: auto auto; */ - /* row-gap: 5%; */ + grid-template-columns: 1fr 1fr; + column-gap: 5%; + grid-template-areas: + '. .' + 'sp sp'; margin-top: 10%; - margin-bottom: 3%; + margin-bottom: 0; height: fit-content; } div.resume-content section { display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr; + grid-template-columns: 1fr; + grid-template-rows: auto auto; + } + + div.resume-content section:last-child { + grid-area: sp; } div.resume-content section div { @@ -662,16 +709,34 @@ div#desktop-index-cover-container img#desktop-index-cover { div.resume-content section div.header-item { /* margin-top: 5%; */ padding:3%; - margin: 0 2% 5% 2%; + /* margin: 0 2% 5% 2%; */ + margin: 0 0 5% 0; + width: calc(94% - 2px); height: min-content; + margin-top: 0 !important; + /* Denna finns då tag för första går in anars*/ } + div.resume-content section:last-child div.header-item { + padding: 1.5% 3% 1.5% 3%; + margin-bottom: 2.5%; + grid-area: ehd; + } - div.resume-content section:first-child div.header-item { - margin-top: 0; + div.resume-content section:last-child { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: auto auto; + grid-template-areas: 'ehd ehd' '. .'; } + div.resume-content section div.experience-boxes { + margin-bottom: 0; + } + div.resume-content section div.experience-boxes div.box-item:last-child { + margin-bottom: 0 !important; + } div.contact-container { margin: 8% 3% 0 3%; @@ -697,32 +762,42 @@ div#desktop-index-cover-container img#desktop-index-cover { width: auto; height: auto; - display: flex; + /* display: flex; flex-wrap: wrap; - justify-content: space-between; + justify-content: space-between; */ /* row-gap: 10%; */ - column-gap: 4vw; - justify-content: flex-start + row-gap: 2vw; + /* justify-content: flex-start */ + grid-auto-rows: auto; } div.projects div.project { + background: transparent; min-width: min-content; width: auto; - height: fit-content; - padding: 2%; - margin-bottom: 4vw; + height: 100%; + max-height:100%; + padding: 0 5% 0 5%; + margin-bottom: 0; display: grid; - grid-template-columns: 14vw auto; + grid-template-columns: 40% auto; + grid-template-rows: min-content; + } + + div.projects div.project div:last-child{ + display: flex; + justify-content: end; } div.projects div.project img { - /* height: 10vh; - width: 10vh; */ - /* width: 50%; */ - height: 100%; + height: 40vh; + width: unset; + align-self: center; margin: 0; + object-fit: contain; + justify-self: end; } diff --git a/img/100k-ai-faces-3.jpg b/img/100k-ai-faces-3.jpg deleted file mode 100644 index cc9bc5c..0000000 Binary files a/img/100k-ai-faces-3.jpg and /dev/null differ diff --git a/img/city_blue_small.png b/img/city_blue_small.png new file mode 100644 index 0000000..adf911e Binary files /dev/null and b/img/city_blue_small.png differ diff --git a/img/slpWU2023-1.jpg b/img/slpWU2023-1.jpg new file mode 100644 index 0000000..38d2021 Binary files /dev/null and b/img/slpWU2023-1.jpg differ diff --git a/img/slpWU2023-2.jpg b/img/slpWU2023-2.jpg new file mode 100644 index 0000000..b713004 Binary files /dev/null and b/img/slpWU2023-2.jpg differ diff --git a/img/slpWU2023-3.jpg b/img/slpWU2023-3.jpg new file mode 100644 index 0000000..6900bf7 Binary files /dev/null and b/img/slpWU2023-3.jpg differ diff --git a/img/technology-background-concept-circuit-board-electronic-system-futuristic-hi-tech-light-on-dark-blue-vector.jpg b/img/technology-background-concept-circuit-board-electronic-system-futuristic-hi-tech-light-on-dark-blue-vector.jpg deleted file mode 100644 index b375ca1..0000000 Binary files a/img/technology-background-concept-circuit-board-electronic-system-futuristic-hi-tech-light-on-dark-blue-vector.jpg and /dev/null differ diff --git a/index.html b/index.html index a629ea7..3c4a162 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,8 @@ Carl Johan Ståhl - + + @@ -78,7 +79,7 @@
-

Carl Johan Ståhl - Software developer

+

Carl Johan Ståhl - Software developer

@@ -111,14 +112,13 @@

Feel free to look around

-
saud profile
- city backdrop + city backdrop
diff --git a/js/mobileMenu.js b/js/mobileMenu.js index 1eb9e2d..5874da1 100644 --- a/js/mobileMenu.js +++ b/js/mobileMenu.js @@ -19,6 +19,8 @@ function closeMenu() { siteNavigation.setAttribute("data-state", "closing"); siteNavigation.addEventListener("animationend",() => { - siteNavigation.setAttribute('data-state', 'closed'); + if (siteNavigation.getAttribute('data-state') === "closing") { + siteNavigation.setAttribute('data-state', 'closed'); + } }, {once:true}); } \ No newline at end of file diff --git a/projects.html b/projects.html index 045a7ff..08fcabd 100644 --- a/projects.html +++ b/projects.html @@ -7,7 +7,10 @@ Projects - + + @@ -20,63 +23,6 @@ -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -

Projects

@@ -88,26 +34,16 @@

Projects

- Home - Resume - Projects - Contact +
Home
+
Resume
+
Projects
+
Contact
-
-
-

Project

-

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptatibus dolore soluta - explicabo, animi tempora hic nobis aliquid porro ullam, et iure recusandae assumenda distinctio. - Molestias reiciendis provident sunt excepturi?

-

YYYY

-
- Temp Image -
-
+

Project

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptatibus dolore soluta @@ -115,19 +51,11 @@

Project

Molestias reiciendis provident sunt excepturi?

YYYY

- Temp Image -
-
-
-

Project

-

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptatibus dolore soluta - explicabo, animi tempora hic nobis aliquid porro ullam, et iure recusandae assumenda distinctio. - Molestias reiciendis provident sunt excepturi?

-

YYYY

-
- Temp Image + + Temp Image +
-
+

Project

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptatibus dolore soluta @@ -135,9 +63,11 @@

Project

Molestias reiciendis provident sunt excepturi?

YYYY

- Temp Image + + Temp Image +
-
+

Project

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptatibus dolore soluta @@ -145,7 +75,9 @@

Project

Molestias reiciendis provident sunt excepturi?

YYYY

- Temp Image + + Temp Image +
@@ -161,7 +93,11 @@

Number

Social Media

-

Placeholder Placeholder Placeholder

+

+ Instagram + Facebook + Github +

diff --git a/resume.html b/resume.html index b5d7a21..554c7fe 100644 --- a/resume.html +++ b/resume.html @@ -7,7 +7,8 @@ Resume - + + @@ -20,114 +21,6 @@ -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -

Resume

@@ -139,10 +32,10 @@

Resume

@@ -152,18 +45,19 @@

Resume

Education

-
+ +

Education

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla eligendi, dolorem consequuntur recusandae, vel temporibus praesentium culpa sit repudiandae pariatur architecto accusamus, vero quam labore. Ipsa autem expedita possimus eos.

-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla +

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla eligendi, dolorem consequuntur recusandae, vel temporibus praesentium culpa sit repudiandae pariatur architecto accusamus, vero - quam labore. Ipsa autem expedita possimus eos.

+ quam labore. Ipsa autem expedita possimus eos.

Year: XXXX-XXXX

@@ -171,12 +65,12 @@

Education

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla eligendi, dolorem consequuntur recusandae, vel temporibus praesentium culpa sit repudiandae pariatur architecto accusamus, vero quam labore. Ipsa autem expedita possimus eos.

-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla +

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla eligendi, dolorem consequuntur recusandae, vel temporibus praesentium culpa sit repudiandae pariatur architecto accusamus, vero - quam labore. Ipsa autem expedita possimus eos.

+ quam labore. Ipsa autem expedita possimus eos.

Year: XXXX-XXXX

@@ -184,12 +78,12 @@

Education

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla eligendi, dolorem consequuntur recusandae, vel temporibus praesentium culpa sit repudiandae pariatur architecto accusamus, vero quam labore. Ipsa autem expedita possimus eos.

-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla +

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla eligendi, dolorem consequuntur recusandae, vel temporibus praesentium culpa sit repudiandae pariatur architecto accusamus, vero - quam labore. Ipsa autem expedita possimus eos.

+ quam labore. Ipsa autem expedita possimus eos.

Year: XXXX-XXXX

@@ -198,19 +92,19 @@

Education

Work

-
- + +

Work Item

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla eligendi, dolorem consequuntur recusandae, vel temporibus praesentium culpa sit repudiandae pariatur architecto accusamus, vero quam labore. Ipsa autem expedita possimus eos.

-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla +

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla eligendi, dolorem consequuntur recusandae, vel temporibus praesentium culpa sit repudiandae pariatur architecto accusamus, vero - quam labore. Ipsa autem expedita possimus eos.

+ quam labore. Ipsa autem expedita possimus eos.

Year: XXXX-XXXX

@@ -218,12 +112,12 @@

Work Item

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla eligendi, dolorem consequuntur recusandae, vel temporibus praesentium culpa sit repudiandae pariatur architecto accusamus, vero quam labore. Ipsa autem expedita possimus eos.

-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla +

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla eligendi, dolorem consequuntur recusandae, vel temporibus praesentium culpa sit repudiandae pariatur architecto accusamus, vero - quam labore. Ipsa autem expedita possimus eos.

+ quam labore. Ipsa autem expedita possimus eos.

Year: XXXX-XXXX

@@ -231,12 +125,12 @@

Work Item

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla eligendi, dolorem consequuntur recusandae, vel temporibus praesentium culpa sit repudiandae pariatur architecto accusamus, vero quam labore. Ipsa autem expedita possimus eos.

-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla +

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla eligendi, dolorem consequuntur recusandae, vel temporibus praesentium culpa sit repudiandae pariatur architecto accusamus, vero - quam labore. Ipsa autem expedita possimus eos.

+ quam labore. Ipsa autem expedita possimus eos.

Year: XXXX-XXXX

@@ -245,8 +139,22 @@

Work Item

Experiences

-
- + +
+
+

Lorem ipsum dolor - Lorem ipsum dolorem

+
+
+

Lorem ipsum dolor - Lorem ipsum dolorem

+
+
+

Lorem ipsum dolor - Lorem ipsum dolorem

+
+
+

Lorem ipsum dolor - Lorem ipsum dolorem

+
+
+

Lorem ipsum dolor - Lorem ipsum dolorem

@@ -277,7 +185,11 @@

Number

Social Media

-

Placeholder Placeholder Placeholder

+

+ Instagram + Facebook + Github +