76 lines
2.2 KiB
HTML
76 lines
2.2 KiB
HTML
---
|
|
layout: default
|
|
title: Projects
|
|
---
|
|
|
|
<div class="max-w-7xl mx-auto">
|
|
<h1 class="text-4xl font-bold text-cyan-400 mb-8">// Open Source Marine Projects</h1>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{% for project in site.projects %}
|
|
<div class="ncurses-box">
|
|
<div class="ncurses-header">
|
|
<span class="text-cyan-400">[{{ project.date | date: "%Y-%m-%d" }}]</span>
|
|
<span class="text-slate-400">//</span>
|
|
<span class="text-cyan-400">{{ project.title }}</span>
|
|
</div>
|
|
<div class="ncurses-content">
|
|
{% if project.image %}
|
|
<div class="mb-4">
|
|
<img src="{{ project.image | relative_url }}" alt="{{ project.title }}" class="w-full h-48 object-cover rounded">
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if project.description %}
|
|
<p class="text-slate-300 mb-4">{{ project.description }}</p>
|
|
{% endif %}
|
|
|
|
<div class="flex items-center text-sm text-slate-400 mb-4">
|
|
{% if project.difficulty %}
|
|
<span class="mr-4">
|
|
<span class="text-cyan-400">Difficulty:</span> {{ project.difficulty }}
|
|
</span>
|
|
{% endif %}
|
|
{% if project.cost %}
|
|
<span>
|
|
<span class="text-cyan-400">Cost:</span> {{ project.cost }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if project.tags %}
|
|
<div class="flex flex-wrap gap-2 mb-4">
|
|
{% for tag in project.tags %}
|
|
<span class="px-2 py-1 bg-slate-900 text-sm text-slate-400 rounded">#{{ tag }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if project.github %}
|
|
<div>
|
|
<a href="{{ project.github }}" class="text-cyan-400 hover:text-cyan-300 text-sm" target="_blank" rel="noopener">
|
|
$ view on github →
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.ncurses-box {
|
|
@apply border border-slate-700 bg-slate-800 rounded;
|
|
box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.1);
|
|
}
|
|
|
|
.ncurses-header {
|
|
@apply border-b border-slate-700 px-4 py-2 flex items-center space-x-2;
|
|
background: linear-gradient(to right, rgba(56, 189, 248, 0.1), transparent);
|
|
}
|
|
|
|
.ncurses-content {
|
|
@apply p-4;
|
|
}
|
|
</style> |