Merge pull request 'Add CSS module import to BlogCard component and restructure Home page skills section' (#2) from master into main
Reviewed-on: #2
This commit was merged in pull request #2.
This commit is contained in:
@@ -1,4 +1,5 @@
|
|||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
|
import "./BlogCard.module.css"
|
||||||
|
|
||||||
export interface BlogPostProps {
|
export interface BlogPostProps {
|
||||||
id: string;
|
id: string;
|
||||||
|
|||||||
+157
-81
@@ -116,96 +116,172 @@ export const Home = () => {
|
|||||||
{/* Skills Section */}
|
{/* Skills Section */}
|
||||||
<section id="skills" className="skills-section">
|
<section id="skills" className="skills-section">
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="row justify-content-center mb-5">
|
<div className="row justify-content-center mb-5">
|
||||||
<div className="col-lg-6 text-center">
|
<div className="col-lg-6 text-center">
|
||||||
<h2 className="section-title">Technical Arsenal</h2>
|
<h2 className="section-title">Technical Arsenal</h2>
|
||||||
</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>
|
</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>
|
||||||
|
<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>
|
||||||
|
|
||||||
{/* Embedded Systems Card */}
|
{/* Embedded Systems Card */}
|
||||||
<div className="col-md-6 col-lg-4">
|
<div className="col-md-6 col-lg-4">
|
||||||
<div className="card h-100">
|
<div className="card h-100">
|
||||||
<div className="card-header">
|
<div className="card-header">
|
||||||
<i className="fas fa-microchip category-icon"></i>
|
<i className="fas fa-microchip category-icon"></i>
|
||||||
<h3 className="category-title">Embedded Systems</h3>
|
<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>
|
</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 */}
|
{/* Data & ML Card */}
|
||||||
<div className="col-md-6 col-lg-4">
|
<div className="col-md-6 col-lg-4">
|
||||||
<div className="card h-100">
|
<div className="card h-100">
|
||||||
<div className="card-header">
|
<div className="card-header">
|
||||||
<i className="fas fa-brain category-icon"></i>
|
<i className="fas fa-brain category-icon"></i>
|
||||||
<h3 className="category-title">Data & ML</h3>
|
<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 className="card-body">
|
|
||||||
<ul className="list-unstyled">
|
{/* Web Development Card */}
|
||||||
<li className="skill-item">
|
<div className="col-md-6 col-lg-4">
|
||||||
<span className="skill-icon"><i className="devicon-pandas-original colored"></i></span>
|
<div className="card h-100">
|
||||||
<span className="skill-name">Pandas</span>
|
<div className="card-header">
|
||||||
</li>
|
<i className="fas fa-window-maximize category-icon"></i>
|
||||||
<li className="skill-item">
|
<h3 className="category-title">Web Development</h3>
|
||||||
<span className="skill-icon"><i className="fas fa-cogs"></i></span>
|
</div>
|
||||||
<span className="skill-name">Scikit-learn</span>
|
<div className="card-body">
|
||||||
</li>
|
<ul className="list-unstyled">
|
||||||
<li className="skill-item">
|
<li className="skill-item">
|
||||||
<span className="skill-icon"><i className="fas fa-image"></i></span>
|
<span className="skill-icon"><i className="devicon-dot-net-plain colored"></i></span>
|
||||||
<span className="skill-name">Scikit-image</span>
|
<span className="skill-name">ASP.NET</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="skill-item">
|
<li className="skill-item">
|
||||||
<span className="skill-icon"><i className="devicon-pytorch-original colored"></i></span>
|
<span className="skill-icon"><i className="fas fa-database"></i></span>
|
||||||
<span className="skill-name">PyTorch</span>
|
<span className="skill-name">Entity Framework</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
Reference in New Issue
Block a user