DEV Community: Sithuni Nudara

Coding the Balance: Visualizing Gender Equity Through Frontend Art

Sithuni Nudara — Mon, 09 Mar 2026 09:20:52 +0000

This is a submission for the 2026 WeCoded Challenge: Frontend Art

Inspiration
For this challenge, I wanted to move beyond static images and use code to represent the weightless, yet powerful nature of equity. The concept is "Anti-Gravity Equity." In the tech industry, we often talk about the "glass ceiling." In this piece, I visualized the ceiling not just as a barrier to be broken, but as something that, once shattered, allows everyone to rise. I used floating elements and CSS animations to create a sense of weightlessness—representing a world where your gender doesn't "weight down" your career path.

The central focus is a balanced scale, built entirely with frontend logic (Flexbox and Grid), symbolizing that true balance is a deliberate architectural choice we make when building our communities.

My Code
The logic for the animations and the layout can be found in my repository here:

GitHub Repository: sithunitestings-source/Frontend-Art

I used a combination of:

CSS Keyframes: To create the drifting, anti-gravity effect for the UI components.

SVG & Clip-path: To design the "shattered glass" fragments that react to user interaction.

Flexbox: To ensure the "Balance" remains perfect across all screen sizes.

From Yellow Blocks to Backend Logic: My Journey of Staying "Updated"

Sithuni Nudara — Mon, 09 Mar 2026 08:36:03 +0000

This is a submission for the 2026 WeCoded Challenge: Echoes of Experience

The Spark: It All Started with a Block
If you told my younger self that I’d be building backend systems today, I probably would have laughed. My journey didn’t start with complex algorithms or black-and-white terminal screens. It started with a bright yellow block on Scratch.

I remember the pure joy of snapping those logic blocks together to make a character move or a game come to life. What started as "just for fun" quickly turned into an addiction. By the time I chose ICT for high school in Sri Lanka, coding wasn't just a subject—it was my favorite hobby. Today, as a Software Engineering student, that hobby has become my career. The most important thing I’ve learned is simple: Do what you love, and it will make you shine. When you’re passionate, the late nights feel less like work and more like an adventure.

The Challenge: The Mental "Context Switch"
As an underrepresented developer, I often felt I had to be a walking encyclopedia of code to prove I belonged. One of the hardest challenges I faced wasn't logic—it was syntax fatigue.

When you are learning and working across multiple languages, switching from the structure of Java to the web-logic of PHP or C#, your brain starts to feel like a browser with too many tabs open. It’s hard to remember every semicolon and bracket perfectly. The pressure to stay "constantly updated" is exhausting. Sometimes, when you focus so hard on mastering one language, the others start to feel like a foreign tongue again. Being in "always-on" mode is the silent hurdle many of us face.

The Lesson: Adaptability is the New Superpower
Through this journey, I’ve realized that being a developer isn't about memorizing a textbook. Whether I’m learning from a YouTube tutorial or a structured curriculum, the most vital lesson is this: Technology doesn't stand still, and neither can we.

In 2026, the game has changed. It’s no longer just about writing lines of code; it’s about adaptability. We have to learn how to dance with AI, how to use AI-integrated IDEs to bridge the gap in our memory, and how to stay updated without burning out.

To anyone out there who wants to be a full-stack developer, don't worry if you can't remember every bit of syntax. Focus on the logic, stay curious, and pick courses that look toward the future, not the past. If you can adapt, you can survive and thrive in this industry.

3D Cyber Clock

