-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathexperiments-complex.html
More file actions
155 lines (150 loc) · 7.71 KB
/
Copy pathexperiments-complex.html
File metadata and controls
155 lines (150 loc) · 7.71 KB
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
---
layout: bare
body_class: home
leadingpath: ./
permalink: /experiments
title: Ajey's various experiments and proof of concepts.
subpage: Experiments
---
<!-- Hero Section for Experiments -->
<div class="hero-section fade-in-up">
<div class="hero-content">
<h1 class="hero-title">
<i class="bi bi-flask me-3"></i>
Experiments
</h1>
<p class="hero-subtitle">My code experiments with Programming, frameworks, IoT, data and AIGC programming</p>
</div>
</div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item active">Experiments</li>
</ol>
</nav>
<div class="row fade-in-up">
<div class="col-12">
<p class="lead text-center mb-5">Exploring the boundaries of technology through hands-on experimentation</p>
{% assign experiments = site.experiments | sort: 'date' | reverse %}
{% if experiments.size > 0 %}
<!-- Featured Experiment -->
{% assign featured_experiment = experiments.first %}
<div class="mb-5">
<article class="card blog-featured-card fade-in-up">
<div class="row g-0">
<div class="col-md-4">
<img src="{% if featured_experiment.lead_image %}{{ '/assets/images/' | append: featured_experiment.lead_image | relative_url }}{% else %}{{ '/assets/images/' | append: site.lead_image | relative_url }}{% endif %}"
class="img-fluid rounded-start h-100 object-fit-cover" alt="{{ featured_experiment.title }}"
loading="lazy">
</div>
<div class="col-md-8">
<div class="card-body h-100 d-flex flex-column">
<div class="mb-2">
<span class="badge bg-primary">Featured</span>
{% if featured_experiment.categories %}
{% for category in featured_experiment.categories limit:1 %}
<span class="badge bg-secondary">{{ category }}</span>
{% endfor %}
{% endif %}
</div>
<h3 class="card-title">
<a href="{{ featured_experiment.url }}" class="text-decoration-none">
{{ featured_experiment.title }}
</a>
</h3>
{% if featured_experiment.description %}
<p class="card-text text-muted">{{ featured_experiment.description }}</p>
{% else %}
<p class="card-text text-muted">{{ featured_experiment.excerpt | strip_html | truncate: 160
}}</p>
{% endif %}
<div class="mt-auto">
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center gap-3">
<small class="text-muted">
<i class="bi bi-calendar3"></i>
{{ featured_experiment.date | date: '%b %d, %Y' }}
</small>
<small class="text-muted">
<i class="bi bi-clock"></i>
{% include readingtime.erb page_content=featured_experiment.content %}
</small>
</div>
<a href="{{ featured_experiment.url }}" class="btn btn-modern btn-modern-primary">
Explore
<i class="bi bi-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<!-- Experiments Grid -->
<div class="row g-4">
{% for post in experiments offset:1 %}
<div class="col-lg-6">
<article class="card blog-post-card h-100 fade-in-up">
<div class="position-relative overflow-hidden">
<img class="card-img-top blog-card-image"
src="{% if post.lead_image %}{{ '/assets/images/' | append: post.lead_image | relative_url }}{% else %}{{ '/assets/images/' | append: site.lead_image | relative_url }}{% endif %}" alt="{{ post.title }}"
loading="lazy">
<div class="blog-card-overlay">
<a href="{{ post.url }}" class="btn btn-modern btn-modern-primary btn-sm">
<i class="bi bi-arrow-right"></i>
Explore
</a>
</div>
</div>
<div class="card-body d-flex flex-column">
<div class="mb-2 d-flex flex-wrap gap-1">
{% if post.categories %}
{% for category in post.categories limit:2 %}
<span class="badge bg-secondary small">{{ category }}</span>
{% endfor %}
{% else %}
{% if post.tags %}
{% for tag in post.tags limit:2 %}
<span class="badge bg-secondary small">{{ tag }}</span>
{% endfor %}
{% endif %}
{% endif %}
</div>
<h5 class="card-title">
<a href="{{ post.url }}" class="text-decoration-none">
{{ post.title }}
</a>
</h5>
{% if post.description %}
<p class="card-text text-muted flex-grow-1 small">{{ post.description | truncate: 100 }}</p>
{% elsif post.excerpt %}
<p class="card-text text-muted flex-grow-1 small">{{ post.excerpt | strip_html | truncate: 100
}}</p>
{% endif %}
<div class="mt-auto pt-3 border-top">
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">
<i class="bi bi-calendar3"></i>
{{ post.date | date: '%b %Y' }}
</small>
<small class="text-muted">
<i class="bi bi-clock"></i>
{% include readingtime.erb page_content=post.content %}
</small>
</div>
</div>
</div>
</article>
</div>
{% endfor %}
</div>
{% else %}
<div class="text-center py-5">
<i class="bi bi-flask text-muted fs-4rem"></i>
<h3 class="text-muted mt-3">No experiments yet</h3>
<p class="text-muted">Check back later for new experiments!</p>
</div>
{% endif %}
</div>
</div>