Skip to content

Instantly share code, notes, and snippets.

@cgonzalezdai

cgonzalezdai/como-subir-un-proyecto-local-a-github.md

Last active October 18, 2025 21:59
Show Gist options
  • Save cgonzalezdai/cc33db72a6fe5178637aabb562eae35c to your computer and use it in GitHub Desktop.
Save cgonzalezdai/cc33db72a6fe5178637aabb562eae35c to your computer and use it in GitHub Desktop.
Download ZIP
Como subir un proyecto local a github
Raw
como-subir-un-proyecto-local-a-github.md

Como subir un proyecto local a github.

desde la web de github

Creamos un nuevo repositorio en https://github.com. Le damos nombre, descripción, seleccionamos si va a ser un proyecto publico o privado si es el caso, y dejamos el check de crear README sin marcar. Le damos a crear repositorio y con esto ya tenemos el repositorio donde alojaremos nuestro proyecto.

desde la terminal del equipo donde esta el proyecto que queremos subir a github

Nos vamos a la carpeta del proyecto y ejecutamos estos comandos.

git init

git add .

git commit -m "first commit"

git remote add origin https://github.com/NOMBRE_USUARIO/NOMBRE_PROYECTO.git

git push -u origin master
@cuateXDff
Copy link

<title>Corazones❤️</title> <style> :root { --color-fondo: #1a1a1a; --rojo-inicio: 130; --verde-inicio: 5; --azul-inicio: 5; --rojo-final: 255; --verde-final: 20; --azul-final: 20; --borde-r: 255; --borde-g: 150; --borde-b: 150; } 
    html, body {
        height: 100%;
        margin: 0;
        overflow: hidden;
    }

    body {
        background-color: var(--color-fondo);
        background-image: url('https://www.dropbox.com/scl/fi/ndokeh4aidbsuywhfxqs4/back.webp?rlkey=uqmy2vg3togzf5jf4uhs0hj2v&st=2fneoumd&raw=1');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed; 
    }

    .loading-screen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--color-fondo);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        transition: opacity 0.5s ease-out;
    }

    .loading-screen.hidden {
        opacity: 0;
        pointer-events: none;
    }

    .loading-heart {
        font-size: 4rem;
        color: #ff2d2d;
        margin-bottom: 2rem;
        animation: heartbeat 1.5s ease-in-out infinite;
    }

    .loading-bar-container {
        width: 300px;
        height: 8px;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        overflow: hidden;
        box-shadow: 0 0 10px rgba(255, 45, 45, 0.3);
    }

    .loading-bar {
        height: 100%;
        background: linear-gradient(90deg, #ff2d2d, #ff6666, #ff2d2d);
        border-radius: 4px;
        width: 0%;
        transition: width 0.3s ease;
        box-shadow: 0 0 20px rgba(255, 45, 45, 0.6);
    }

    .loading-text {
        color: #fff;
        font-family: 'Great Vibes', cursive;
        font-size: 1.5rem;
        margin-top: 1rem;
        text-shadow: 0 0 10px rgba(255, 45, 45, 0.5);
    }

    @keyframes heartbeat {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.2); }
    }
    
    canvas {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .text-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        pointer-events: none;
        text-align: center;
    }

    #main-text {
        font-family: 'Great Vibes', cursive;
        font-size: 15vw;
        color: #fff;
        margin: 0;
        font-weight: normal;
        text-shadow:
            0 0 7px #fff, 0 0 10px #fff,
            0 0 21px #fff, 0 0 42px #ff2d2d,
            0 0 82px #ff2d2d, 0 0 92px #ff2d2d,
            0 0 102px #ff2d2d, 0 0 151px #ff2d2d;
    }

    @media (max-width: 768px) {
        body {
            background-attachment: scroll;
        }

        .loading-heart { font-size: 3rem; }
        .loading-bar-container { width: 250px; }
        .loading-text { font-size: 1.2rem; }
        
        #main-text {
            text-shadow:
                0 0 5px #fff,
                0 0 15px #ff2d2d,
                0 0 30px #ff2d2d;
        }
    }
    
    @media (min-width: 768px) {
        #main-text {
            font-size: 10rem;
        }
    }
</style>
♥
Cargando...
<canvas id="heartsCanvas"></canvas>
<div class="text-container">
    <h1 id="main-text">I love you</h1>
