my expertise acordion

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Portfolio Accordion</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <section class="accordion-section">

        <div class="section-heading">
            <span>WHAT I DO</span>
            <h1>My <em>Expertise</em></h1>
            <p>
                A few things I love building, designing and experimenting with.
            </p>
        </div>

        <div class="accordion">

            <!-- Item 01 -->
            <details open>
                <summary>
                    <div class="left">
                        <span class="number">01</span>
                        <h2>Web Development</h2>
                    </div>

                    <span class="plus">+</span>
                </summary>

                <div class="content">
                    <div class="content-text">
                        <p>
                            I create modern, responsive and high-performance
                            websites with clean code and smooth interactions.
                            From landing pages to complete web applications,
                            I focus on creating experiences that look great
                            and work beautifully.
                        </p>

                        <div class="tags">
                            <span>HTML</span>
                            <span>CSS</span>
                            <span>JavaScript</span>
                            <span>React</span>
                        </div>
                    </div>

                    <div class="mini-card">
                        <span>01</span>
                        <strong>BUILD</strong>
                    </div>
                </div>
            </details>


            <!-- Item 02 -->
            <details>
                <summary>
                    <div class="left">
                        <span class="number">02</span>
                        <h2>UI / UX Design</h2>
                    </div>

                    <span class="plus">+</span>
                </summary>

                <div class="content">
                    <div class="content-text">
                        <p>
                            I design clean and intuitive interfaces where
                            visual design meets usability. Every element is
                            carefully placed to create a smooth user journey.
                        </p>

                        <div class="tags">
                            <span>Figma</span>
                            <span>Wireframes</span>
                            <span>Prototyping</span>
                        </div>
                    </div>

                    <div class="mini-card">
                        <span>02</span>
                        <strong>DESIGN</strong>
                    </div>
                </div>
            </details>


            <!-- Item 03 -->
            <details>
                <summary>
                    <div class="left">
                        <span class="number">03</span>
                        <h2>Creative Development</h2>
                    </div>

                    <span class="plus">+</span>
                </summary>

                <div class="content">
                    <div class="content-text">
                        <p>
                            I experiment with animations, 3D effects and
                            interactive experiences to make websites feel
                            alive rather than static.
                        </p>

                        <div class="tags">
                            <span>Animation</span>
                            <span>Three.js</span>
                            <span>GSAP</span>
                        </div>
                    </div>

                    <div class="mini-card">
                        <span>03</span>
                        <strong>CREATE</strong>
                    </div>
                </div>
            </details>


            <!-- Item 04 -->
            <details>
                <summary>
                    <div class="left">
                        <span class="number">04</span>
                        <h2>Problem Solving</h2>
                    </div>

                    <span class="plus">+</span>
                </summary>

                <div class="content">
                    <div class="content-text">
                        <p>
                            Whether it is debugging a complex application or
                            finding a better way to implement an idea, I enjoy
                            turning difficult problems into simple solutions.
                        </p>

                        <div class="tags">
                            <span>Logic</span>
                            <span>Debugging</span>
                            <span>Optimization</span>
                        </div>
                    </div>

                    <div class="mini-card">
                        <span>04</span>
                        <strong>SOLVE</strong>
                    </div>
                </div>
            </details>

        </div>

    </section>

</body>
</html>