Skip to content

Commit 018c63a

Browse files
TranHuuDat2004TranHuuDat2004
committed
add Github index
1 parent 4eedd43 commit 018c63a

5 files changed

Lines changed: 244 additions & 278 deletions

File tree

‎css/github.css‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
.project-card-image {
2+
max-width: 150px;
3+
/* Kích thước logo trên mobile */
4+
/* margin-bottom: 1rem; Khoảng cách với text khi ở dạng cột (nếu ảnh ở trên) */
5+
/* Nếu ảnh ở bên, margin-bottom không cần thiết khi flex-direction: column */
6+
display: block;
7+
/* Loại bỏ khoảng trắng thừa nếu là ảnh inline */
8+
margin-left: auto;
9+
/* Căn giữa ảnh trên mobile nếu text-align:center cho div cha */
10+
margin-right: auto;
11+
}
12+
13+
.featured-projects h2 {
14+
text-align: center;
15+
color: #fff;
16+
margin-bottom: 2rem;
17+
}
18+
19+
.projects-grid {
20+
display: grid;
21+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
22+
gap: 1.5rem;
23+
max-width: 1200px;
24+
margin: 0 auto;
25+
padding: 0 1rem;
26+
}
27+
28+
.project-card {
29+
background-color: white;
30+
31+
border-radius: 6px;
32+
padding: 1.5rem;
33+
display: flex;
34+
flex-direction: column;
35+
justify-content: space-between;
36+
}
37+
38+
.card-header {
39+
display: flex;
40+
justify-content: space-between;
41+
align-items: center;
42+
margin-bottom: 0.75rem;
43+
}
44+
45+
.project-title {
46+
font-size: 1.25rem;
47+
font-weight: 600;
48+
color: #58a6ff;
49+
/* Màu tiêu đề */
50+
}
51+
52+
.external-link-icon svg {
53+
width: 16px;
54+
height: 16px;
55+
fill: #8b949e;
56+
}
57+
58+
.project-description {
59+
font-size: 0.875rem;
60+
color: #8b949e;
61+
margin-bottom: 1rem;
62+
flex-grow: 1;
63+
/* Để description chiếm không gian còn lại */
64+
line-height: 1.5;
65+
}
66+
67+
.card-footer {
68+
display: flex;
69+
justify-content: space-between;
70+
align-items: center;
71+
font-size: 0.875rem;
72+
color: #8b949e;
73+
}
74+
75+
.project-language {
76+
display: flex;
77+
align-items: center;
78+
}
79+
80+
.language-dot {
81+
width: 12px;
82+
height: 12px;
83+
border-radius: 50%;
84+
margin-right: 6px;
85+
}
86+
87+
.language-dot.ruby {
88+
background-color: #701516;
89+
}
90+
91+
.language-dot.css {
92+
background-color: #563d7c;
93+
}
94+
95+
.language-dot.html {
96+
background-color: #e34c26;
97+
}
98+
99+
.language-dot.javascript {
100+
background-color: #f1e05a;
101+
}
102+
103+
.language-dot.unknown, .language-dot.jupyter-notebook {
104+
background-color: #ccc;
105+
}
106+
107+
.language-dot.php {
108+
background-color: #777BB4;
109+
}
110+
111+
.language-dot.dart {
112+
background-color: #00B4AB;
113+
}
114+
115+
.language-dot.java {
116+
background-color: #b07219;
117+
}
118+
119+
.language-dot.nodejs {
120+
background-color: #339933;
121+
}
122+
123+
.language-dot.ejs {
124+
background-color: #a91e50;
125+
}
126+
127+
/* Thêm các ngôn ngữ/công nghệ khác nếu cần */
128+
.language-dot.python {
129+
background-color: #3572A5;
130+
/* Xanh dương của Python */
131+
}
132+
133+
.language-dot.csharp {
134+
/* Cho C# */
135+
background-color: #178600;
136+
/* Xanh lá cây đậm */
137+
}
138+
139+
.language-dot.swift {
140+
background-color: #FA7343;
141+
/* Cam của Swift */
142+
}
143+
144+
.language-dot.kotlin {
145+
background-color: #7F52FF;
146+
/* Tím của Kotlin */
147+
}
148+
149+
.language-dot.go {
150+
background-color: #00ADD8;
151+
/* Xanh da trời của Go */
152+
}
153+
154+
.language-dot.typescript {
155+
background-color: #3178c6;
156+
/* Xanh dương của TypeScript */
157+
}
158+
159+
.project-stats span {
160+
margin-left: 1rem;
161+
}
162+
163+
.project-stats .stars::before {
164+
content: '⭐';
165+
margin-right: 4px;
166+
}
167+
168+
/* Hoặc dùng SVG icon */
169+
.project-stats .forks::before {
170+
content: '🍴';
171+
margin-right: 4px;
172+
}

‎github.html‎

Lines changed: 2 additions & 173 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css" rel="stylesheet" />
2020
<!-- Core theme CSS (includes Bootstrap)-->
2121
<link href="css/styles.css" rel="stylesheet" />
22-
22+
<link href="css/github.css" rel="stylesheet" />
2323
<style>
2424
body {
2525
/* Áp dụng cursor: none cho toàn bộ body */
@@ -133,178 +133,6 @@
133133
/* Trạng thái khi text mờ đi */
134134
}
135135

