diff --git a/content/img/sample-square0.png b/content/img/sample-square0.png new file mode 100644 index 0000000..d0df398 Binary files /dev/null and b/content/img/sample-square0.png differ diff --git a/content/img/sample-square1.png b/content/img/sample-square1.png new file mode 100644 index 0000000..90431f3 Binary files /dev/null and b/content/img/sample-square1.png differ diff --git a/content/img/sample-square2.png b/content/img/sample-square2.png new file mode 100644 index 0000000..4d12fdc Binary files /dev/null and b/content/img/sample-square2.png differ diff --git a/content/img/sample-square3.png b/content/img/sample-square3.png new file mode 100644 index 0000000..1c4e5a0 Binary files /dev/null and b/content/img/sample-square3.png differ diff --git a/css/style.css b/css/style.css index 14454a3..ba83dbd 100644 --- a/css/style.css +++ b/css/style.css @@ -1,43 +1,117 @@ html { background-color: rgb(13, 26, 44); color: antiquewhite; - -} -body { - font-family: monospace; -} - -#wrap { - margin-left: 20%; - margin-right: 20%; - margin-top: 5%; } #WIP { color: rgb(255, 255, 255); text-align: center; margin: 0; - width: 100%; background-color: black; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + position: inherit; +} +.page-container { + display: grid; + grid-template-columns: 1fr 2fr 1fr; + grid-template-rows: 0.5fr 1fr 1fr 2fr 0.5fr; + gap: 30px 0px; + grid-auto-flow: row; + grid-template-areas: + ". name ." + ". about-me ." + ". skills ." + ". my-projects ." + ". get-in-touch .";} + +.name { + grid-area: name; + text-align: center; + margin-right: 150px; + margin-left: 150px; + font-family:monospace;} + +.name h1 { + font-size: 40px; + font-weight: 1000; + text-transform: uppercase;} + +.profile-pic { + float: left;} + +.about-me { + grid-area: about-me; + text-align: center; + margin-left: 15%; + margin-right: 15%; + font-family: monospace; + font-size: larger; + text-align: justify;} + +.about-me h2 { + text-align: center; + font-family: monospace; + text-transform: uppercase; } -.name { - font-size: 50px; - margin-bottom: auto; + +.skills { + grid-area: skills; + display: inline-flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: baseline; + font-family: monospace; + font-size: larger; } -#quick-info { - left: 25%; - width: 600px; - text-align: left; - margin-left: 15%; + +.skills h3 { + text-transform: uppercase; } -#about-me { - padding-top: 20px; - font-size: larger; + +progress { + border-radius: 10px; + } + + progress::-webkit-progress-bar { + background-color: #151625f1; + border-radius: 10px; + } + + progress::-webkit-progress-value { + background-color: #78fff8; + border-radius: 10px; + } + + progress::-moz-progress-bar { + background-color: #78fff8; + border-radius: 10px; + } + +.dev-skills { + display: grid; + justify-items: center; + align-content:center ; +} + +.other-skills { + display: grid; + justify-items: center; + align-content:center ; +} + +.my-projects { + grid-area: my-projects; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr; + gap: 20px 20px;} + +.get-in-touch { + display: inline-flex; + grid-area: get-in-touch; + flex-direction: row; + justify-content: space-evenly; + align-items: center; } -#quick-info img { - float: left; - margin-right: 10%; - width: 150px; -} \ No newline at end of file diff --git a/index.html b/index.html index 51c59a9..8c787b3 100644 --- a/index.html +++ b/index.html @@ -16,20 +16,70 @@ -
-

❤️ Work in progress ❤️

-
-
-
- Gandalf -

Dave Horník

-

Junior Full Stack Developer

-

Czech Republic

-
-
-

Yes, that is a hornpipe in my pocket and I am happy to see you. You’re drinking a Salty Dog? How’d you like to try the real thing? Aye, I guarantee ye, I’ve had a twenty percent decrease in me “lice ratio!” Now and then we had a hope that if we lived and were good, God would permit us to be pirates. Even pirates, before they attack another ship, hoist a black flag. Right from the Voyage og Noah, surviving was by sailing. Avast ye! and sail against the tides. -

+
+

❤️ Work in progress ❤️

+
+
+
+ +

Dave Horník

+

Junior Full-Stack Developer

+

from Czechia

-
+ +
+

About Me

+

I’d love to drop anchor in your lagoon. There comes a time in most men’s lives where they feel the need to raise the Black Flag. Always be yourself, unless you can be a pirate. Then always be a pirate.

+

Wanna shiver me timbers? That’s quite a cutlass ye got thar, what ye need is a good scabbard! Not all treasure is silver and gold Well actualy piracy is a democracy with captains voted for by the crew.

+

Pardon me, but would ya mind if I fired me cannon through your porthole? That’s the finest pirate booty I’ve ever laid eyes on. And that was done without a single drop of rum… You will always remember this as the day you almost caught Captain Jack Sparrow. Life’s pretty good, and why wouldn’t it be? I’m a pirate, after all.

+
+
+
+

Programming Skills

+ + 70% + + 30% + + 15% + + 5% + + 2% +
+
+

Other Skills

+ + 65% + + 20% +
+
+ +
+
+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quidem.

+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quidem.

+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quidem.

+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quidem.

+
+
+ +
\ No newline at end of file