</div>
<script>
    function loadBackgroundImage() {
        return new Promise((resolve, reject) => {
            const img = new Image();
            img.onload = () => resolve(img);
            img.onerror = () => reject(new Error('Error al cargar la imagen'));
            img.src = 'https://www.dropbox.com/scl/fi/ndokeh4aidbsuywhfxqs4/back.webp?rlkey=uqmy2vg3togzf5jf4uhs0hj2v&st=2fneoumd&raw=1';
        });
    }

    function simulateLoading() {
        const loadingBar = document.getElementById('loadingBar');
        const loadingScreen = document.getElementById('loadingScreen');
        let progress = 0;
        
        const updateProgress = () => {
            progress += Math.random() * 15;
            if (progress > 100) progress = 100;
            loadingBar.style.width = progress + '%';
            
            if (progress < 100) {
                setTimeout(updateProgress, 100 + Math.random() * 200);
            } else {
                setTimeout(() => {
                    loadingScreen.classList.add('hidden');
                    setTimeout(() => {
                        loadingScreen.style.display = 'none';
                    }, 500);
                }, 300);
            }
        };
        
        updateProgress();
    }

    window.addEventListener('load', () => {
        Promise.all([
            loadBackgroundImage(),
            new Promise(resolve => setTimeout(resolve, 1000))
        ]).then(() => {
            simulateLoading();
        }).catch(() => {
            simulateLoading();
        });
    });

    const canvas = document.getElementById('heartsCanvas');
    const ctx = canvas.getContext('2d');
    const rootStyles = getComputedStyle(document.documentElement);

    const isMobile = window.innerWidth < 768;

    const settings = {
        numHearts: isMobile ? 50 : 140,
        minSize: isMobile ? 30 : 40,
        maxSize: isMobile ? 100 : 150
    };

    const BASE_HEIGHT = 1080;
    let scaleFactor = 1;

    function getColorVars() {
        return {
            r_start: parseInt(rootStyles.getPropertyValue('--rojo-inicio')),
            g_start: parseInt(rootStyles.getPropertyValue('--verde-inicio')),
            b_start: parseInt(rootStyles.getPropertyValue('--azul-inicio')),
            r_end: parseInt(rootStyles.getPropertyValue('--rojo-final')),
            g_end: parseInt(rootStyles.getPropertyValue('--verde-final')),
            b_end: parseInt(rootStyles.getPropertyValue('--azul-final')),
            spec_r: parseInt(rootStyles.getPropertyValue('--borde-r')),
            spec_g: parseInt(rootStyles.getPropertyValue('--borde-g')),
            spec_b: parseInt(rootStyles.getPropertyValue('--borde-b')),
        };
    }

    function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        if (!isMobile) {
            scaleFactor = canvas.height / BASE_HEIGHT;
        } else {
            scaleFactor = 1;
        }
    }
    window.addEventListener('resize', resizeCanvas);
    resizeCanvas();

    class Heart {
        constructor() { this.reset(true); }
        reset(isInitial = false) {
            const baseSize = Math.random() * (settings.maxSize - settings.minSize) + settings.minSize;
            this.size = baseSize * scaleFactor;

            const normalizedSize = (baseSize - settings.minSize) / (settings.maxSize - settings.minSize);
            this.opacity = 0.4 + normalizedSize * 0.6;
            this.x = Math.random() * canvas.width;
            this.y = isInitial ? Math.random() * (canvas.height + this.size * 2) - this.size : canvas.height + this.size;
            this.speed = (0.8 + normalizedSize * 2.5) * scaleFactor;
            this.angle = (Math.random() * 90 - 45) * (Math.PI / 180);
            const colors = getColorVars();
            const t = normalizedSize;
            const r = Math.floor(colors.r_start + t * (colors.r_end - colors.r_start));
            const g = Math.floor(colors.g_start + t * (colors.g_end - colors.g_start));
            const b = Math.floor(colors.b_start + t * (colors.b_end - colors.b_start));
            this.lightColor = `rgba(${Math.min(255,r+120)}, ${Math.min(255,g+120)}, ${Math.min(255,b+120)}, ${this.opacity})`;
            this.darkColor = `rgba(${Math.max(0,r-60)}, ${Math.max(0,g-60)}, ${Math.max(0,b-60)}, ${this.opacity})`;
            this.specularColor = `rgba(${colors.spec_r}, ${colors.spec_g}, ${colors.spec_b}, ${this.opacity * 0.7})`;
        }
        draw() {
            ctx.save();
            ctx.translate(this.x, this.y);
            ctx.rotate(this.angle);
            ctx.scale(this.size / 150, this.size / 150);
            const gradient = ctx.createLinearGradient(-40, -40, 40, 40);
            gradient.addColorStop(0, this.lightColor);
            gradient.addColorStop(1, this.darkColor);
            
            if (!isMobile) {
                ctx.shadowColor = 'rgba(0, 0, 0, 0.7)';
                ctx.shadowBlur = 15;
                ctx.shadowOffsetX = 8;
                ctx.shadowOffsetY = 8;
            }
            
            ctx.beginPath();
            ctx.moveTo(0, -25);
            ctx.bezierCurveTo(20, -50, 60, -40, 60, 0);
            ctx.bezierCurveTo(60, 50, 10, 70, 0, 80);
            ctx.bezierCurveTo(-10, 70, -60, 50, -60, 0);
            ctx.bezierCurveTo(-60, -40, -20, -50, 0, -25);
            ctx.fillStyle = gradient;
            ctx.fill();

            if (!isMobile) {
                ctx.strokeStyle = this.specularColor;
                ctx.lineWidth = 2;
                ctx.stroke();
            }
            
            ctx.closePath();
            ctx.restore();
        }
        update() {
            this.x += Math.sin(this.angle) * this.speed;
            this.y -= Math.cos(this.angle) * this.speed;
            if (this.y < -this.size * 2 || this.x < -this.size * 2 || this.x > canvas.width + this.size * 2) {
                this.reset();
            }
        }
    }

    const hearts = [];
    for (let i = 0; i < settings.numHearts; i++) {
        hearts.push(new Heart());
    }

    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        hearts.sort((a, b) => a.size - b.size);
        hearts.forEach(heart => { heart.update(); heart.draw(); });
        requestAnimationFrame(animate);
    }

    animate();
</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment