diff --git a/public/portfolio/work_profile.png b/public/portfolio/work_profile.png new file mode 100644 index 0000000..03abc90 Binary files /dev/null and b/public/portfolio/work_profile.png differ diff --git a/src/portfolio/MainPage.tsx b/src/portfolio/MainPage.tsx index 6bc4a1a..0fad9d1 100644 --- a/src/portfolio/MainPage.tsx +++ b/src/portfolio/MainPage.tsx @@ -1,7 +1,7 @@ import Intro from "@/src/portfolio/sections/Intro"; import Projects from "@/src/portfolio/sections/Projects"; import Experience from "@/src/portfolio/sections/Experience"; -import Achievements from "@/src/portfolio/sections/Achievements"; +import CurrentWork from "@/src/portfolio/sections/CurrentWork"; import Footer from "@/src/portfolio/sections/Footer"; import SkillsAndLinks from "@/src/portfolio/sections/SkillsAndLinks"; @@ -9,7 +9,7 @@ const MainPage = (): JSX.Element => { return (
- + diff --git a/src/portfolio/data/currentWorkData.ts b/src/portfolio/data/currentWorkData.ts new file mode 100644 index 0000000..9e60a23 --- /dev/null +++ b/src/portfolio/data/currentWorkData.ts @@ -0,0 +1,26 @@ +export interface ICurrentWorkData { + role: string; + company: string; + companyUrl: string; + specialization: string; + location: string; + imagePath: string; + paragraphs: string[]; +} + +const currentWorkData: ICurrentWorkData = { + role: "Technical Consultant", + company: "Softwire", + companyUrl: "https://www.softwire.com/", + specialization: "AI Engineering", + location: "Manchester, United Kingdom", + imagePath: "/portfolio/work_profile.png", + paragraphs: [ + "I spend much of my time designing and evaluating AI systems, or systems where AI plays a central role. My work involves the full lifecycle of AI implementation, from initial concept through to production deployment.", + "I have delivered training and adoption materials that have significantly improved AI usage within Softwire, helping teams understand both the capabilities and limitations of AI technologies. I've also created autonomous AI pipelines that have reduced developer burden by automating tasks that were previously time-consuming manual processes.", + "Working with diverse clients (from the highly skeptical to the enthusiastically optimistic), I've developed expertise in communicating AI benefits while respecting organizational constraints. This involves not just technical implementation, but also the human and ethical dimensions of AI adoption.", + "A particular area of passion for me is Ethical AI and Sustainable AI. I've spent considerable time advocating for sustainability considerations in AI systems, conducting environmental assessments for embedded AI, and building adoption systems that leverage local open-source AI instead of relying on large providers whose ethical standards can be questionable." + ] +}; + +export default currentWorkData; diff --git a/src/portfolio/data/projectData.ts b/src/portfolio/data/projectData.ts index 770564b..bb2b92d 100644 --- a/src/portfolio/data/projectData.ts +++ b/src/portfolio/data/projectData.ts @@ -13,7 +13,7 @@ const projectData : IProjectArguments[] = [ ], github: "https://github.com/KuchtaVR6/Multi-LLM-Agent", document: "/multiAgent.pdf", - title: "Research Review of Neural Techniques for low-resource language translation", + title: "Multi-LLM Tool Use – Modular Pipeline with Expert Adapters", text: "In this work, I explore a practical and cost-effective approach to improving how AI models interact with external tools and APIs. Instead of relying on large, expensive models or complex zero-shot learning methods, I utilize a modular pipeline using smaller, specialized components (Planner, Caller, Summariser) trained separately. I introduce to it a hard routing agent system that assigns tasks to expert adapters based on API categories, the system achieves performance that surpasses much larger closed-source models on a key benchmark. This approach enables more efficient, decentralized training and has potential applications beyond the tool-use QA task." }, { diff --git a/src/portfolio/data/workExperienceData.ts b/src/portfolio/data/workExperienceData.ts index 130b703..8da154f 100644 --- a/src/portfolio/data/workExperienceData.ts +++ b/src/portfolio/data/workExperienceData.ts @@ -1,13 +1,22 @@ import { WorkExperienceArgs } from "@/src/portfolio/helpers/WorkExperience"; const workExperienceData : WorkExperienceArgs[] = [ + { + industry: "Software & AI", + title: "Technical Consultant", + company: "Softwire", + city: "Manchester", + country: "United Kingdom", + startDate: "November 2025" + }, { industry: "Software & AI", title: "Software Developer", company: "Softwire", city: "Manchester", country: "United Kingdom", - startDate: "November 2024" + startDate: "November 2024", + endDate: "November 2025" }, { industry: "Artificial Intelligence", @@ -109,8 +118,8 @@ export const workExperienceParagraph = "Mentor at Queen Mary University, where I later became a Laboratory Demonstrator. In the software industry, " + "I gained experience as a Software Developer Intern at Softwire. During my master's degree, I contributed to " + "the Artificial Intelligence industry as a Programming Data Annotator at DataAnnotation Tech. Upon graduation, " + - "I accepted a full-time offer to join Softwire as a Software Developer in their North West office in Manchester, " + - "known for its focus on innovation in the AI and Data sector. At Softwire, I have gained valuable experience " + + "I accepted a full-time offer to join Softwire as a Software Developer in their North West office in Manchester. " + + "In November 2025, I transitioned to Technical Consultant, AI Specialist. At Softwire, I have gained valuable experience " + "working on several AI projects, applying my theoretical machine learning knowledge to real-world problems. " + "Across these diverse roles, I have developed a strong work ethic and a broad set of transferable skills."; diff --git a/src/portfolio/helpers/Accordion.tsx b/src/portfolio/helpers/Accordion.tsx index 84c564c..4662027 100644 --- a/src/portfolio/helpers/Accordion.tsx +++ b/src/portfolio/helpers/Accordion.tsx @@ -1,5 +1,6 @@ import React, { FC, useState } from "react"; import { CSSTransition } from "react-transition-group"; +import { FaChevronDown, FaChevronUp } from "react-icons/fa"; type AccordionArgs = { title : string, @@ -16,8 +17,10 @@ const Accordion : FC = ({ title, children }): JSX.Element => { return (
-

{title} {isOpen ? "-" : "+"}

- +

{title}

+ + {isOpen ? : } +
{children}
diff --git a/src/portfolio/helpers/Education.tsx b/src/portfolio/helpers/Education.tsx index 5107b9f..51eb654 100644 --- a/src/portfolio/helpers/Education.tsx +++ b/src/portfolio/helpers/Education.tsx @@ -1,5 +1,6 @@ import { FC } from "react"; -import styles from "../styling/achievements.module.scss"; +import styles from "../styling/currentWork.module.scss"; +import Location from "./Location"; export type EducationArgs = { institution : string, @@ -14,48 +15,42 @@ export type EducationArgs = { const Education : FC = (props) => { - const getCountryEmoji = (): string => { + const getLocationString = (): string => { switch (props.city) { case "Warsaw": - return ", Poland"; + return "Warsaw, Poland"; case "London": - return ", UK󠁧󠁢󠁥󠁮󠁧󠁿"; + return "London, UK"; case "Edinburgh": - return ", UK󠁧󠁢󠁳󠁣󠁴󠁿"; + return "Edinburgh, UK"; } }; return ( -
-
- {props.title} in {props.subtitle} -
- at {props.institution} - {props.notes? -
    - {props.notes.map((note, index) => -
  • - {note} -
    • - )} -
- : "" - } +
+
+ {props.title} in {props.subtitle} +
+
+ at {props.institution} +
+ {props.notes && ( +
    + {props.notes.map((note, index) => ( +
  • {note}
    • + ))} +
+ )} +
+ +
+ {props.endDate ? ( + {props.startDate} - {props.endDate} + ) : ( + Since {props.startDate} + )} +
- -
{props.city}{getCountryEmoji()}
-
- {props.endDate ? - <> - From:   - {props.startDate} -
- To:   - {props.endDate} - : - "Since " + props.startDate - } -
); }; diff --git a/src/portfolio/helpers/Location.tsx b/src/portfolio/helpers/Location.tsx new file mode 100644 index 0000000..9af9743 --- /dev/null +++ b/src/portfolio/helpers/Location.tsx @@ -0,0 +1,18 @@ +import { FC } from "react"; +import { FaMapMarkerAlt } from "react-icons/fa"; + +interface ILocationProps { + city: string; + className?: string; +} + +const Location: FC = ({ city, className }) => { + return ( + + + {city} + + ); +}; + +export default Location; diff --git a/src/portfolio/sections/CurrentWork.tsx b/src/portfolio/sections/CurrentWork.tsx new file mode 100644 index 0000000..fc4de80 --- /dev/null +++ b/src/portfolio/sections/CurrentWork.tsx @@ -0,0 +1,69 @@ +import Image from "next/image"; +import styles from "../styling/currentWork.module.scss"; +import currentWorkData from "@/src/portfolio/data/currentWorkData"; +import educationData from "@/src/portfolio/data/educationData"; +import Education from "@/src/portfolio/helpers/Education"; +import Location from "@/src/portfolio/helpers/Location"; + +const RoleInfo = (): JSX.Element => { + return ( +
+

{currentWorkData.role}

+

+ Specializing in {currentWorkData.specialization} +

+

+ at{" "} + + {currentWorkData.company} + +

+
+ +
+
+ ); +}; + +const CurrentWork = (): JSX.Element => { + return ( +
+
+
+

What I'm Up To

+
+
+
+ Patryk Kuchta at work +
+ +
+
+ {currentWorkData.paragraphs.map((paragraph, index) => ( +

+ ))} +

+
+
+
+

Education

+ {educationData.map((entry, index) => ( + + ))} +
+
+
+ ); +}; + +export default CurrentWork; diff --git a/src/portfolio/sections/Footer.tsx b/src/portfolio/sections/Footer.tsx index b66461f..d417669 100644 --- a/src/portfolio/sections/Footer.tsx +++ b/src/portfolio/sections/Footer.tsx @@ -1,9 +1,18 @@ +import Image from "next/image"; import styles from "../styling/footer.module.scss"; const Footer = (): JSX.Element => { return (
- Copyright © Patryk Kuchta {new Date().getFullYear()} +
+ Patryk Kuchta Logo +
+

Copyright © Patryk Kuchta {new Date().getFullYear()}

); }; diff --git a/src/portfolio/sections/SkillsAndLinks/LinksSection.tsx b/src/portfolio/sections/SkillsAndLinks/LinksSection.tsx index 9b832a5..ec12df9 100644 --- a/src/portfolio/sections/SkillsAndLinks/LinksSection.tsx +++ b/src/portfolio/sections/SkillsAndLinks/LinksSection.tsx @@ -1,68 +1,67 @@ import styles from "../../styling/skillsLinks.module.scss"; +import { FaGithub, FaLinkedin, FaFilePdf, FaEnvelope } from "react-icons/fa"; interface ILink { title: string; link: string; + icon: JSX.Element; } const moreInfoLinks: ILink[] = [ { title: "Github", - link: "https://github.com/KuchtaVR6/" + link: "https://github.com/KuchtaVR6/", + icon: }, { title: "LinkedIn", - link: "https://linkedin.com/in/kuchtap" + link: "https://linkedin.com/in/kuchtap", + icon: }, { title: "Curriculum Vitae", - link: "/PatrykKuchta_CV.pdf" + link: "/PatrykKuchta_CV.pdf", + icon: } ]; const contactLinks: ILink[] = [ { title: "Email", - link: "mailto:patryk@kuchta.uk" + link: "mailto:patryk@kuchta.uk", + icon: }, { title: "LinkedIn", - link: "https://linkedin.com/in/kuchtap" + link: "https://linkedin.com/in/kuchtap", + icon: } ]; const LinksSection = (): JSX.Element => { return ( -
+

Find out more about me:

    - { - moreInfoLinks.map(({ title, link }, key) => { - return ( -
  • - - {title} - -
    • - ); - } - ) - } + {moreInfoLinks.map(({ title, link, icon }, key) => ( +
  • + + {icon} + {title} + +
    • + ))}

Contact me through:

    - { - contactLinks.map(({ title, link }, key) => { - return ( -
  • - - {title} - -
    • - ); - } - ) - } + {contactLinks.map(({ title, link, icon }, key) => ( +
  • + + {icon} + {title} + +
    • + ))}
); diff --git a/src/portfolio/sections/SkillsAndLinks/SkillsSection.tsx b/src/portfolio/sections/SkillsAndLinks/SkillsSection.tsx index 73b0f6e..1310288 100644 --- a/src/portfolio/sections/SkillsAndLinks/SkillsSection.tsx +++ b/src/portfolio/sections/SkillsAndLinks/SkillsSection.tsx @@ -1,41 +1,58 @@ import styles from "../../styling/skillsLinks.module.scss"; -import SkillDisplay from "@/src/portfolio/helpers/SkillDisplay"; import Accordion from "@/src/portfolio/helpers/Accordion"; import { skillsInCategories } from "@/src/portfolio/data/skillsData"; import { modulesTaken } from "@/src/portfolio/data/modulesTaken"; +import certificateData from "@/src/portfolio/data/certificateData"; + +const renderSkillItem = (name: string, level: string): JSX.Element => ( +
+ {name} + + {level} + +
+); const SkillsSection = (): JSX.Element => { return ( -
-
- Press the "+" to expand a section 👀 -
+
- { - Object.entries(skillsInCategories).map(([category, skills]) => { - return - { - skills.map((skill) => { - return ; - }) - } - ; - }) - } + + {certificateData.map(({ title, institution, awardDate }, index) => ( +
+ {title} + + {institution} - {awardDate} + +
+ ))} + - { - modulesTaken.map(({ name, level, score }) => { - return
- {name}   - - {score>=0? score + "%" : "🔮"} {level} - -
; - }) - } + {modulesTaken.map(({ name, level, score }) => ( +
+ {name} + + {score >= 0 ? score + "%" : "N/A"} {level} + +
+ ))} + + + + {skillsInCategories["Human languages"].map((skill) => renderSkillItem(skill.name, skill.level))} + + + + {skillsInCategories["Programming Languages"].map((skill) => renderSkillItem(skill.name, skill.level))} + + + + {skillsInCategories["Frameworks/Libraries"].map((skill) => renderSkillItem(skill.name, skill.level))} + + + + {skillsInCategories["Miscellaneous"].map((skill) => renderSkillItem(skill.name, skill.level))}
diff --git a/src/portfolio/styling/achievements.module.scss b/src/portfolio/styling/achievements.module.scss index 989623e..3d77194 100644 --- a/src/portfolio/styling/achievements.module.scss +++ b/src/portfolio/styling/achievements.module.scss @@ -21,8 +21,6 @@ .education { text-align: left; background-color: transparentize($gray, 0.5); - padding: 1em; - margin: 1em; border-radius: $smallGap; box-shadow: 0.5em 0.5em transparentize($black, 0.5); diff --git a/src/portfolio/styling/currentWork.module.scss b/src/portfolio/styling/currentWork.module.scss new file mode 100644 index 0000000..a161067 --- /dev/null +++ b/src/portfolio/styling/currentWork.module.scss @@ -0,0 +1,245 @@ +@import "/src/styles/helpers"; + +.section { + @include lightSection; + @include regularFont; + + padding: 3rem 1rem; + overflow-x: hidden; + + @media (max-width: 768px) { + padding: 2rem 1rem; + } + + h2 { + text-align: center; + font-size: 2.5rem; + margin-bottom: 3rem; + color: $accent_colour; + } +} + +.mainContent { + display: flex; + flex-direction: column; + gap: 3rem; + max-width: 1400px; + margin: 0 auto; + + @media (min-width: 1280px) { + flex-direction: row; + gap: 1.5rem; + align-items: flex-start; + } +} + +.currentWorkSection { + flex: 1; + padding: 0 1rem; + + @media (min-width: 1280px) { + flex: 0 0 54%; + padding-right: 1.5rem; + padding-left: 0; + border-right: 2px solid $accent_colour; + } + + h2 { + text-align: center; + font-size: 2rem; + margin-bottom: 2rem; + color: $accent_colour; + } +} + +.educationSection { + flex: 1; + padding: 0 1rem; + + @media (min-width: 1280px) { + flex: 0 0 42%; + padding-left: 1.5rem; + padding-right: 0; + } + + @media (max-width: 1279px) { + padding-top: 2rem; + padding-bottom: 2rem; + border-top: 2px solid $accent_colour; + } + + h2 { + text-align: center; + font-size: 1.75rem; + margin-bottom: 1.5rem; + margin-top: 0; + color: $accent_colour; + } + + .educationEntry { + background-color: transparentize($gray, 0.85); + padding: 1rem; + margin-bottom: 1rem; + border-radius: 8px; + border-left: 3px solid $accent_colour; + + &:last-child { + margin-bottom: 0; + } + + .degree { + font-weight: bold; + color: $accent_colour; + font-size: 1rem; + margin-bottom: 0.3rem; + line-height: 1.4; + } + + .institution { + font-style: italic; + font-size: 0.9rem; + margin-bottom: 0.5rem; + color: #666; + } + + .notes { + font-size: 0.85rem; + margin: 0.5rem 0; + padding-left: 1rem; + + li { + margin-bottom: 0.25rem; + line-height: 1.5; + } + } + + .details { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 0.8rem; + color: #999; + margin-top: 0.5rem; + flex-wrap: wrap; + gap: 0.5rem; + + .location { + color: #999; + } + + .dates { + display: flex; + gap: 0.5rem; + align-items: center; + } + } + } +} + +.content { + display: flex; + flex-direction: column; + gap: 2rem; + + @media (min-width: 900px) { + flex-direction: row; + gap: 2rem; + align-items: flex-start; + } + + @media (max-width: 899px) { + align-items: center; + gap: 1.5rem; + } +} + +.imageContainer { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.75rem; + flex-shrink: 0; + + @media (min-width: 900px) { + flex: 0 0 25%; + gap: 1.5rem; + } +} + +.imageWrapper { + position: relative; + width: 200px; + height: 200px; + flex-shrink: 0; +} + +.profileImage { + border-radius: 50%; + object-fit: cover; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + border: 4px solid $accent_colour; +} + +.roleInfo { + text-align: center; + + h3 { + font-size: 1.5rem; + margin-bottom: 0.5rem; + color: $accent_colour; + } + + .company { + font-size: 1.2rem; + margin-bottom: 0.3rem; + } + + .specialization { + font-style: italic; + color: #666; + margin-bottom: 0.3rem; + } + + .locationWrapper { + display: flex; + justify-content: center; + margin-top: 0.5rem; + } + + .location { + font-size: 0.75rem; + color: #999; + } +} + +.companyLink { + color: rgb(0, 214, 254); + text-decoration: none; + font-weight: 600; + + &:hover { + text-decoration: underline; + } +} + +.description { + display: flex; + flex-direction: column; + gap: 0.8rem; + + @media (min-width: 900px) { + flex: 1; + } + + p { + line-height: 1.7; + text-align: justify; + font-size: 0.9rem; + margin: 0; + + @media (max-width: 899px) { + text-align: left; + font-size: 0.85rem; + } + } +} diff --git a/src/portfolio/styling/experience.module.scss b/src/portfolio/styling/experience.module.scss index 9fd44c0..93b1748 100644 --- a/src/portfolio/styling/experience.module.scss +++ b/src/portfolio/styling/experience.module.scss @@ -16,6 +16,7 @@ width: 42em; max-width: 70vw; line-height: 1.7; + font-size: 0.85rem; } } diff --git a/src/portfolio/styling/footer.module.scss b/src/portfolio/styling/footer.module.scss index bf79e2d..f3c96a4 100644 --- a/src/portfolio/styling/footer.module.scss +++ b/src/portfolio/styling/footer.module.scss @@ -1,9 +1,35 @@ @import "@/src/styles/helpers.scss"; .section { - @include darkSection; - @include regularFont; + @include darkSection; + @include regularFont; - padding: 0.4em; - text-align: center; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 0.75rem; + padding: 2rem; + + p { + margin: 0; + font-size: 0.9rem; + } +} + +.logoWrapper { + position: relative; + width: 2rem; + height: 1rem; + flex-shrink: 0; +} + +.logo { + object-fit: contain; + opacity: 0.7; + transition: opacity 0.3s ease; + + &:hover { + opacity: 1; + } } \ No newline at end of file diff --git a/src/portfolio/styling/skillsLinks.module.scss b/src/portfolio/styling/skillsLinks.module.scss index abbb4f7..493b550 100644 --- a/src/portfolio/styling/skillsLinks.module.scss +++ b/src/portfolio/styling/skillsLinks.module.scss @@ -1,53 +1,103 @@ @import "@/src/styles/helpers.scss"; .section { - @include lightSection; - @include regularFont; + @include lightSection; + @include regularFont; - display: flex; - flex-direction: row; - justify-content: space-evenly; - flex-wrap: wrap; + display: flex; + flex-direction: row; + justify-content: space-evenly; + flex-wrap: wrap; + gap: 3rem; - padding: 0 6em 3em; + padding: 3rem 2rem; - .skills { - display: flex; - flex-direction: column; - text-align: center; - .innerskills { - text-align: left; - display: flex; - flex-direction: row; - justify-content: space-evenly; - gap: $mediumGap; - flex-wrap: wrap; - flex-basis: 60%; - } - flex-wrap: wrap; - flex-basis: 60%; - } + @media (max-width: 768px) { + padding: 2rem 1rem; + } - .otherLinks{ - margin: auto 1em; - padding: 1em 2em; - background-color: $black; - color: $white; + .skills { + display: flex; + flex-direction: column; + text-align: center; + flex-basis: 60%; + min-width: 300px; - h2{ - font-size: 115%; - } + @media (max-width: 768px) { + flex-basis: 100%; + } - a { - color: $white; - text-decoration: none; + .innerskills { + text-align: left; + display: flex; + flex-direction: column; + gap: 1rem; + margin-top: 1.5rem; + } + } - &:hover { - color: $accent_colour; - font-style: italic; - } - } - } + .otherLinks { + margin: auto 1em; + padding: 1.5em 2.5em; + background-color: $black; + color: $white; + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + + h2 { + font-size: 1.3rem; + margin-bottom: 1rem; + } + + ul { + list-style: none; + padding: 0; + } + + li { + margin-bottom: 0.75rem; + } + + a { + color: $white; + text-decoration: none; + transition: all 0.2s ease; + display: flex; + align-items: center; + font-size: 1rem; + + &:hover { + color: $accent_colour; + transform: translateX(5px); + + .icon { + transform: scale(1.1); + } + } + } + + .linkWithIcon { + display: flex; + align-items: center; + gap: 0.75rem; + } + + .icon { + font-size: 1.2rem; + transition: transform 0.2s ease; + display: flex; + align-items: center; + } + } +} + +.technology { + padding: 0.5rem 0; + border-bottom: 1px solid transparentize($gray, 0.5); + + &:last-child { + border-bottom: none; + } } diff --git a/src/styles/main.scss b/src/styles/main.scss index c45a946..36d3e09 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -43,30 +43,74 @@ body { display: flex; } +.accordion { + border: 1px solid transparentize($gray, 0.3); + border-radius: 8px; + overflow: hidden; + background-color: $white; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + transition: box-shadow 0.3s ease; + + &:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + } +} + +.accordion-header { + padding: 1rem 1.5rem; + cursor: pointer; + background-color: transparentize($gray, 0.7); + transition: background-color 0.2s ease; + user-select: none; + display: flex; + justify-content: space-between; + align-items: center; + + &:hover { + background-color: transparentize($gray, 0.5); + } + + h2 { + margin: 0; + font-size: 1.2rem; + color: $black; + flex: 1; + } + + .accordion-icon { + display: flex; + align-items: center; + font-size: 1rem; + color: $accent_colour; + transition: transform 0.2s ease; + } +} + +.accordion-content { + padding: 1.5rem; + background-color: $white; +} + .accordion-content-enter { opacity: 0; - height: 0; + max-height: 0; overflow: hidden; } .accordion-content-enter-active { opacity: 1; - height: auto; - transition: opacity 300ms, height 300ms; + max-height: 2000px; + transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out; } .accordion-content-exit { opacity: 1; - height: auto; + max-height: 2000px; } .accordion-content-exit-active { opacity: 0; - height: 0; - transition: opacity 300ms, height 300ms; + max-height: 0; + transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out; overflow: hidden; -} - -.accordion-header { - text-align: center; } \ No newline at end of file