/
works.html
executable file
·57 lines (52 loc) · 1.94 KB
/
works.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
---
layout: page
title: Works.
permalink: /works.html
color: "text-[#4285f4]"
description: Everything that I have built, alone or with someone 🔨
---
<ul class="grid w-full grid-cols-1 gap-0 md:gap-x-16 md:gap-y-16 mb-10">
{% for project in site.projects %}
<li class="rounded w-full grid md:grid-cols-2 gap-8">
<a href="{{ project.link }}">
<img src=" {{ project.img }}" alt="project-img" class="object-cover w-full h-72 md:h-64 lg:h-96 rounded-lg transition duration-300 hover:scale-105 " loading="lazy">
</a>
<div class=" my-auto relative">
<span class="step__number" aria-hidden="true" role="presentation" style="left: auto;
right: 0;
transform: translate(0, -70px); font-size: 17.1875rem; color: #e5e5e5;
position: absolute;
right: 0;
top: 0;
transform: translateY(-30px);
font-weight: 900;
z-index: -1;">{{project.pos}}</span>
<div class="flex flex-wrap w-full mb-2">
{% for tech in project.techs %}
<span class="tech inline-block items-center text-lg {{tech.color}} font-semibold mr-4 mr-2 rounded-full">
{{ tech.name }}
</span>
{% endfor %}
</div>
<div class="text-6xl font-bold text-left text-gray-900 dark:text-white leading-tight">
{% for proj in project.names %}
<span class="{{proj.color}} {{proj.bg-color}} rounded-2xl px-2">
{{ proj.name }}
</span>
{% endfor %}
</div>
<div class="mt-1 text-gray-500 mt-4 dark:text-gray-300">
{{ project.content }}
</div>
<div class="flex flex-wrap gap-2 mt-4">
{% for r in project.ref %}
<a class="h-8 flex items-center justify-center bg-transparent text-blue-500 hover:text-blue-700 font-semibold px-4 border-solid border border-indigo-600 rounded"
href=" {{ r[1] }} ">
{{ r[0] }}
</a>
{% endfor %}
</div>
</div>
</li>
{% endfor %}
</ul>