overhaul

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;
-}

index.html

@@ -16,20 +16,70 @@
         <!--[if lt IE 7]>
             <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
         <![endif]-->
-        <header>
-            <h1 id="WIP">❤️ Work in progress ❤️</h1>
-        </header>
-        <div id="wrap">
-        <div id="quick-info">
-        <img src="content/img/gandalf.png" alt="Gandalf">
-        <h1 class="name"><strong>Dave Horník</strong></h1>
-        <h2 class="title">Junior Full Stack Developer</h2></h1>
-        <h3 class="location">Czech Republic</h3>
-        </div>
-        <div id="about-me" style="clear: both;">
-            <p> 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.
-            </p>
+        <section id="WIP">
+            <h1 style="margin-top: 0;">❤️ Work in progress ❤️</h1>
+        </section>
+        <div class="page-container">
+            <div class="name">
+                <img class="profile-pic" src="content/img/gandalf.png" alt="" width="150px">
+                <h1>Dave Horník</h1>
+                <h2>Junior Full-Stack Developer</h2>
+                <h3 style="text-align:right;">from Czechia</h3>
             </div>
-        </div>
+
+            <div class="about-me">
+                <h2>About Me</h2>
+                <p>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.</p>
+                <p>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.</p>
+                <p>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.</p>
+            </div>
+            <div class="skills">
+                <div class="dev-skills">
+                    <h3>Programming Skills</h3>
+                    <label for="file">HTML5:</label>
+                    <progress id="file" max="100" value="70">70%</progress>
+                    <label for="file">CSS3:</label>
+                    <progress id="file" max="100" value="30">30%</progress>
+                    <label for="file">JavaScript:</label>
+                    <progress id="file" max="100" value="15">15%</progress>
+                    <label for="file">Python:</label>
+                    <progress id="file" max="100" value="5">5%</progress>
+                    <label for="file">Node/React:</label>
+                    <progress id="file" max="100" value="3">2%</progress>
+                </div>
+                <div class="other-skills">
+                    <h3>Other Skills</h3>
+                    <label for="file">Photoshop:</label>
+                    <progress id="file" max="100" value="65">65%</progress>
+                    <label for="file">3D Modeling:</label>
+                    <progress id="file" max="100" value="20">20%</progress>
+                </div>
+            </div>
+
+            <div class="my-projects">
+                <div class="project">
+                    <img src="content/img/sample-square0.png" alt="" width="200px">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quidem.</p>
+                </div>
+                <div class="project">
+                    <img src="content/img/sample-square1.png" alt="" width="200px">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quidem.</p>
+                </div>
+                <div class="project">
+                    <img src="content/img/sample-square2.png" alt="" width="200px">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quidem.</p>
+                </div>
+                <div class="project">
+                    <img src="content/img/sample-square3.png" alt="" width="200px">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quidem.</p>
+                </div>
+            </div>
+            <div class="get-in-touch">
+                    <a href="mailto:[email protected]">E-mail</a>
+                    <a href="https://github.com/davehornik">GitHub</a>
+                    <a href="https://linkedin.com/in/davehornik">LinkedIn</a>
+                    <a href="https://stackoverflow.com/users/1234567/davehornik">Stack Overflow</a>
+            </div>
+          </div>
         <script src="" async defer></script>
     </body>