-
Notifications
You must be signed in to change notification settings - Fork 4
Expand file tree
/
Copy pathindex.html
More file actions
153 lines (126 loc) · 6.14 KB
/
index.html
File metadata and controls
153 lines (126 loc) · 6.14 KB
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
152
153
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com; img-src 'self' data: https:; font-src 'self' data: https://cdnjs.cloudflare.com; media-src 'self' data:; connect-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'self'; form-action 'self'; upgrade-insecure-requests" />
<title>Open Source Mini Projects</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="3d-effects.css" />
</head>
<body class="home-page">
<div class="home-scene" aria-hidden="true">
<span class="scene-blob scene-blob-a" data-depth style="--depth-factor: 1.15; --layer-z: 120px;"></span>
<span class="scene-blob scene-blob-b" data-depth style="--depth-factor: 0.85; --layer-z: 90px;"></span>
<span class="scene-blob scene-blob-c" data-depth style="--depth-factor: 1.45; --layer-z: 150px;"></span>
<span class="scene-ring scene-ring-a" data-depth style="--depth-factor: 0.45; --layer-z: 50px;"></span>
<span class="scene-ring scene-ring-b" data-depth style="--depth-factor: 0.62; --layer-z: 72px;"></span>
<span class="scene-grid" data-depth style="--depth-factor: 0.28; --layer-z: 24px;"></span>
</div>
<div id="navbar"></div>
<section class="hero">
<div class="hero-panel">
<div class="hero-copy">
<h2 data-motion="stagger" data-stagger="letters" data-motion-on="load">Build. Share. Grow. Together.</h2>
<p data-motion="slide" data-motion-on="load" data-motion-delay="220ms">
Anyone can contribute by adding mini projects inside the projects folder 💖
</p>
</div>
<div class="hero-depth" aria-hidden="true">
<span class="hero-orb hero-orb-a" data-depth style="--depth-factor: 0.9; --layer-z: 70px;"></span>
<span class="hero-orb hero-orb-b" data-depth style="--depth-factor: 0.55; --layer-z: 40px;"></span>
<div class="hero-glass-card" data-home-tilt>
<span class="hero-chip">Pastel UI</span>
<span class="hero-chip">3D Depth</span>
<span class="hero-chip">Open Source</span>
</div>
</div>
</div>
</section>
<section class="projects">
<div class="projects-stage" aria-hidden="true">
<span class="projects-stage-line projects-stage-line-a" data-depth style="--depth-factor: 0.42; --layer-z: 34px;"></span>
<span class="projects-stage-line projects-stage-line-b" data-depth style="--depth-factor: 0.65; --layer-z: 54px;"></span>
</div>
<div class="projects-copy">
<h2 data-motion="stagger" data-stagger="words" data-motion-on="scroll">Community Projects</h2>
<p data-motion="fade" data-motion-on="scroll" data-motion-delay="120ms">Explore projects inside the
<strong>projects</strong> folder.
</p>
<h2 data-motion="stagger" data-stagger="words" data-motion-on="scroll">Mini Project Example 🩷</h2>
</div>
<section class="mini-projects">
<div class="projects-container">
<div class="project-card" data-home-tilt>
<h3>Cute Calculator</h3>
<p>A pastel pink calculator mini-project example 💖</p>
<a href="projectforcontributor/MiniCalculator/calculator.html" class="project-link">Open Project</a>
</div>
<div class="project-card" data-home-tilt>
<h3>Future Letters</h3>
<p>Write a letter to your future self 💌</p>
<a href="https://letter-to-my-future-self.vercel.app/" class="project-link" target="_blank"
rel="noopener noreferrer">Open Project</a>
<a href="https://github.com/RishiMaskare/letter-to-my-future-self" class="github-link" target="_blank"
rel="noopener noreferrer">
View GitHub Repo
</a>
</div>
<div class="project-card" data-home-tilt>
<h3>Pastel To-Do App</h3>
<p>A cute task manager with local storage 🌸</p>
<a href="projectforcontributor/TodoApp/todo.html" class="project-link">Open Project</a>
</div>
<div class="project-card" data-home-tilt>
<h3>Password Generator</h3>
<p>Create strong random passwords instantly 🔒</p>
<a href="projectforcontributor/PasswordGenerator/password.html" class="project-link">Open Project</a>
</div>
<div class="project-card" data-home-tilt>
<h3>Number Guessing Game</h3>
<p>Guess the hidden number between 1-100 🎯</p>
<a href="projectforcontributor/NumberGuessGame/guess.html" class="project-link">Open Project</a>
</div>
<div class="project-card" data-home-tilt>
<h3>Dev Identity Studio</h3>
<p>Build, style, and download a premium developer identity card.</p>
<a href="projectforcontributor/dev-identity-studio/index.html" class="project-link">Open Project</a>
</div>
<div class="project-card" data-home-tilt>
<h3>Tic Tac Toe</h3>
<p>Classic 2-player game 🎮 Play with a friend!</p>
<a href="projectforcontributor/TicTacToe/tictactoe.html" class="project-link">
Open Project
</a>
</div>
</div>
</section>
</section>
<div id="footer"></div>
<div class="cursor">
<video src="Assets/butterfly.mp4" autoplay muted loop playsinline aria-hidden="true"></video>
</div>
<div class="sparkle-container"></div>
<script>
fetch("components/navbar.html")
.then((res) => res.text())
.then((data) => {
document.getElementById("navbar").innerHTML = data;
});
</script>
<script>
fetch("components/footer.html")
.then((res) => res.text())
.then((data) => {
document.getElementById("footer").innerHTML = data;
});
</script>
<!-- AUTH SYSTEM -->
<script src="auth.js"></script>
<script src="script.js"></script>
<script>
checkAuth(); // protect page
showLoggedInUser(); // show username
</script>
</body>
</html>