reorganization of the tree structure

2025-09-02 19:17:00 +02:00
parent cf37db8c88
commit 50485a4f55
22 changed files with 23 additions and 23 deletions
@@ -0,0 +1,77 @@
+.experience-card {
+    position: relative;
+    width: 100%;
+    margin-bottom: 3rem;
+    padding: 1.5rem;
+    display: flex;
+}
+
+.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 {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #EAEAEA;
+    margin: 0;
+}
+
+.experience-location,
+.experience-duration {
+    font-size: 0.95rem;
+    color: #B0B0B0;
+    margin: 0.25rem 0 0;
+    white-space: nowrap;
+}
+
+.experience-tasks {
+    list-style: none;
+    padding: 0;
+    margin-top: 1rem;
+}
+
+.experience-tasks li {
+    position: relative;
+    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;
+}
@@ -0,0 +1,22 @@
+import './SingleExperience.css';
+
+function SingleExperience({ experience, tasks }) {
+    return (
+        <div className="experience-card">
+            <div className="experience-card-left">
+                <h3 className="experience-company">{experience.company}</h3>
+                <p className="experience-location">{experience.location}</p>
+                <p className="experience-duration">{experience.duration}</p>
+            </div>
+            <div className="experience-card-right">
+                <h3 className="experience-role">{experience.role}</h3>
+                <ul className="experience-tasks">
+                    {tasks.map((task) => (
+                        <li>{task.description}</li>
+                    ))}
+                </ul>
+            </div>
+        </div>
+    );
+}
+export default SingleExperience;