Epic Dummy Portfolio

I build with code, I craft with care, Transforming ideas that float in the air. Pixels and lines become something bright, A world of wonder, a web of delight.
☀️
Responsive pages, smooth and sleek, With user joy the goal I seek. Each tap and click, each scroll and swipe, A seamless dance, just the right type.
☁️
Motivation blooms from every grin, A spark of joy born deep within. Through every site, through every style, I code to make the world smile.

😀

SOME OF MY WORK

Grade Calculator Page🧮

A grade calculator based on my college grading system. It is coded in HTML, CSS, and Pyscript that allows me to calculate my prelim grade in order to know what grade I need in Midterms and Finals to pass the course.

First Page📃

This is my first HTML page, the theme is inspired by The Matrix movie. It explores some key history of computing and IT basics.

Pyscript reflection page🪞

A PyScript project including a reflection from a seminar on data privacy and cyber awareness, along with a PyScript quiz game.

FUN CODES I LEARNED IN WEB DEVELOPING
🖥️

Make an image go dancin' wild
🎉

    <div class="dada">
        <img src="images/cat-meme-funny.gif" loading="lazy" alt="6">
    </div>
    
    <style>
        @keyframes dada {
            0% { transform: translateY(0) scaleX(1); }
            25% { transform: translateY(-20px) rotate(-10deg) scaleX(-1); }
            50% { transform: translateY(0) scaleX(1); }
            75% { transform: translateY(-20px) rotate(10deg) scaleX(-1); }
            100% { transform: translateY(0) scaleX(1); }
        }
    
        .dada {
            width: 100px;
            height: 100px;
            animation: dada 1s infinite;
        }
    </style>

Making Things Glow for fun
💡

            <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

    <button class="glowing-btn">Hover me!</button>
    
    <style>
  .glowing-btn {
    background: rgb(249, 255, 88);
    color: #fff;
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: box-shadow 0.4s, color 0.4s;
    margin: 0 auto;
    position: relative;
    color: black;
}

.glowing-btn:hover {
    box-shadow: 0px 0px 150000px 500px #ff9f10;
    background: linear-gradient(135deg, #ff8a00, #e52e71);
    animation: tada; 
    animation-duration: 1s;
    font-size: larger;
    font-weight: bolder;
    font-family: cursive;
    color: red;
}

.glowing-btn:hover::before {
    content: "💥EXPLOTION!!💥";
    
    
}

.glowing-btn::before {
    content: "Hover to spark me!";
}
    </style>

    <div class="flip-card">
        <div class="flip-card-inner">
            <div class="flip-card-front">
                <img src="images/front.png" style="width:100%;height:100%;" loading="lazy" alt="9">
            </div>
            <div class="flip-card-back">
                <h1>Dummy</h1> 
                <p>Web Developer</p> 
            </div>
        </div>
    </div>
    
    <style>
        .flip-card {
            background-color: transparent;
            width: 300px;
            height: 300px;
            perspective: 1000px;
        }
    
        .flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.8s;
            transform-style: preserve-3d;
        }
    
        .flip-card:hover .flip-card-inner {
            transform: rotateY(180deg);
        }
    
        .flip-card-front, .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
        }
    
        .flip-card-back {
            background-color: #2980b9;
            color: white;
            transform: rotateY(180deg);
        }
    </style>

Dr. Example D. Dummy

The Web Developer Dummy

ABOUT ME

SOME OF MY WORK

Grade Calculator Page🧮

A grade calculator based on my college grading system. It is coded in HTML, CSS, and Pyscript that allows me to calculate my prelim grade in order to know what grade I need in Midterms and Finals to pass the course.

First Page📃

This is my first HTML page, the theme is inspired by The Matrix movie. It explores some key history of computing and IT basics.

Pyscript reflection page🪞

A PyScript project including a reflection from a seminar on data privacy and cyber awareness, along with a PyScript quiz game.

FUN CODES I LEARNED IN WEB DEVELOPING
🖥️

Make an image go dancin' wild
🎉

Making Things Glow for fun
💡

The Truth Card
🃏

Dummy

ABOUT ME

SOME OF MY WORK

Grade Calculator Page🧮

A grade calculator based on my college grading system. It is coded in HTML, CSS, and Pyscript that allows me to calculate my prelim grade in order to know what grade I need in Midterms and Finals to pass the course.

First Page📃

This is my first HTML page, the theme is inspired by The Matrix movie. It explores some key history of computing and IT basics.

Pyscript reflection page🪞

A PyScript project including a reflection from a seminar on data privacy and cyber awareness, along with a PyScript quiz game.

FUN CODES I LEARNED IN WEB DEVELOPING🖥️

Make an image go dancin' wild 🎉

Making Things Glow for fun💡

The Truth Card🃏

Dummy

FUN CODES I LEARNED IN WEB DEVELOPING
🖥️

Make an image go dancin' wild
🎉

Making Things Glow for fun
💡

The Truth Card
🃏