Skip to content

Commit 60773cb

Browse files
TranHuuDat2004TranHuuDat2004
committed
feats: change icon minimalism
1 parent 05ed687 commit 60773cb

4 files changed

Lines changed: 91 additions & 26 deletions

File tree

‎css/components/blog.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,29 @@
105105
transform: translateX(4px);
106106
}
107107

108+
.blog-card-content .project-links {
109+
margin-top: auto;
110+
display: flex;
111+
gap: 1.25rem;
112+
font-size: 1.3rem;
113+
padding-top: 1.5rem;
114+
}
115+
116+
.blog-card-content .project-links a {
117+
color: var(--text-primary);
118+
transition: all 0.3s ease;
119+
display: flex;
120+
align-items: center;
121+
justify-content: center;
122+
opacity: 0.8;
123+
}
124+
125+
.blog-card-content .project-links a:hover {
126+
color: var(--gradient-pink);
127+
transform: translateY(-3px);
128+
opacity: 1;
129+
}
130+
108131
.view-all-posts-container {
109132
text-align: center;
110133
margin-top: 2rem;

‎css/components/featured-projects.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,28 @@
8686
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
8787
}
8888

89+
/* --- Figma Embed Styles --- */
90+
.figma-embed-container {
91+
position: relative;
92+
width: 100%;
93+
height: 0;
94+
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
95+
margin-top: 1.5rem;
96+
border-radius: 1rem;
97+
overflow: hidden;
98+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
99+
border: 1px solid var(--border-color);
100+
}
101+
102+
.figma-embed-container iframe {
103+
position: absolute;
104+
top: 0;
105+
left: 0;
106+
width: 100%;
107+
height: 100%;
108+
border: none;
109+
}
110+
89111
/* --- The Details Column --- */
90112
.details-column {
91113
display: flex;

‎index.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -379,6 +379,9 @@ <h4 class="feature-title">FEATURES</h4>
379379
</div>
380380
<div class="image-gallery">
381381
<img src="assets/home_aptis.png" alt="Aptis Practice UI" class="showcase-img">
382+
<div class="figma-embed-container">
383+
<iframe src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fcommunity%2Ffile%2F1622808499508850540%2Faptis-e-learning-exam-practice-platform-ui-aptis-practice" allowfullscreen></iframe>
384+
</div>
382385
</div>
383386
</div>
384387
</div>
@@ -397,6 +400,8 @@ <h2>Aptis Practice</h2>
397400
aria-label="GitHub"><i class="fab fa-github"></i></a>
398401
<a href="https://tranhuudat2004.github.io/aptis-practice/" target="_blank"
399402
aria-label="Live Demo"><i class="fas fa-link"></i></a>
403+
<a href="https://www.figma.com/community/file/1622808499508850540/aptis-e-learning-exam-practice-platform-ui-aptis-practice"
404+
target="_blank" aria-label="Figma Design"><i class="fab fa-figma"></i></a>
400405
</div>
401406
</div>
402407
</div>

‎project.html‎

Lines changed: 41 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,7 @@ <h2 class="section-title">My Projects</h2>
100100
<div class="blog-grid">
101101

102102
<!-- PROJECT 1: Omacha Shop -->
103-
<a href="https://tranhuudat2004.github.io/Omacha-Shop-Demo/" target="_blank"
104-
class="blog-post-card glass-card animate-on-scroll">
103+
<div class="blog-post-card glass-card animate-on-scroll">
105104
<div class="blog-card-image">
106105
<img src="assets/banner_omacha.png" alt="Omacha Homepage">
107106
</div>
@@ -112,12 +111,15 @@ <h2 class="section-title">My Projects</h2>
112111
<h3>Omacha Shop E-Commerce</h3>
113112
<p>A comprehensive toy e-commerce platform designed for a fun shopping experience and
114113
powerful admin tools.</p>
115-
<span class="blog-card-link">Live Demo <i class="fas fa-arrow-right"></i></span>
114+
<div class="project-links">
115+
<a href="https://github.com/TranHuuDat2004/Omacha_Shop" target="_blank" aria-label="GitHub"><i class="fab fa-github"></i></a>
116+
<a href="https://tranhuudat2004.github.io/Omacha-Shop-Demo/" target="_blank" aria-label="Live Demo"><i class="fas fa-link"></i></a>
117+
</div>
116118
</div>
117-
</a>
119+
</div>
118120

119121
<!-- PROJECT 2: BrickShop -->
120-
<a href="#" class="blog-post-card glass-card animate-on-scroll">
122+
<div class="blog-post-card glass-card animate-on-scroll">
121123
<div class="blog-card-image">
122124
<img src="assets/banner_brickshop.png" alt="BrickShop Homepage">
123125
</div>
@@ -128,13 +130,15 @@ <h3>Omacha Shop E-Commerce</h3>
128130
<h3>BrickShop E-Commerce</h3>
129131
<p>A modern e-commerce hub for building block fans, developed with Node.js and a Tailwind
130132
CSS admin UI.</p>
131-
<span class="blog-card-link">Project Details <i class="fas fa-arrow-right"></i></span>
133+
<div class="project-links">
134+
<a href="https://github.com/TranHuuDat2004/BrickShop" target="_blank" aria-label="GitHub"><i class="fab fa-github"></i></a>
135+
<a href="#" aria-label="Project Details"><i class="fas fa-link"></i></a>
136+
</div>
132137
</div>
133-
</a>
138+
</div>
134139

135140
<!-- PROJECT 3: ZStyle -->
136-
<a href="https://github.com/TranHuuDat2004/ZStyle" target="_blank"
137-
class="blog-post-card glass-card animate-on-scroll">
141+
<div class="blog-post-card glass-card animate-on-scroll">
138142
<div class="blog-card-image">
139143
<img src="assets/banner_zstyle.png" alt="ZStyle Homepage">
140144
</div>
@@ -145,12 +149,14 @@ <h3>BrickShop E-Commerce</h3>
145149
<h3>ZStyle Fashion E-Commerce</h3>
146150
<p>Developed a basic clothing e-commerce website as part of a course project, implementing
147151
core features.</p>
148-
<span class="blog-card-link">GitHub <i class="fas fa-arrow-right"></i></span>
152+
<div class="project-links">
153+
<a href="https://github.com/TranHuuDat2004/ZStyle" target="_blank" aria-label="GitHub"><i class="fab fa-github"></i></a>
154+
</div>
149155
</div>
150-
</a>
156+
</div>
151157

152158
<!-- PROJECT 4: Unidoc -->
153-
<a href="#" class="blog-post-card glass-card animate-on-scroll">
159+
<div class="blog-post-card glass-card animate-on-scroll">
154160
<div class="blog-card-image">
155161
<img src="assets/banner_unidoc.png" alt="Unidoc Homepage">
156162
</div>
@@ -161,13 +167,15 @@ <h3>ZStyle Fashion E-Commerce</h3>
161167
<h3>Unidoc Document Hub</h3>
162168
<p>A comprehensive document hub designed to help university students easily manage, find,
163169
and share their study materials.</p>
164-
<span class="blog-card-link">Live Demo <i class="fas fa-arrow-right"></i></span>
170+
<div class="project-links">
171+
<a href="#" target="_blank" aria-label="GitHub"><i class="fab fa-github"></i></a>
172+
<a href="#" aria-label="Live Demo"><i class="fas fa-link"></i></a>
173+
</div>
165174
</div>
166-
</a>
175+
</div>
167176

168177
<!-- PROJECT 5: Aptis Practice -->
169-
<a href="https://tranhuudat2004.github.io/aptis-practice/" target="_blank"
170-
class="blog-post-card glass-card animate-on-scroll">
178+
<div class="blog-post-card glass-card animate-on-scroll">
171179
<div class="blog-card-image">
172180
<img src="assets/banner_Aptis.png" alt="Aptis Practice UI">
173181
</div>
@@ -178,13 +186,17 @@ <h3>Unidoc Document Hub</h3>
178186
<h3>Aptis Practice Testing Tool</h3>
179187
<p>An interactive web tool built to solve a personal problem after a first attempt at the
180188
Aptis test.</p>
181-
<span class="blog-card-link">Live Demo <i class="fas fa-arrow-right"></i></span>
189+
<div class="project-links">
190+
<a href="https://github.com/TranHuuDat2004/aptis-practice" target="_blank" aria-label="GitHub"><i class="fab fa-github"></i></a>
191+
<a href="https://tranhuudat2004.github.io/aptis-practice/" target="_blank" aria-label="Live Demo"><i class="fas fa-link"></i></a>
192+
<a href="https://www.figma.com/community/file/1622808499508850540/aptis-e-learning-exam-practice-platform-ui-aptis-practice"
193+
target="_blank" aria-label="Figma Design"><i class="fab fa-figma"></i></a>
194+
</div>
182195
</div>
183-
</a>
196+
</div>
184197

185198
<!-- PROJECT 6: Puzzle & Image Tools -->
186-
<a href="https://tranhuudat2004.github.io/games_tools/" target="_blank"
187-
class="blog-post-card glass-card animate-on-scroll">
199+
<div class="blog-post-card glass-card animate-on-scroll">
188200
<div class="blog-card-image">
189201
<img src="assets/home_game_tool.png" alt="Puzzle & Image Tools UI">
190202
</div>
@@ -195,13 +207,14 @@ <h3>Aptis Practice Testing Tool</h3>
195207
<h3>Puzzle & Image Tools Suite</h3>
196208
<p>An engaging web application that includes an interactive puzzle game and practical image
197209
processing tools.</p>
198-
<span class="blog-card-link">Live Demo <i class="fas fa-arrow-right"></i></span>
210+
<div class="project-links">
211+
<a href="https://tranhuudat2004.github.io/games_tools/" target="_blank" aria-label="Live Demo"><i class="fas fa-link"></i></a>
212+
</div>
199213
</div>
200-
</a>
214+
</div>
201215

202216
<!-- PROJECT 7: Signature Verification -->
203-
<a href="https://github.com/TranHuuDat2004/handwriting-signature-recognition" target="_blank"
204-
class="blog-post-card glass-card animate-on-scroll">
217+
<div class="blog-post-card glass-card animate-on-scroll">
205218
<div class="blog-card-image">
206219
<img src="assets/home_handwriting.png" alt="Signature Verification Concept">
207220
</div>
@@ -212,9 +225,11 @@ <h3>Puzzle & Image Tools Suite</h3>
212225
<h3>Signature Verification</h3>
213226
<p>Developed a model to verify handwritten signatures using Machine Learning techniques in
214227
Google Colab.</p>
215-
<span class="blog-card-link">GitHub <i class="fas fa-arrow-right"></i></span>
228+
<div class="project-links">
229+
<a href="https://github.com/TranHuuDat2004/handwriting-signature-recognition" target="_blank" aria-label="GitHub"><i class="fab fa-github"></i></a>
230+
</div>
216231
</div>
217-
</a>
232+
</div>
218233

219234
</div>
220235
</div>

0 commit comments

Comments
 (0)