fix(ExperienceView, ExperienceCard): vertical flow.

Author: Maxim Shelepov

src/components/ExperienceCard.vue

@@ -2,9 +2,15 @@
     <div class="flex flex-col flex-1 rounded-md bg-white shadow-md hover:shadow-lg hover:-translate-y-1 motion-reduce:hover:translate-y-0 motion-reduce:hover:shadow-md dark:bg-slate-800 text-left p-4 transition-all duration-300">
         <h3 class="text-xl font-extrabold">{{ experience.position }} <a :href="experience.company.link" class="hover:text-link-color">@{{ experience.company.name }}</a></h3>
         <p class="italic">{{ experience.duration }}</p>
-        <ul class="list-['\1F449'] pl-6 pt-4 text-slate-500 dark:text-slate-300">
-            <li v-for="bullet in experience.bulletPoints" class="pl-2 pb-2">{{ bullet }}</li>
-        </ul>
+        <div v-for="section in experience.content" class="pt-4 text-slate-500 dark:text-slate-300">
+            <span v-if="section.sectionHeader && section.sectionHeader.length > 0" class="flex justify-between font-extrabold">
+                <h4>{{ section.sectionHeader[0] }}</h4>
+                <span v-for="headerPiece in section.sectionHeader.slice(1)">{{ headerPiece }}</span>
+            </span>
+            <ul class="list-['\1F449'] pl-6 pt-4">
+                <li v-for="bulletPoint in section.bulletPoints" class="pl-2 pb-2">{{ bulletPoint }}</li>
+            </ul>
+        </div>
         <div class="text-slate-600 pt-4 flex flex-wrap mt-auto">
             <p v-for="hashtag in experience.hashtags" class="pr-4 last:pr-0">#{{ hashtag }}</p>
         </div>

src/portfolio.js

@@ -69,8 +69,13 @@ const experiences = [
             link: "https://ibm-zcouncil.com/venues/ibm-office-austin-tx/"
         },
         duration: "May 2025 - Present",
