-
-
{experience.role}
-
- {experience.company} • {experience.location}
-
-
+
+
+
{experience.company}
+
{experience.location}
{experience.duration}
-
- {experience.tasks.map((task, index) => (
- - {task}
- ))}
-
+
+
{experience.role}
+
+ {experience.tasks.map((task, index) => (
+ - {task}
+ ))}
+
+
);
}
diff --git a/src/styles/Experiences.css b/src/styles/Experiences.css
index f7729d8..e7b9a2c 100644
--- a/src/styles/Experiences.css
+++ b/src/styles/Experiences.css
@@ -3,23 +3,22 @@
flex-direction: column;
align-items: center;
width: 100%;
- scroll-margin-top: 40px;
}
.experiences-container {
- width: 90%;
+ width: 50%;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
-
.experiences-container::before {
content: '';
position: absolute;
+ left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background-color: rgba(176, 176, 176, 0.2);
-}
\ No newline at end of file
+}
diff --git a/src/styles/SingleExperience.css b/src/styles/SingleExperience.css
index 35b4631..f5bc9a2 100644
--- a/src/styles/SingleExperience.css
+++ b/src/styles/SingleExperience.css
@@ -1,40 +1,39 @@
.experience-card {
position: relative;
- width: 50%;
+ width: 100%;
margin-bottom: 3rem;
- box-sizing: border-box;
- border-radius: 12px;
- background-color: rgba(255, 255, 255, 0.03);
- transition: all 0.3s ease;
padding: 1.5rem;
-}
-
-.experience-card.left {
- align-self: flex-start;
- border-left: 3px solid #D95F46;
-}
-
-.experience-card.right {
- align-self: flex-end;
- border-right: 3px solid #D95F46;
-}
-
-.experience-card:hover {
- transform: translateY(-5px);
- background-color: rgba(255, 255, 255, 0.05);
-}
-
-.experience-card-header {
display: flex;
- justify-content: space-between;
- align-items: flex-start;
- gap: 1rem;
- margin-bottom: 1rem;
}
-.experience-card-header-left {
- display: flex;
- flex-direction: column;
+.experience-card::before {
+ content: '';
+ position: absolute;
+ top: 25px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 15px;
+ height: 15px;
+ border-radius: 50%;
+ background-color: #D95F46;
+ border: 3px solid rgba(176, 176, 176, 0.2);
+}
+
+
+.experience-card-left {
+ width: 50%;
+ text-align: end;
+ margin-right: 8rem;
+}
+
+.experience-card-right {
+ width: 50%;
+}
+
+.experience-company {
+ color: #D95F46;
+ font-size: 1.2rem;
+ margin: 0;
}
.experience-role {
@@ -43,9 +42,6 @@
color: #EAEAEA;
margin: 0;
}
-.experience-location{
- font-weight: 600;
-}
.experience-location,
.experience-duration {
@@ -53,7 +49,6 @@
color: #B0B0B0;
margin: 0.25rem 0 0;
white-space: nowrap;
-
}
.experience-tasks {
@@ -64,15 +59,19 @@
.experience-tasks li {
position: relative;
- padding-left: 1.2rem;
+ padding-left: 1.5rem;
margin-bottom: 0.5rem;
color: #B0B0B0;
+ text-align: left;
}
.experience-tasks li::before {
content: '›';
position: absolute;
left: 0;
+ top: 0;
color: #D95F46;
font-weight: bold;
-}
+ font-size: 1.2rem;
+ line-height: 1;
+}
\ No newline at end of file
diff --git a/src/styles/SingleProject.css b/src/styles/SingleProject.css
index 0421a0b..583a373 100644
--- a/src/styles/SingleProject.css
+++ b/src/styles/SingleProject.css
@@ -20,9 +20,9 @@
width: 100%;
display: flex;
justify-content: center;
- align-items: center;
+ align-items: start;
overflow: hidden;
- max-height: 225px;
+ height: 210px;
}
.single-project-left img {
@@ -32,7 +32,6 @@
transition: opacity 0.3s ease-in-out;
opacity: 1;
object-fit: cover;
-
}
.single-project-left img.fade-out {