Skip to content

Commit

Permalink
visual revamp
Browse files Browse the repository at this point in the history
  • Loading branch information
davehornik committed Sep 10, 2024
1 parent 1d45994 commit c5cad8a
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 62 deletions.
99 changes: 57 additions & 42 deletions css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,25 @@
html {
background-color: rgb(13, 26, 44);
color: antiquewhite;
}
background-color: #2D132C;
color: #EE4540;
font-family: "JetBrains Mono", monospace;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;;}

h1,h2,h3,h4,h5,h6 {color:#e5ff00;}

#WIP {
color: rgb(255, 255, 255);
text-align: center;
margin: 0;
background-color: black;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
position: inherit;
background-color: rgba(0, 0, 0, 0.692);
position: fixed;
width: 100%;
}
.page-container {
padding-top: 70px; /*DOČASNÝ KVŮLI WIP BARU PŘI LOADU ABY NEZAKRÝVAL PFP*/
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 0.5fr 1fr 1fr 2fr 0.5fr;
grid-template-rows: 0.5fr 0.5fr 0.5fr 2fr 0.5fr;
gap: 30px 0px;
grid-auto-flow: row;
grid-template-areas:
Expand All @@ -28,14 +33,16 @@ html {
grid-area: name;
text-align: center;
margin-right: 150px;
margin-left: 150px;
font-family:monospace;}
margin-left: 150px;}

.name h1 {
font-size: 40px;
font-weight: 1000;
text-transform: uppercase;}

.name h2 {color:#EE4540;}
.name h3 {color:#801336;}

.profile-pic {
float: left;}

Expand All @@ -44,16 +51,13 @@ html {
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;
}
text-transform: uppercase;}

.skills {
grid-area: skills;
Expand All @@ -62,56 +66,67 @@ html {
flex-wrap: wrap;
justify-content: space-evenly;
align-items: baseline;
font-family: monospace;
font-size: larger;
}
font-size: larger;}

.dev-skills > label, .other-skills > label {
margin-bottom: 5px;
margin-top: 15px;}

.skills h3 {
text-transform: uppercase;
}
text-transform: uppercase;}

progress {
border-radius: 10px;
}
border-radius: 10px;}

progress::-webkit-progress-bar {
background-color: #151625f1;
border-radius: 10px;
}
background-color: #801336;
border-radius: 10px;}

progress::-webkit-progress-value {
background-color: #78fff8;
border-radius: 10px;
}
background-color: #e5ff00;
border-radius: 10px;}

progress::-moz-progress-bar {
background-color: #78fff8;
border-radius: 10px;
}
border-radius: 10px;}

.dev-skills {
display: grid;
justify-items: center;
align-content: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;}
align-content:center ;}

.my-projects {
grid-area: my-projects;
display: flex;
flex-direction: row;
flex-wrap: wrap; /* Allow projects to wrap if needed */
justify-content: center; /* Center the projects */
align-items: flex-start; /* Align the top of each project */
gap: 20px; /* Add some space between the projects */
width: 100%; /* Make sure the container uses full width */
}

.project {
width: 300px; /* Fixed width */
display: flex;
flex-direction: column; /* Align the content inside the project vertically */
flex-grow: 0; /* Prevent growing */
flex-shrink: 0; /* Prevent shrinking */
align-self: auto;
order: 0;
text-align: center; /* Center text and content inside project */
}
.project img {
width: 300px;}

.get-in-touch {
display: inline-flex;
grid-area: get-in-touch;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}
align-items: center;}
43 changes: 23 additions & 20 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,21 @@
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<html lang="en">
<title>[WIP] @davehornik - My Resume</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--[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]-->
<section id="WIP">
<h1 style="margin-top: 0;">❤️ Work in progress ❤️</h1>
<h1 style="margin: 0; color: rgb(0, 255, 157)";>⚠️ WORK IN PROGRESS ⚠️</h1>
</section>
<div class="page-container">
<div class="name">
Expand All @@ -36,41 +39,41 @@ <h2>About Me</h2>
<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>
<label>HTML5:</label>
<progress max="100" value="70">70%</progress>
<label>CSS3:</label>
<progress max="100" value="30">30%</progress>
<label>JavaScript:</label>
<progress max="100" value="15">15%</progress>
<label>Python:</label>
<progress max="100" value="5">5%</progress>
<label>Node/React:</label>
<progress 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>
<label>Photoshop:</label>
<progress max="100" value="65">65%</progress>
<label>3D Modeling:</label>
<progress 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">
<img class=project-sample src="content/img/sample-square0.png" alt="sample">
<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">
<img class=project-sample src="content/img/sample-square1.png" alt="sample">
<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">
<img class=project-sample src="content/img/sample-square2.png" alt="sample">
<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">
<img class=project-sample src="content/img/sample-square3.png" alt="sample">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quidem.</p>
</div>
</div>
Expand Down

0 comments on commit c5cad8a

Please sign in to comment.