Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add experience section. #179

Merged
merged 9 commits into from
Oct 13, 2024
126 changes: 126 additions & 0 deletions css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -474,6 +474,120 @@ a:visited {
}

/*================*/
/*===Experience===*/
/*===============*/

.experienceC .title {
display: flex;
position: relative;
top: 0;
width: 750px;
left: 0;
right: 0;
margin: auto;
height: 75px;
align-items: center;
justify-content: center;
font-family: Montserrat;
font-weight: bold;
font-size: 55px;
background-color: none;
text-align: center;
color: #272341;
letter-spacing: 0.5px;
}

.experienceC .titleSmall {
display: flex;
top: 0;
position: relative;
width: 750px;
left: 0;
right: 0;
margin: auto;
height: 57.5px;
align-items: center;
justify-content: center;
font-family: Poppins;
font-weight: 300;
font-size: 18px;
background-color: none;
text-align: center;
color: #96989b;
flex-wrap: wrap;
letter-spacing: 0.3px;
}

.experienceC {
padding: 40px;
border-radius: 10px;
margin: 30px;
}

.experienceItem {
margin-bottom: 30px;
border-radius: 10px;
padding: 20px;
background-color: #f9f9f9;
margin-bottom: 10px;
margin-top: 20px;
}

.experienceCompany {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 5px;
}

.experienceDuration {
font-size: 1rem;
color: #555;
margin-bottom: 10px;
}

.experienceDescription {
font-size: 1rem;
margin-bottom: 15px;
}

.progressBars {
margin-top: 15px;
}

.progressBar {
margin-bottom: 15px;
}

.progressLabel {
font-size: 0.9rem;
margin-bottom: 5px;
}

.progressOuter {
width: 100%;
background-color: #e0e0e0;
border-radius: 8px;
overflow: hidden;
}

.progressInner {
height: 10px;
border-radius: 8px;
}


/*================*/
/*===Projects===*/
/*===============*/

/* .projectC {
display: flex;
position: relative;
width: 100%;
height: 400px;
background-color: none;
}
=======
/*===Services Section===*/
/*===============*/

Expand All @@ -483,6 +597,18 @@ a:visited {
align-items: center;
justify-content: center;
width: 100%;

height: 200px;
background-color: none;
} */

/*================*/
/*===Contact===*/
/*===============*/
/*
.contactC {
display: flex;
=======
margin-top: 60px;
padding: 50px 0;
overflow: hidden;
Expand Down
115 changes: 114 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,86 @@
<div class="bottomC"></div>
</div>

<!-- <div class="projectC">
<div class="main">
<div class="textBig">
&ThickSpace;&ThickSpace;&MediumSpace;PROJECTS ⚡
</div>

<div class="textSmall">
I am currently working on some Projects. Check them out!
</div>
<div class="btnCont">
<button
class="btn btn-custom btn-lg"
style="
font-family: Poppins;
font-weight: 400;
padding: 19.2px 34.3px !important;
font-size: 18.5px;
"
>
Check It Out
</button>
</div>
</div>
</div> -->
<!-- <div class="contactC">
<div class="main">
<div class="textBig">
&ThickSpace;&ThickSpace;&MediumSpace;CONTACT 👋🏻
</div>

<div class="textSmall">
Say Hi!
</div>
<div class="btnCont">
<button
class="btn btn-custom btn-lg"
style="
font-family: Poppins;
font-weight: 400;
padding: 19.2px 34.3px !important;
font-size: 18.5px;
"
>
Follow Me
</button>
</div>
</div>
</div>

<!-- Experience Section Start -->

<div class="experienceC">
<div class="title">&ThickSpace;&ThickSpace;&MediumSpace;EXPERIENCE 💼</div>
<div class="titleGap"></div>
<div class="titleSmall">My Work Journey</div>
<div class="container">
<div class="experienceItem">
<div class="experienceCompany">Tech Company A</div>
<div class="experienceDuration">Jan 2020 - Dec 2022</div>
<div class="experienceDescription">
Developed and maintained web applications, focusing on front-end
technologies and user experience.
</div>
<div class="progressBars">
<div class="progressBar">
<div class="progressLabel">JavaScript (70%)</div>
<div class="progressOuter">
<div class="progressInner" style="width: 70%; background-color: aquamarine;"></div>
</div>
</div>
<div class="progressBar">
<div class="progressLabel">React (60%)</div>
<div class="progressOuter">
<div class="progressInner" style="width: 60%; background-color: aquamarine;"></div>
</div>
</div>
<div class="progressBar">
<div class="progressLabel">CSS (80%)</div>
<div class="progressOuter">
<div class="progressInner" style="width: 80%; background-color: aquamarine;"></div>
<div class="px50"></div>
<div class="px50" id="education"></div>

Expand Down Expand Up @@ -237,7 +317,40 @@ <h3 class="text">Your Master's Program Title Here</h3>
</div>
</div>
</div>
</section>

</div>
<div class="experienceItem">
<div class="experienceCompany">Tech Company B</div>
<div class="experienceDuration">Jan 2020 - Dec 2022</div>
<div class="experienceDescription">
Developed and maintained web applications, focusing on front-end
technologies and user experience.
</div>
<div class="progressBars">
<div class="progressBar">
<div class="progressLabel">JavaScript (70%)</div>
<div class="progressOuter">
<div class="progressInner" style="width: 70%; background-color: aquamarine;"></div>
</div>
</div>
<div class="progressBar">
<div class="progressLabel">React (60%)</div>
<div class="progressOuter">
<div class="progressInner" style="width: 60%; background-color: aquamarine;"></div>
</div>
</div>
<div class="progressBar">
<div class="progressLabel">CSS (80%)</div>
<div class="progressOuter">
<div class="progressInner" style="width: 80%; background-color: aquamarine;"></div>
</div>
</div>
</div>

</div>
</div>
</div>
<!-- Experience Section End -->

<div class="px50"></div>

Expand Down