Skip to content

Commit 562ff50

Browse files
DMS-MenulaDMS-Menula
authored
making a new page for helpful devtools (#1433)
1 parent 7b61d99 commit 562ff50

File tree

2 files changed

+211
-0
lines changed

2 files changed

+211
-0
lines changed

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
</div>
3232
<div class="navbar-right">
3333
<a href="pages/githubbadge.html" class="navbar-link">Github-Badges</a>
34+
<a href="pages/devtools.html" class="navbar-link">Useful Devtools</a>
3435
<a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+"
3536
class="navbar-link">Add Profile</a>
3637
<a href="#" class="navbar-link">Tools</a>

‎pages/devtools.html‎

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Awesome Developer Tools</title>
7+
<link rel="icon" href="recode-hive.png">
8+
<script src="https://cdn.tailwindcss.com"></script>
9+
<style>
10+
/* Custom Animations */
11+
@keyframes slideUp {
12+
from { transform: translateY(50px); opacity: 0; }
13+
to { transform: translateY(0); opacity: 1; }
14+
}
15+
16+
@keyframes pulse {
17+
0% { transform: scale(1); }
18+
50% { transform: scale(1.05); }
19+
100% { transform: scale(1); }
20+
}
21+
22+
@keyframes shine {
23+
from { background-position: -200%; }
24+
to { background-position: 200%; }
25+
}
26+
27+
.animate-slide-up {
28+
animation: slideUp 0.5s ease-in-out forwards;
29+
}
30+
31+
.animate-pulse {
32+
animation: pulse 2s infinite;
33+
}
34+
35+
/* Custom Scrollbar */
36+
::-webkit-scrollbar {
37+
width: 8px;
38+
}
39+
40+
::-webkit-scrollbar-track {
41+
background: #1e1e1e;
42+
}
43+
44+
::-webkit-scrollbar-thumb {
45+
background: #4a90e2;
46+
border-radius: 4px;
47+
}
48+
49+
::-webkit-scrollbar-thumb:hover {
50+
background: #60a5fa;
51+
}
52+
53+
/* Custom Select Styling */
54+
.custom-select-wrapper {
55+
position: relative;
56+
width: 100%;
57+
max-width: 12rem;
58+
}
59+
60+
.custom-select-wrapper::after {
61+
content: '▼';
62+
position: absolute;
63+
right: 1rem;
64+
top: 50%;
65+
transform: translateY(-50%);
66+
color: #e0e0e0;
67+
pointer-events: none;
68+
}
69+
70+
#filter-select {
71+
appearance: none;
72+
-webkit-appearance: none;
73+
-moz-appearance: none;
74+
width: 100%;
75+
padding-right: 2.5rem;
76+
}
77+
</style>
78+
</head>
79+
<body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col items-center">
80+
<header class="w-full bg-gradient-to-r from-blue-900 to-green-900 text-white text-center py-4 sm:py-6 lg:py-8 shadow-lg top-0">
81+
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold animate-pulse">Awesome Developer Tools</h1>
82+
<p class="mt-2 text-xs sm:text-sm md:text-base lg:text-lg max-w-2xl mx-auto">A curated, interactive, and responsive collection of tools to supercharge your development workflow.</p>
83+
<div class="mt-4 flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center items-center px-4">
84+
<input type="text" id="search" placeholder="Search by name, description, or category..." class="w-full sm:w-80 md:w-96 p-3 rounded-full bg-gray-800 text-gray-100 border-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 text-sm sm:text-base">
85+
<div class="custom-select-wrapper">
86+
<select id="filter-select" class="w-full p-3 rounded-full bg-gray-800 text-gray-100 border-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 text-sm sm:text-base">
87+
<option value="">All Categories</option>
88+
<!-- Categories populated by JS -->
89+
</select>
90+
</div>
91+
</div>
92+
</header>
93+
<main class="w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-8">
94+
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6" id="tool-grid">
95+
<!-- Tools will be rendered here by JS -->
96+
</div>
97+
</main>
98+
<button id="back-to-top" title="Back to Top" class="fixed bottom-4 sm:bottom-6 right-4 sm:right-6 bg-blue-900 text-white rounded-full w-10 h-10 sm:w-12 sm:h-12 flex items-center justify-center shadow-lg opacity-0 transition-all duration-300 hover:bg-blue-700 hover:scale-110 text-sm sm:text-base">↑</button>
99+
<script>
100+
// List of tools
101+
const tools = [
102+
{ category: 'Analytics Tools', name: 'Plausible', description: 'Easy to use and privacy-friendly Google Analytics alternative.', link: 'https://plausible.io/' },
103+
{ category: 'Analytics Tools', name: 'Repohistory', description: 'GitHub repo analytics tool without 14 days limit.', link: 'https://repohistory.com' },
104+
{ category: 'Analytics Tools', name: 'Umami', description: 'Open source, privacy-focused alternative to Google Analytics.', link: 'https://umami.is/' },
105+
{ category: 'Cloud Platforms', name: 'Vercel', description: 'Frontend cloud for static sites and serverless functions.', link: 'https://vercel.com/' },
106+
{ category: 'Cloud Platforms', name: 'Netlify', description: 'All-in-one platform for automating modern web projects.', link: 'https://www.netlify.com/' },
107+
{ category: 'Cloud Platforms', name: 'AWS', description: 'Comprehensive cloud computing services platform.', link: 'https://aws.amazon.com/' },
108+
{ category: 'Cloud Platforms', name: 'Google Cloud Platform', description: 'Scalable and secure cloud infrastructure.', link: 'https://cloud.google.com/' },
109+
{ category: 'Cloud Platforms', name: 'Azure', description: 'Microsoft’s cloud computing platform.', link: 'https://azure.microsoft.com/' },
110+
{ category: 'Cloud Platforms', name: 'DigitalOcean', description: 'Developer-friendly cloud for small apps.', link: 'https://www.digitalocean.com/' },
111+
{ category: 'Cloud Platforms', name: 'Render', description: 'Unified cloud to build and run apps with ease.', link: 'https://render.com/' },
112+
{ category: 'AI Coding Tools', name: 'Cursor', description: 'AI-powered code editor with native GPT integration.', link: 'https://www.cursor.so/' },
113+
{ category: 'AI Coding Tools', name: 'GitHub Copilot', description: 'AI pair programmer powered by OpenAI.', link: 'https://github.com/features/copilot' },
114+
{ category: 'AI Coding Tools', name: 'Windsurf', description: 'Free AI-powered code autocomplete.', link: 'https://windsurf.com/' },
115+
{ category: 'AI Coding Tools', name: 'Tabnine', description: 'AI code completions trained on open-source code.', link: 'https://www.tabnine.com/' },
116+
{ category: 'AI Coding Tools', name: 'Cody (Sourcegraph)', description: 'AI coding assistant with codebase context.', link: 'https://sourcegraph.com/cody' },
117+
{ category: 'AI Coding Tools', name: 'Amazon CodeWhisperer', description: 'AI-powered code suggestions from AWS.', link: 'https://aws.amazon.com/codewhisperer/' },
118+
{ category: 'AI Coding Tools', name: 'Claude Code', description: 'Anthropic\'s official CLI for Claude.', link: 'https://claude.ai/code' },
119+
{ category: 'AI Coding Tools', name: 'Cline', description: 'AI-powered code assistant.', link: 'https://github.com/cline/cline' },
120+
{ category: 'AI Coding Tools', name: 'OpenCode', description: 'AI coding agent built for the terminal.', link: 'https://opencode.ai/' },
121+
{ category: 'AI Coding Tools', name: 'Kodus', description: 'Open-source AI code-review tool.', link: 'https://kodus.io/' },
122+
{ category: 'IDEs & Code Editors', name: 'VSCode', description: 'Popular, extensible open-source editor by Microsoft.', link: 'https://code.visualstudio.com/' },
123+
{ category: 'IDEs & Code Editors', name: 'IntelliJ IDEA', description: 'Powerful IDE for JVM and polyglot development.', link: 'https://www.jetbrains.com/idea/' },
124+
{ category: 'IDEs & Code Editors', name: 'WebStorm', description: 'IDE for JavaScript and web development.', link: 'https://www.jetbrains.com/webstorm/' },
125+
{ category: 'IDEs & Code Editors', name: 'Neovim', description: 'Modernized Vim for advanced editing.', link: 'https://neovim.io/' },
126+
{ category: 'IDEs & Code Editors', name: 'Sublime Text', description: 'Lightweight, fast code editor.', link: 'https://www.sublimetext.com/' },
127+
{ category: 'IDEs & Code Editors', name: 'Fleet', description: 'Collaborative, lightweight IDE by JetBrains.', link: 'https://www.jetbrains.com/fleet/' },
128+
{ category: 'CLIs & Terminal Tools', name: 'Fig', description: 'Autocomplete and UI enhancements for your terminal.', link: 'https://fig.io/' },
129+
{ category: 'CLIs & Terminal Tools', name: 'Warp', description: 'Modern, Rust-based terminal with AI commands.', link: 'https://www.warp.dev/' },
130+
{ category: 'CLIs & Terminal Tools', name: 'tldr', description: 'Simplified man pages for command-line tools.', link: 'https://tldr.sh/' },
131+
{ category: 'CLIs & Terminal Tools', name: 'fzf', description: 'Fuzzy finder for terminal power users.', link: 'https://github.com/junegunn/fzf' },
132+
{ category: 'CLIs & Terminal Tools', name: 'exa', description: 'Modern replacement for `ls` with icons and colors.', link: 'https://the.exa.website/' },
133+
{ category: 'CLIs & Terminal Tools', name: 'bat', description: 'Cat clone with syntax highlighting.', link: 'https://github.com/sharkdp/bat' },
134+
{ category: 'CLIs & Terminal Tools', name: 'zx', description: 'Tool for writing shell scripts in JavaScript.', link: 'https://github.com/google/zx' },
135+
{ category: 'CLIs & Terminal Tools', name: 'ccr', description: 'Enhanced CLI history manager, project-aware, with sync and encryption.', link: 'https://github.com/NeverVane/commandchronicles' },
136+
{ category: 'DevOps & Infrastructure', name: 'Docker', description: 'Container platform for building and running apps.', link: 'https://www.docker.com/' },
137+
{ category: 'DevOps & Infrastructure', name: 'Kubernetes', description: 'Container orchestration system.', link: 'https://kubernetes.io/' },
138+
{ category: 'DevOps & Infrastructure', name: 'Terraform', description: 'Infrastructure as code tool by HashiCorp.', link: 'https://www.terraform.io/' },
139+
{ category: 'DevOps & Infrastructure', name: 'Pulumi', description: 'IaC tool using real programming languages.', link: 'https://www.pulumi.com/' },
140+
{ category: 'DevOps & Infrastructure', name: 'GitHub Actions', description: 'CI/CD pipelines natively in GitHub.', link: 'https://github.com/features/actions' },
141+
{ category: 'DevOps & Infrastructure', name: 'CircleCI', description: 'Continuous integration and delivery platform.', link: 'https://circleci.com/' },
142+
{ category: 'DevOps & Infrastructure', name: 'Jenkins', description: 'Open-source automation server.', link: 'https://www.jenkins.io/' }
143+
];
144+
145+
// Extract unique categories
146+
const categories = [...new Set(tools.map(tool => tool.category))];
147+
148+
// Populate filter select
149+
const filterSelect = document.getElementById('filter-select');
150+
categories.forEach(cat => {
151+
const option = document.createElement('option');
152+
option.value = cat;
153+
option.textContent = cat;
154+
filterSelect.appendChild(option);
155+
});
156+
157+
// Function to render tools
158+
function renderTools(filteredTools) {
159+
const grid = document.getElementById('tool-grid');
160+
grid.innerHTML = ''; // Clear existing
161+
filteredTools.forEach((tool, index) => {
162+
const card = document.createElement('div');
163+
card.className = 'bg-gray-800 rounded-lg p-4 sm:p-6 shadow-xl hover:shadow-2xl hover:scale-105 transform transition-all duration-300 animate-slide-up shine-effect';
164+
card.style.animationDelay = `${index * 0.1}s`;
165+
card.innerHTML = `
166+
<span class="text-xs uppercase text-gray-500">${tool.category}</span>
167+
<h2 class="text-lg sm:text-xl font-semibold text-blue-400 mt-2">${tool.name}</h2>
168+
<p class="text-gray-300 mt-2 text-sm sm:text-base">${tool.description}</p>
169+
<a href="${tool.link}" target="_blank" class="inline-block mt-4 bg-green-800 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-all duration-300 text-sm sm:text-base">Visit</a>
170+
`;
171+
grid.appendChild(card);
172+
});
173+
}
174+
175+
// Initial render
176+
renderTools(tools);
177+
178+
// Search and filter functionality
179+
const searchInput = document.getElementById('search');
180+
searchInput.addEventListener('input', filterTools);
181+
filterSelect.addEventListener('change', filterTools);
182+
183+
function filterTools() {
184+
const query = searchInput.value.toLowerCase();
185+
const selectedCategory = filterSelect.value;
186+
const filtered = tools.filter(tool =>
187+
(selectedCategory === '' || tool.category === selectedCategory) &&
188+
(tool.name.toLowerCase().includes(query) ||
189+
tool.description.toLowerCase().includes(query) ||
190+
tool.category.toLowerCase().includes(query))
191+
);
192+
renderTools(filtered);
193+
}
194+
195+
// Back to Top button
196+
const backToTop = document.getElementById('back-to-top');
197+
window.addEventListener('scroll', () => {
198+
if (window.scrollY > 300) {
199+
backToTop.classList.remove('opacity-0');
200+
} else {
201+
backToTop.classList.add('opacity-0');
202+
}
203+
});
204+
205+
backToTop.addEventListener('click', () => {
206+
window.scrollTo({ top: 0, behavior: 'smooth' });
207+
});
208+
</script>
209+
</body>
210+
</html>

0 commit comments

Comments
 (0)