feat: Initialize backend with Express and MySQL, and restructure frontend with new routing and language support.

2025-12-15 17:03:03 +01:00
parent 56897a0c2d
commit 6c11cf5213
54 changed files with 2000 additions and 174 deletions
--- a/frontend/src/components/About.tsx
+++ b/frontend/src/components/About.tsx
@@ -0,0 +1,136 @@
+import { motion } from 'framer-motion';
+import { User, Heart, Target, Coffee } from 'lucide-react';
+import { useLanguage } from '../contexts/LanguageContext';
+
+const About = () => {
+  const { t } = useLanguage();
+  
+  const stats = [
+    { icon: <User size={24} />, value: t('about.stats.year'), label: t('about.stats.yearLabel') },
+    { icon: <Heart size={24} />, value: t('about.stats.passion'), label: t('about.stats.passionLabel') },
+    { icon: <Target size={24} />, value: t('about.stats.goals'), label: t('about.stats.goalsLabel') },
+    { icon: <Coffee size={24} />, value: t('about.stats.fuel'), label: t('about.stats.fuelLabel') }
+  ];
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+        delayChildren: 0.3
+      }
+    }
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 50 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.6,
+        ease: [0.25, 0.1, 0.25, 1] as const
+      }
+    }
+  };
+
+  return (
+    <section id="about" className="about">
+      <div className="container">
+        <motion.div
+          key="about-header"
+          className="section-header"
+          initial={{ opacity: 0, y: 50 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          viewport={{ once: true }}
+        >
+          <h2 className="section-title">{t('about.title')}</h2>
+          <p className="section-subtitle">
+            {t('about.subtitle')}
+          </p>
+        </motion.div>
+
+        <div className="about-content">
+          <motion.div
+            key="about-text"
+            className="about-text"
+            variants={containerVariants}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true }}
+          >
+            <motion.div className="about-card" variants={itemVariants}>
+              <h3>{t('about.journey.title')}</h3>
+              <p>
+                {t('about.journey.content')}
+              </p>
+            </motion.div>
+
+            <motion.div className="about-card" variants={itemVariants}>
+              <h3>{t('about.passion.title')}</h3>
+              <p>
+                {t('about.passion.content')}
+              </p>
+            </motion.div>
+
+            <motion.div className="about-card" variants={itemVariants}>
+              <h3>{t('about.goals.title')}</h3>
+              <p>
+                {t('about.goals.content')}
+              </p>
+            </motion.div>
+          </motion.div>
+
+          <motion.div
+            key="about-stats"
+            className="about-stats"
+            variants={containerVariants}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true }}
+          >
+            {stats.map((stat, index) => (
+              <motion.div
+                key={`stat-${index}`}
+                className="stat-card"
+                variants={itemVariants}
+                whileHover={{
+                  scale: 1.05,
+                  y: -5,
+                  transition: { duration: 0.3 }
+                }}
+              >
+                <div className="stat-icon">
+                  {stat.icon}
+                </div>
+                <div className="stat-value">{stat.value}</div>
+                <div className="stat-label">{stat.label}</div>
+              </motion.div>
+            ))}
+          </motion.div>
+        </div>
+
+        <motion.div
+          key="about-highlight"
+          className="about-highlight"
+          initial={{ opacity: 0, scale: 0.9 }}
+          whileInView={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.8, delay: 0.5 }}
+          viewport={{ once: true }}
+        >
+          <div className="highlight-content">
+            <h3>{t('about.quote.title')}</h3>
+            <p>
+              "{t('about.quote.content')}"
+            </p>
+            <cite>- {t('about.quote.author')}</cite>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default About;