VELORANY

Your hidden vault of projects, open-source codes, and digital footprints.

Live Drawing Canvas

Collaborative Drawing Board

A real-time collaborative drawing canvas where you can create art with others. Draw, sketch, and express your creativity with various tools and colors.

Open in New Tab

Note: The drawing app may take a moment to load. For best experience, use the "Open in New Tab" button.

Live Sessions AI Down

live-sessions.org

Toast-Empire

toast-empire.com

VELORANY Tools & Extensions

KG Colorpicker Extension

Advanced color picking tool for designers and developers. Identify, extract, and save colors from any webpage with ninja precision.

Shadow Guard VPN VPN Service

Currently being revamped. (Offline)

Kage Translator Extension

Instantly translate any selected text or marked area on a webpage to English using advanced AI algorithms.

TE Network Explorer Software

Specialized browser designed to navigate the TE Network and access .TE domains securely and efficiently.

Ninja Crypt Software

Robust encryption software for files and programs. Protect your data with military-grade encryption algorithms.

Code Sensei Extension

Real-time code analysis and improvement suggestions. Learn better coding practices as you write code.

Project Forge Software

Integrated development environment (IDE) tailored for ninja developers. Built-in tools for rapid project creation and deployment.

Stealth Ad-Block Extension

Advanced ad-blocking technology that removes all advertisements without a trace. Browse the web without distractions.

Server Kunai Software

Lightweight server management tool for deploying and monitoring applications. Throw your apps onto servers with precision.

Element Tracker Extension

Track and inspect DOM elements in real-time. Perfect for debugging complex web applications.

Database Scroll Software

Visual database management system that allows you to create, read, update, and delete records with ease.

Performance Sense Extension

Analyze and optimize website performance. Get actionable insights to make your applications faster.

Website Templates

Ready-to-use website templates. Click to view live demos.

sheriii.com

Mock template design - preview only.

HTML5 CSS3 Mock

evilcheerbear.com

Mock template design - preview only.

HTML5 CSS3 Mock

Unknown

Template status: Currently unavailable.

Unknown Down

Website Code Guide

Learn how this website was built and how you can create similar projects

Website Structure Overview

This website is built with modern HTML5, CSS3, and JavaScript. It features a responsive design that works on all devices, with a ninja-themed aesthetic.

The structure follows this pattern:

1. HTML: Defines the structure and content
   - Header with logo and navigation
   - Tabbed content sections
   - Footer

2. CSS: Provides styling and animations
   - Variables for consistent theming
   - Responsive grid layouts
   - Ninja-inspired animations and effects

3. JavaScript: Adds interactivity
   - Tab switching functionality
   - Hover effects and animations
   - Coding challenge execution

Key Design Principles

The website follows these design principles:

- Modular Design: Each section is self-contained
- Consistent Theming: Using CSS variables for colors
- Responsive First: Mobile-friendly from the start
- Performance Focused: Minimal dependencies
- Accessibility: Proper contrast and semantic HTML

Getting Started

To create a similar website:

1. Start with the HTML structure
2. Add global CSS styles
3. Implement tab functionality with JavaScript
4. Add your content sections
5. Customize colors and styling

The following sections break down each part of the code in detail.

HTML Structure

The HTML provides the foundation of the website. It uses semantic tags where possible and follows a logical structure.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VELORANY | Developer Hub</title>
    <!-- Favicon and meta tags -->
    <link rel="icon" type="image/png" href="preview-image.png">
    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@300;400;600;700&display=swap">
    <!-- CSS Styles -->
    <style>
        /* CSS goes here */
    </style>
</head>
<body>
    <!-- Background shapes -->
    <div class="background-shapes">
        <div class="shape shape-1"></div>
        <div class="shape shape-2"></div>
    </div>
    
    <!-- Dust particles -->
    <div class="dust"></div>
    ...
    
    <div class="container">
        <!-- Header with logo -->
        <header>
            <div class="ninja-mask"></div>
            <div class="avatar">
                <i class="fas fa-user-ninja"></i>
            </div>
            <h1>VELORANY</h1>
            <p class="subtitle">Your hidden vault of projects...</p>
        </header>
        
        <!-- Navigation tabs -->
        <div class="ninja-nav">
            <button class="nav-btn active" data-target="projects">
                <i class="fas fa-code"></i> Websites
            </button>
            ...
        </div>
        
        <!-- Content sections -->
        <section id="projects" class="section-container active">
            ...
        </section>
        
        <footer>
            ...
        </footer>
    </div>
    
    <script>
        ...
    </script>
