feat: add About section with core values, technical skills, and testimonials

This commit is contained in:
2025-05-23 18:36:37 +02:00
parent 35c0a17f8a
commit 6ea40432f7
3 changed files with 228 additions and 238 deletions
@@ -1,3 +1,5 @@
@use './variables' as *;
.profile-image { .profile-image {
width: 100%; width: 100%;
aspect-ratio: 1/1; aspect-ratio: 1/1;
+92
View File
@@ -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: [
]
};
+117 -221
View File
@@ -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>
<h3 className={`value-title ${style.valueTitle}`}>{value.title}</h3>
<p className={`value-text ${style.valueText}`}>{value.description}</p>
</div> </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>
</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"> </li>
<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>
</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 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> </div>
</section> </div>
</section >
{/* Professional Journey Section */} {/* Professional Journey Section */ }
<section className="py-5 bg-dark"> < 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,69 +208,69 @@ 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 className="row">
<div className="col-lg-8 mx-auto">
{/* Testimonial 1 */}
<div className="testimonial">
<div className="testimonial-content">
"Working with SecCodeSmith transformed our approach to IoT security. Their expertise in both embedded systems and network security allowed us to create a solution that our clients trust implicitly. The attention to detail and foresight regarding potential vulnerabilities saved us from what could have been catastrophic security incidents."
</div>
<div className="d-flex align-items-center gap-3 testimonial-author">
<div className="author-avatar">
<img src="/images/testimonials/alexandra.jpg" alt="Alexandra Foster" />
</div>
<div className="author-info">
<h4 className="author-name">Alexandra Foster</h4>
<div className="author-title">CTO, ConnectedWorld Technologies</div>
</div>
</div> </div>
</div> </div>
<div className="row">
<div className="col-lg-8 mx-auto">
{/* Testimonial 1 */}
<div className="testimonial">
<div className="testimonial-content">
"Working with SecCodeSmith transformed our approach to IoT security. Their expertise in both embedded systems and network security allowed us to create a solution that our clients trust implicitly. The attention to detail and foresight regarding potential vulnerabilities saved us from what could have been catastrophic security incidents."
</div>
<div className="d-flex align-items-center gap-3 testimonial-author">
<div className="author-avatar">
<img src="/images/testimonials/alexandra.jpg" alt="Alexandra Foster" />
</div>
<div className="author-info">
<h4 className="author-name">Alexandra Foster</h4>
<div className="author-title">CTO, ConnectedWorld Technologies</div>
</div>
</div>
</div>
{/* Testimonial 2 */} {/* Testimonial 2 */}
<div className="testimonial"> <div className="testimonial">
<div className="testimonial-content"> <div className="testimonial-content">
"The custom firmware developed by SecCodeSmith for our industrial controllers exceeded all expectations. Not only was the code incredibly efficient, but the documentation was meticulous—something rare in our industry. Three years later, we're still building upon that solid foundation with minimal issues." "The custom firmware developed by SecCodeSmith for our industrial controllers exceeded all expectations. Not only was the code incredibly efficient, but the documentation was meticulous—something rare in our industry. Three years later, we're still building upon that solid foundation with minimal issues."
</div> </div>
<div className="d-flex align-items-center gap-3 testimonial-author"> <div className="d-flex align-items-center gap-3 testimonial-author">
<div className="author-avatar"> <div className="author-avatar">
<img src="/images/testimonials/marcus.jpg" alt="Marcus Chen" /> <img src="/images/testimonials/marcus.jpg" alt="Marcus Chen" />
</div>
<div className="author-info">
<h4 className="author-name">Marcus Chen</h4>
<div className="author-title">Lead Engineer, Precision Automation Inc.</div>
</div>
</div>
</div> </div>
<div className="author-info">
<h4 className="author-name">Marcus Chen</h4>
<div className="author-title">Lead Engineer, Precision Automation Inc.</div>
</div>
</div>
</div>
{/* Testimonial 3 */} {/* Testimonial 3 */}
<div className="testimonial"> <div className="testimonial">
<div className="testimonial-content"> <div className="testimonial-content">
"I've collaborated with numerous developers over my 20-year career, but SecCodeSmith stands apart for their ability to bridge the gap between theoretical concepts and practical implementation. Their machine learning models for anomaly detection operate efficiently even on our limited hardware, which competitors claimed was impossible." "I've collaborated with numerous developers over my 20-year career, but SecCodeSmith stands apart for their ability to bridge the gap between theoretical concepts and practical implementation. Their machine learning models for anomaly detection operate efficiently even on our limited hardware, which competitors claimed was impossible."
</div> </div>
<div className="d-flex align-items-center gap-3 testimonial-author"> <div className="d-flex align-items-center gap-3 testimonial-author">
<div className="author-avatar"> <div className="author-avatar">
<img src="/images/testimonials/sophia.jpg" alt="Sophia Rodriguez" /> <img src="/images/testimonials/sophia.jpg" alt="Sophia Rodriguez" />
</div> </div>
<div className="author-info"> <div className="author-info">
<h4 className="author-name">Sophia Rodriguez</h4> <h4 className="author-name">Sophia Rodriguez</h4>
<div className="author-title">Research Director, Advanced Sensing Lab</div> <div className="author-title">Research Director, Advanced Sensing Lab</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </div>
</div>
</section >
</> </>
); );
}; };