add project omacha

Author: TranHuuDat2004

brickshop.html

@@ -11,15 +11,14 @@
     <title>Dự án: BrickShop - Trần Hữu Đạt</title>
     <!-- Favicon-->
     <link rel="icon" type="image/png" href="assets/favicon.png" />
-    <!-- Custom Google font-->
+    <!-- Fonts và Icons -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
         href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap"
         rel="stylesheet" />
-    <!-- Bootstrap icons-->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet" />
-    <!-- Core theme CSS (includes Bootstrap)-->
+    <!-- Core CSS -->
     <link href="css/styles.css" rel="stylesheet" />
     <link href="css/github.css" rel="stylesheet" />
 

css/animation.css

@@ -7,17 +7,17 @@
     box-sizing: border-box;
 }
 
-body {
+/* body {
     font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    /* background: linear-gradient(135deg,
+    background: linear-gradient(135deg,
             #ff9a9e 0%,
             #fecfef 15%,
             #ffecd2 30%,
             #fcb69f 45%,
             #ff6b6b 60%,
             #ee5a52 75%,
             #d63384 90%,
-            #b91c1c 100%);  */
+            #b91c1c 100%); */
 
     /* Hiệu ứng nền Gradient chính */
 
@@ -26,44 +26,46 @@ body {
 
     /* background: linear-gradient(135deg, #1e30f3 0%, #e21e80 100%); */
 
-    background: linear-gradient(125deg,
+    /* background: linear-gradient(125deg,
             #ff6b6b,
-            /* Đỏ hồng */
+            /* Đỏ hồng 
             #ff9a8b,
-            /* Cam nhạt */
+            /* Cam nhạt 
             #fecfef,
-            /* Hồng phấn */
+            /* Hồng phấn 
             #ffda07,
-            /* Vàng */
+            /* Vàng 
             #a8e6cf,
-            /* Xanh bạc hà */
+            /* Xanh bạc hà 
             #23d5ab,
-            /* Xanh lá cây sáng */
+            /* Xanh lá cây sáng 
             #23a6d5,
-            /* Xanh dương */
+            /* Xanh dương 
             #a1c4fd,
-            /* Xanh da trời nhạt */
+            /* Xanh da trời nhạt 
             #c6a9e8,
-            /* Tím Lavender */
+            /* Tím Lavender 
             #e73c7e
-            /* Hồng đậm */
-        );
-    background-size: 400% 400%;
+            /* Hồng đậm 
+        ); */
+
+
+    /* background-size: 400% 400%;
     /* Kích thước của gradient lớn hơn viewport để có thể di chuyển */
-    animation: gradient-animation 10s ease infinite;
+    /* animation: gradient-animation 10s ease infinite; */
     /* Gọi animation để chạy nền */
-    color: #333;
+    /* color: #333; */
     /* Đảm bảo màu chữ mặc định dễ đọc */
 
-    min-height: 100vh;
+    /* min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
-    overflow-x: hidden;
-}
+    overflow-x: hidden; */
+/* } */ 
 
-/* Định nghĩa chuyển động của gradient */
+/* Định nghĩa chuyển động của gradient
 @keyframes gradient-animation {
     0% {
         background-position: 0% 50%;
@@ -76,7 +78,7 @@ body {
     100% {
         background-position: 0% 50%;
     }
-}
+} */
 
 /* Hiệu ứng nền màu nước */
 /* body::before {
@@ -97,6 +99,25 @@ body {
     z-index: -2;
 } */
 
+body {
+    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg,
+            #ff9a9e 0%,
+            #fecfef 15%,
+            #ffecd2 30%,
+            #fcb69f 45%,
+            #ff6b6b 60%,
+            #ee5a52 75%,
+            #d63384 90%,
+            #b91c1c 100%);
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow-x: hidden;
+}
+
 /* Lớp phủ để làm dịu nền (Tùy chọn nhưng khuyến khích) */
 /* Bạn có thể tạo một div ngay sau body hoặc dùng pseudo-element */
 body::before {
@@ -643,27 +664,41 @@ body::after {
 
 /* Áp dụng animation cho tất cả các icon có class .animated-icon */
 .animated-icon {
-    display: inline-block; /* Bắt buộc để transform hoạt động */
+    display: inline-block;
+    /* Bắt buộc để transform hoạt động */
     animation: pulse-glow 3s ease-in-out infinite;
     /* Gán một độ trễ khác nhau cho mỗi icon để chúng không nháy cùng lúc */
 }
 
-.feature-list li:nth-child(1) .animated-icon { animation-delay: 0s; }
-.feature-list li:nth-child(2) .animated-icon { animation-delay: 0.5s; }
-.feature-list li:nth-child(3) .animated-icon { animation-delay: 1s; }
-.feature-list li:nth-child(4) .animated-icon { animation-delay: 1.5s; }
+.feature-list li:nth-child(1) .animated-icon {
+    animation-delay: 0s;
+}
+
+.feature-list li:nth-child(2) .animated-icon {
+    animation-delay: 0.5s;
+}
+
+.feature-list li:nth-child(3) .animated-icon {
+    animation-delay: 1s;
+}
+
+.feature-list li:nth-child(4) .animated-icon {
+    animation-delay: 1.5s;
+}
 
 
 /* Keyframes animation (có thể dùng lại từ code cũ nếu có) */
 @keyframes pulse-glow {
+
     0%,
     100% {
         transform: scale(1);
         filter: drop-shadow(0 2px 4px rgba(220, 38, 38, 0.3));
     }
 
     50% {
-        transform: scale(1.2); /* Tăng độ nảy lên một chút */
+        transform: scale(1.2);
+        /* Tăng độ nảy lên một chút */
         filter: drop-shadow(0 4px 12px rgba(220, 38, 38, 0.5));
     }
 }

index.html

@@ -229,15 +229,15 @@ <h1 class="display-3 fw-bolder mb-5"><span class="text-gradient d-inline">Trần
                                 viên Kỹ thuật Phần mềm đầy nhiệt huyết, chuyên về phát triển ứng dụng web và di động,
                                 luôn mong muốn học hỏi công nghệ mới và đóng góp vào các dự án sáng tạo.</p>
                             <div class="d-grid gap-3 d-sm-flex justify-content-sm-center justify-content-lg-start mb-3">
-                                <!-- Các nút bấm giữ nguyên -->
+                                <!-- Các nút 1 và 2 giữ nguyên -->
                                 <a class="btn btn-primary btn-lg px-4 py-3 me-sm-3 fs-6 fw-bolder" href="resume.html"
                                     data-translate-key="btnMyResume">Hồ sơ của tôi</a>
                                 <a class="btn btn-outline-dark btn-lg px-4 py-3 me-sm-3 fs-6 fw-bolder"
                                     href="projects.html" data-translate-key="btnMyProjects">Dự án của tôi</a>
-                                <a class="btn btn-outline-danger btn-lg px-4 py-3 fs-6 fw-bolder d-inline-flex align-items-center"
-                                    href="animation.html">
-                                    <span data-translate-key="btnAnimation">Animation Page</span>
-                                </a>
+
+                                <!-- SỬA NÚT THỨ BA -->
+                                <a class="btn btn-outline-danger btn-lg px-4 py-3 fs-6 fw-bolder" href="animation.html"
+                                    data-translate-key="btnAnimation">Trang hiệu ứng</a>
                             </div>
                         </div>
                     </div>