diff --git a/src/components/sections/AboutSection.tsx b/src/components/sections/AboutSection.tsx
index 476b587..f62c6b3 100644
--- a/src/components/sections/AboutSection.tsx
+++ b/src/components/sections/AboutSection.tsx
@@ -4,6 +4,11 @@ import FeatureCardsGrid from '../FeatureCardsGrid';
 import type { Service } from '../../data/Service';
 import saschaImage from '../../assets/sascha.png';
 
+// Define feature card icon and color mappings as constants
+const FEATURE_CARD_ICONS = [Code, Palette, ShieldCheck, Eye] as const;
+const FEATURE_CARD_COLORS = ['primary', 'secondary', 'tertiary', 'quaternary'] as const;
+type FeatureCardColor = typeof FEATURE_CARD_COLORS[number];
+
 interface AboutSectionProps {
   name?: string;
   title?: string;
@@ -28,10 +33,10 @@ export default function AboutSection(props: AboutSectionProps = {}) {
     bio = texts.bio,
     profileImage = saschaImage,
     featureCards = texts.featureCards.map((card, index) => ({
-      icon: [Code, Palette, ShieldCheck, Eye][index] || Code,
+      icon: FEATURE_CARD_ICONS[index] || Code,
       title: card.title,
       description: card.description,
-      colorClass: (["primary", "secondary", "tertiary", "quaternary"][index] || "primary") as "primary" | "secondary" | "tertiary" | "quaternary"
+      colorClass: (FEATURE_CARD_COLORS[index])
     }))
   } = props;
 
@@ -58,7 +63,7 @@ export default function AboutSection(props: AboutSectionProps = {}) {
         </div>
 
         {/* Personal Photo and Bio */}
-        <main className="about-section__content" role="main">
+        <main className="about-section__content">
           <div className="about-section__image-wrapper">
             <img
               src={profileImage}
@@ -75,8 +80,8 @@ export default function AboutSection(props: AboutSectionProps = {}) {
                 {greeting ?? `Hi, I'm ${name}!`}
               </h3>
               <div className="about-section__bio-text">
-                {bio.map((paragraph) => (
-                  <p key={paragraph.substring(0, 50)}>{paragraph}</p>
+                {bio.map((paragraph, index) => (
+                  <p key={index}>{paragraph}</p>
                 ))}
               </div>
             </div>