LukeParke/pypistats.dev
1
0
Fork 0
mirror of https://github.com/LukeHagar/pypistats.dev.git synced 2025-12-07 20:57:44 +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

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