From 1656b07225f55d67f21a45343cdf417a706343c3 Mon Sep 17 00:00:00 2001
From: seccodesmith <admin@seccodesmith.pl>
Date: Fri, 16 May 2025 14:57:32 +0200
Subject: [PATCH] Add CSS module import to BlogCard component and restructure
 Home page skills section

---
 src/components/BlogCard.tsx |   1 +
 src/pages/Home.tsx          | 246 +++++++++++++++++++++++-------------
 2 files changed, 162 insertions(+), 85 deletions(-)

diff --git a/src/components/BlogCard.tsx b/src/components/BlogCard.tsx
index 23eb7d4..93fb13a 100644
--- a/src/components/BlogCard.tsx
+++ b/src/components/BlogCard.tsx
@@ -1,4 +1,5 @@
 import { Link } from 'react-router-dom';
+import "./BlogCard.module.css"
 
 export interface BlogPostProps {
   id: string;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index d40877c..9799b81 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -116,96 +116,172 @@ export const Home = () => {
       {/* Skills Section */}
       <section id="skills" className="skills-section">
         <div className="container">
-          <div className="row justify-content-center mb-5">
-            <div className="col-lg-6 text-center">
-              <h2 className="section-title">Technical Arsenal</h2>
+            <div className="row justify-content-center mb-5">
+                <div className="col-lg-6 text-center">
+                    <h2 className="section-title">Technical Arsenal</h2>
+                </div>
             </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 category-icon"></i>
-                  <h3 className="category-title">Languages</h3>
+            <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 category-icon"></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>
-                <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>
+                
+                {/* 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 category-icon"></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 category-icon"></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>
+                
+                {/* Web Development Card */}
+                <div className="col-md-6 col-lg-4">
+                    <div className="card h-100">
+                        <div className="card-header">
+                            <i className="fas fa-window-maximize category-icon"></i>
+                            <h3 className="category-title">Web Development</h3>
+                        </div>
+                        <div className="card-body">
+                            <ul className="list-unstyled">
+                                <li className="skill-item">
+                                    <span className="skill-icon"><i className="devicon-dot-net-plain colored"></i></span>
+                                    <span className="skill-name">ASP.NET</span>
+                                </li>
+                                <li className="skill-item">
+                                    <span className="skill-icon"><i className="fas fa-database"></i></span>
+                                    <span className="skill-name">Entity Framework</span>
+                                </li>
+                                <li className="skill-item">
+                                    <span className="skill-icon"><i className="devicon-dotnetcore-plain colored"></i></span>
+                                    <span className="skill-name">Blazor</span>
+                                </li>
+                                <li className="skill-item">
+                                    <span className="skill-icon"><i className="devicon-react-original colored"></i></span>
+                                    <span className="skill-name">React</span>
+                                </li>
+                                <li className="skill-item">
+                                    <span className="skill-icon"><i className="devicon-bootstrap-plain colored"></i></span>
+                                    <span className="skill-name">Bootstrap</span>
+                                </li>
+                                <li className="skill-item">
+                                    <span className="skill-icon"><i className="devicon-django-plain colored"></i></span>
+                                    <span className="skill-name">Django</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                
+                {/* DevOps Card */}
+                <div className="col-md-6 col-lg-4">
+                    <div className="card h-100">
+                        <div className="card-header">
+                            <i className="fas fa-server category-icon"></i>
+                            <h3 className="category-title">DevOps & Systems</h3>
+                        </div>
+                        <div className="card-body">
+                            <ul className="list-unstyled">
+                                <li className="skill-item">
+                                    <span className="skill-icon"><i className="devicon-docker-plain colored"></i></span>
+                                    <span className="skill-name">Docker</span>
+                                </li>
+                                <li className="skill-item">
+                                    <span className="skill-icon"><i className="fas fa-layer-group"></i></span>
+                                    <span className="skill-name">Docker-compose</span>
+                                </li>
+                                <li className="skill-item">
+                                    <span className="skill-icon"><i className="devicon-bash-plain colored"></i></span>
+                                    <span className="skill-name">Linux CLI</span>
+                                </li>
+                                <li className="skill-item">
+                                    <span className="skill-icon"><i className="devicon-cmake-plain colored"></i></span>
+                                    <span className="skill-name">CMake</span>
+                                </li>
+                                <li className="skill-item">
+                                    <span className="skill-icon"><i className="devicon-windows8-original colored"></i></span>
+                                    <span className="skill-name">Windows</span>
+                                </li>
+                                <li className="skill-item">
+                                    <span className="skill-icon"><i className="devicon-linux-plain colored"></i></span>
+                                    <span className="skill-name">Linux</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
                 </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 category-icon"></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 category-icon"></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>
-          </div>
         </div>
-      </section>
+    </section>
     </>
   );
 };
\ No newline at end of file
-- 
2.52.0