-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathresources.html
More file actions
199 lines (169 loc) · 9.03 KB
/
resources.html
File metadata and controls
199 lines (169 loc) · 9.03 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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Resources — CodeScoop.dev</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white text-gray-800 font-sans antialiased">
<!-- Header -->
<header class="bg-white border-b border-gray-200 sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
<h1 class="text-2xl font-extrabold text-blue-600 tracking-tight">CodeScoop<span class="text-gray-800">.dev</span></h1>
<nav class="hidden md:flex space-x-6 font-medium text-gray-700">
<a href="/" class="hover:text-blue-600">Home</a>
<a href="#resources" class="hover:text-blue-600">Resources</a>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="bg-gray-50 py-20 text-center">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-4xl font-extrabold text-gray-900 mb-4">Resource Center</h2>
<p class="text-lg text-gray-600">
Discover curated learning paths, build hands-on projects, and grow with community-backed resources across Web, Mobile, ML, and more.
</p>
</div>
</section>
<!-- Main Section -->
<main class="max-w-7xl mx-auto px-4 py-16 grid grid-cols-1 md:grid-cols-4 gap-10">
<!-- Filter Sidebar -->
<aside class="md:col-span-1 space-y-6">
<h3 class="text-xl font-semibold text-gray-800">Filter by</h3>
<!-- Domain Filter -->
<div>
<label class="block font-medium mb-2 text-sm text-gray-700">Domain</label>
<select class="w-full border-gray-300 rounded-md shadow-sm">
<option>All</option>
<option>Web Development</option>
<option>Mobile</option>
<option>DevOps</option>
<option>Machine Learning</option>
</select>
</div>
<!-- Level Filter -->
<div>
<label class="block font-medium mb-2 text-sm text-gray-700">Level</label>
<select class="w-full border-gray-300 rounded-md shadow-sm">
<option>All</option>
<option>Beginner</option>
<option>Intermediate</option>
<option>Advanced</option>
</select>
</div>
<!-- Content Type Filter -->
<div>
<label class="block font-medium mb-2 text-sm text-gray-700">Content Type</label>
<select class="w-full border-gray-300 rounded-md shadow-sm">
<option>All</option>
<option>Article</option>
<option>Video</option>
</select>
</div>
<!-- Sort By Filter -->
<div>
<label class="block font-medium mb-2 text-sm text-gray-700">Sort by</label>
<select class="w-full border-gray-300 rounded-md shadow-sm">
<option>Newest</option>
<option>Oldest</option>
<option>A–Z</option>
<option>Z–A</option>
</select>
</div>
</aside>
<!-- Project Cards Section -->
<section class="md:col-span-3 space-y-10">
<!-- Top Search -->
<div class="flex items-center justify-between flex-wrap gap-4">
<h4 class="text-xl font-semibold text-gray-800">Projects</h4>
<input
type="text"
placeholder="Search projects..."
class="w-full sm:w-64 border border-gray-300 rounded-md px-4 py-2 focus:ring focus:ring-blue-200"
/>
</div>
<!-- Project Cards Grid -->
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Card 1 -->
<div class="relative bg-white border border-gray-200 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 p-6 pt-10">
<span class="absolute top-4 right-4 bg-blue-50 text-blue-600 text-xs font-semibold px-3 py-1 rounded-full shadow-sm">Article</span>
<h5 class="text-xl font-semibold text-gray-900 mb-2">Build a Todo App (React)</h5>
<p class="text-sm text-gray-600 mb-4 leading-relaxed">Create a full CRUD todo application using React and localStorage.</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="bg-gray-100 text-gray-800 text-xs px-2.5 py-1 rounded-full">React</span>
<span class="bg-gray-100 text-gray-800 text-xs px-2.5 py-1 rounded-full">JavaScript</span>
</div>
<a href="#" class="inline-block text-sm font-medium text-blue-600 hover:underline">View Project →</a>
</div>
<!-- Card 2 -->
<div class="relative bg-white border border-gray-200 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 p-6 pt-10">
<span class="absolute top-4 right-4 bg-red-50 text-red-600 text-xs font-semibold px-3 py-1 rounded-full shadow-sm">Video</span>
<h5 class="text-xl font-semibold text-gray-900 mb-2">CI/CD with GitHub Actions</h5>
<p class="text-sm text-gray-600 mb-4 leading-relaxed">Set up a continuous deployment pipeline for your app with GitHub Actions.</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="bg-gray-100 text-gray-800 text-xs px-2.5 py-1 rounded-full">DevOps</span>
<span class="bg-gray-100 text-gray-800 text-xs px-2.5 py-1 rounded-full">YAML</span>
</div>
<a href="#" class="inline-block text-sm font-medium text-blue-600 hover:underline">View Project →</a>
</div>
<!-- Card 3 -->
<div class="relative bg-white border border-gray-200 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 p-6 pt-10">
<span class="absolute top-4 right-4 bg-blue-50 text-blue-600 text-xs font-semibold px-3 py-1 rounded-full shadow-sm">Article</span>
<h5 class="text-xl font-semibold text-gray-900 mb-2">Image Classifier with TensorFlow</h5>
<p class="text-sm text-gray-600 mb-4 leading-relaxed">Train and evaluate a basic image classifier using TensorFlow and Keras.</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="bg-gray-100 text-gray-800 text-xs px-2.5 py-1 rounded-full">TensorFlow</span>
<span class="bg-gray-100 text-gray-800 text-xs px-2.5 py-1 rounded-full">Python</span>
</div>
<a href="#" class="inline-block text-sm font-medium text-blue-600 hover:underline">View Project →</a>
</div>
<!-- Card 4 -->
<div class="relative bg-white border border-gray-200 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 p-6 pt-10">
<span class="absolute top-4 right-4 bg-purple-50 text-purple-600 text-xs font-semibold px-3 py-1 rounded-full shadow-sm">Video</span>
<h5 class="text-xl font-semibold text-gray-900 mb-2">Intro to System Design</h5>
<p class="text-sm text-gray-600 mb-4 leading-relaxed">Understand scalability, load balancing, and caching through real examples.</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="bg-gray-100 text-gray-800 text-xs px-2.5 py-1 rounded-full">Architecture</span>
<span class="bg-gray-100 text-gray-800 text-xs px-2.5 py-1 rounded-full">Design</span>
</div>
<a href="#" class="inline-block text-sm font-medium text-blue-600 hover:underline">View Project →</a>
</div>
<!-- Card 5 -->
<div class="relative bg-white border border-gray-200 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 p-6 pt-10">
<span class="absolute top-4 right-4 bg-green-50 text-green-600 text-xs font-semibold px-3 py-1 rounded-full shadow-sm">Article</span>
<h5 class="text-xl font-semibold text-gray-900 mb-2">Build a Portfolio with Next.js</h5>
<p class="text-sm text-gray-600 mb-4 leading-relaxed">Launch your developer portfolio using modern frameworks and static hosting.</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="bg-gray-100 text-gray-800 text-xs px-2.5 py-1 rounded-full">Next.js</span>
<span class="bg-gray-100 text-gray-800 text-xs px-2.5 py-1 rounded-full">Tailwind CSS</span>
</div>
<a href="#" class="inline-block text-sm font-medium text-blue-600 hover:underline">View Project →</a>
</div>
<!-- Card 6 -->
<div class="relative bg-white border border-gray-200 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 p-6 pt-10">
<span class="absolute top-4 right-4 bg-yellow-50 text-yellow-600 text-xs font-semibold px-3 py-1 rounded-full shadow-sm">Video</span>
<h5 class="text-xl font-semibold text-gray-900 mb-2">Data Structures in TypeScript</h5>
<p class="text-sm text-gray-600 mb-4 leading-relaxed">Learn how to implement core data structures like stacks, queues, and trees.</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="bg-gray-100 text-gray-800 text-xs px-2.5 py-1 rounded-full">TypeScript</span>
<span class="bg-gray-100 text-gray-800 text-xs px-2.5 py-1 rounded-full">DSA</span>
</div>
<a href="#" class="inline-block text-sm font-medium text-blue-600 hover:underline">View Project →</a>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-white border-t border-gray-200 text-sm text-gray-600 py-6">
<div class="max-w-6xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center">
<p class="mb-2 md:mb-0">© 2025 CodeScoop.dev. All rights reserved.</p>
<div class="space-x-4">
<a href="#" class="hover:underline">Privacy</a>
<a href="#" class="hover:underline">Terms</a>
<a href="mailto:hello@codescoop.dev" class="hover:underline">Contact</a>
</div>
</div>
</footer>
</body>
</html>