Add CSS module import to BlogCard component and restructure Home page skills section #2
@@ -1,4 +1,5 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import "./BlogCard.module.css"
|
||||
|
||||
export interface BlogPostProps {
|
||||
id: string;
|
||||
|
||||
+161
-85
@@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user