Fixing-about #7
@@ -1,5 +1,25 @@
|
||||
@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;
|
||||
@@ -31,8 +51,8 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
.introText p {
|
||||
@@ -47,7 +67,7 @@
|
||||
color: $accent-fire;
|
||||
}
|
||||
|
||||
.connect-link {
|
||||
.connectLink {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
@@ -543,3 +563,56 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
+28
-26
@@ -48,36 +48,36 @@ export const About = () => {
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-4">
|
||||
<h2 className={`section-title ${style.sectionTitle}`}>The Master Behind the Mask</h2>
|
||||
<div className="profile-image">
|
||||
<h2 className={`${style.sectionTitle}`}>The Master Behind the Mask</h2>
|
||||
<div className={style.profileImage}>
|
||||
<img src="/images/profile.jpg" alt="SecCodeSmith" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-8">
|
||||
<div className="intro-text">
|
||||
<p>Greetings, seeker of digital arcana. I am <strong>SecCodeSmith</strong>, 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.</p>
|
||||
<div className={style.introText}>
|
||||
<p className={style.introText}>Greetings, seeker of digital arcana. I am <strong>SecCodeSmith</strong>, 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.</p>
|
||||
|
||||
<p>My journey began in the depths of <span className="accent">low-level programming</span>, 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.</p>
|
||||
<p className={style.introText}>My journey began in the depths of <span className={style.accent}>low-level programming</span>, 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.</p>
|
||||
|
||||
<p>What distinguishes my work is the <strong>meticulous attention to security</strong> 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.</p>
|
||||
<p className={style.introText}>What distinguishes my work is the <strong>meticulous attention to security</strong> 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.</p>
|
||||
|
||||
<p>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.</p>
|
||||
<p className={style.introText}>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.</p>
|
||||
|
||||
<div className="mt-4">
|
||||
<a href="#" className="connect-link">
|
||||
<i className="fab fa-github connect-icon"></i>
|
||||
<a href="#" className={style.connectLink}>
|
||||
<i className={`fab fa-github ${style.connectIcon}`}></i>
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
<a href="#" className="connect-link">
|
||||
<i className="fab fa-linkedin connect-icon"></i>
|
||||
<a href="#" className={style.connectLink}>
|
||||
<i className={`fab fa-linkedin ${style.connectIcon}`}></i>
|
||||
<span>LinkedIn</span>
|
||||
</a>
|
||||
<a href="#" className="connect-link">
|
||||
<i className="fab fa-twitter connect-icon"></i>
|
||||
<a href="#" className={style.connectLink}>
|
||||
<i className={`fab fa-twitter ${style.connectIcon}`}></i>
|
||||
<span>Twitter</span>
|
||||
</a>
|
||||
<a href="#" className="connect-link">
|
||||
<i className="fas fa-envelope connect-icon"></i>
|
||||
<a href="#" className={style.connectLink}>
|
||||
<i className={`fas fa-envelope ${style.connectIcon}`}></i>
|
||||
<span>Email</span>
|
||||
</a>
|
||||
</div>
|
||||
@@ -92,18 +92,18 @@ export const About = () => {
|
||||
<div className="container">
|
||||
<div className="row mb-4">
|
||||
<div className="col-12">
|
||||
<h2 className={`section-title ${style.sectionTitle}`}>Forging Principles</h2>
|
||||
<h2 className={` ${style.sectionTitle}`}>Forging Principles</h2>
|
||||
</div>
|
||||
</div>
|
||||
<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}`}>
|
||||
<div className={` h-100 ${style.valueCard}`}>
|
||||
<div className={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>
|
||||
<h3 className={`${style.valueTitle}`}>{value.title}</h3>
|
||||
<p className={`${style.valueText}`}>{value.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -117,27 +117,29 @@ export const About = () => {
|
||||
<div className="container">
|
||||
<div className="row mb-4">
|
||||
<div className="col-12">
|
||||
<h2 className={`section-title ${style.sectionTitle}`}>Arsenal of Expertise</h2>
|
||||
<h2 className={`${style.sectionTitle}`}>Arsenal of Expertise</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row g-4">
|
||||
{data.technicalArsenal.map((value, index) => (
|
||||
<div className="skill-card h-100" key={index}>
|
||||
<div className="skill-header">
|
||||
<div className="skill-icon">
|
||||
<div className="col-md-6 col-lg-3" key={index}>
|
||||
<div className={`h-100 ${style.skillCard}`} key={index}>
|
||||
<div className={`${style.skillHeader}`}>
|
||||
<div className={`skill-icon ${style.skillIcon}`}>
|
||||
<i className={value.icon}></i>
|
||||
</div>
|
||||
<h3 className="skill-title">${value.title}</h3>
|
||||
<h3 className={`skill-title ${style.skillTitle}`}>{value.title}</h3>
|
||||
</div>
|
||||
<ul className="list-unstyled">
|
||||
{value.skills.map((skillItem, skillIndex) => (
|
||||
<li className="mb-2" key={skillIndex}>
|
||||
<i className={`fas fa-check skill-check `}></i>
|
||||
<i className={`fas fa-check skill-check ${style.skillCheck}`}></i>
|
||||
<span>{skillItem}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user