Skip to content

Commit

Permalink
Add experience section (#179)
Browse files Browse the repository at this point in the history
  • Loading branch information
@marsianjohncarter
marsianjohncarter authored Oct 13, 2024
1 parent 73d72c4 commit bf0fa1e
Show file tree
Hide file tree
Showing 2 changed files with 240 additions and 1 deletion.
126 changes: 126 additions & 0 deletions css/style.css
View file
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
View file
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

0 comments on commit bf0fa1e

Please sign in to comment.