Skip to content

Commit

Permalink
work on resume heading and background content
Browse files Browse the repository at this point in the history
  • Loading branch information
@GovanDBT
GovanDBT committed Dec 9, 2023
1 parent 6cdc1ce commit c33ba4f
Show file tree
Hide file tree
Showing 4 changed files with 222 additions and 8 deletions.
144 changes: 142 additions & 2 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@ body {

h1,
h2,
h3 {
h3,
h4 {
font-family: Poppins;
color: var(--heading-color);
margin-bottom: 0.8rem;
Expand All @@ -57,6 +58,10 @@ h3 {
font-size: 3.5rem;
}

h4 {
font-size: 1.8rem;
}

@media screen and (min-width: 768px) {
h1 {
font-size: 6rem;
Expand All @@ -79,6 +84,10 @@ h3 {
h3 {
font-size: 3.2rem;
}

h4 {
font-size: 2.5rem;
}
}

/* Links */
Expand Down Expand Up @@ -138,6 +147,11 @@ a:link {
color: #fff;
}

.btn-white {
background: #fff;
color: var(--accent-color);
}

.btn-primary:hover {
background: #254068;
}
Expand Down Expand Up @@ -177,6 +191,9 @@ a:link {
align-items: center;
flex-wrap: wrap;
padding: 0.5rem 1rem;
}

.nav-hero {
padding-bottom: 6rem;
}

Expand Down Expand Up @@ -825,4 +842,127 @@ a.btn-callout {
.footer-logo {
width: 25rem;
}
}
}

/* Resume */

/* resume heading */
.resume-heading {
margin-top: 2rem;
}

.resume-heading.block-accent {
padding: 1rem;
}

.personal-info-heading {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}

.personal-info-name {
color: var(--secondary-color);
font-size: 2.8rem;
font-weight: 700;
margin-top: 0.8rem;
}

.btn-resume {
border-radius: 10px;
font-size: 1.5rem;
padding: 1rem 1.5rem;
}

.personal-info-body {
display: flex;
flex-direction: column;
}

.personal-info {
display: flex;
gap: 1rem;
align-items: center;
font-size: 1.8rem;
color: var(--secondary-color);
font-weight: 500;
}

@media screen and (min-width: 1024px) {
.btn-resume {
padding: 1rem 3rem;
}

.personal-info-name {
font-size: 5rem;
}

.personal-info-body {
flex-direction: row;
gap: 5rem;
}
}

/* resume body */

.resume-body {
padding: 0.5rem 1rem;
}

.background-content {
border-bottom: 1px solid var(--secondary-color);
}

.summary {
text-align: center;
}

.resume-body-headings {
text-transform: capitalize;
text-align: center;
}

.background-content-subheader {
display: flex;
justify-content: space-between;
gap: 2rem;
}

.background-content-dates {
font-size: 2rem;
color: var(--accent-color);
}

a.certificate-links {
text-decoration: underline;
}

.certificate-links {
color: var(--heading-color);
display: block;
text-decoration: underline;
margin-bottom: 1.4rem;
transition: all .3s ease;
}

.certificate-links:hover {
color: var(--accent-color);
}

.practical-skills-list {
display: flex;
flex-wrap: wrap;
gap: 5rem;
list-style: none;
padding: 0;
}

.practical-skills-list li::before {
content: "\2022";
color: var(--accent-color);
font-weight: bold;
display: inline-block;
width: 1.4rem;

}
4 changes: 2 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,18 @@
<link rel="icon" type="image/x-icon" href="images/favicon.svg">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/normalize.css">
<script src="https://kit.fontawesome.com/6f879d6c21.js" crossorigin="anonymous"></script>
<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=Bad+Script&family=Poppins:wght@300;400;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/6f879d6c21.js" crossorigin="anonymous"></script>
</head>
<body>
<!--Hero section + Navigation bar-->
<header>
<section class="hero">
<nav class="nav collapsible container">
<nav class="nav nav-hero collapsible container">
<a href="index.html"><img src="images/Logo.svg" alt="TD Logo"></a>
<i class="fa-solid fa-bars-staggered nav-toggler"></i>
<div class="nav-list-container">
Expand Down
2 changes: 1 addition & 1 deletion pages/contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,13 @@
<link rel="icon" type="image/x-icon" href="../images/favicon.svg">
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/normalize.css">
<script src="https://kit.fontawesome.com/6f879d6c21.js" crossorigin="anonymous"></script>
<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=Bad+Script&family=Poppins:wght@300;400;700;800&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/6f879d6c21.js" crossorigin="anonymous"></script>
</head>

<body>
Expand Down
80 changes: 77 additions & 3 deletions pages/resume.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,13 @@
<link rel="icon" type="image/x-icon" href="../images/favicon.svg">
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/normalize.css">
<script src="https://kit.fontawesome.com/6f879d6c21.js" crossorigin="anonymous"></script>
<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=Bad+Script&family=Poppins:wght@300;400;700;800&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/6f879d6c21.js" crossorigin="anonymous"></script>
</head>
<body>
<!--Hero section + Navigation bar-->
Expand All @@ -50,8 +50,82 @@
</nav>
</section>
</header>
<!--Resume section-->

<!--Resume Header-->
<section class="resume-heading block-accent container">
<div class="personal-info-heading">
<h3 class="personal-info-name">Thembi Tetlanyo Dibotelo</h3>
<a href="#" target="_blank" class="btn btn-white btn-resume">Download CV</a>
</div>
<div class="personal-info-body">
<div class="personal-info">
<i class="fa-solid fa-envelope"></i>
<p>govan.dibotelo@gmail.com</p>
</div>
<div class="personal-info">
<i class="fa-solid fa-phone"></i>
<p>+267 76937470</p>
</div>
<div class="personal-info">
<i class="fa-solid fa-location-dot"></i>
<p>Botswana, Gaborone</p>
</div>
<div class="personal-info">
<i class="fa-brands fa-linkedin"></i>
<p>Thembi Dibotelo</p>
</div>

</div>
</section>
<!--Resume Body-->
<section class="resume-body grid container">
<section class="background">
<div class="background-content summary">
<h2 class="resume-body-headings">Summary</h2>
<p>Creative developer and designer with about +3 years of freelance developing for small to medium business and individual creators. Participated in various challenges and online course to boost my creativity, teamwork and skills. Seeking to leverage organizational skills and extend experience to join respective tech, mining and financial institutions.</p>
</div>
<div class="background-content education">
<h2 class="resume-body-headings">Education</h2>
<div class="background-content-subheader">
<h4 class="background-content-subheading">Bachelor of Science, Computer Science</h4>
<p class="background-content-dates">2020 - 2025</p>
</div>
<p>University of Botswana</p>
</div>
<div class=" background-content certificates">
<h2 class="resume-body-headings">certificates</h2>
<div class="background-content-subheader">
<h4 class="background-content-subheading">National Mathematics & Science Fair (1st)</h4>
<p class="background-content-dates">2019</p>
</div>
<p>Awarded by Mathematics Association of Botswana and Botswana Science Association</p>
<h4 class="background-content-subheading">Online certificates</h4>
<a href="#" class="certificate-links">Ultimate GitHub Course</a>
<a href="#" class="certificate-links">Ultimate HTML5 and CSS Courses</a>
<a href="#" class="certificate-links">Ultimate JavaScript Courses</a>
</div>
<div class="background-content practical-skills">
<h2 class="resume-body-headings">Practical skills</h2>
<ul class="practical-skills-list">
<li>Git</li>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Node.js</li>
<li>TypeScript</li>
<li>React.js</li>
<li>Next.js</li>
<li>React-Native</li>
<li>Python</li>
<li>SQL</li>
<li>Figma</li>
<li>Illustrator</li>
</ul>
</div>
</section>
<section class="skills">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id explicabo necessitatibus inventore delectus iste libero laudantium! Fugiat in voluptatibus repudiandae.</p>
</section>
</section>
<!--footer-->
<footer class="footer">
<p class="footer-copyright">Copyright &copy; 2023 Thembi Dibotelo</p>
Expand Down

0 comments on commit c33ba4f

Please sign in to comment.