diff --git a/src/assets/styles/About.scss b/src/assets/styles/About.module.scss
similarity index 63%
rename from src/assets/styles/About.scss
rename to src/assets/styles/About.module.scss
index 16eaf90..503869d 100644
--- a/src/assets/styles/About.scss
+++ b/src/assets/styles/About.module.scss
@@ -1,4 +1,26 @@
-.profile-image {
+@use './variables' as *;
+
+/* Section styling */
+.sectionTitle {
+ font-size: 2.25rem;
+ margin-bottom: 1.5rem;
+ position: relative;
+ padding-bottom: 1rem;
+ display: inline-block;
+}
+
+.sectionTitle::after {
+ content: "";
+ position: absolute;
+ width: 50px;
+ height: 3px;
+ background: $accent-fire;
+ bottom: 0;
+ left: 0;
+ box-shadow: $glow-effect;
+}
+
+.profileImage {
width: 100%;
aspect-ratio: 1/1;
border-radius: 8px;
@@ -8,7 +30,7 @@
position: relative;
}
-.profile-image::before {
+.profileImage::before {
content: "";
position: absolute;
top: 0;
@@ -19,33 +41,33 @@
z-index: 1;
}
-.profile-image img {
+.profileImage img {
width: 100%;
height: 100%;
object-fit: cover;
filter: contrast(1.1) brightness(0.9);
}
-.intro-text {
+.introText {
font-size: 1.1rem;
line-height: 1.8;
- color: var(--text-ash);
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ color: $text-ash;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}
-.intro-text p {
+.introText p {
margin-bottom: 1.25rem;
}
-.intro-text strong {
- color: var(--text-light);
+.introText strong {
+ color: $text-light;
}
-.intro-text .accent {
- color: var(--accent-fire);
+.introText .accent {
+ color: $accent-fire;
}
-.connect-link {
+.connectLink {
display: inline-flex;
align-items: center;
gap: 8px;
@@ -53,30 +75,30 @@
background-color: rgba(255, 255, 255, 0.05);
border-radius: 4px;
text-decoration: none;
- color: var(--text-light);
+ color: $text-light;
transition: all 0.3s ease;
- border: 1px solid var(--card-border);
+ border: 1px solid $card-border;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
-.connect-link:hover {
+.connectLink:hover {
background-color: rgba(255, 100, 0, 0.1);
transform: translateY(-3px);
- border-color: var(--accent-fire);
- color: var(--text-light);
+ border-color: $accent-fire;
+ color: $text-light;
}
-.connect-icon {
- color: var(--accent-fire);
+.connectIcon {
+ color: $accent-fire;
}
/* Value cards */
-.value-card {
- background-color: var(--card-bg);
+.valueCard {
+ background-color: $card-bg;
border-radius: 8px;
padding: 1.875rem;
- border: 1px solid var(--card-border);
+ border: 1px solid $card-border;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
@@ -84,72 +106,72 @@
height: 100%;
}
-.value-card:hover {
+.valueCard:hover {
transform: translateY(-5px);
border-color: rgba(255, 100, 0, 0.3);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
-.value-icon {
+.valueIcon {
font-size: 2.5rem;
- color: var(--accent-fire);
+ color: $accent-fire;
margin-bottom: 1.25rem;
}
-.value-title {
+.valueTitle {
font-size: 1.3rem;
margin-bottom: 1rem;
position: relative;
display: inline-block;
- color: var(--text-light);
+ color: $text-light;
}
-.value-title::after {
+.valueTitle::after {
content: "";
position: absolute;
width: 40px;
height: 2px;
- background: var(--accent-fire);
+ background: $accent-fire;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
}
-.value-text {
- color: var(--text-ash);
+.valueText {
+ color: $text-ash;
line-height: 1.6;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* Skills card */
-.skill-card {
- background-color: var(--card-bg);
+.skillCard {
+ background-color: $card-bg;
border-radius: 8px;
padding: 1.875rem;
- border: 1px solid var(--card-border);
+ border: 1px solid $card-border;
transition: all 0.3s ease;
position: relative;
height: 100%;
}
-.skill-card:hover {
+.skillCard:hover {
transform: translateY(-10px);
border-color: rgba(255, 100, 0, 0.3);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
-.skill-card::before {
+.skillCard::before {
content: "";
position: absolute;
width: 100%;
height: 5px;
top: 0;
left: 0;
- background: linear-gradient(to right, var(--accent-dragon), var(--accent-fire));
+ background: linear-gradient(to right, $accent-dragon, $accent-fire);
border-radius: 8px 8px 0 0;
}
-.skill-header {
+.skillHeader {
display: flex;
align-items: center;
gap: 15px;
@@ -158,19 +180,19 @@
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
-.skill-icon {
+.skillIcon {
font-size: 2rem;
- color: var(--accent-fire);
+ color: $accent-fire;
}
-.skill-title {
+.skillTitle {
font-size: 1.3rem;
margin-bottom: 0;
- color: var(--text-light);
+ color: $text-light;
}
-.skill-check {
- color: var(--accent-fire);
+.skillCheck {
+ color: $accent-fire;
margin-right: 0.625rem;
}
@@ -187,48 +209,48 @@
position: absolute;
width: 3px;
height: 100%;
- background: linear-gradient(to bottom, var(--accent-fire), var(--accent-dragon), rgba(255, 100, 0, 0.2));
+ background: linear-gradient(to bottom, $accent-fire, $accent-dragon, rgba(255, 100, 0, 0.2));
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
-.timeline-item {
+.timelineItem {
position: relative;
margin-bottom: 3rem;
width: 100%;
}
-.timeline-item:nth-child(odd) .timeline-content {
+.timelineItem:nth-child(odd) .timelineContent {
margin-left: auto;
padding-left: 3rem;
border-radius: 8px;
}
-.timeline-item:nth-child(even) .timeline-content {
+.timelineItem:nth-child(even) .timelineContent {
margin-right: auto;
padding-right: 3rem;
border-radius: 8px;
}
-.timeline-dot {
+.timelineDot {
width: 16px;
height: 16px;
- background-color: var(--accent-fire);
+ background-color: $accent-fire;
border-radius: 50%;
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
- box-shadow: var(--glow-effect);
+ box-shadow: $glow-effect;
z-index: 2;
}
-.timeline-date {
+.timelineDate {
display: inline-block;
font-size: 0.9rem;
background-color: rgba(255, 100, 0, 0.1);
- color: var(--accent-fire);
+ color: $accent-fire;
padding: 5px 10px;
border-radius: 4px;
margin-bottom: 1rem;
@@ -236,29 +258,29 @@
letter-spacing: 1px;
}
-.timeline-title {
+.timelineTitle {
font-size: 1.3rem;
margin-bottom: 0.625rem;
- color: var(--text-light);
+ color: $text-light;
}
-.timeline-text {
- color: var(--text-ash);
+.timelineText {
+ color: $text-ash;
line-height: 1.6;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
-.timeline-content {
- background-color: var(--card-bg);
+.timelineContent {
+ background-color: $card-bg;
border-radius: 8px;
padding: 1.5rem;
- border: 1px solid var(--card-border);
+ border: 1px solid $card-border;
position: relative;
transition: all 0.3s ease;
width: 45%;
}
-.timeline-content:hover {
+.timelineContent:hover {
transform: translateY(-5px);
border-color: rgba(255, 100, 0, 0.3);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
@@ -266,11 +288,11 @@
/* Testimonials */
.testimonial {
- background-color: var(--card-bg);
+ background-color: $card-bg;
border-radius: 8px;
padding: 1.875rem;
margin-bottom: 1.875rem;
- border: 1px solid var(--card-border);
+ border: 1px solid $card-border;
transition: all 0.3s ease;
position: relative;
}
@@ -281,44 +303,44 @@
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
-.testimonial-content {
+.testimonialContent {
padding-left: 1.25rem;
- border-left: 3px solid var(--accent-fire);
+ border-left: 3px solid $accent-fire;
font-style: italic;
- color: var(--text-ash);
+ color: $text-ash;
margin-bottom: 1.25rem;
line-height: 1.7;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
-.author-avatar {
+.authorAvatar {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
}
-.author-avatar img {
+.authorAvatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
-.author-name {
+.authorName {
font-weight: 600;
font-size: 1.1rem;
- color: var(--text-light);
+ color: $text-light;
margin-bottom: 0;
}
-.author-title {
- color: var(--text-ash);
+.authorTitle {
+ color: $text-ash;
font-size: 0.9rem;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* Blog post specific styles */
-.post-container {
+.postContainer {
max-width: 1200px;
margin: 0 auto;
padding: 120px 20px 60px;
@@ -327,19 +349,19 @@
gap: 40px;
}
-.post-main {
- background-color: var(--card-bg);
+.postMain {
+ background-color: $card-bg;
border-radius: 8px;
overflow: hidden;
- border: 1px solid var(--card-border);
+ border: 1px solid $card-border;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
-.post-header {
+.postHeader {
position: relative;
}
-.post-featured-image {
+.postFeaturedImage {
height: 400px;
background-position: center;
background-size: cover;
@@ -347,44 +369,44 @@
position: relative;
}
-.post-featured-image::after {
+.postFeaturedImage::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
- background: linear-gradient(to top, var(--card-bg), transparent);
+ background: linear-gradient(to top, $card-bg, transparent);
}
-.post-info {
+.postInfo {
padding: 30px 40px;
}
-.post-content {
+.postContent {
padding: 0 40px 40px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.8;
color: #e0e0e0;
}
-.share-section {
+.shareSection {
margin-top: 40px;
padding-top: 20px;
- border-top: 1px solid var(--card-border);
+ border-top: 1px solid $card-border;
}
-.share-title {
+.shareTitle {
font-size: 1.2rem;
margin-bottom: 15px;
}
-.share-buttons {
+.shareButtons {
display: flex;
gap: 15px;
}
-.share-button {
+.shareButton {
width: 40px;
height: 40px;
border-radius: 50%;
@@ -392,17 +414,17 @@
display: flex;
align-items: center;
justify-content: center;
- color: var(--text-ash);
+ color: $text-ash;
transition: all 0.3s ease;
}
-.share-button:hover {
- background-color: var(--accent-fire);
- color: var(--text-light);
+.shareButton:hover {
+ background-color: $accent-fire;
+ color: $text-light;
transform: translateY(-3px);
}
-.author-section {
+.authorSection {
margin-top: 40px;
padding: 30px;
background-color: rgba(255, 255, 255, 0.02);
@@ -412,17 +434,17 @@
align-items: center;
}
-.toc-list {
+.tocList {
list-style: none;
}
-.toc-item {
+.tocItem {
margin-bottom: 12px;
padding-left: 15px;
position: relative;
}
-.toc-item::before {
+.tocItem::before {
content: "";
position: absolute;
left: 0;
@@ -430,11 +452,11 @@
width: 5px;
height: 5px;
border-radius: 50%;
- background-color: var(--accent-fire);
+ background-color: $accent-fire;
}
-.toc-link {
- color: var(--text-ash);
+.tocLink {
+ color: $text-ash;
text-decoration: none;
transition: all 0.3s ease;
font-size: 0.9rem;
@@ -442,46 +464,46 @@
display: block;
}
-.toc-link:hover {
- color: var(--accent-fire);
+.tocLink:hover {
+ color: $accent-fire;
transform: translateX(5px);
}
-.toc-subitem {
+.tocSubitem {
margin-top: 8px;
padding-left: 15px;
}
-.related-posts-list {
+.relatedPostsList {
list-style: none;
}
-.related-post-item {
+.relatedPostItem {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
-.related-post-item:last-child {
+.relatedPostItem:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
-.related-post-link {
+.relatedPostLink {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
- color: var(--text-ash);
+ color: $text-ash;
transition: color 0.3s ease;
}
-.related-post-link:hover {
- color: var(--accent-fire);
+.relatedPostLink:hover {
+ color: $accent-fire;
}
-.related-post-thumb {
+.relatedPostThumb {
width: 60px;
height: 60px;
border-radius: 4px;
@@ -490,30 +512,30 @@
flex-shrink: 0;
}
-.related-post-info {
+.relatedPostInfo {
flex-grow: 1;
}
-.related-post-title {
+.relatedPostTitle {
font-size: 0.9rem;
line-height: 1.4;
margin-bottom: 5px;
}
-.related-post-date {
+.relatedPostDate {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.5);
}
/* Social grid for contact page */
-.social-grid {
+.socialGrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 15px;
margin-top: 1.5rem;
}
-.social-item {
+.socialItem {
display: flex;
flex-direction: column;
align-items: center;
@@ -526,18 +548,71 @@
text-decoration: none;
}
-.social-item:hover {
+.socialItem:hover {
background-color: rgba(255, 100, 0, 0.1);
transform: translateY(-5px);
}
-.social-icon-lg {
+.socialIconLg {
font-size: 1.8rem;
- color: var(--accent-fire);
+ color: $accent-fire;
}
-.social-name {
- color: var(--text-ash);
+.socialName {
+ color: $text-ash;
font-size: 0.9rem;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+@media (max-width: 992px) {
+ .pageTitle {
+ font-size: 2.5rem;
+ }
+
+ .timeline:before {
+ left: 2rem;
+ }
+
+ .timelineItem:nth-child(odd) .timeline-content,
+ .timelineItem:nth-child(even) .timeline-content {
+ width: calc(100% - 3rem);
+ margin-left: 3rem;
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+ }
+
+ .timelineDot {
+ left: 2rem;
+ }
+}
+
+@media (max-width: 768px) {
+ .pageTitle {
+ font-size: 2rem;
+ }
+
+ .introText {
+ margin-top: 2rem;
+ }
+}
+
+@media (max-width: 576px) {
+ .pageTitle {
+ font-size: 1.8rem;
+ }
+
+ .sectionTitle {
+ font-size: 1.8rem;
+ }
+
+ .testimonialAuthor {
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ }
+
+ .authorInfo {
+ margin-top: 1rem;
+ text-align: center;
+ }
}
\ No newline at end of file
diff --git a/src/data/experienceData.ts b/src/data/experienceData.ts
new file mode 100644
index 0000000..11fb212
--- /dev/null
+++ b/src/data/experienceData.ts
@@ -0,0 +1,98 @@
+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: "Student at RzeszĂłw University of Technology",
+ description: "Specialization: Computer Science",
+ duration: "2021.10 - 2025.6",
+ },
+ {
+ 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: [
+
+ ]
+};
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index 94c6c99..764c841 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -1,10 +1,45 @@
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 (
<>
-
Greetings, seeker of digital arcana. I am SecCodeSmith, a master craftsman of code and conductor of silicon. For over a decade, I have been forging robust solutions across the realms of embedded systems, machine learning, and web development.
- -My journey began in the depths of low-level programming, where I learned to bend hardware to my will through carefully crafted instructions. From the arcane energies of microcontrollers to the vast landscapes of cloud architecture, I have honed my skills to create solutions that stand the test of time.
- -What distinguishes my work is the meticulous attention to security and performance. Like a blacksmith who understands that a sword's true value lies not just in its edge but in the integrity of its steel, I craft code that is not merely functional but resilient against the chaotic forces of the digital wilderness.
- -Beyond the technical realms, I am a devoted practitioner of open-source sorcery, contributing to projects that empower others to create and innovate. When not at the forge, I can be found exploring the ancient texts of computer science, delving into new programming languages, or mentoring apprentices on their own journey.
- +Greetings, seeker of digital arcana. I am SecCodeSmith, a master craftsman of code and conductor of silicon. For over a decade, I have been forging robust solutions across the realms of embedded systems, machine learning, and web development.
+ +My journey began in the depths of low-level programming, where I learned to bend hardware to my will through carefully crafted instructions. From the arcane energies of microcontrollers to the vast landscapes of cloud architecture, I have honed my skills to create solutions that stand the test of time.
+ +What distinguishes my work is the meticulous attention to security and performance. Like a blacksmith who understands that a sword's true value lies not just in its edge but in the integrity of its steel, I craft code that is not merely functional but resilient against the chaotic forces of the digital wilderness.
+ +Beyond the technical realms, I am a devoted practitioner of open-source sorcery, contributing to projects that empower others to create and innovate. When not at the forge, I can be found exploring the ancient texts of computer science, delving into new programming languages, or mentoring apprentices on their own journey.
+ @@ -51,330 +86,124 @@ export const About = () => {{value.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.
Like a finely-honed blade, code should be both effective and efficient. I meticulously optimize every component for maximum speed and minimal resource consumption.
-True mastery is revealed not in complexity but in elegant simplicity. I strive to create solutions that are accessible, maintainable, and beautifully crafted.
-The digital landscape changes with the seasons. I embrace continuous learning and adaptation, integrating new techniques and technologies to forge ever-better solutions.
-Architecting secure IoT solutions for critical infrastructure, combining embedded firmware expertise with cloud integration. Leading a team of 8 engineers across hardware and software disciplines.
-Developed firmware for next-generation industrial control systems. Implemented machine learning capabilities on resource-constrained devices, reducing predictive maintenance false positives by 87%.
-Created web applications and APIs for data visualization and analysis. Specialized in integrating hardware systems with web interfaces, enabling real-time monitoring of distributed sensor networks.
-Designed and implemented firmware for medical devices, focusing on reliability and safety-critical operations. Reduced power consumption by 35% while improving processing performance.
-Began the journey into the digital forge, working on embedded C programming for consumer electronics. Learned the fundamentals of hardware-software integration and real-time systems.
-{journey.description}
+
+
+
-
-