Refactor: move frontend in apps/frontend

apps/frontend/src/pages/Home/components/SingleExperience/SingleExperience.css

@@ -0,0 +1,99 @@
+.experience-card {
+    position: relative;
+    width: 90%;
+    margin-bottom: 3rem;
+    padding: 1.5em;
+    display: flex;
+    gap: 6rem;
+    justify-content: center;
+}
+
+.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: 25%;
+    text-align: end;
+}
+
+.experience-card-right {
+    width: 25%;
+}
+
+.experience-company {
+    color: var(--important-color);
+    font-size: 1.5rem;
+    margin: 0;
+}
+
+.experience-role {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--title-color);
+    margin: 0;
+}
+
+.experience-location,
+.experience-duration {
+    font-size: 0.95rem;
+    color: var(--text-color);
+    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: var(--text-color);
+    text-align: left;
+}
+
+.experience-tasks li::before {
+    content: '›';
+    position: absolute;
+    left: 0;
+    top: 0;
+    color: var(--important-color);
+    font-weight: bold;
+    font-size: 1.2rem;
+    line-height: 1;
+}
+
+
+
+@media (max-width: 768px) {
+    .experience-card{
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+    }
+    .experience-card::before {
+        left: 20px;
+        top: 31px;
+    }
+    .experience-card-left, .experience-card-right{
+        width: fit-content;
+        margin-left: 20px;
+    }
+    .experience-card-left{
+        text-align: left;
+    }
+}