-        bulletPoints: [
-            "Building next-generation AI products and enterprise software solutions.",
+        content: [
+            {
+                sectionHeader: "",
+                bulletPoints: [
+                    "Building next-generation AI products and enterprise software solutions.",
+                ]
+            }
         ],
         hashtags: [
             "JavaScript",
@@ -90,14 +95,19 @@ const experiences = [
             link: "https://blog.eduvaultai.com"
         },
         duration: "July 2024 - April 2025",
-        bulletPoints: [
-            "Engineered a high-performance RESTful API backend with FastAPI, supporting a student dashboard and file management system for 5,000+ concurrent users, with files hosted on AWS S3.",
-            "Containerized MariaDB, ChromaDB, and Llama model instances using Docker, enabling scalable and maintainable backend infrastructure.",
-            "Automated test data generation using Python, creating 60,000 records/files in 4 min to streamline testing.",
-            "Architected a scalable backend infrastructure capable of 2x future workloads with minimal code refactoring.",
-            "Developed responsive UI components in Vue.js and Tailwind.css, reducing backend load by optimizing API calls.",
-            "Led an Agile (Kanban) team creating milestone-based roadmaps and schedule, engaging in bug reporting, code reviews, maintaining documentation.",
-            "Estimated compute and hosting costs, gathering user analytics to scale platform accordingly."
+        content: [
+            {
+                sectionHeader: "",
+                bulletPoints: [
+                    "Engineered a high-performance RESTful API backend with FastAPI, supporting a student dashboard and file management system for 5,000+ concurrent users, with files hosted on AWS S3.",
+                    "Containerized MariaDB, ChromaDB, and Llama model instances using Docker, enabling scalable and maintainable backend infrastructure.",
+                    "Automated test data generation using Python, creating 60,000 records/files in 4 min to streamline testing.",
+                    "Architected a scalable backend infrastructure capable of 2x future workloads with minimal code refactoring.",
+                    "Developed responsive UI components in Vue.js and Tailwind.css, reducing backend load by optimizing API calls.",
+                    "Led an Agile (Kanban) team creating milestone-based roadmaps and schedule, engaging in bug reporting, code reviews, maintaining documentation.",
+                    "Estimated compute and hosting costs, gathering user analytics to scale platform accordingly."
+                ]
+            }
         ],
         hashtags: [
             "JavaScript",
@@ -117,18 +127,35 @@ const experiences = [
             link: "https://tools.wolftech.ncsu.edu/support/index.php/WolfTech_Information_Technology"
         },
         duration: "Aug 2022 - Aug 2024",
-        bulletPoints: [
-            "Williamboard Project - Solo Full-Stack Developer 					   	   May 2023 - July 2024",
-            "Laid the groundwork for a multi-tenant modern digital sign management system for 360 screens across 50 campus organizations using Laravel, Vue.js, and Inertia.js.",
-            "Designed MySQL database and Event-Driven app architecture to work with modern PHP and JS technologies.",
-            "Implemented a tenant permission-based system supporting 5 distinct user roles and organization-specific access.",
-            "Configured WebSocket's API to collect screen data and display analytics on user-facing dashboards.",
-            "Automated data migration of 15,000 records to new database structure in under 5 min using custom scripts.",
-            "Other Contributions									   	   Aug 2022 - May 2023",
-            "Created an AI-driven LinkedIn post generator, integrating user profiles and files for personalized content.",
-            "Built a search tool for 20,000 circuit design kits using PHP and SQL, achieving a 200ms average response time.",
-            "Maintained and debugged email automation, research discovery, and scheduling apps, solving 10+ client issues.",
-            "Mentored and assisted new interns into the team workflow shortening the onboarding period.",
+        content: [
+            {
+                sectionHeader: ["Williamboard Project - Solo Full-Stack Developer", "May 2023 - July 2024"],
+                bulletPoints: [
+                    "Laid the groundwork for a multi-tenant modern digital sign management system for 360 screens across 50 campus organizations using Laravel, Vue.js, and Inertia.js.",
+                    "Designed MySQL database and Event-Driven app architecture to work with modern PHP and JS technologies.",
+                    "Implemented a tenant permission-based system supporting 5 distinct user roles and organization-specific access.",
+                    "Configured WebSocket's API to collect screen data and display analytics on user-facing dashboards.",
+                    "Automated data migration of 15,000 records to new database structure in under 5 min using custom scripts.",
+                ]
+            },
+            {
+                sectionHeader: ["Other Contributions", "Aug 2022 - May 2023"],
+                bulletPoints: [
+                    "Created an AI-driven LinkedIn post generator, integrating user profiles and files for personalized content.",
+                    "Built a search tool for 20,000 circuit design kits using PHP and SQL, achieving a 200ms average response time.",
+                    "Maintained and debugged email automation, research discovery, and scheduling apps, solving 10+ client issues.",
+                    "Mentored and assisted new interns into the team workflow shortening the onboarding period.",
+                ]
+            },
+            // "Laid the groundwork for a multi-tenant modern digital sign management system for 360 screens across 50 campus organizations using Laravel, Vue.js, and Inertia.js.",
+            // "Designed MySQL database and Event-Driven app architecture to work with modern PHP and JS technologies.",
+            // "Implemented a tenant permission-based system supporting 5 distinct user roles and organization-specific access.",
+            // "Configured WebSocket's API to collect screen data and display analytics on user-facing dashboards.",
+            // "Automated data migration of 15,000 records to new database structure in under 5 min using custom scripts.",
+            // "Created an AI-driven LinkedIn post generator, integrating user profiles and files for personalized content.",
+            // "Built a search tool for 20,000 circuit design kits using PHP and SQL, achieving a 200ms average response time.",
+            // "Maintained and debugged email automation, research discovery, and scheduling apps, solving 10+ client issues.",
+            // "Mentored and assisted new interns into the team workflow shortening the onboarding period.",
         ],
         hashtags: [
             "Laravel",

src/views/ExperienceView.vue

@@ -4,7 +4,7 @@
             <h1 class="text-3xl font-bold pr-5">🛡️ Experience</h1>
             <div class="flex-grow border-t border-black dark:border-white border-1"></div>
         </div>
-        <div :class="['flex flex-col space-y-4 lg:grid lg:grid-cols-2 lg:gap-x-4 lg:space-y-0 mb-36 transition-all motion-reduce:transition-none duration-500 delay-300', visible ? 'translate-y-0 opacity-1 blur-0' : 'translate-y-4 opacity-0 blur-sm']">
+        <div :class="['flex flex-col space-y-4 mb-36 transition-all motion-reduce:transition-none duration-500 delay-300', visible ? 'translate-y-0 opacity-1 blur-0' : 'translate-y-4 opacity-0 blur-sm']">
             <ExperienceCard
                 v-for="(experience, index) in content"
                 :key="index" :experience="experience"

src/views/LandingView.vue

@@ -9,6 +9,7 @@
                 <p :class="['text-lg lg:text-xl transition-all motion-reduce:transition-none duration-500 delay-[500ms]', showTransition ? 'translate-y-0 opacity-1' : '-translate-y-4 opacity-0']">{{ content.intro }}</p>
                 <h1 :class="['text-2xl lg:text-4xl font-bold transition-all motion-reduce:transition-none duration-500 delay-[550ms]', showTransition ? 'translate-y-0 opacity-1' : '-translate-y-4 opacity-0']">{{ content.name }}</h1>
                 <p :class="['text-sm lg:text-base text-slate-500 dark:text-slate-300 transition-all motion-reduce:transition-none duration-500 delay-[600ms]', showTransition ? 'translate-y-0 opacity-1' : '-translate-y-4 opacity-0']">{{ content.message }}</p>
+                <p>Люблю тебя солнышко моё 💛.</p>
             </div>
         </div>
     </section>