index.js

<div class="flip-card2">
    <div class="flip-card-inner2">
        <div class="flip-card-front2">
            <div class="aboutMe">

                <h2>Technologies</h2>
                <img src="skill.png" alt="Avatar">
            </div>
        </div>

        <div class="aboutMeBack">
            <h2> My Skills</h2>

            <div class="skillItem">HTML: <div class="skill hundred"> </div>
            </div>
            <div class="skillItem">CSS: <div class="skill fifty"> </div>
            </div>
            <div class="skillItem">JavaScripts: <div class="skill t5"> </div>
            </div>
            <div class="skillItem">Java: <div class="skill fifty"> </div>
            </div>
            <div class="skillItem">Python: <div class="skill t5"> </div>
            </div>
        </div>
    </div>
</div>

<!-- < h2 > My skills</h2 > -->
    <div class="skillContainer">

    </div>
</div >




{/* my project code 


<!-- TODO: create a gallery for my projects -->
            <h2>My projects</h2>
            <div class="skillContainer">
                <div class="skillProjects">Text-Utills: <div class="skill hundred"> </div>
                </div>
                <div class="skillProjects">Online file crime management: <div class="skill fifty"> </div>
                </div>
                <div class="skillProjects">Cutz: <div class="skill t5"> </div>
                </div>


            </div>



*/}