Fixing-about #7
@@ -1,3 +1,5 @@
|
|||||||
|
@use './variables' as *;
|
||||||
|
|
||||||
.profile-image {
|
.profile-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
aspect-ratio: 1/1;
|
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 { 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 = () => {
|
export const About = () => {
|
||||||
|
const data = aboutProps;
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<PageHeader
|
<PageHeader
|
||||||
@@ -13,7 +48,7 @@ export const About = () => {
|
|||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-lg-4">
|
<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">
|
<div className="profile-image">
|
||||||
<img src="/images/profile.jpg" alt="SecCodeSmith" />
|
<img src="/images/profile.jpg" alt="SecCodeSmith" />
|
||||||
</div>
|
</div>
|
||||||
@@ -57,49 +92,22 @@ export const About = () => {
|
|||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="row mb-4">
|
<div className="row mb-4">
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
<h2 className="section-title">Forging Principles</h2>
|
<h2 className={`section-title ${style.sectionTitle}`}>Forging Principles</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="row g-4">
|
<div className={`row g-4 ${style.row}`}>
|
||||||
<div className="col-md-6 col-lg-3">
|
{data.coreValues.map((value, index) => (
|
||||||
<div className="value-card h-100">
|
<div className="col-md-6 col-lg-3" key={index}>
|
||||||
<div className="value-icon">
|
<div className={`value-card h-100 ${style.valueCard}`}>
|
||||||
<i className="fas fa-shield-alt"></i>
|
<div className={`value-icon ${style.valueIcon}`}>
|
||||||
|
<i className={value.icon}></i>
|
||||||
</div>
|
</div>
|
||||||
<h3 className="value-title">Security by Design</h3>
|
<h3 className={`value-title ${style.valueTitle}`}>{value.title}</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>
|
<p className={`value-text ${style.valueText}`}>{value.description}</p>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -109,151 +117,39 @@ export const About = () => {
|
|||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="row mb-4">
|
<div className="row mb-4">
|
||||||
<div className="col-12">
|
<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>
|
</div>
|
||||||
<div className="row g-4">
|
<div className="row g-4">
|
||||||
<div className="col-md-6 col-lg-3">
|
{data.technicalArsenal.map((value, index) => (
|
||||||
<div className="skill-card h-100">
|
<div className="skill-card h-100" key={index}>
|
||||||
<div className="skill-header">
|
<div className="skill-header">
|
||||||
<div className="skill-icon">
|
<div className="skill-icon">
|
||||||
<i className="fas fa-microchip"></i>
|
<i className={value.icon}></i>
|
||||||
</div>
|
</div>
|
||||||
<h3 className="skill-title">Embedded Systems</h3>
|
<h3 className="skill-title">${value.title}</h3>
|
||||||
</div>
|
</div>
|
||||||
<ul className="list-unstyled">
|
<ul className="list-unstyled">
|
||||||
<li className="mb-2">
|
{value.skills.map((skillItem, skillIndex) => (
|
||||||
<i className="fas fa-check skill-check"></i>
|
<li className="mb-2" key={skillIndex}>
|
||||||
<span>STM32 microcontroller programming (I2C, SPI, UART)</span>
|
<i className={`fas fa-check skill-check `}></i>
|
||||||
</li>
|
<span>{skillItem}</span>
|
||||||
<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>
|
|
||||||
</li>
|
</li>
|
||||||
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
</section >
|
||||||
|
|
||||||
<div className="col-md-6 col-lg-3">
|
{/* Professional Journey Section */ }
|
||||||
<div className="skill-card h-100">
|
< section className = "py-5 bg-dark" >
|
||||||
<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">
|
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="row mb-5">
|
<div className="row mb-5">
|
||||||
<div className="col-12 text-center">
|
<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>
|
</div>
|
||||||
<div className="row">
|
<div className="row">
|
||||||
@@ -312,14 +208,14 @@ export const About = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section >
|
||||||
|
|
||||||
{/* Testimonials Section */}
|
{/* Testimonials Section */ }
|
||||||
<section className="py-5">
|
< section className = "py-5" >
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="row mb-4">
|
<div className="row mb-4">
|
||||||
<div className="col-12">
|
<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>
|
</div>
|
||||||
<div className="row">
|
<div className="row">
|
||||||
@@ -374,7 +270,7 @@ export const About = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section >
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
Reference in New Issue
Block a user