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 ❤️
-
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. -
+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.
+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.
+