</body>
</html>

Key HTML Features

Important aspects of the HTML structure:

- Semantic Elements: Use of <header>, <section>, <footer>
- Responsive Meta Tag: <meta name="viewport" ...> for mobile
- External Resources: Font Awesome and Google Fonts
- Modular Sections: Each content area is self-contained
- Data Attributes: Used for tab navigation (data-target)

CSS Architecture

The CSS uses a modern approach with CSS variables for consistent theming and a mobile-first responsive design.

/* CSS Variables for theming */
:root {
    --primary: #0a0a0a;
    --secondary: #1a1a1a;
    --accent: #00aaff;
    ...
}

/* Global custom scrollbar – ninja blue everywhere */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--primary);
}
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: var(--primary);
}
*::-webkit-scrollbar-thumb {
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}

/* Dust animation only – no stars */
@keyframes dustFloat {
    0% { transform: translateY(0); opacity: 0.4; }
    100% { transform: translateY(-120vh); opacity: 0; }
}

Responsive Design

The site uses responsive techniques to adapt to different screen sizes:

/* Grid layout for project cards */
.links-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

@media (max-width: 768px) {
    h1 { font-size: 2.3rem; }
    .links-container { grid-template-columns: 1fr; }
}

Core JavaScript Functionality

The JavaScript provides interactivity for tab navigation, animations, and the coding challenges.

// Section navigation for main tabs
document.querySelectorAll('.nav-btn').forEach(button => {
    button.addEventListener('click', () => {
        document.querySelectorAll('.nav-btn').forEach(btn => btn.classList.remove('active'));
        document.querySelectorAll('.section-container').forEach(section => section.classList.remove('active'));
        
        button.classList.add('active');
        const target = button.getAttribute('data-target');
        document.getElementById(target).classList.add('active');
    });
});

// Code guide tabs
document.querySelectorAll('.code-tab').forEach(tab => {
    tab.addEventListener('click', () => {
        ...
    });
});

Customizing the Design

You can easily customize this website by modifying the CSS variables:

/* Change the color scheme */
:root {
    /* Original blue theme */
    --accent: #00aaff;
    
    /* Purple theme example */
    /*
    --accent: #aa00ff;
    */
}

Java, HTML & CSS Challenges

FizzBuzz Challenge

Java Beginner

Write a Java program that prints numbers from 1 to 100. For multiples of 3, print "Fizz"; for multiples of 5, print "Buzz"; for multiples of both 3 and 5, print "FizzBuzz".

Expected Output:

1, 2, Fizz, 4, Buzz, Fizz, 7, 8, Fizz, Buzz, 11, Fizz, 13, 14, FizzBuzz, ...

FizzBuzz.java Java

Ninja Registration Form

HTML Intermediate

Create a responsive ninja registration form with fields for name, email, clan, and weapon preference. Include appropriate input types and styling.

Requirements:

- Name field (text)

- Email field (email)

- Clan selection (dropdown)

- Weapon preferences (checkboxes)

- Submit button

form.html HTML

<!DOCTYPE html>
<html>
<head>
    <title>Ninja Registration</title>
    <style>
        .ninja-form {
            max-width: 500px;
            margin: 0 auto;
            padding: 20px;
            background: #1a1a1a;
            border-radius: 10px;
            color: white;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #93c5fd;
        }
        input, select, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #444;
            border-radius: 5px;
            background: #333;
            color: white;
        }
        button {
            background: #3b82f6;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <form class="ninja-form">
        <div class="form-group">
            <label for="name">Ninja Name</label>
            <input type="text" id="name" required>
        </div>
        <div class="form-group">
            <label for="email">Email</label>
            <input type="email" id="email" required>
        </div>
        <div class="form-group">
            <label for="clan">Clan</label>
            <select id="clan">
                <option>Shadow Leaf</option>
                <option>Silent Water</option>
                <option>Fire Dragon</option>
                <option>Stone Mountain</option>
            </select>
        </div>
        <div class="form-group">
            <label>Weapon Preferences</label>
            <div>
                <input type="checkbox" id="sword"> 
                <label for="sword" style="display:inline">Sword</label>
            </div>
            <div>
                <input type="checkbox" id="shuriken"> 
                <label for="shuriken" style="display:inline">Shuriken</label>
            </div>
            <div>
                <input type="checkbox" id="bow"> 
                <label for="bow" style="display:inline">Bow</label>
            </div>
        </div>
        <button type="submit">Join the Clan</button>
    </form>
</body>
</html>