seccodesmith/seccodesmith-frontend
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
SecCodeSmith
2025-05-23 18:36:37 +02:00
parent 35c0a17f8a
commit 6ea40432f7
3 changed files with 228 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/styles/About.scss → src/assets/styles/About.module.scss
+2
View File
@@ -1,3 +1,5 @@
@use './variables' as *;
.profile-image { .profile-image {
width: 100%; width: 100%;
aspect-ratio: 1/1; aspect-ratio: 1/1;
src/data/experienceData.ts
+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: [
]
};
src/pages/About.tsx
+59 -163
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> </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,141 +117,29 @@ 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 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> </div>
</section > </section >
@@ -253,7 +149,7 @@ export const About = () => {
<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">
@@ -319,7 +215,7 @@ 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">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">