Merge pull request 'Trying-scss' (#3 ) from Trying-scss into main

Reviewed-on: #3
feat: refactor Home and SkillCard components, add skillCard data for dynamic rendering
2025-05-20 19:07:28 +00:00 · 2025-05-20 20:51:24 +02:00 · 2025-05-20 20:01:33 +02:00 · 2025-05-20 14:43:49 +02:00 · 2025-05-18 14:29:54 +02:00
24 changed files with 2639 additions and 1170 deletions
@@ -7,7 +7,7 @@
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- DevIcon -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.16.0/devicon.min.css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Fira+Code:wght@400;600&display=swap" rel="stylesheet">
    <!-- Bootstrap CSS -->
@@ -11,14 +11,17 @@
  },
  "dependencies": {
    "@testing-library/react": "^16.3.0",
+    "node": "^20.19.2",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "react-router-dom": "^7.6.0",
+    "sass": "^1.89.0",
    "vitest": "^3.1.3"
  },
  "devDependencies": {
    "@eslint/js": "^9.25.0",
    "@testing-library/jest-dom": "^6.6.3",
+    "@types/node": "^22.15.18",
    "@types/react": "^19.1.2",
    "@types/react-dom": "^19.1.2",
    "@vitejs/plugin-react": "^4.4.1",
@@ -26,6 +29,7 @@
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^16.0.0",
+    "path": "^0.12.7",
    "typescript": "~5.8.3",
    "typescript-eslint": "^8.30.1",
    "vite": "^6.3.5"
@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
@@ -7,7 +7,7 @@ import { BlogPost } from './pages/BlogPost'
 import { Projects } from './pages/Projects'
 import { Contact } from './pages/Contact'
 import { NotFound } from './pages/NotFound'
-import './components/styles.css'
+import '@components/styles.css'

 function App() {
  return (
@@ -0,0 +1,543 @@
+.profile-image {
+  width: 100%;
+  aspect-ratio: 1/1;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 3px solid rgba(255, 100, 0, 0.3);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+  position: relative;
+}
+
+.profile-image::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(45deg, rgba(255, 100, 0, 0.2), transparent);
+  z-index: 1;
+}
+
+.profile-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  filter: contrast(1.1) brightness(0.9);
+}
+
+.intro-text {
+  font-size: 1.1rem;
+  line-height: 1.8;
+  color: var(--text-ash);
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.intro-text p {
+  margin-bottom: 1.25rem;
+}
+
+.intro-text strong {
+  color: var(--text-light);
+}
+
+.intro-text .accent {
+  color: var(--accent-fire);
+}
+
+.connect-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 20px;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
+  text-decoration: none;
+  color: var(--text-light);
+  transition: all 0.3s ease;
+  border: 1px solid var(--card-border);
+  margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.connect-link:hover {
+  background-color: rgba(255, 100, 0, 0.1);
+  transform: translateY(-3px);
+  border-color: var(--accent-fire);
+  color: var(--text-light);
+}
+
+.connect-icon {
+  color: var(--accent-fire);
+}
+
+/* Value cards */
+.value-card {
+  background-color: var(--card-bg);
+  border-radius: 8px;
+  padding: 1.875rem;
+  border: 1px solid var(--card-border);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  text-align: center;
+  height: 100%;
+}
+
+.value-card:hover {
+  transform: translateY(-5px);
+  border-color: rgba(255, 100, 0, 0.3);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+}
+
+.value-icon {
+  font-size: 2.5rem;
+  color: var(--accent-fire);
+  margin-bottom: 1.25rem;
+}
+
+.value-title {
+  font-size: 1.3rem;
+  margin-bottom: 1rem;
+  position: relative;
+  display: inline-block;
+  color: var(--text-light);
+}
+
+.value-title::after {
+  content: "";
+  position: absolute;
+  width: 40px;
+  height: 2px;
+  background: var(--accent-fire);
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.value-text {
+  color: var(--text-ash);
+  line-height: 1.6;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* Skills card */
+.skill-card {
+  background-color: var(--card-bg);
+  border-radius: 8px;
+  padding: 1.875rem;
+  border: 1px solid var(--card-border);
+  transition: all 0.3s ease;
+  position: relative;
+  height: 100%;
+}
+
+.skill-card:hover {
+  transform: translateY(-10px);
+  border-color: rgba(255, 100, 0, 0.3);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+}
+
+.skill-card::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 5px;
+  top: 0;
+  left: 0;
+  background: linear-gradient(to right, var(--accent-dragon), var(--accent-fire));
+  border-radius: 8px 8px 0 0;
+}
+
+.skill-header {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 1.25rem;
+  padding-bottom: 0.625rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.skill-icon {
+  font-size: 2rem;
+  color: var(--accent-fire);
+}
+
+.skill-title {
+  font-size: 1.3rem;
+  margin-bottom: 0;
+  color: var(--text-light);
+}
+
+.skill-check {
+  color: var(--accent-fire);
+  margin-right: 0.625rem;
+}
+
+/* Timeline */
+.timeline {
+  position: relative;
+  padding: 0;
+  margin-top: 3rem;
+  list-style: none;
+}
+
+.timeline:before {
+  content: "";
+  position: absolute;
+  width: 3px;
+  height: 100%;
+  background: linear-gradient(to bottom, var(--accent-fire), var(--accent-dragon), rgba(255, 100, 0, 0.2));
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
+}
+
+.timeline-item {
+  position: relative;
+  margin-bottom: 3rem;
+  width: 100%;
+}
+
+.timeline-item:nth-child(odd) .timeline-content {
+  margin-left: auto;
+  padding-left: 3rem;
+  border-radius: 8px;
+}
+
+.timeline-item:nth-child(even) .timeline-content {
+  margin-right: auto;
+  padding-right: 3rem;
+  border-radius: 8px;
+}
+
+.timeline-dot {
+  width: 16px;
+  height: 16px;
+  background-color: var(--accent-fire);
+  border-radius: 50%;
+  position: absolute;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  box-shadow: var(--glow-effect);
+  z-index: 2;
+}
+
+.timeline-date {
+  display: inline-block;
+  font-size: 0.9rem;
+  background-color: rgba(255, 100, 0, 0.1);
+  color: var(--accent-fire);
+  padding: 5px 10px;
+  border-radius: 4px;
+  margin-bottom: 1rem;
+  font-weight: 600;
+  letter-spacing: 1px;
+}
+
+.timeline-title {
+  font-size: 1.3rem;
+  margin-bottom: 0.625rem;
+  color: var(--text-light);
+}
+
+.timeline-text {
+  color: var(--text-ash);
+  line-height: 1.6;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.timeline-content {
+  background-color: var(--card-bg);
+  border-radius: 8px;
+  padding: 1.5rem;
+  border: 1px solid var(--card-border);
+  position: relative;
+  transition: all 0.3s ease;
+  width: 45%;
+}
+
+.timeline-content:hover {
+  transform: translateY(-5px);
+  border-color: rgba(255, 100, 0, 0.3);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+}
+
+/* Testimonials */
+.testimonial {
+  background-color: var(--card-bg);
+  border-radius: 8px;
+  padding: 1.875rem;
+  margin-bottom: 1.875rem;
+  border: 1px solid var(--card-border);
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.testimonial:hover {
+  transform: translateY(-5px);
+  border-color: rgba(255, 100, 0, 0.3);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+}
+
+.testimonial-content {
+  padding-left: 1.25rem;
+  border-left: 3px solid var(--accent-fire);
+  font-style: italic;
+  color: var(--text-ash);
+  margin-bottom: 1.25rem;
+  line-height: 1.7;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.author-avatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.author-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.author-name {
+  font-weight: 600;
+  font-size: 1.1rem;
+  color: var(--text-light);
+  margin-bottom: 0;
+}
+
+.author-title {
+  color: var(--text-ash);
+  font-size: 0.9rem;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* Blog post specific styles */
+.post-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 120px 20px 60px;
+  display: grid;
+  grid-template-columns: 1fr 300px;
+  gap: 40px;
+}
+
+.post-main {
+  background-color: var(--card-bg);
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--card-border);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+.post-header {
+  position: relative;
+}
+
+.post-featured-image {
+  height: 400px;
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: relative;
+}
+
+.post-featured-image::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100px;
+  background: linear-gradient(to top, var(--card-bg), transparent);
+}
+
+.post-info {
+  padding: 30px 40px;
+}
+
+.post-content {
+  padding: 0 40px 40px;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  line-height: 1.8;
+  color: #e0e0e0;
+}
+
+.share-section {
+  margin-top: 40px;
+  padding-top: 20px;
+  border-top: 1px solid var(--card-border);
+}
+
+.share-title {
+  font-size: 1.2rem;
+  margin-bottom: 15px;
+}
+
+.share-buttons {
+  display: flex;
+  gap: 15px;
+}
+
+.share-button {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.05);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-ash);
+  transition: all 0.3s ease;
+}
+
+.share-button:hover {
+  background-color: var(--accent-fire);
+  color: var(--text-light);
+  transform: translateY(-3px);
+}
+
+.author-section {
+  margin-top: 40px;
+  padding: 30px;
+  background-color: rgba(255, 255, 255, 0.02);
+  border-radius: 8px;
+  display: flex;
+  gap: 20px;
+  align-items: center;
+}
+
+.toc-list {
+  list-style: none;
+}
+
+.toc-item {
+  margin-bottom: 12px;
+  padding-left: 15px;
+  position: relative;
+}
+
+.toc-item::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 10px;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background-color: var(--accent-fire);
+}
+
+.toc-link {
+  color: var(--text-ash);
+  text-decoration: none;
+  transition: all 0.3s ease;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  display: block;
+}
+
+.toc-link:hover {
+  color: var(--accent-fire);
+  transform: translateX(5px);
+}
+
+.toc-subitem {
+  margin-top: 8px;
+  padding-left: 15px;
+}
+
+.related-posts-list {
+  list-style: none;
+}
+
+.related-post-item {
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.related-post-item:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.related-post-link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  text-decoration: none;
+  color: var(--text-ash);
+  transition: color 0.3s ease;
+}
+
+.related-post-link:hover {
+  color: var(--accent-fire);
+}
+
+.related-post-thumb {
+  width: 60px;
+  height: 60px;
+  border-radius: 4px;
+  background-size: cover;
+  background-position: center;
+  flex-shrink: 0;
+}
+
+.related-post-info {
+  flex-grow: 1;
+}
+
+.related-post-title {
+  font-size: 0.9rem;
+  line-height: 1.4;
+  margin-bottom: 5px;
+}
+
+.related-post-date {
+  font-size: 0.8rem;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+/* Social grid for contact page */
+.social-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  gap: 15px;
+  margin-top: 1.5rem;
+}
+
+.social-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 10px;
+  padding: 15px;
+  border-radius: 8px;
+  background-color: rgba(255, 255, 255, 0.05);
+  transition: all 0.3s ease;
+  text-decoration: none;
+}
+
+.social-item:hover {
+  background-color: rgba(255, 100, 0, 0.1);
+  transform: translateY(-5px);
+}
+
+.social-icon-lg {
+  font-size: 1.8rem;
+  color: var(--accent-fire);
+}
+
+.social-name {
+  color: var(--text-ash);
+  font-size: 0.9rem;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
@@ -0,0 +1,344 @@
+@use "./variables.scss" as *;
+
+/* Page Header */
+.page-header {
+    padding-top: 7rem;
+    padding-bottom: 3rem;
+    background-color: $secondary-dark;
+    position: relative;
+    overflow: hidden;
+}
+
+.page-header::before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-image: url('/api/placeholder/1200/400');
+    opacity: 0.15;
+    filter: brightness(0.3);
+    z-index: 0;
+}
+
+.page-title {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    position: relative;
+    display: inline-block;
+}
+
+.page-title::after {
+    content: "";
+    position: absolute;
+    width: 60px;
+    height: 3px;
+    background: $accent-fire;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    box-shadow: $glow-effect;
+}
+
+.page-subtitle {
+    font-size: 1.2rem;
+    color: $text-ash;
+}
+
+/* Card styling */
+.card {
+    background-color: $card-bg;
+    border: 1px solid $card-border;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    margin-bottom: 1.5rem;
+    overflow: hidden;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    border-color: rgba(255, 100, 0, 0.3);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+}
+
+.card-img-top {
+    height: 200px;
+    object-fit: cover;
+}
+
+.featured-img {
+    height: 300px;
+}
+
+.card-title {
+    font-size: 1.5rem;
+    margin-bottom: 0.75rem;
+}
+
+.card-title a {
+    color: $text-light;
+    text-decoration: none;
+    transition: color 0.3s;
+}
+
+.card-title a:hover {
+    color: $accent-fire;
+}
+
+.card-text {
+    color: $text-ash;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    line-height: 1.6;
+}
+
+.featured-card .card-title {
+    font-size: 1.8rem;
+}
+
+.card-footer {
+    background-color: rgba(0, 0, 0, 0.2);
+    border-top: 1px solid $card-border;
+}
+
+/* Category badges */
+.category-badge {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background-color: rgba(139, 0, 0, 0.9);
+    color: $text-light;
+    padding: 0.25rem 0.75rem;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.featured-badge {
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+    background: linear-gradient(45deg, $accent-dragon, $accent-fire);
+    color: $text-light;
+    padding: 0.25rem 0.75rem;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+/* Meta items */
+.meta-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    margin-right: 1rem;
+    color: $text-ash;
+    font-size: 0.9rem;
+}
+
+.meta-icon {
+    color: $accent-fire;
+}
+
+/* Read more link */
+.read-more {
+    display: inline-block;
+    color: $accent-fire;
+    text-decoration: none;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+.read-more::after {
+    content: "→";
+    margin-left: 5px;
+    transition: transform 0.3s ease;
+}
+
+.read-more:hover::after {
+    transform: translateX(5px);
+}
+
+/* Tags */
+.post-tag {
+    display: inline-block;
+    background-color: rgba(255, 100, 0, 0.1);
+    color: $accent-fire;
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    font-weight: 500;
+    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
+    transition: all 0.3s ease;
+}
+
+.post-tag:hover {
+    background-color: rgba(255, 100, 0, 0.2);
+    transform: translateY(-2px);
+}
+
+/* Sidebar */
+.sidebar-widget {
+    background-color: $card-bg;
+    border-radius: 8px;
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    border: 1px solid $card-border;
+}
+
+.widget-title {
+    font-size: 1.2rem;
+    margin-bottom: 1.25rem;
+    padding-bottom: 0.625rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    position: relative;
+}
+
+.widget-title::after {
+    content: "";
+    position: absolute;
+    width: 40px;
+    height: 2px;
+    background: $accent-fire;
+    bottom: -1px;
+    left: 0;
+}
+
+.search-form .form-control {
+    background-color: rgba(255, 255, 255, 0.05);
+    border: 1px solid $card-border;
+    color: $text-light;
+}
+
+.search-form .form-control:focus {
+    box-shadow: 0 0 0 0.25rem rgba(255, 100, 0, 0.25);
+    border-color: $accent-fire;
+}
+
+.search-form .btn {
+    background-color: $accent-fire;
+    border-color: $accent-fire;
+}
+
+.search-form .btn:hover {
+    background-color: $accent-dragon;
+    border-color: $accent-dragon;
+}
+
+/* Lists in sidebar */
+.list-group-item {
+    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.05);
+    color: $text-ash;
+    transition: all 0.3s ease;
+}
+
+.list-group-item:hover {
+    background-color: rgba(255, 100, 0, 0.1);
+}
+
+.list-group-item a {
+    color: $text-ash;
+    text-decoration: none;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.list-group-item a:hover {
+    color: $accent-fire;
+}
+
+.category-count {
+    background-color: rgba(255, 100, 0, 0.1);
+    color: $accent-fire;
+    padding: 2px 8px;
+    border-radius: 10px;
+    font-size: 0.8rem;
+}
+
+/* Recent posts in sidebar */
+.recent-post-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 1rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.recent-post-item:last-child {
+    margin-bottom: 0;
+    padding-bottom: 0;
+    border-bottom: none;
+}
+
+.recent-post-thumb {
+    width: 60px;
+    height: 60px;
+    border-radius: 4px;
+    object-fit: cover;
+}
+
+.recent-post-info {
+    flex-grow: 1;
+}
+
+.recent-post-title {
+    font-size: 0.9rem;
+    line-height: 1.4;
+    margin-bottom: 5px;
+}
+
+.recent-post-title a {
+    color: $text-ash;
+    text-decoration: none;
+    transition: color 0.3s;
+}
+
+.recent-post-title a:hover {
+    color: $accent-fire;
+}
+
+.recent-post-date {
+    font-size: 0.8rem;
+    color: rgba(255, 255, 255, 0.5);
+}
+
+/* Pagination */
+.page-item .page-link {
+    background-color: $card-bg;
+    border-color: $card-border;
+    color: $text-ash;
+}
+
+.page-item .page-link:hover {
+    background-color: rgba(255, 100, 0, 0.1);
+    color: $accent-fire;
+    border-color: $accent-fire;
+}
+
+.page-item.active .page-link {
+    background-color: $accent-fire;
+    border-color: $accent-fire;
+    color: $text-light;
+}
+
+/* Binary background effect */
+.binary-line {
+    position: absolute;
+    font-family: 'Fira Code', monospace;
+    color: $accent-fire;
+    font-size: 0.8rem;
+    opacity: 0.15;
+    pointer-events: none;
+}
@@ -0,0 +1,227 @@
+.error-container {
+  position: relative;
+  z-index: 2;
+  padding-top: 150px;
+  padding-bottom: 100px;
+}
+
+.error-code {
+  font-size: 8rem;
+  font-weight: 700;
+  background: linear-gradient(to right, var(--accent-fire), var(--text-light));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  margin-bottom: 1rem;
+  text-shadow: var(--glow-effect);
+  position: relative;
+}
+
+.error-title {
+  font-size: 2rem;
+  margin-bottom: 1.5rem;
+  color: var(--text-light);
+}
+
+.error-text {
+  font-size: 1.1rem;
+  color: var(--text-ash);
+  margin-bottom: 2rem;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.broken-sword {
+  font-size: 5rem;
+  color: var(--accent-fire);
+  margin-bottom: 2rem;
+  position: relative;
+  z-index: 1;
+}
+
+.broken-sword::after {
+  content: "";
+  position: absolute;
+  width: 40px;
+  height: 4px;
+  background: var(--accent-fire);
+  transform: rotate(-45deg);
+  top: 60%;
+  left: 45%;
+  box-shadow: var(--glow-effect);
+}
+
+.home-button {
+  background: linear-gradient(45deg, var(--accent-dragon), var(--accent-fire));
+  border: none;
+  padding: 0.75rem 2rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  box-shadow: 0 4px 15px rgba(139, 0, 0, 0.3);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  color: var(--text-light);
+  text-decoration: none;
+  border-radius: 4px;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.home-button:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 7px 25px rgba(139, 0, 0, 0.5);
+  color: var(--text-light);
+}
+
+.home-button::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: 0.6s;
+}
+
+.home-button:hover::before {
+  left: 100%;
+}
+
+.error-code-container {
+  position: relative;
+  display: inline-block;
+}
+
+.error-code-container::before,
+.error-code-container::after {
+  content: "<";
+  position: absolute;
+  color: var(--accent-fire);
+  opacity: 0.6;
+  font-size: 6rem;
+  font-family: 'Fira Code', monospace;
+}
+
+.error-code-container::before {
+  left: -4rem;
+}
+
+.error-code-container::after {
+  content: "/>";
+  right: -6rem;
+}
+
+/* Media Queries */
+@media (max-width: 992px) {
+  .timeline:before {
+    left: 2rem;
+  }
+  
+  .timeline-item:nth-child(odd) .timeline-content,
+  .timeline-item:nth-child(even) .timeline-content {
+    width: calc(100% - 3rem);
+    margin-left: 3rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+  
+  .timeline-dot {
+    left: 2rem;
+  }
+  
+  .post-container {
+    grid-template-columns: 1fr;
+  }
+  
+  .post-sidebar {
+    position: static;
+    order: -1;
+  }
+  
+  .post-featured-image {
+    height: 300px;
+  }
+  
+  .post-title {
+    font-size: 2rem;
+  }
+  
+  .post-info, .post-content {
+    padding: 20px;
+  }
+}
+
+@media (max-width: 768px) {
+  .intro-text {
+    margin-top: 2rem;
+  }
+  
+  .testimonial-author {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  
+  .author-info {
+    margin-top: 1rem;
+    text-align: center;
+  }
+  
+  .error-code {
+    font-size: 6rem;
+  }
+  
+  .error-title {
+    font-size: 1.8rem;
+  }
+  
+  .broken-sword {
+    font-size: 4rem;
+  }
+  
+  .error-code-container::before,
+  .error-code-container::after {
+    font-size: 4rem;
+  }
+  
+  .error-code-container::before {
+    left: -3rem;
+  }
+  
+  .error-code-container::after {
+    right: -4.5rem;
+  }
+}
+
+@media (max-width: 576px) {
+  .error-code {
+    font-size: 4rem;
+  }
+  
+  .error-title {
+    font-size: 1.5rem;
+  }
+  
+  .broken-sword {
+    font-size: 3rem;
+  }
+  
+  .error-code-container::before,
+  .error-code-container::after {
+    font-size: 3rem;
+  }
+  
+  .error-code-container::before {
+    left: -2rem;
+  }
+  
+  .error-code-container::after {
+    right: -3rem;
+  }
+}
@@ -0,0 +1,157 @@
+@use './variables' as *;
+
+/* Skills Section */
+.skillsSection {
+    padding: 6rem 0;
+    background-color: $secondary-dark;
+    position: relative;
+}
+
+/* Hero Section */
+.hero {
+    height: 100vh;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    padding-top: 76px;
+}
+
+.hero::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: url('/api/placeholder/1200/800') center/cover no-repeat;
+    opacity: 0.15;
+    filter: brightness(0.5) contrast(1.2);
+    z-index: -1;
+}
+
+.titleMain {
+    font-size: 4rem;
+    font-weight: 700;
+    position: relative;
+    display: inline-block;
+}
+
+.titleMain::before {
+    content: "< ";
+    color: $accent-fire;
+    opacity: 0.8;
+}
+
+.titleMain::after {
+    content: " />";
+    color: $accent-fire;
+    opacity: 0.8;
+}
+
+.subtitle {
+    font-size: 1.6rem;
+    color: $text-ash;
+    margin-bottom: 2rem;
+}
+
+/* Binary Background */
+.binaryBg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    opacity: 0.07;
+    overflow: hidden;
+}
+
+.binaryLine {
+    position: absolute;
+    font-family: 'Fira Code', monospace;
+    color: $accent-fire;
+    font-size: 1rem;
+    animation: fall linear infinite;
+    opacity: 0.7;
+}
+
+/* Button Styling */
+.btnPrimary {
+    background: linear-gradient(45deg, $accent-dragon, $accent-fire);
+    border: none;
+    padding: 0.75rem 2rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    box-shadow: 0 4px 15px rgba(139, 0, 0, 0.3);
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.btnPrimary:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 7px 25px rgba(139, 0, 0, 0.5);
+    background-color: $accent-fire;
+    background-image: none;
+}
+
+.btnPrimary::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: all 0.6s ease;
+}
+
+.btnPrimary:hover::before {
+    left: 100%;
+}
+
+/* Blinking cursor effect */
+.blinkingCursor {
+    display: inline-block;
+    width: 10px;
+    height: 24px;
+    background-color: $accent-fire;
+    margin-left: 5px;
+    animation: blink 1s step-end infinite;
+    box-shadow: $glow-effect;
+}
+
+@keyframes blink {
+
+    0%,
+    100% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0;
+    }
+}
+
+/* Particles effect */
+.particles {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 0;
+}
+
+.particle {
+    position: absolute;
+    width: 3px;
+    height: 3px;
+    background-color: $accent-fire;
+    border-radius: 50%;
+    opacity: 0;
+    animation: rise linear forwards;
+}
@@ -0,0 +1 @@
+
@@ -0,0 +1,99 @@
+@use './variables' as *;
+
+/* Skills Section */
+.skillsSection {
+    padding: 6rem 0;
+    background-color: $secondary-dark;
+    position: relative;
+}
+
+.sectionTitle {
+    text-align: center;
+    font-size: 2.5rem;
+    margin-bottom: 3rem;
+    position: relative;
+    display: inline-block;
+}
+
+.sectionTitle::after {
+    content: "";
+    position: absolute;
+    width: 80px;
+    height: 3px;
+    background: $accent-fire;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    box-shadow: $glow-effect;
+}
+
+.card {
+    background-color: $card-bg;
+    border: 1px solid $card-border;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+}
+
+.card:hover {
+    transform: translateY(-10px);
+    border-color: rgba(255, 100, 0, 0.3);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+}
+
+.card::before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 5px;
+    top: 0;
+    left: 0;
+    background: linear-gradient(to right, $accent-dragon, $accent-fire);
+}
+
+.cardHeader {
+    background-color: transparent;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.categoryIcon {
+    color: $accent-fire;
+    font-size: 1.5rem;
+}
+
+.categoryTitle {
+    font-size: 1.4rem;
+    margin-bottom: 0;
+}
+
+.skillItem {
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.skillIcon {
+    color: $accent-fire;
+    font-size: 1.5rem;
+    min-width: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.skillIcon i {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.skillName {
+    color: $text-ash;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
@@ -0,0 +1,26 @@
+// Colors
+$primary-dark: #0a0a0a;
+$secondary-dark: #1a1a1a;
+$accent-fire: #ff6400;
+$accent-ember: #ff4500;
+$accent-dragon: #8B0000;
+$text-light: #f5f5f5;
+$text-ash: #aaaaaa;
+$card-bg: #141414;
+$card-border: #2a2a2a;
+
+// Effects
+$glow-effect: 0 0 10px $accent-fire, 0 0 20px rgba(255, 100, 0, 0.4);
+
+// Maps for easy access
+$colors: (
+    "primary-dark": $primary-dark,
+    "secondary-dark": $secondary-dark,
+    "accent-fire": $accent-fire,
+    "accent-ember": $accent-ember,
+    "accent-dragon": $accent-dragon,
+    "text-light": $text-light,
+    "text-ash": $text-ash,
+    "card-bg": $card-bg,
+    "card-border": $card-border
+);
@@ -0,0 +1,196 @@
+body {
+    background-color: var(--primary-dark);
+    color: var(--text-light);
+    background-image: url('../images/background.png');
+    background-repeat: round;
+    background-size: 300px 300px;
+    background-position: 0 0;
+    position: relative;
+    overflow-x: hidden;
+    font-family: 'Cinzel', serif;
+}
+
+body::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle at 50% 50%, rgba(139, 0, 0, 0.08), rgba(10, 10, 10, 0.4));
+    pointer-events: none;
+    z-index: -1;
+}
+
+/* Bootstrap Overrides */
+.navbar {
+    background-color: rgba(10, 10, 10, 0.95) !important;
+    border-bottom: 1px solid rgba(255, 100, 0, 0.3);
+}
+
+.navbar-brand {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.navbar-toggler {
+    border: 1px solid rgba(255, 100, 0, 0.5);
+    color: var(--accent-fire);
+}
+
+.navbar-toggler-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 100, 0, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+
+.nav-link {
+    color: var(--text-light) !important;
+    position: relative;
+    padding: 0.5rem 1rem;
+    transition: color 0.3s;
+}
+
+.nav-link:hover,
+.nav-link.active {
+    color: var(--accent-fire) !important;
+}
+
+.nav-link::after {
+    content: "";
+    position: absolute;
+    width: 0;
+    height: 2px;
+    bottom: 0;
+    left: 0;
+    background: linear-gradient(to right, var(--accent-fire), transparent);
+    transition: width 0.3s ease;
+}
+
+.nav-link:hover::after,
+.nav-link.active::after {
+    width: 100%;
+}
+
+/* Logo styling */
+.logo-icon {
+    font-size: 2rem;
+    color: var(--accent-fire);
+    text-shadow: var(--glow-effect);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.logo-text {
+    font-weight: 700;
+    font-size: 1.5rem;
+    background: linear-gradient(to right, var(--accent-fire), var(--text-light));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    letter-spacing: 1px;
+}
+
+
+
+@keyframes fall {
+    0% {
+        transform: translateY(-100%);
+    }
+
+    100% {
+        transform: translateY(100vh);
+    }
+}
+
+
+
+@keyframes rise {
+    0% {
+        transform: translateY(0) translateX(0);
+        opacity: 0;
+    }
+
+    10% {
+        opacity: 0.5;
+    }
+
+    90% {
+        opacity: 0.5;
+    }
+
+    100% {
+        transform: translateY(-100px) translateX(var(--x));
+        opacity: 0;
+    }
+}
+
+/* Footer */
+.footer {
+    background-color: var(--primary-dark);
+    padding: 3rem 0;
+    border-top: 1px solid rgba(255, 100, 0, 0.2);
+    margin-top: 5rem;
+}
+
+.social-links {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-bottom: 1.5rem;
+}
+
+.social-icon {
+    font-size: 1.5rem;
+    color: var(--text-ash);
+    transition: all 0.3s ease;
+}
+
+.social-icon:hover {
+    color: var(--accent-fire);
+    transform: translateY(-5px);
+}
+
+.copyright {
+    color: var(--text-ash);
+    font-size: 0.9rem;
+    margin-top: 1rem;
+    text-align: center;
+}
+
+/* Responsive adjustments */
+@media (max-width: 992px) {
+    .title-main {
+        font-size: 3rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .title-main {
+        font-size: 2.5rem;
+    }
+
+    .subtitle {
+        font-size: 1.2rem;
+    }
+
+    .binary-line {
+        font-size: 0.8rem;
+    }
+}
+
+@media (max-width: 576px) {
+    .title-main {
+        font-size: 2rem;
+    }
+
+    .subtitle {
+        font-size: 1rem;
+    }
+
+    .btn-primary {
+        padding: 0.6rem 1.5rem;
+        font-size: 0.9rem;
+    }
+}
@@ -0,0 +1,42 @@
+import styles from '@styles/SkillCard.module.scss';
+import React from 'react';
+
+export interface Skill {
+    name: string;
+    icon: React.ReactNode; // Or string if using CSS classes for icons
+}
+
+export interface SkillCardProps {
+    categoryTitle: string;
+    categoryIcon: React.ReactNode; // Or string
+    skills: Skill[];
+}
+
+const SkillCard: React.FC<SkillCardProps> = ({ categoryTitle, categoryIcon, skills }) => {
+    return (
+        <div className="col-md-6 col-lg-4">
+            <div className={`card h-100 ${styles.card}`}>
+                <div className={`card-header ${styles.cardHeader}`}>
+                    <i className={`fas ${categoryIcon} category-icon ${styles.categoryIcon}`}></i>
+                    <h3 className={`${styles.categoryTitle}`}>{categoryTitle}</h3>
+                </div>
+                <div className="card-body">
+                    {skills.length > 0 ? (
+                        <ul className="list-unstyled mb-0">
+                            {skills.map((skill, index) => (
+                                <li key={index} className={styles.skillItem}>
+                                    <span className={styles.skillIcon}><i className={`${skill.icon ?? ""}`}></i></span>
+                                    <span className={styles.skillName}>{skill.name}</span>
+                                </li>
+                            ))}
+                        </ul>
+                    ) : (
+                        <p>No skills listed in this category.</p>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SkillCard;
@@ -0,0 +1,58 @@
+import {type SkillCardProps} from '../components/SkillCard';
+
+export const skillCardData: SkillCardProps[] = [
+    {
+        categoryIcon: "fa-code",
+        categoryTitle: "Languages",
+        skills: [
+            { name: "C/C++", icon: "devicon-cplusplus-plain" },
+            { name: "Python", icon: "devicon-python-plain" },
+            { name: ".NET", icon: "devicon-dotnetcore-plain" }
+        ]
+    },
+    {
+        categoryIcon: "fa-microchip",
+        categoryTitle: "Embedded Systems",
+        skills: [
+            { name: "STM32 (I2C, SPI, UART)", icon: "fas fa-microchip" },
+            { name: "ESP32", icon: "fas fa-wifi" },
+            { name: "Pico-SDK", icon: "fas fa-memory" }
+        ]
+    },
+    {
+        categoryIcon: "fa-brain",
+        categoryTitle: "Data & ML",
+        skills: [
+            { name: "Pandas", icon: "devicon-pandas-plain" },
+            { name: "Scikit-learn", icon: "devicon-sklearn-plain" },
+            { name: "Scikit-image", icon: "fas fa-image" },
+            { name: "PyTorch", icon: "devicon-pytorch-plain" },
+            { name: "OpenCV", icon: "devicon-opencv-plain" }
+        ]
+    },
+    {
+        categoryIcon: "fas fa-window-maximize",
+        categoryTitle: "Web Development",
+        skills: [
+            { name: "ASP.NET Core", icon: "devicon-dot-net-plain" },
+            { name: "Entity Framework", icon: "fas fa-database" },
+            { name: "Blazor", icon: "devicon-dotnetcore-plain"},
+            { name: "React", icon: "devicon-react-original" },
+            { name: "Django", icon: "devicon-django-plain" },
+            { name: "Bootstrap", icon: "devicon-bootstrap-plain" },
+        ],
+    },
+    {
+        categoryIcon: "fas fa-cloud",
+        categoryTitle: "DevOps & Systems",
+        skills: [
+            { name: "Docker", icon: "devicon-docker-plain" },
+            { name: "Docker-compose", icon: "fas fa-layer-group" },
+            { name: ">Linux CLI", icon: "devicon-bash-plain" },
+            { name: "Git", icon: "devicon-git-plain" },
+            { name: "CI/CD", icon: "fas fa-cogs" },
+            { name: "Cmake", icon: "devicon-cmake-plain" },
+            { name: "Linux", icon: "devicon-linux-plain" },
+        ]
+    }
+];
@@ -3,7 +3,8 @@ import { PageHeader } from '../components/PageHeader';
 import { BlogCard } from '../components/BlogCard';
 import { blogPostsData } from '../data/blogPostsData';

-import './Blog.module.css';
+import '@styles/_variables.scss';
+import '@styles/Blog.scss';

 export const Blog = () => {
  const [searchQuery, setSearchQuery] = useState('');
@@ -3,7 +3,6 @@ import { useParams, Link } from 'react-router-dom';
 import { blogPostsData } from '../data/blogPostsData';
 import { NotFound } from './NotFound';

-import './BlogPost.module.css';

 export const BlogPost = () => {
  const { slug } = useParams<{ slug: string }>();
@@ -1,8 +1,6 @@
 import { PageHeader } from '../components/PageHeader';
 import { ContactForm } from '../components/ContactForm';

-import './Contact.module.css';
-
 export const Contact = () => {
  return (
    <>
@@ -1,75 +1,78 @@
 import { useEffect } from 'react';
 import { Link } from 'react-router-dom';

-import styles from './Home.module.css';
+import styles from '@styles/Home.module.scss';
+import SkillCard from '../components/SkillCard'
+import { skillCardData } from '../data/skillCard';

 export const Home = () => {
-  // Create binary background and particles effects
+  const skills = skillCardData;
+
  useEffect(() => {
    // Create binary background
    const createBinaryBg = () => {
      const binaryBg = document.getElementById('binary-bg');
      if (!binaryBg) return;
-      
+
      const chars = '01';
      const linesCount = 20;
-      
+
      // Clear existing lines
      binaryBg.innerHTML = '';
-      
+
      for (let i = 0; i < linesCount; i++) {
        const line = document.createElement('div');
        line.className = styles.binaryLine;
        line.style.left = `${Math.random() * 100}%`;
        line.style.animationDuration = `${Math.random() * 10 + 15}s`;
-        
+
        let binaryString = '';
        for (let j = 0; j < 100; j++) {
          binaryString += chars.charAt(Math.floor(Math.random() * chars.length));
        }
-        
+
        line.textContent = binaryString;
        binaryBg.appendChild(line);
      }
    };
-    
+
    // Create particles effect (ember/spark effect)
    const createParticles = () => {
      const particlesContainer = document.getElementById('particles');
      if (!particlesContainer) return;
-      
+
      // Clear existing particles
      particlesContainer.innerHTML = '';
-      
+
      const particlesCount = 50;
-      
+
      for (let i = 0; i < particlesCount; i++) {
        setTimeout(() => {
          const particle = document.createElement('div');
          particle.className = styles.particle;
-          
+
          // Random position at the bottom of the hero section
          const posX = Math.random() * window.innerWidth;
          const posY = window.innerHeight - 100 + (Math.random() * 50);
-          
+
          particle.style.left = `${posX}px`;
          particle.style.top = `${posY}px`;
-          
+
          // Random size
          const size = Math.random() * 3 + 1;
          particle.style.width = `${size}px`;
          particle.style.height = `${size}px`;
-          
+
          // Random drift
          const xDrift = (Math.random() - 0.5) * 100;
          particle.style.setProperty('--x', `${xDrift}px`);
-          
+
          // Random animation duration
          const duration = Math.random() * 3 + 2;
          particle.style.animationDuration = `${duration}s`;
-          
+
          particlesContainer.appendChild(particle);
-          
+
          // Remove particle after animation completes
          setTimeout(() => {
            particle.remove();
@@ -77,10 +80,10 @@ export const Home = () => {
        }, i * 100);
      }
    };
-    
+
    createBinaryBg();
    createParticles();
-    
+
    // Create new particles periodically
    const particleInterval = setInterval(() => {
      const particlesContainer = document.getElementById('particles');
@@ -88,17 +91,17 @@ export const Home = () => {
        createParticles();
      }
    }, 5000);
-    
+
    // Cleanup
    return () => {
      clearInterval(particleInterval);
    };
  }, []);
-  
+
  return (
    <>
      {/* Hero Section */}
-      <section className="hero" id="home">
+      <section className={styles.hero} id="home">
        <div id="binary-bg" className={styles.binaryBg}></div>
        <div className={`container text-center ${styles.heroContainer}`}>
          <div className="row justify-content-center">
@@ -106,7 +109,7 @@ export const Home = () => {
              <h1 className={`${styles.titleMain}`}>SecCodeSmith</h1>
              <div className={`${styles.blinkingCursor}`}></div>
              <p className={`subtitle mt-3 ${styles.subtitle}`}>Forging Digital Solutions in the Fires of Innovation</p>
-              <Link to="/projects" className={`btn btn-primary mt-4 ${styles.btnPrimary}`}>
+              <Link to="/projects" className={`btn btn-primary mt-4 btn-primary ${styles.btnPrimary}`}>
                <i className="fas fa-fire-alt me-2"></i> View My Forge
              </Link>
            </div>
@@ -124,90 +127,16 @@ export const Home = () => {
            </div>
          </div>
          <div className="row g-4">
-            {/* Languages Card */}
-            <div className="col-md-6 col-lg-4">
-              <div className="card h-100">
-                <div className="card-header">
-                  <i className={`fas fa-code ${styles.categoryIcon}`}></i>
-                  <h3 className="category-title">Languages</h3>
-                </div>
-                <div className="card-body">
-                  <ul className="list-unstyled">
-                    <li className="skill-item">
-                      <span className="skill-icon"><i className="devicon-cplusplus-plain colored"></i></span>
-                      <span className="skill-name">C/C++</span>
-                    </li>
-                    <li className="skill-item">
-                      <span className="skill-icon"><i className="devicon-python-plain colored"></i></span>
-                      <span className="skill-name">Python</span>
-                    </li>
-                    <li className="skill-item">
-                      <span className="skill-icon"><i className="devicon-csharp-plain colored"></i></span>
-                      <span className="skill-name">.NET</span>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-            
-            {/* Embedded Systems Card */}
-            <div className="col-md-6 col-lg-4">
-              <div className="card h-100">
-                <div className="card-header">
-                    <i className={`fas fa-microchip ${styles.categoryIcon}`}></i>
-                  <h3 className="category-title">Embedded Systems</h3>
-                </div>
-                <div className="card-body">
-                  <ul className="list-unstyled">
-                    <li className="skill-item">
-                      <span className="skill-icon"><i className="fas fa-microchip"></i></span>
-                      <span className="skill-name">STM32 (I2C, SPI, UART)</span>
-                    </li>
-                    <li className="skill-item">
-                      <span className="skill-icon"><i className="fas fa-wifi"></i></span>
-                      <span className="skill-name">ESP32</span>
-                    </li>
-                    <li className="skill-item">
-                      <span className="skill-icon"><i className="fas fa-memory"></i></span>
-                      <span className="skill-name">Pico-SDK</span>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-            
-            {/* Data & ML Card */}
-            <div className="col-md-6 col-lg-4">
-              <div className="card h-100">
-                <div className="card-header">
-                  <i className={`fas fa-brain ${styles.categoryIcon}`}></i>
-                  <h3 className="category-title">Data & ML</h3>
-                </div>
-                <div className="card-body">
-                  <ul className="list-unstyled">
-                    <li className="skill-item">
-                      <span className="skill-icon"><i className="devicon-pandas-original colored"></i></span>
-                      <span className="skill-name">Pandas</span>
-                    </li>
-                    <li className="skill-item">
-                      <span className="skill-icon"><i className="fas fa-cogs"></i></span>
-                      <span className="skill-name">Scikit-learn</span>
-                    </li>
-                    <li className="skill-item">
-                      <span className="skill-icon"><i className="fas fa-image"></i></span>
-                      <span className="skill-name">Scikit-image</span>
-                    </li>
-                    <li className="skill-item">
-                      <span className="skill-icon"><i className="devicon-pytorch-original colored"></i></span>
-                      <span className="skill-name">PyTorch</span>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
+            {skills.map((skill, index) => (
+                <SkillCard
+                  categoryIcon={skill.categoryIcon}
+                  categoryTitle={skill.categoryTitle}
+                  skills={skill.skills}
+                />
+            ))}
          </div>
        </div>
-    </section>
+      </section>
    </>
  );
 };
@@ -3,5 +3,20 @@
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
-  ]
+  ],
+
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*":            ["src/*"],
+      "@assets/*":      ["src/assets/*"],
+      "@components/*":  ["src/components/*"],
+      "@pages/*":       ["src/pages/*"],
+      "@data/*":        ["src/data/*"],
+      "@styles/*":      ["src/styles/*"],
+      "@tests/*":       ["src/tests/*"],
+    },
+    "moduleResolution": "node",
+    "types": ["node"] 
+  }
 }
@@ -1,7 +1,24 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import path from 'path'

 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  resolve: {
+    alias: {
+      "@":            path.resolve(__dirname, "/src"),
+      '@assets':      path.resolve(__dirname, 'src/assets'),
+      '@components':  path.resolve(__dirname, 'src/components'),
+      '@pages':       path.resolve(__dirname, 'src/pages'),
+      '@data':        path.resolve(__dirname, 'src/data'),
+      '@styles':      path.resolve(__dirname, 'src/assets/styles'),
+      '@public':      path.resolve(__dirname, 'src/public'),
+      '@tests':       path.resolve(__dirname, 'src/tests'),
+    }
+  },
+
+  plugins: [
+    react(),
+  ],
+  
 })
Author	SHA1	Message	Date
seccodesmith	7e91215af1	Merge pull request 'Trying-scss' (#3 ) from Trying-scss into main Reviewed-on: #3	2025-05-20 19:07:28 +00:00
seccodesmith	03a9f61a2a	feat: refactor Home and SkillCard components, add skillCard data for dynamic rendering	2025-05-20 20:51:24 +02:00
seccodesmith	fdb79c70ad	feat: update Font Awesome and DevIcon versions, refactor styles in Home and SkillCard components	2025-05-20 20:01:33 +02:00
seccodesmith	fb84bf87de	feat: refactor styles and update imports for Home and Blog components	2025-05-20 14:43:49 +02:00
seccodesmith	848318a23e	feat: update dependencies and add new styles - Added node and sass to dependencies in package.json - Added @types/node to devDependencies - Removed unused CSS files and replaced them with SCSS files - Updated import paths in App.tsx and Blog.tsx to use new aliasing - Configured TypeScript paths for easier imports - Updated Vite config to include path aliases - Created new SCSS files for About, Blog, Error, and Main styles - Added a variables file for color and effect variables - Updated index.scss for global styles and responsive adjustments	2025-05-18 14:29:54 +02:00