136-
.project-card-image {
137-
max-width: 150px;
138-
/* Kích thước logo trên mobile */
139-
/* margin-bottom: 1rem; Khoảng cách với text khi ở dạng cột (nếu ảnh ở trên) */
140-
/* Nếu ảnh ở bên, margin-bottom không cần thiết khi flex-direction: column */
141-
display: block;
142-
/* Loại bỏ khoảng trắng thừa nếu là ảnh inline */
143-
margin-left: auto;
144-
/* Căn giữa ảnh trên mobile nếu text-align:center cho div cha */
145-
margin-right: auto;
146-
}
147-
148-
.featured-projects h2 {
149-
text-align: center;
150-
color: #fff;
151-
margin-bottom: 2rem;
152-
}
153-
154-
.projects-grid {
155-
display: grid;
156-
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
157-
gap: 1.5rem;
158-
max-width: 1200px;
159-
margin: 0 auto;
160-
padding: 0 1rem;
161-
}
162-
163-
.project-card {
164-
background-color: white;
165-
166-
border-radius: 6px;
167-
padding: 1.5rem;
168-
display: flex;
169-
flex-direction: column;
170-
justify-content: space-between;
171-
}
172-
173-
.card-header {
174-
display: flex;
175-
justify-content: space-between;
176-
align-items: center;
177-
margin-bottom: 0.75rem;
178-
}
179-
180-
.project-title {
181-
font-size: 1.25rem;
182-
font-weight: 600;
183-
color: #58a6ff;
184-
/* Màu tiêu đề */
185-
}
186-
187-
.external-link-icon svg {
188-
width: 16px;
189-
height: 16px;
190-
fill: #8b949e;
191-
}
192-
193-
.project-description {
194-
font-size: 0.875rem;
195-
color: #8b949e;
196-
margin-bottom: 1rem;
197-
flex-grow: 1;
198-
/* Để description chiếm không gian còn lại */
199-
line-height: 1.5;
200-
}
201-
202-
.card-footer {
203-
display: flex;
204-
justify-content: space-between;
205-
align-items: center;
206-
font-size: 0.875rem;
207-
color: #8b949e;
208-
}
209-
210-
.project-language {
211-
display: flex;
212-
align-items: center;
213-
}
214-
215-
.language-dot {
216-
width: 12px;
217-
height: 12px;
218-
border-radius: 50%;
219-
margin-right: 6px;
220-
}
221-
222-
.language-dot.ruby {
223-
background-color: #701516;
224-
}
225-
226-
.language-dot.css {
227-
background-color: #563d7c;
228-
}
229-
230-
.language-dot.html {
231-
background-color: #e34c26;
232-
}
233-
234-
.language-dot.javascript {
235-
background-color: #f1e05a;
236-
}
237-
238-
.language-dot.unknown, .language-dot.jupyter-notebook {
239-
background-color: #ccc;
240-
}
241-
242-
.language-dot.php {
243-
background-color: #777BB4;
244-
}
245-
246-
.language-dot.dart {
247-
background-color: #00B4AB;
248-
}
249-
250-
.language-dot.java {
251-
background-color: #b07219;
252-
}
253-
254-
.language-dot.nodejs {
255-
background-color: #339933;
256-
}
257-
258-
.language-dot.ejs {
259-
background-color: #a91e50;
260-
}
261-
262-
/* Thêm các ngôn ngữ/công nghệ khác nếu cần */
263-
.language-dot.python {
264-
background-color: #3572A5;
265-
/* Xanh dương của Python */
266-
}
267-
268-
.language-dot.csharp {
269-
/* Cho C# */
270-
background-color: #178600;
271-
/* Xanh lá cây đậm */
272-
}
273-
274-
.language-dot.swift {
275-
background-color: #FA7343;
276-
/* Cam của Swift */
277-
}
278-
279-
.language-dot.kotlin {
280-
background-color: #7F52FF;
281-
/* Tím của Kotlin */
282-
}
283-
284-
.language-dot.go {
285-
background-color: #00ADD8;
286-
/* Xanh da trời của Go */
287-
}
288-
289-
.language-dot.typescript {
290-
background-color: #3178c6;
291-
/* Xanh dương của TypeScript */
292-
}
293-
294-
.project-stats span {
295-
margin-left: 1rem;
296-
}
297-
298-
.project-stats .stars::before {
299-
content: '⭐';
300-
margin-right: 4px;
301-
}
302-
303-
/* Hoặc dùng SVG icon */
304-
.project-stats .forks::before {
305-
content: '🍴';
306-
margin-right: 4px;
307-
}
308136

309137
/* Hoặc dùng SVG icon */
310138

@@ -383,6 +211,7 @@
383211
</div>
384212
</div>
385213
</nav>
214+
<!-- My Projects on GitHub -->
386215
<section class="py-5">
387216
<div class="container px-5 mb-5">
388217
<div class="text-center mb-5">

0 commit comments

Comments
 (0)