Collapsible | ExperienceItem | SkillItem

src/components/resumeSection/Arrow.tsx

@@ -0,0 +1,18 @@
+// src/components/ToggleButton.tsx
+import React from "react";
+
+interface ToggleButtonProps {
+  isOpen: boolean;
+}
+
+const Arrow: React.FC<ToggleButtonProps> = ({ isOpen }) => {
+  return (
+    <span
+      className={`transform transition-transform duration-300 ${isOpen ? "rotate-180" : "rotate-0"} mr-4`}
+    >
+      ▼
+    </span>
+  );
+};
+
+export default Arrow;

src/components/resumeSection/Collapsible.tsx

@@ -0,0 +1,25 @@
+import React, { FC, ReactNode, useState } from "react";
+import Arrow from "./Arrow";
+
+type CollapsibleProps = {
+  content: ReactNode;
+  button: ReactNode;
+};
+
+export const Collapsible: FC<CollapsibleProps> = ({ content, button }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="mb-4">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center justify-between w-full"
+      >
+        {button}
+        <Arrow isOpen={isOpen} />
+      </button>
+
+      {isOpen && content}
+    </div>
+  );
+};

src/components/resumeSection/ExperienceItem.tsx

@@ -0,0 +1,43 @@
+import React, { FC } from "react";
+import { Collapsible } from "./Collapsible";
+
+type ExperienceItemProps = {
+  title: string[];
+  description: string[];
+};
+
+export const ExperienceItem: FC<ExperienceItemProps> = ({
+  title,
+  description,
+}) => {
+  const label = (
+    <div className="flex flex-col items-start">
+      {title.map((t, index) => (
+        <span
+          key={index}
+          className={
+            "flex flex-col text-base sm:text-lg md:text-xl font-medium"
+          }
+        >
+          {t}
+          {index < title.length - 1 ? ", " : ""}
+        </span>
+      ))}
+    </div>
+  );
+
+  return (
+    <Collapsible
+      button={label}
+      content={
+        <div className="overflow-hidden transition-all duration-500 ease-in-out mt-2 text-gray-600">
+          {description.map((desc, index) => (
+            <p key={index} className="mb-2">
+              {desc}
+            </p>
+          ))}
+        </div>
+      }
+    />
+  );
+};

src/components/resumeSection/ResumeSection.tsx

@@ -1,104 +1,139 @@
 // src/components/ResumeSection/ResumeSection.tsx
-import React from 'react';
-import VolumeItem from './VolumeItem';
-
+import React from "react";
+import { SkillItem } from "./SkillItem";
+import { ExperienceItem } from "./ExperienceItem";
 
 const skills = [
-    { title: ['JavaScript & TypeScript'], description: ['Advanced knowledge of JavaScript with type-safe practices in TypeScript for creating scalable and reliable applications.'] },
-    { title: ['React'], description: ['Skilled in building modular, component-based architectures in React.'] },
-    { title: ['Tailwind CSS'], description: ['Proficient in Tailwind CSS for efficient and flexible styling, enabling rapid prototyping and customization in various projects.'] },
-    { title: ['Django & Python'], description: ['Experience with Django for backend development, building robust APIs, and managing PostgreSQL databases for data-driven applications.'] },
-    { title: ['API Integration'], description: ['Strong experience in integrating and managing APIs, ensuring seamless data flow between front-end interfaces and backend services.'] },
-    { title: ['Git'], description: ['Proficient in Git for managing code changes and collaborating on projects with distributed teams.'] },
-    { title: ['Google Cloud & Docker'], description: ['Familiar with deploying applications on Google Cloud and using Docker for containerized environments, ensuring consistent and reliable deployments.'] },
+  {
+    title: "JavaScript & TypeScript",
+    description: [
+      "Advanced knowledge of JavaScript with type-safe practices in TypeScript for creating scalable and reliable applications.",
+    ],
+  },
+  {
+    title: "React",
+    description: [
+      "Skilled in building modular, component-based architectures in React.",
+    ],
+  },
+  {
+    title: "Tailwind CSS",
+    description: [
+      "Proficient in Tailwind CSS for efficient and flexible styling, enabling rapid prototyping and customization in various projects.",
+    ],
+  },
+  {
+    title: "Django & Python",
+    description: [
+      "Experience with Django for backend development, building robust APIs, and managing PostgreSQL databases for data-driven applications.",
+    ],
+  },
+  {
+    title: "API Integration",
+    description: [
+      "Strong experience in integrating and managing APIs, ensuring seamless data flow between front-end interfaces and backend services.",
+    ],
+  },
+  {
+    title: "Git",
+    description: [
+      "Proficient in Git for managing code changes and collaborating on projects with distributed teams.",
+    ],
+  },
+  {
+    title: "Google Cloud & Docker",
+    description: [
+      "Familiar with deploying applications on Google Cloud and using Docker for containerized environments, ensuring consistent and reliable deployments.",
+    ],
+  },
 ];
 
