LukeParke/pypistats.dev
1
0
Fork 0
mirror of https://github.com/LukeHagar/pypistats.dev.git synced 2025-12-06 04:21:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor the About page layout to enhance UI consistency by updating list item structures and spacing for technology stack sections. Improved visual alignment and readability of frontend, backend, and infrastructure technologies.

Browse Source
This commit is contained in:
Luke Hagar
2025-08-19 12:07:21 -05:00
parent 76bd178815
commit 8d6c5c67a2
1 changed files with 63 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/routes/about/+page.svelte
View File

@@ -40,44 +40,60 @@
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div class="bg-gray-900 rounded-lg p-6 border border-gray-800">
<h3 class="text-lg font-semibold text-gray-100 mb-3">Frontend</h3>
<ul class="space-y-2 text-gray-400">
<li class="flex items-center">
<span class="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
<ul class="space-y-3 text-gray-400">
<li class="flex">
<span class="w-2 h-2 bg-blue-500 rounded-full mr-3 mt-2 flex-shrink-0"></span>
<div class="flex-1">
<strong>SvelteKit</strong> - Modern web framework for reactive UI
</div>
</li>
<li class="flex items-center">
<span class="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
<li class="flex">
<span class="w-2 h-2 bg-blue-500 rounded-full mr-3 mt-2 flex-shrink-0"></span>
<div class="flex-1">
<strong>TypeScript</strong> - Type-safe JavaScript development
</div>
</li>
<li class="flex items-center">
<span class="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
<li class="flex">
<span class="w-2 h-2 bg-blue-500 rounded-full mr-3 mt-2 flex-shrink-0"></span>
<div class="flex-1">
<strong>Tailwind CSS</strong> - Utility-first CSS framework
</div>
</li>
<li class="flex items-center">
<span class="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
<li class="flex">
<span class="w-2 h-2 bg-blue-500 rounded-full mr-3 mt-2 flex-shrink-0"></span>
<div class="flex-1">
<strong>Chart.js</strong> - Interactive data visualization
</div>
</li>
</ul>
</div>
<div class="bg-gray-900 rounded-lg p-6 border border-gray-800">
<h3 class="text-lg font-semibold text-gray-100 mb-3">Backend & Data</h3>
<ul class="space-y-2 text-gray-400">
<li class="flex items-center">
<span class="w-2 h-2 bg-green-500 rounded-full mr-3"></span>
<ul class="space-y-3 text-gray-400">
<li class="flex">
<span class="w-2 h-2 bg-green-500 rounded-full mr-3 mt-2 flex-shrink-0"></span>
<div class="flex-1">
<strong>PostgreSQL</strong> - Primary database for statistics
</div>
</li>
<li class="flex items-center">
<span class="w-2 h-2 bg-green-500 rounded-full mr-3"></span>
<li class="flex">
<span class="w-2 h-2 bg-green-500 rounded-full mr-3 mt-2 flex-shrink-0"></span>
<div class="flex-1">
<strong>Redis</strong> - Caching and distributed locks
</div>
</li>
<li class="flex items-center">
<span class="w-2 h-2 bg-green-500 rounded-full mr-3"></span>
<li class="flex">
<span class="w-2 h-2 bg-green-500 rounded-full mr-3 mt-2 flex-shrink-0"></span>
<div class="flex-1">
<strong>BigQuery</strong> - Google's data warehouse for PyPI logs
</div>
</li>
<li class="flex items-center">
<span class="w-2 h-2 bg-green-500 rounded-full mr-3"></span>
<li class="flex">
<span class="w-2 h-2 bg-green-500 rounded-full mr-3 mt-2 flex-shrink-0"></span>
<div class="flex-1">
<strong>Prisma</strong> - Type-safe database ORM
</div>
</li>
</ul>
</div>
@@ -85,22 +101,30 @@
<div class="bg-gray-900 rounded-lg p-6 border border-gray-800 mb-6">
<h3 class="text-lg font-semibold text-gray-100 mb-3">Infrastructure & Deployment</h3>
<ul class="space-y-2 text-gray-400">
<li class="flex items-center">
<span class="w-2 h-2 bg-purple-500 rounded-full mr-3"></span>
<ul class="space-y-3 text-gray-400">
<li class="flex">
<span class="w-2 h-2 bg-purple-500 rounded-full mr-3 mt-2 flex-shrink-0"></span>
<div class="flex-1">
<strong>Docker Compose</strong> - Containerized deployment stack
</div>
</li>
<li class="flex items-center">
<span class="w-2 h-2 bg-purple-500 rounded-full mr-3"></span>
<li class="flex">
<span class="w-2 h-2 bg-purple-500 rounded-full mr-3 mt-2 flex-shrink-0"></span>
<div class="flex-1">
<strong>pnpm</strong> - Fast, disk space efficient package manager
</div>
</li>
<li class="flex items-center">
<span class="w-2 h-2 bg-purple-500 rounded-full mr-3"></span>
<li class="flex">
<span class="w-2 h-2 bg-purple-500 rounded-full mr-3 mt-2 flex-shrink-0"></span>
<div class="flex-1">
<strong>OpenAPI</strong> - Standardized API documentation
</div>
</li>
<li class="flex items-center">
<span class="w-2 h-2 bg-purple-500 rounded-full mr-3"></span>
<li class="flex">
<span class="w-2 h-2 bg-purple-500 rounded-full mr-3 mt-2 flex-shrink-0"></span>
<div class="flex-1">
<strong>Scalar</strong> - Interactive API documentation interface
</div>
</li>
</ul>
</div>