generated from nhcarrigan/template
feat: add technologies
This commit is contained in:
+377
-1
@@ -792,7 +792,110 @@
|
|||||||
gap: 0;
|
gap: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
/* ============================================
|
||||||
|
TECH STACK ITEMS
|
||||||
|
============================================ */
|
||||||
|
.tech-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
background: var(--witch-moon);
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
min-width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-item:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: var(--witch-plum);
|
||||||
|
box-shadow: 0 8px 20px rgba(43, 27, 61, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-item i {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-item span {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--witch-purple);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.tech-item {
|
||||||
|
min-width: 80px;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-item i {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-item span {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
TECH STACK COLLAPSIBLE SECTIONS
|
||||||
|
============================================ */
|
||||||
|
.tech-category {
|
||||||
|
border: 2px solid var(--witch-mauve);
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-category summary {
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--witch-plum);
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
transition: background 0.3s ease;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-category summary::-webkit-details-marker {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-category summary::marker {
|
||||||
|
display: none;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-category summary .dropdown-icon {
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-category[open] summary .dropdown-icon {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-category summary:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-category-content {
|
||||||
|
padding: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<!-- Devicon for technology icons -->
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<a href="#main-content" class="skip-link">Skip to main content</a>
|
<a href="#main-content" class="skip-link">Skip to main content</a>
|
||||||
@@ -1336,6 +1439,279 @@
|
|||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
MARK: Tech Stack
|
||||||
|
-->
|
||||||
|
<section class="card fade-in" style="background: var(--witch-lavender);" role="region" aria-labelledby="tech-stack">
|
||||||
|
<h2 id="tech-stack" style="margin-top: 0; text-align: center;"><i class="fas fa-code" aria-hidden="true"></i> Our Tech Stack</h2>
|
||||||
|
<p style="text-align: center; margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto;">
|
||||||
|
The languages, frameworks, and tools we use to bring your projects to life.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div style="display: flex; flex-direction: column; gap: 2rem;">
|
||||||
|
<!-- Languages -->
|
||||||
|
<details class="tech-category" open>
|
||||||
|
<summary><i class="fas fa-chevron-right dropdown-icon" aria-hidden="true"></i> <i class="fas fa-language" aria-hidden="true"></i> Languages</summary>
|
||||||
|
<div class="tech-category-content">
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-bash-plain"></i>
|
||||||
|
<span>Bash</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-css3-plain colored"></i>
|
||||||
|
<span>CSS</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-go-original-wordmark colored"></i>
|
||||||
|
<span>Go</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-html5-plain colored"></i>
|
||||||
|
<span>HTML</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-java-plain colored"></i>
|
||||||
|
<span>Java</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-javascript-plain colored"></i>
|
||||||
|
<span>JavaScript</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-json-plain colored"></i>
|
||||||
|
<span>JSON</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-kotlin-plain colored"></i>
|
||||||
|
<span>Kotlin</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-markdown-original"></i>
|
||||||
|
<span>MDX</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-python-plain colored"></i>
|
||||||
|
<span>Python</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-rust-original"></i>
|
||||||
|
<span>Rust</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-typescript-plain colored"></i>
|
||||||
|
<span>TypeScript</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-yaml-plain colored"></i>
|
||||||
|
<span>YAML</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<!-- Frameworks & Libraries -->
|
||||||
|
<details class="tech-category">
|
||||||
|
<summary><i class="fas fa-chevron-right dropdown-icon" aria-hidden="true"></i> <i class="fas fa-layer-group" aria-hidden="true"></i> Frameworks & Libraries</summary>
|
||||||
|
<div class="tech-category-content">
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-dotnetcore-plain colored"></i>
|
||||||
|
<span>.NET</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-angular-plain colored"></i>
|
||||||
|
<span>Angular</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-astro-plain colored"></i>
|
||||||
|
<span>Astro</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-discordjs-plain colored"></i>
|
||||||
|
<span>Discord.js</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-express-original"></i>
|
||||||
|
<span>Express</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-fastify-plain colored"></i>
|
||||||
|
<span>Fastify</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-nextjs-plain"></i>
|
||||||
|
<span>Next.js</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-nodejs-plain colored"></i>
|
||||||
|
<span>Node.js</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-prisma-original colored"></i>
|
||||||
|
<span>Prisma</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-pydantic-plain colored"></i>
|
||||||
|
<span>Pydantic</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-react-original colored"></i>
|
||||||
|
<span>React</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-slack-plain colored"></i>
|
||||||
|
<span>Slack Bolt</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-tauri-plain colored"></i>
|
||||||
|
<span>Tauri</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<!-- Databases -->
|
||||||
|
<details class="tech-category">
|
||||||
|
<summary><i class="fas fa-chevron-right dropdown-icon" aria-hidden="true"></i> <i class="fas fa-database" aria-hidden="true"></i> Databases</summary>
|
||||||
|
<div class="tech-category-content">
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-mongodb-plain colored"></i>
|
||||||
|
<span>MongoDB</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-mysql-plain colored"></i>
|
||||||
|
<span>MySQL</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-postgresql-plain colored"></i>
|
||||||
|
<span>PostgreSQL</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-redis-plain colored"></i>
|
||||||
|
<span>Redis</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-sqlite-plain colored"></i>
|
||||||
|
<span>SQLite</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<!-- Cloud & Infrastructure -->
|
||||||
|
<details class="tech-category">
|
||||||
|
<summary><i class="fas fa-chevron-right dropdown-icon" aria-hidden="true"></i> <i class="fas fa-cloud" aria-hidden="true"></i> Cloud & Infrastructure</summary>
|
||||||
|
<div class="tech-category-content">
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-amazonwebservices-plain-wordmark colored"></i>
|
||||||
|
<span>AWS S3</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-amazonwebservices-plain-wordmark colored"></i>
|
||||||
|
<span>AWS SES</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-cloudflare-plain colored"></i>
|
||||||
|
<span>Cloudflare R2</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-cloudflare-plain colored"></i>
|
||||||
|
<span>Cloudflare Workers</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-docker-plain colored"></i>
|
||||||
|
<span>Docker Compose</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-githubactions-plain colored"></i>
|
||||||
|
<span>GitHub Actions</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-gradle-plain colored"></i>
|
||||||
|
<span>Gradle</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-maven-plain colored"></i>
|
||||||
|
<span>Maven</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-nginx-original colored"></i>
|
||||||
|
<span>NGINX</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<!-- API Standards -->
|
||||||
|
<details class="tech-category">
|
||||||
|
<summary><i class="fas fa-chevron-right dropdown-icon" aria-hidden="true"></i> <i class="fas fa-file-code" aria-hidden="true"></i> API Standards</summary>
|
||||||
|
<div class="tech-category-content">
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="fas fa-exchange-alt" style="color: var(--witch-plum);"></i>
|
||||||
|
<span>AsyncAPI</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-openapi-plain colored"></i>
|
||||||
|
<span>OpenAPI</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-swagger-plain colored"></i>
|
||||||
|
<span>Swagger</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<!-- Testing & Quality -->
|
||||||
|
<details class="tech-category">
|
||||||
|
<summary><i class="fas fa-chevron-right dropdown-icon" aria-hidden="true"></i> <i class="fas fa-vial" aria-hidden="true"></i> Testing & Quality</summary>
|
||||||
|
<div class="tech-category-content">
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-mocha-plain colored"></i>
|
||||||
|
<span>Chai</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-rust-original"></i>
|
||||||
|
<span>Clippy</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-eslint-plain colored"></i>
|
||||||
|
<span>ESLint</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-jest-plain colored"></i>
|
||||||
|
<span>Jest</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-pytest-plain colored"></i>
|
||||||
|
<span>pytest</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-python-plain" style="color: #d4a700;"></i>
|
||||||
|
<span>Ruff</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-vitest-plain colored"></i>
|
||||||
|
<span>Vitest</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<!-- Operating Systems -->
|
||||||
|
<details class="tech-category">
|
||||||
|
<summary><i class="fas fa-chevron-right dropdown-icon" aria-hidden="true"></i> <i class="fas fa-desktop" aria-hidden="true"></i> Operating Systems</summary>
|
||||||
|
<div class="tech-category-content">
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-archlinux-plain colored"></i>
|
||||||
|
<span>Arch</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-ubuntu-plain colored"></i>
|
||||||
|
<span>Ubuntu</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<i class="devicon-windows11-original colored"></i>
|
||||||
|
<span>Windows</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
MARK: Client Timeline
|
MARK: Client Timeline
|
||||||
-->
|
-->
|
||||||
@@ -1553,7 +1929,7 @@
|
|||||||
|
|
||||||
<div class="stats-grid">
|
<div class="stats-grid">
|
||||||
<div class="stat-card">
|
<div class="stat-card">
|
||||||
<div class="stat-number">400+</div>
|
<div class="stat-number">675+</div>
|
||||||
<div class="stat-label">Discord Members</div>
|
<div class="stat-label">Discord Members</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user