-const experiances = [
-    { title: [
-        'Frontend Developer WebSolo', 
-        'Kyiv (Remote)', 
-        'November 2023 – April 2024'], 
-        description: [
-            'Developed and maintained responsive, dynamic user interfaces using JavaScript, TypeScript, React, and Tailwind CSS, focusing on modular and clean code.',
-            'Collaborated on building new front-end features that enhanced user engagement and improved usability.',
-            'Ensured cross-browser compatibility and performance optimization for web applications, leveraging Tailwind CSS for efficient styling and responsiveness.', 
-            'Utilized Git for version control, effectively collaborating with team members and managing code updates.', 
-            'Conducted code reviews and testing to ensure high-quality deliverables aligned with project requirements.'
-        ] },
+const experiences = [
+  {
+    title: [
+      "Frontend Developer WebSolo",
+      "Kyiv (Remote)",
+      "November 2023 – April 2024",
+    ],
+    description: [
+      "Developed and maintained responsive, dynamic user interfaces using JavaScript, TypeScript, React, and Tailwind CSS, focusing on modular and clean code.",
+      "Collaborated on building new front-end features that enhanced user engagement and improved usability.",
+      "Ensured cross-browser compatibility and performance optimization for web applications, leveraging Tailwind CSS for efficient styling and responsiveness.",
+      "Utilized Git for version control, effectively collaborating with team members and managing code updates.",
+      "Conducted code reviews and testing to ensure high-quality deliverables aligned with project requirements.",
+    ],
+  },
 
-    {title: [
-        'Full-Stack Developer (Freelance)', 
-        'UpWork, Remote', 
-        'July 2024 – Present'], 
-        description: [
-            'Developed and deployed a personal web application that functions as a dynamic portfolio, built with JavaScript, TypeScript, React, and Tailwind CSS, showcasing interactive elements and responsive design.',
-            'Integrated a custom ChatBot using OpenAI API, with backend logic written in Python and Django, and managed a PostgreSQL database for storing query-response pairs.',
-            'Designed RESTful APIs in Django, enabling smooth interaction between the chatbot front-end and backend database.', 
-            'Worked with clients on Upwork to develop and enhance various web applications, incorporating JavaScript, React, TypeScript, Django, and PostgreSQL to deliver scalable and high-performing solutions.', 
-            'Ensured data integrity and security in backend applications, implementing best practices in API management and database interactions.'
-        ] },
-
-
-    ];
+  {
+    title: [
+      "Full-Stack Developer (Freelance)",
+      "UpWork, Remote",
+      "July 2024 – Present",
+    ],
+    description: [
+      "Developed and deployed a personal web application that functions as a dynamic portfolio, built with JavaScript, TypeScript, React, and Tailwind CSS, showcasing interactive elements and responsive design.",
+      "Integrated a custom ChatBot using OpenAI API, with backend logic written in Python and Django, and managed a PostgreSQL database for storing query-response pairs.",
+      "Designed RESTful APIs in Django, enabling smooth interaction between the chatbot front-end and backend database.",
+      "Worked with clients on Upwork to develop and enhance various web applications, incorporating JavaScript, React, TypeScript, Django, and PostgreSQL to deliver scalable and high-performing solutions.",
+      "Ensured data integrity and security in backend applications, implementing best practices in API management and database interactions.",
+    ],
+  },
+];
 
 const ResumeSection: React.FC = () => {
-    return (
-        // 7th Container: Main Wrapper Container
-        <section className="resume-section-wrapper min-w-[320px] max-w-4xl mx-auto p-3 md:p-6 bg-white bg-opacity-40 backdrop-blur-xl rounded-lg shadow-md">
-
-            {/* 1st Container: Resume Header */}
-            <div className="resume-header text-center mb-6">
-                <h2 className="text-4xl font-bold">Resume</h2>
-            </div>
+  return (
+    // 7th Container: Main Wrapper Container
+    <section className="resume-section-wrapper min-w-[320px] max-w-4xl mx-auto p-3 md:p-6 bg-white bg-opacity-40 backdrop-blur-xl rounded-lg shadow-md">
+      {/* 1st Container: Resume Header */}
+      <div className="resume-header text-center mb-6">
+        <h2 className="text-4xl font-bold">Resume</h2>
+      </div>
 
-            {/* 4th Container: Skills and Experience combined */}
-            <div className="skills-experience-container flex flex-col lg:flex-row items-center lg:items-start lg:space-x-6 w-full">
-                {/* Skills Section */}
-                <div className="skills-container flex-1 w-full mb-6 lg:mb-0 lg:w-auto">
-                    <h3 className="text-lg font-semibold mb-2">Skills</h3>
-                    <div>
-                        {skills.map((item, index) => (
-                            <VolumeItem 
-                                key={index} 
-                                title={item.title} 
-                                description={item.description} 
-                                isSkill={true} 
-                            />
-
-                        ))}
-                    </div>
-                </div>
+      {/* 4th Container: Skills and Experience combined */}
+      <div className="skills-experience-container flex flex-col lg:flex-row items-center lg:items-start lg:space-x-6 w-full">
+        {/* Skills Section */}
+        <div className="skills-container flex-1 w-full mb-6 lg:mb-0 lg:w-auto">
+          <h3 className="text-lg font-semibold mb-2">Skills</h3>
+          <div>
+            {skills.map((item, index) => (
+              <SkillItem
+                key={index}
+                title={item.title}
+                description={item.description}
+              />
+            ))}
+          </div>
+        </div>
 
-                {/* Divider */}
-                <div className="hidden lg:block w-px h-auto bg-gray-300 mx-6"></div>
+        {/* Divider */}
+        <div className="hidden lg:block w-px h-auto bg-gray-300 mx-6"></div>
 
-                {/* Experience Section */}
-                <div className="experience-container flex-1 flex-col w-full mb-6 lg:mb-0 lg:w-auto">
-                    <h3 className="text-lg font-semibold mb-2">Work Experience</h3>
-                    <div>
-                        {experiances.map((item, index) => (
-                            <VolumeItem 
-                                key={index} 
-                                title={item.title} 
-                                description={item.description}
-                                isSkill={false} 
-                            />
-                        ))}
-                    </div>
-                </div>
-            </div>
+        {/* Experience Section */}
+        <div className="experience-container flex-1 flex-col w-full mb-6 lg:mb-0 lg:w-auto">
+          <h3 className="text-lg font-semibold mb-2">Work Experience</h3>
+          <div>
+            {experiences.map((item, index) => (
+              <ExperienceItem
+                key={index}
+                title={item.title}
+                description={item.description}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
 
-            {/* 5th Container: Suggested Hourly Rate Header */}
-            <div className="suggested-rate-header text-center mt-6">
-                <h3 className="text-lg font-semibold">Suggested Hourly Rate:</h3>
-            </div>
+      {/* 5th Container: Suggested Hourly Rate Header */}
+      <div className="suggested-rate-header text-center mt-6">
+        <h3 className="text-lg font-semibold">Suggested Hourly Rate:</h3>
+      </div>
 
-            {/* 6th Container: Suggested Hourly Rate Content */}
-            <div className="suggested-rate-content text-center">
-                <p>As a junior developer starting out on Upwork...</p>
-            </div>
-        </section>
-    );
+      {/* 6th Container: Suggested Hourly Rate Content */}
+      <div className="suggested-rate-content text-center">
+        <p>As a junior developer starting out on Upwork...</p>
+      </div>
+    </section>
+  );
 };
 
-export default ResumeSection;
+export default ResumeSection;

src/components/resumeSection/SkillItem.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from "react";
+import { Collapsible } from "./Collapsible";
+
+type SkillItemProps = {
+  title: string;
+  description: string[];
+};
+
+export const SkillItem: FC<SkillItemProps> = ({ title, description }) => {
+  const label = (
+    <span className="text-base sm:text-lg md:text-xl font-semibold">
+      {title}
+    </span>
+  );
+
+  return (
+    <Collapsible
+      button={label}
+      content={
+        <div className="overflow-hidden transition-all duration-500 ease-in-out mt-2 text-gray-600">
+          {description.map((desc, index) => (
+            <p key={index} className="mb-2">
+              {desc}
+            </p>
+          ))}
+        </div>
+      }
+    />
+  );
+};