fieldCanvas/index.html at main · CodeByAshuu/fieldCanvas · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas.js - Physics & Canvas Projects Portfolio</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body class="bg-gray-50 font-['Inter']">
    <!-- Header Section -->
    <header class="relative overflow-hidden bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 py-20">
        <!-- Animated Background -->
        <div class="absolute inset-0">
            <div class="absolute top-0 left-0 w-72 h-72 bg-blue-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob"></div>
            <div class="absolute top-0 right-0 w-72 h-72 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-2000"></div>
            <div class="absolute bottom-0 left-1/2 w-72 h-72 bg-pink-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-4000"></div>
        </div>

        <div class="relative z-10 container mx-auto px-4 text-center">
            <h1 class="text-5xl md:text-7xl font-bold text-gray-800 mb-6 tracking-tight">
                Canvas.js
            </h1>
            <p class="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
                Most of the projects here are made for fun. If you like this project, give it a star on GitHub.
            </p>

            <!-- Repo Action Buttons -->
            <div class="flex flex-col sm:flex-row gap-4 justify-center items-center mt-12">
                <a href="https://github.com/CodeByAshuu/fieldCanvas"
                class="group bg-white hover:bg-gray-50 text-gray-900 border-2 border-gray-200 hover:border-gray-300 px-8 py-3 rounded-lg font-medium transition-all duration-300 transform hover:scale-105 hover:shadow-lg flex items-center gap-2">
                   <svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-star" aria-hidden="true">
                        <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path>
                    </svg>
                    Star
                </a>

                <a href="https://github.com/CodeByAshuu/fieldCanvas/fork"
                   class="group bg-white hover:bg-gray-50 text-gray-900 border-2 border-gray-200 hover:border-gray-300 px-8 py-3 rounded-lg font-medium transition-all duration-300 transform hover:scale-105 hover:shadow-lg flex items-center gap-2">
                    <svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-repo-forked" aria-hidden="true">
                        <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path>
                    </svg>
                    Fork
                </a>

                <a href="https://github.com/CodeByAshuu/fieldCanvas/archive/refs/heads/main.zip"
                class="group bg-white hover:bg-gray-50 text-gray-900 border-2 border-gray-200 hover:border-gray-300 px-8 py-3 rounded-lg font-medium transition-all duration-300 transform hover:scale-105 hover:shadow-lg flex items-center gap-2">
                    <svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-mark-github hover:bg-white" aria-hidden="true">
                        <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
                    </svg>
                    Download
                </a>
            </div>
        </div>
    </header>

    <!-- Projects Grid Section -->
    <main class="container mx-auto px-4 py-20">
        <h2 class="text-3xl md:text-4xl font-bold text-gray-800 text-center mb-16">Featured Projects</h2>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Project Card 1: Physics Simulation -->
            <div class="group bg-white rounded-xl shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:scale-105 overflow-hidden">
                <div class="relative overflow-hidden">
                    <img src="assets/cursorInteractiveParticle.png" alt="">
                </div>

                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-800 mb-4">Interactive Cursor Particle</h3>
                    <p class="text-gray-600 mb-6">Interactive physics engine with particle systems, gravity, and collision detection.</p>

                    <div class="flex gap-3">
                        <a href="interactive-particle-cursor/cursorInteracticveParticle.html" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white text-center py-2 px-4 rounded-lg font-medium transition-all duration-300 transform hover:scale-105">
                            Live Demo
                        </a>
                        <a href="https://github.com/CodeByAshuu/fieldCanvas/tree/main/interactive-particle-cursor" class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-700 text-center py-2 px-4 rounded-lg font-medium transition-all duration-300 transform hover:scale-105">
                            Source Code
                        </a>
                    </div>
                </div>
            </div>

            <!-- Project Card 2: Canvas Animation -->
            <div class="group bg-white rounded-xl shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:scale-105 overflow-hidden">
                <div class="relative overflow-hidden">
                    <img src="assets/aerofield.png" alt="">
                </div>

                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-800 mb-4">Aero Field</h3>
                    <p class="text-gray-600 mb-6">Interactive physics playground with wind, gravity, and bouncing effects.</p>

                    <div class="flex gap-3">
                        <a href="aero-field/aero-field.html" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white text-center py-2 px-4 rounded-lg font-medium transition-all duration-300 transform hover:scale-105">
                            Live Demo
                        </a>
                        <a href="https://github.com/CodeByAshuu/fieldCanvas/tree/main/aero-field" class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-700 text-center py-2 px-4 rounded-lg font-medium transition-all duration-300 transform hover:scale-105">
                            Source Code
                        </a>
                    </div>
                </div>
            </div>

            <!-- Project Card 3: Particle System -->
            <div class="group bg-white rounded-xl shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:scale-105 overflow-hidden">
                <div class="relative overflow-hidden">
                    <img src="assets/slingShot.png" alt="">
                </div>

                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-800 mb-4">Sling Shot</h3>
                    <p class="text-gray-600 mb-6">A fun physics-based slingshot simulation with realistic motion and collision effects. Perfect for exploring projectile motion and elasticity concepts.</p>
                    <div class="flex gap-3">
                        <a href="sling-shot/sling-shot.html" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white text-center py-2 px-4 rounded-lg font-medium transition-all duration-300 transform hover:scale-105">
                            Live Demo
                        </a>
                        <a href="https://github.com/CodeByAshuu/fieldCanvas/tree/main/sling-shot" class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-700 text-center py-2 px-4 rounded-lg font-medium transition-all duration-300 transform hover:scale-105">
                            Source Code
                        </a>
                    </div>
                </div>
            </div>

            <!-- Project Card 4: Wave Simulation -->

        </div>
    </main>

    <!-- Footer -->
    <div class="bg-gray-900 text-white py-12 mt-20">
        <div class="container mx-auto px-4 text-center">
            <p class="text-gray-400 pb-4">Built with ❤️ using HTML, CSS, TailwindCSS & JavaScript</p>
            <p class="text-gray-500 text-sm">© 2024 fieldCanvas. All rights reserved.</p>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>