Fixing-about #7
@@ -1,3 +1,5 @@
|
||||
@use './variables' as *;
|
||||
|
||||
.profile-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 1/1;
|
||||
@@ -0,0 +1,92 @@
|
||||
import { type AboutProps } from "../pages/About";
|
||||
|
||||
export const aboutProps: AboutProps = {
|
||||
coreValues: [
|
||||
{
|
||||
title: "Security by Design",
|
||||
icon: "fas fa-shield-alt",
|
||||
description:
|
||||
"Security is not an afterthought but the very foundation upon which robust systems are built. Every line of code is crafted with defensive principles in mind.",
|
||||
},
|
||||
{
|
||||
icon: "fas fa-tachometer-alt",
|
||||
title: "Performance Optimization",
|
||||
description:
|
||||
"Like a finely-honed blade, code should be both effective and efficient. I meticulously optimize every component for maximum speed and minimal resource consumption.",
|
||||
},
|
||||
{
|
||||
icon: "fas fa-gem",
|
||||
title: "Elegant Simplicity",
|
||||
description:
|
||||
"True mastery is revealed not in complexity but in elegant simplicity. I strive to create solutions that are accessible, maintainable, and beautifully crafted."
|
||||
},
|
||||
{
|
||||
icon: "fas fa-sync-alt",
|
||||
title: "Continuous Evolution",
|
||||
description:
|
||||
"The digital landscape changes with the seasons. I embrace continuous learning and adaptation, integrating new techniques and technologies to forge ever-better solutions."
|
||||
}
|
||||
],
|
||||
technicalArsenal: [
|
||||
{
|
||||
icon: "fas fa-microchip",
|
||||
title: "Embedded Systems",
|
||||
skills: [
|
||||
"STM32 microcontroller programming (I2C, SPI, UART)",
|
||||
"ESP32 wireless solutions",
|
||||
"Firmware development with C/C++",
|
||||
"Raspberry Pi and Pico-SDK integration",
|
||||
"RTOS implementation"
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: "fas fa-brain",
|
||||
title: "AI & Data Analysis",
|
||||
skills: [
|
||||
"Machine learning with PyTorch",
|
||||
"Data manipulation with Pandas",
|
||||
"Predictive modeling via Scikit-learn",
|
||||
"Computer vision with Scikit-image",
|
||||
"Edge AI deployment"
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: "fas fa-window-maximize",
|
||||
title: "Web Development",
|
||||
skills: [
|
||||
"Web Development",
|
||||
"Backend development with ASP.NET",
|
||||
"Database management with Entity Framework",
|
||||
"Frontend frameworks: Blazor, React",
|
||||
"Responsive design with Bootstrap",
|
||||
"Python-based web solutions with Django"
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: "fas fa-server",
|
||||
title: "DevOps & Infrastructure",
|
||||
skills: [
|
||||
"Containerization with Docker",
|
||||
"Multi-container orchestration via Docker-compose",
|
||||
"Linux server administration",
|
||||
"CI/CD pipeline implementation",
|
||||
"Build system configuration with CMake"
|
||||
]
|
||||
}
|
||||
],
|
||||
professionalJourney: [
|
||||
{
|
||||
title: "intern software engineer at Opeteam S.A.",
|
||||
description:
|
||||
`- Performing programming tasks in R&D projects within the product development department,
|
||||
- Database administration,
|
||||
- Defining unit tests and manual testing of solutions,
|
||||
- Selecting technologies for basic problems,
|
||||
- Documenting the source code (technical documentation).`,
|
||||
duration: "2022.8 - 2023.4",
|
||||
}
|
||||
],
|
||||
testimonials: [
|
||||
|
||||
]
|
||||
};
|
||||
+66
-170
@@ -1,6 +1,41 @@
|
||||
import { PageHeader } from '../components/PageHeader';
|
||||
import { aboutProps } from '../data/experienceData';
|
||||
|
||||
import style from '@styles/About.module.scss';
|
||||
|
||||
export interface AboutProps {
|
||||
coreValues: CoreValue[];
|
||||
technicalArsenal: TechnicalArsenal[];
|
||||
professionalJourney: ProfessionalJourney[];
|
||||
testimonials: Testimonial[];
|
||||
}
|
||||
|
||||
export interface CoreValue {
|
||||
title: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
export interface ProfessionalJourney {
|
||||
title: string;
|
||||
description: string;
|
||||
duration: string;
|
||||
}
|
||||
|
||||
export interface TechnicalArsenal {
|
||||
title: string;
|
||||
icon: string;
|
||||
skills: string[];
|
||||
}
|
||||
|
||||
export interface Testimonial {
|
||||
content: string;
|
||||
author: string;
|
||||
position: string;
|
||||
}
|
||||
|
||||
export const About = () => {
|
||||
const data = aboutProps;
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
@@ -13,7 +48,7 @@ export const About = () => {
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-4">
|
||||
<h2 className="section-title">The Master Behind the Mask</h2>
|
||||
<h2 className={`section-title ${style.sectionTitle}`}>The Master Behind the Mask</h2>
|
||||
<div className="profile-image">
|
||||
<img src="/images/profile.jpg" alt="SecCodeSmith" />
|
||||
</div>
|
||||
@@ -57,49 +92,22 @@ export const About = () => {
|
||||
<div className="container">
|
||||
<div className="row mb-4">
|
||||
<div className="col-12">
|
||||
<h2 className="section-title">Forging Principles</h2>
|
||||
<h2 className={`section-title ${style.sectionTitle}`}>Forging Principles</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row g-4">
|
||||
<div className="col-md-6 col-lg-3">
|
||||
<div className="value-card h-100">
|
||||
<div className="value-icon">
|
||||
<i className="fas fa-shield-alt"></i>
|
||||
<div className={`row g-4 ${style.row}`}>
|
||||
{data.coreValues.map((value, index) => (
|
||||
<div className="col-md-6 col-lg-3" key={index}>
|
||||
<div className={`value-card h-100 ${style.valueCard}`}>
|
||||
<div className={`value-icon ${style.valueIcon}`}>
|
||||
<i className={value.icon}></i>
|
||||
</div>
|
||||
<h3 className="value-title">Security by Design</h3>
|
||||
<p className="value-text">Security is not an afterthought but the very foundation upon which robust systems are built. Every line of code is crafted with defensive principles in mind.</p>
|
||||
<h3 className={`value-title ${style.valueTitle}`}>{value.title}</h3>
|
||||
<p className={`value-text ${style.valueText}`}>{value.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="col-md-6 col-lg-3">
|
||||
<div className="value-card h-100">
|
||||
<div className="value-icon">
|
||||
<i className="fas fa-tachometer-alt"></i>
|
||||
</div>
|
||||
<h3 className="value-title">Performance Optimization</h3>
|
||||
<p className="value-text">Like a finely-honed blade, code should be both effective and efficient. I meticulously optimize every component for maximum speed and minimal resource consumption.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 col-lg-3">
|
||||
<div className="value-card h-100">
|
||||
<div className="value-icon">
|
||||
<i className="fas fa-gem"></i>
|
||||
</div>
|
||||
<h3 className="value-title">Elegant Simplicity</h3>
|
||||
<p className="value-text">True mastery is revealed not in complexity but in elegant simplicity. I strive to create solutions that are accessible, maintainable, and beautifully crafted.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 col-lg-3">
|
||||
<div className="value-card h-100">
|
||||
<div className="value-icon">
|
||||
<i className="fas fa-sync-alt"></i>
|
||||
</div>
|
||||
<h3 className="value-title">Continuous Evolution</h3>
|
||||
<p className="value-text">The digital landscape changes with the seasons. I embrace continuous learning and adaptation, integrating new techniques and technologies to forge ever-better solutions.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -109,151 +117,39 @@ export const About = () => {
|
||||
<div className="container">
|
||||
<div className="row mb-4">
|
||||
<div className="col-12">
|
||||
<h2 className="section-title">Arsenal of Expertise</h2>
|
||||
<h2 className={`section-title ${style.sectionTitle}`}>Arsenal of Expertise</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row g-4">
|
||||
<div className="col-md-6 col-lg-3">
|
||||
<div className="skill-card h-100">
|
||||
{data.technicalArsenal.map((value, index) => (
|
||||
<div className="skill-card h-100" key={index}>
|
||||
<div className="skill-header">
|
||||
<div className="skill-icon">
|
||||
<i className="fas fa-microchip"></i>
|
||||
<i className={value.icon}></i>
|
||||
</div>
|
||||
<h3 className="skill-title">Embedded Systems</h3>
|
||||
<h3 className="skill-title">${value.title}</h3>
|
||||
</div>
|
||||
<ul className="list-unstyled">
|
||||
<li className="mb-2">
|
||||
<i className="fas fa-check skill-check"></i>
|
||||
<span>STM32 microcontroller programming (I2C, SPI, UART)</span>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<i className="fas fa-check skill-check"></i>
|
||||
<span>ESP32 wireless solutions</span>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<i className="fas fa-check skill-check"></i>
|
||||
<span>Firmware development with C/C++</span>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<i className="fas fa-check skill-check"></i>
|
||||
<span>Raspberry Pi and Pico-SDK integration</span>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<i className="fas fa-check skill-check"></i>
|
||||
<span>RTOS implementation</span>
|
||||
{value.skills.map((skillItem, skillIndex) => (
|
||||
<li className="mb-2" key={skillIndex}>
|
||||
<i className={`fas fa-check skill-check `}></i>
|
||||
<span>{skillItem}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="col-md-6 col-lg-3">
|
||||
<div className="skill-card h-100">
|
||||
<div className="skill-header">
|
||||
<div className="skill-icon">
|
||||
<i className="fas fa-brain"></i>
|
||||
</div>
|
||||
<h3 className="skill-title">AI & Data Analysis</h3>
|
||||
</div>
|
||||
<ul className="list-unstyled">
|
||||
<li className="mb-2">
|
||||
<i className="fas fa-check skill-check"></i>
|
||||
<span>Machine learning with PyTorch</span>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<i className="fas fa-check skill-check"></i>
|
||||
<span>Data manipulation with Pandas</span>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<i className="fas fa-check skill-check"></i>
|
||||
<span>Predictive modeling via Scikit-learn</span>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<i className="fas fa-check skill-check"></i>
|
||||
<span>Computer vision with Scikit-image</span>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<i className="fas fa-check skill-check"></i>
|
||||
<span>Edge AI deployment</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section >
|
||||
|
||||
<div className="col-md-6 col-lg-3">
|
||||
<div className="skill-card h-100">
|
||||
<div className="skill-header">
|
||||
<div className="skill-icon">
|
||||
<i className="fas fa-window-maximize"></i>
|
||||
</div>
|
||||
<h3 className="skill-title">Web Development</h3>
|
||||
</div>
|
||||
<ul className="list-unstyled">
|
||||
<li className="mb-2">
|
||||
<i className="fas fa-check skill-check"></i>
|
||||
<span>Backend development with ASP.NET</span>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<i className="fas fa-check skill-check"></i>
|
||||
<span>Database management with Entity Framework</span>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<i className="fas fa-check skill-check"></i>
|
||||
<span>Frontend frameworks: Blazor, React</span>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<i className="fas fa-check skill-check"></i>
|
||||
<span>Responsive design with Bootstrap</span>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<i className="fas fa-check skill-check"></i>
|
||||
<span>Python-based web solutions with Django</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 col-lg-3">
|
||||
<div className="skill-card h-100">
|
||||
<div className="skill-header">
|
||||
<div className="skill-icon">
|
||||
<i className="fas fa-server"></i>
|
||||
</div>
|
||||
<h3 className="skill-title">DevOps & Infrastructure</h3>
|
||||
</div>
|
||||
<ul className="list-unstyled">
|
||||
<li className="mb-2">
|
||||
<i className="fas fa-check skill-check"></i>
|
||||
<span>Containerization with Docker</span>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<i className="fas fa-check skill-check"></i>
|
||||
<span>Multi-container orchestration via Docker-compose</span>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<i className="fas fa-check skill-check"></i>
|
||||
<span>Linux server administration</span>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<i className="fas fa-check skill-check"></i>
|
||||
<span>CI/CD pipeline implementation</span>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<i className="fas fa-check skill-check"></i>
|
||||
<span>Build system configuration with CMake</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Professional Journey Section */}
|
||||
<section className="py-5 bg-dark">
|
||||
{/* Professional Journey Section */ }
|
||||
< section className = "py-5 bg-dark" >
|
||||
<div className="container">
|
||||
<div className="row mb-5">
|
||||
<div className="col-12 text-center">
|
||||
<h2 className="section-title">The Smith's Journey</h2>
|
||||
<h2 className={`section-title ${style.sectionTitle}`}>The Smith's Journey</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
@@ -312,14 +208,14 @@ export const About = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section >
|
||||
|
||||
{/* Testimonials Section */}
|
||||
<section className="py-5">
|
||||
{/* Testimonials Section */ }
|
||||
< section className = "py-5" >
|
||||
<div className="container">
|
||||
<div className="row mb-4">
|
||||
<div className="col-12">
|
||||
<h2 className="section-title">Tales from the Guild</h2>
|
||||
<h2 className={`section-title ${style.sectionTitle}`}>Tales from the Guild</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
@@ -374,7 +270,7 @@ export const About = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section >
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user