rush-code-canvas/index.html at main · rushrushi/rush-code-canvas · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Designs</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="top">
        <div class="logo">
            <a href="#home" id="logo">Code<span>Canvas</span></a>
        </div>
        <nav>
            <a href="#home">Home</a>
            <a href="#designs">Designs</a>
            <a href="#about">About</a>
        </nav>
    </div>
    <div class="landing_page pages" id="home">
        <div class="center">
            <h3>
                Welcome to
                <span>
                    CodeCanvas
                </span>
            </h3>
            <div class="tag">
                <h6 class="tagline">An archive of what i imagine.</h6>
            </div>
        </div>
    </div>


    <div id="designs" class="pages">
        <div class="main">
            <h1 id="out">Designs</h1>
            <div class="sidebar">
            <div class="heading">
                <!-- <h1>Designs</h1> -->
            </div>
                <ul>
                    <li>
                        <a href="#loader">Loader</a>
                    </li>
                    <li>
                        <a href="#canvas">3D Orbit Web</a>
                    </li>
                    <li>
                        <a href="#tail">Mouse Tail</a>
                    </li>
                </ul>
            </div>
            <div class="codes">
                <h2  id="loader" style="margin-top: 10px">Loader</h2>
                <div class="container">
                    <div class="btn">
                        <button id="code">code</button>
                        <button id="preview">preview</button>
                    </div>
                    <div class="content">
                        <div class="loader">
                            <div class="loading"> </div>
                        </div>
                    </div>
                </div>
                <h2 id="canvas">3D Orbit Web</h2>
                <div class="container">
                    <div class="btn canvas_btn">
                        <button id="canvas_code">code</button>
                        <button id="canvas_preview">preview</button>
                    </div>
                    <div class="content canvas">
                        <canvas id="draw"></canvas>
                    </div>
                </div>
                <h2 id="tail">Mouse Tail</h2>
                <div class="container">
                    <div class="btn tail_btn">
                        <button id="tail_code">code</button>
                        <button id="tail_preview">preview</button>
                    </div>
                    <div class="content tail">
                        <h4>
                            Move your cursor here!
                        </h4>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- <div class="about pages">
        <section id="about" class="about-section">
            <h1>About CodeCanvas</h1>
            <p>
                <strong>CodeCanvas</strong> is a digital space built for creative coders, designers, and enthusiasts who believe
                design is not just visuals — it's an experience.
            </p>
            <p>
                From 3D loaders to orbiting web structures, every design you see here is handcrafted with code and vision. We
                mix aesthetic with function — pixel by pixel, frame by frame.
            </p>
            <p>
                Started as a personal side-project, CodeCanvas now showcases evolving UI concepts that break patterns and push
                boundaries — mostly for fun, sometimes for the future.
            </p>
            <p>
                Whether you're a developer looking for inspiration, or just someone who loves to see what's possible in a
                browser — welcome to the canvas.
            </p>
        </section>
    </div> -->

    <div class="about pages">
        <section id="about" class="about-section">
            <h1>About CodeCanvas</h1>
            <p>
                <strong>CodeCanvas</strong> is my personal playground for creative web design, a space where code becomes
                art, and every interaction tells a story.
            </p>
            <p>
                All the designs you see here 'from floating 3D loaders to animated layouts' are original works I’ve built
                from the ground up using tools like <strong>HTML</strong>, <strong>CSS</strong>,
                <strong>JavaScript</strong>, <strong>GSAP</strong>, and <strong>Three.js</strong>.
            </p>
            <p>
                This isn't a community project or open design platform, it's a curated collection of my ideas, experiments,
                and inspirations. Only I can upload, modify, or remove content. Visitors can explore the designs, see how
                they work, and copy the source code for learning or reuse.
            </p>
            <p>
                CodeCanvas is constantly evolving, sometimes pushing boundaries, sometimes just having fun. If you're here
                to get inspired or curious about how far the browser can stretch, you're in the right place.
            </p>
            <p>
                Want to stay connected or see more of my work? <a href="https://github.com/rushrushi"
                    target="_blank">Follow me on GitHub</a>.
            </p>
        </section>
    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.0/three.min.js"
        integrity="sha512-vnmn/Qqn6aG0POAc9mIGzjq0IybrvxJXYDafNvp9JSnDGxeF3pbkSqLvf+YGd5ku63pT7sa/jxHn7/d0mU8+tA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="script.js"></script>
</body>
</html>