Sithuni Nudara — Wed, 18 Feb 2026 19:46:18 +0000

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRYSTAL CYBER · 3D ROUND CLOCK</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
        }

        body {
            min-height: 100vh;
            background: radial-gradient(circle at 30% 30%, #0b0f1c, #03050a);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Segoe UI', 'Avenir', 'Inter', system-ui, sans-serif;
            overflow: hidden;
            position: relative;
        }

        /* animated cyber background (time animation) */
        .cyber-bg {
            position: absolute;
            inset: 0;
            z-index: 0;
            opacity: 0.5;
            background: repeating-linear-gradient(0deg, 
                rgba0,255,255,0.02 0px, 
                rgba0,255,255,0.05 2px, 
                transparent 2px, 
                transparent 8px),
                repeating-linear-gradient(90deg, 
                rgba170, 0, 255, 0.02 0px, 
                rgba0, 255, 255, 0.03 3px, 
                transparent 3px, 
                transparent 12px);
            animation: bg-scroll 20s linear infinite;
            pointer-events: none;
        }

        @keyframes bg-scroll {
            0% { background-position: 0 0, 0 0; }
            100% { background-position: 40px 60px, -60px 40px; }
        }

        /* floating particles (extra magic) */
        .bg-particles {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        .bg-particles span {
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba0, 255, 255, 0.25;
            box-shadow: 0 0 12px #0ff, 0 0 20px #2ca0ff;
            border-radius: 50%;
            animation: float-particle 18s infinite alternate ease-in-out;
        }

        @keyframes float-particle {
            0% { transform: translate(0, 0) scale(1); opacity: 0.3; }
            100% { transform: translate(40px, -60px) scale(1.8); opacity: 0; }
        }

        /* main container – movable 3d effect */
        .clock-container {
            position: relative;
            z-index: 30;
            transform-style: preserve-3d;
            transform: perspective(1200px) rotateX(4deg) rotateY(6deg) translateZ(20px);
            transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
            cursor: default;
            filter: drop-shadow(0 20px 30px #00000070);
        }

        .clock-container:hover {
            transform: perspective(1000px) rotateX(2deg) rotateY(12deg) translateZ(30px);
        }

        /* 3D glass ring + numbers */
        .round-clock {
            --glow: 0 0 30px #00ffff88, 0 0 70px #00a3ff66;
            --dark-cyan: #0e4b5e;
            --crystal-light: #b5f0ff;
            width: 360px;
            height: 360px;
            border-radius: 50%;
            background: radial-gradient(circle at 28% 30%, 
                rgba(20, 80, 100, 0.7) 5%, 
                #131f2b 60%,
                #0b141c 95%);
            box-shadow: 
                inset -6px -10px 20px rgba0,0,0,0.9,
                inset 15px 15px 30px rgba(170, 240, 255, 0.4),
                0 0 0 2px rgba(0, 255, 255, 0.3) inset,
                0 0 0 4px rgba(20, 40, 50, 0.8),
                0 20px 35px #000000cc,
                var(--glow);
            position: relative;
            backdrop-filter: blur(2px);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: box-shadow 0.4s, background 0.3s;
        }

        /* hover = light mode / cyan explosion */
        .round-clock:hover {
            --glow: 0 0 40px cyan, 0 0 100px #7ff0ff, 0 0 150px #2ad4ff;
            background: radial-gradient(circle at 30% 30%, 
                rgba(150, 250, 255, 0.4) 5%, 
                #1e3b48 50%,
                #0b1a24 95%);
            box-shadow: 
                inset -6px -10px 20px #000000aa,
                inset 20px 20px 40px #d0f4ff,
                0 0 0 3px #4ff5ff inset,
                0 0 0 5px #0099aa33,
                0 25px 45px #000,
                var(--glow);
        }

        /* crystal 3D facets (glass layers) */
        .clock-facet {
            position: absolute;
            inset: 8px;
            border-radius: 50%;
            background: repeating-conic-gradient(
                from 45deg,
                rgba(170, 240, 255, 0.05) 0deg 10deg,
                rgba(10, 30, 40, 0.3) 10deg 20deg,
                transparent 20deg 30deg
            );
            pointer-events: none;
            border: 1px solid rgba(0, 255, 255, 0.2);
            box-shadow: 0 0 20px rgba(0, 200, 210, 0.3) inset;
        }

        .clock-facet::after {
            content: '';
            position: absolute;
            inset: 20px;
            border-radius: 50%;
            background: radial-gradient(circle at 40% 40%, rgba(255,255,255,0.2) 2px, transparent 30%);
            opacity: 0.6;
        }

        /* digital numbers (cyan, mixed with gray/black crystal) */
        .digital-display {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 220px;
            height: 220px;
            background: rgba(8, 18, 28, 0.5);
            backdrop-filter: blur(4px);
            border-radius: 50%;
            border: 2px solid rgba(0, 255, 255, 0.25);
            box-shadow: 0 0 40px #0ff3, 0 0 20px #2e5f6b inset;
            transform: translateZ(12px);
            transition: all 0.2s;
        }

        .round-clock:hover .digital-display {
            background: rgba(20, 40, 50, 0.4);
            border: 2px solid #aaffff;
            box-shadow: 0 0 70px cyan, 0 0 30px #3ff inset;
        }

        .time {
            font-size: 3.6rem;
            font-weight: 400;
            letter-spacing: 6px;
            color: #00ffff;
            text-shadow: 0 0 12px cyan, 0 0 30px #0077ff, 0 0 45px #004466;
            font-family: 'Orbitron', 'Courier New', monospace;
            background: linear-gradient(135deg, #a0f0ff 20%, #38858f 70%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            transition: text-shadow 0.3s;
            line-height: 1.2;
        }

        .round-clock:hover .time {
            text-shadow: 0 0 20px #f0fdff, 0 0 50px #3cc, 0 0 80px #0ff;
            background: linear-gradient(135deg, #efff ff 10%, #6ff0ff 90%);
            -webkit-background-clip: text;
            background-clip: text;
        }

        .date {
            font-size: 1.1rem;
            letter-spacing: 3px;
            color: #6baeb6;
            text-shadow: 0 0 10px #0ff;
            background: #121e24b3;
            padding: 4px 16px;
            border-radius: 40px;
            margin-top: 8px;
            backdrop-filter: blur(2px);
            border: 1px solid #2a8a9a;
            font-weight: 300;
            transition: 0.3s;
        }

        .round-clock:hover .date {
            background: #16363f;
            color: #e0ffff;
            border-color: cyan;
            box-shadow: 0 0 20px cyan;
        }

        /* seconds弧形指示 (extra cyber) */
        .second-ring {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            transform: rotate(-90deg);
        }

        .second-ring circle {
            fill: none;
            stroke-width: 5;
            stroke: #0ff;
            filter: drop-shadow(0 0 15px cyan);
            stroke-linecap: round;
            stroke-dasharray: 879.2; /* circumference for r=140 ~ 879.2 */
            stroke-dashoffset: 879.2;
            transition: stroke-dashoffset 0.1s linear;
        }

        .second-ring-bg {
            stroke: rgba0, 180, 200, 0.25;
            stroke-width: 5;
            fill: none;
        }

        /* 3D movable base reflection */
        .glass-reflection {
            position: absolute;
            top: 10%;
            left: 15%;
            width: 40%;
            height: 20%;
            background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.3) 0%, transparent 70%);
            border-radius: 50%;
            filter: blur(8px);
            mix-blend-mode: overlay;
            pointer-events: none;
        }

        .glass-reflection2 {
            bottom: 15%;
            right: 10%;
            width: 30%;
            height: 15%;
            background: radial-gradient(ellipse, #6fffff40, transparent 80%);
            position: absolute;
            filter: blur(12px);
            border-radius: 50%;
        }

        /* movable control: subtle rotate on mousemove */
        .clock-container.movable {
            transition: transform 0.08s;
        }

        footer {
            position: absolute;
            bottom: 16px;
            color: #1d7c84;
            font-size: 0.8rem;
            text-shadow: 0 0 4px cyan;
            z-index: 40;
            letter-spacing: 2px;
        }
    </style>
</head>
<body>
    <div class="cyber-bg"></div>
    <div class="bg-particles" id="particles"></div>

    <div class="clock-container" id="clockContainer">
        <div class="round-clock" id="roundClock">
            <!-- 3d crystal facets -->
            <div class="clock-facet"></div>
            <!-- seconds progress ring (svg) -->
            <svg class="second-ring" viewBox="0 0 360 360" width="360" height="360">
                <circle class="second-ring-bg" cx="180" cy="180" r="160" stroke="#097a8f55" stroke-width="6" fill="none"/>
                <circle id="secCircle" cx="180" cy="180" r="160" stroke="#0ff" stroke-width="8" fill="none" 
                    stroke-dasharray="1005.3" stroke-dashoffset="1005.3" style="filter: drop-shadow(0 0 25px cyan);" />
            </svg>
            <!-- digital core -->
            <div class="digital-display">
                <div class="time" id="timeDisplay">23:15</div>
                <div class="date" id="dateDisplay">2025-04-07</div>
            </div>
            <!-- extra glass glitter -->
            <div class="glass-reflection"></div>
            <div class="glass-reflection2"></div>
        </div>
    </div>

    <footer>❖ C R Y S T A L   C Y B E R   3 D ❖</footer>

    <script>
        (function() {
            // particles background magic
            const particleContainer = document.getElementById('particles');
            for (let i = 0; i < 36; i++) {
                let span = document.createElement('span');
                let size = Math.random() * 6 + 2;
                span.style.width = size + 'px';
                span.style.height = size + 'px';
                span.style.left = Math.random() * 100 + '%';
                span.style.top = Math.random() * 100 + '%';
                span.style.animationDelay = Math.random() * 15 + 's';
                span.style.animationDuration = 10 + Math.random() * 20 + 's';
                span.style.background = i % 3 === 0 ? '#7ff5ff' : '#3ea0cc';
                span.style.boxShadow = `0 0 30px #0ff, 0 0 50px #1fa0ff`;
                particleContainer.appendChild(span);
            }

            // time update + animation
            const timeEl = document.getElementById('timeDisplay');
            const dateEl = document.getElementById('dateDisplay');
            const secCircle = document.getElementById('secCircle');

            function updateClock() {
                const now = new Date();
                const hours = now.getHours().toString().padStart(2, '0');
                const minutes = now.getMinutes().toString().padStart(2, '0');
                const seconds = now.getSeconds();
                timeEl.textContent = `${hours}:${minutes}`;

                const year = now.getFullYear();
                const month = (now.getMonth() + 1).toString().padStart(2, '0');
                const day = now.getDate().toString().padStart(2, '0');
                dateEl.textContent = `${year}-${month}-${day}`;

                // update second ring (circumference for r=160 = 2*pi*160 ≈ 1005.3)
                const radius = 160;
                const circumference = 2 * Math.PI * radius; // ~1005.3
                const offset = circumference - (seconds / 60) * circumference;
                secCircle.style.strokeDasharray = `${circumference}`;
                secCircle.style.strokeDashoffset = offset;
            }
            updateClock();
            setInterval(updateClock, 500);

            // 3D movable effect: follow cursor
            const container = document.getElementById('clockContainer');
            const roundClock = document.getElementById('roundClock');
            let bounds = container.getBoundingClientRect();
            let mouseX = 0, mouseY = 0;
            let currentRotateX = 4, currentRotateY = 6; // initial values
            const factor = 0.04; // sensitivity

            window.addEventListener('resize', () => {
                bounds = container.getBoundingClientRect();
            });

            document.addEventListener('mousemove', (e) => {
                // relative position to window
                const centerX = window.innerWidth / 2;
                const centerY = window.innerHeight / 2;

                // offset from center (-1..1)
                const normX = (e.clientX - centerX) / centerX;
                const normY = (e.clientY - centerY) / centerY;

                // target rotation angles (max ±12°)
                const targetRotateY = 6 + normX * 8;   // horizontal tilt
                const targetRotateX = 4 - normY * 6;   // vertical tilt

                // smooth-ish update
                currentRotateX += (targetRotateX - currentRotateX) * 0.1;
                currentRotateY += (targetRotateY - currentRotateY) * 0.1;

                container.style.transform = `perspective(1200px) rotateX(${currentRotateX}deg) rotateY(${currentRotateY}deg) translateZ(20px)`;
            });

            // extra hover light effect: but we keep hover in css, fine.
            // also add dynamic shadow enhancement on hover
            roundClock.addEventListener('mouseenter', () => {
                // optional: we could add class, but css handles it.
            });

            // add magic floating animation on digits randomly (extra spark)
            setInterval(() => {
                if (Math.random() > 0.7) {
                    timeEl.style.transform = `scale(${1 + Math.random() * 0.1})`;
                    timeEl.style.transition = 'transform 0.15s cubic-bezier(0.2,1,0.5,1)';
                    setTimeout(() => {
                        timeEl.style.transform = 'scale(1)';
                    }, 150);
                }
            }, 800);

            // also change the color of date for micro interaction
            setInterval(() => {
                if (Math.random() > 0.85) {
                    dateEl.style.textShadow = '0 0 18px #f0f, 0 0 30px #0ff';
                    dateEl.style.transition = '0.1s';
                    setTimeout(() => {
                        dateEl.style.textShadow = '0 0 10px #0ff';
                    }, 120);
                }
            }, 1300);
        })();
    </script>
    <!-- optional font for better digits -->
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500&display=swap" rel="stylesheet">
</body>
</html>