Code Laboratory | Shasil - Technical Blog & GitHub Showcase

GitHub Activity

Consistent contributions and open-source engagement

Contribution Graph

2025

Less

More

1,247 contributions in the last year View on GitHub

neon-ui-kit

Public

Cyberpunk-themed UI component library with neon glow effects and smooth animations

TypeScript

342

89

React CSS Animation

cyber-terminal

Public

Interactive terminal emulator with cyberpunk aesthetics and command history

JavaScript

256

67

CLI Terminal Interactive

matrix-effects

Public

Collection of Matrix-style visual effects and animations for web applications

CSS

198

45

Animation Effects Visual

Featured Code Snippets

Reusable code examples with cyberpunk aesthetics

neon-button.tsx

import React from 'react';

interface NeonButtonProps {
  label: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary';
}

export const NeonButton: React.FC<NeonButtonProps> = ({
  label,
  onClick,
  variant = 'primary'
}) => {
  return (
    <button
      onClick={onClick}
      className={`neon-btn neon-btn-${variant}`}
    >
      {label}
    </button>
  );
};

React TypeScript

glow-effect.css

/* Neon Glow Animation */
@keyframes neon-pulse {
  0%, 100% {
    box-shadow:
      0 0 10px rgba(168, 85, 247, 0.3),
      0 0 20px rgba(168, 85, 247, 0.2),
      0 0 30px rgba(168, 85, 247, 0.1);
  }
  50% {
    box-shadow:
      0 0 20px rgba(168, 85, 247, 0.5),
      0 0 40px rgba(168, 85, 247, 0.3),
      0 0 60px rgba(168, 85, 247, 0.2);
  }
}

.neon-element {
  animation: neon-pulse 2s ease-in-out infinite;
  border: 2px solid #a855f7;
  border-radius: 8px;
  transition: all 0.3s ease;
}

CSS Animation

Technical Blog

Development tutorials and insights with cyberpunk-themed examples

Code editor displaying colorful syntax highlighting with cyberpunk neon theme on dark background

Dec 20, 2025 • 8 min read

Building Neon UI Components with React

Learn how to create stunning cyberpunk-themed UI components using React and CSS animations. Complete with code examples and live demos.

React CSS Tutorial

Advanced Terminal Animations with JavaScript

Deep dive into creating interactive terminal experiences with smooth animations, command history, and cyberpunk styling effects.

JavaScript Animation Advanced

Performance Optimization for Neon Effects

Techniques for maintaining 60fps animations while implementing complex glow effects and visual enhancements in web applications.

Performance Optimization CSS

Code Playground

Test and experiment with code snippets in real-time

Editor

playground.js

// Neon Button Example
const button = document.createElement('button');
button.textContent = 'Click Me!';
button.className = 'neon-btn';
button.style.cssText = `
  padding: 12px 24px;
  background: #a855f7;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
  transition: all 0.3s ease;
`;

button.addEventListener('mouseover', () => {
  button.style.transform = 'scale(1.05)';
  button.style.boxShadow = '0 0 30px rgba(168, 85, 247, 0.8)';
});

button.addEventListener('mouseout', () => {
  button.style.transform = 'scale(1)';
  button.style.boxShadow = '0 0 20px rgba(168, 85, 247, 0.5)';
});

document.body.appendChild(button);

Output

Click "Run Code" to see output

Console

▊ Ready to execute...

Community & Recognition

Speaking engagements, open-source contributions, and industry recognition

12+

Speaking Engagements

50+

Open Source Projects

8

Industry Awards

Ready to Collaborate?

Let's build something amazing together. Explore more projects or get in touch to discuss your next digital experience.

View Projects Contact Me