v1.3.0: The Redesign Update - New Interface & Animations

This major update introduces a complete visual and experiential overhaul to the portfolio, centered around a brand new, beautifully animated splash page. Version 1.3.0 focuses on creating a more dynamic, modern, and memorable first impression.

---

✨ What's New?

• 🚀 New Animated Splash Page (new-version.html):
  • Introducing a stunning, fully-animated entry point to the portfolio!
  • Features an elegant scroll-triggered animations for all content sections.
  • Built with pure HTML, CSS, and JavaScript to showcase modern front-end techniques.

Tiếng Việt

Đây là một bản cập nhật lớn, mang đến một cuộc "lột xác" toàn diện về giao diện và trải nghiệm cho portfolio, với tâm điểm là một trang chào mừng (splash page) hoàn toàn mới và đầy hiệu ứng. Phiên bản 1.3.0 tập trung vào việc tạo ra một ấn tượng đầu tiên năng động, hiện đại và đáng nhớ hơn.

---

✨ Có gì mới?

• 🚀 Trang Chào mừng Animation mới (new-version.html):
  • Giới thiệu một "cổng vào" portfolio cực kỳ bắt mắt và đầy hiệu ứng!
  • Tích hợp các animation xuất hiện khi cuộn cho tất cả các mục nội dung.
  • Được xây dựng bằng HTML, CSS và JavaScript thuần để thể hiện các kỹ thuật front-end hiện đại.

v1.2.0: Major Content & Feature Expansion

This is a significant minor release that introduces new pages, detailed project showcases, and major structural improvements to the portfolio. The goal of this update is to provide a more engaging, comprehensive, and professional user experience.

---

✨ New Features & Pages

• 🚀 New Animation Splash Page (animation.html):

  • Added a brand new, visually stunning splash page featuring beautiful CSS animations, gradients, and particle effects.
  • This page acts as a creative and impressive entry point to welcome visitors to the portfolio.

• 📄 New Detailed Project Pages (brickshop.html, omachashop.html):

  • Each major project now has its own dedicated detail page.
  • These pages provide an in-depth look at each project, including detailed feature lists, technology stacks, and extensive screenshot galleries for both customer and admin interfaces.

• 📄 New Resume Download Page (download-resume.html):

  • Created a dedicated page allowing visitors to download two versions of my CV:
    1. Summary Resume (1-Page): For a quick, high-impact overview.
    2. Comprehensive Resume: For a detailed, in-depth review.
  • This feature enhances the professional experience for recruiters and hiring managers.

🔧 Enhancements & Improvements

• 🎨 Upgraded Footer Design:

  • Replaced the old footer with a modern, multi-column dark footer.
  • The new design is more structured, visually appealing, and provides quick access to key links and social profiles.

• 🌐 Full Bilingual Support on New Pages:

  • All new pages (animation.html, download-resume.html, project details) are fully integrated with the English/Vietnamese language switcher.

• 🛠️ Codebase Refactoring (DRY Principle):

  • Extracted the Header and Footer into separate JavaScript files (header.js, footer.js) to avoid code repetition.
  • This makes the site easier to maintain and update, as changes only need to be made in one place.

---

Tiếng Việt

Đây là một bản phát hành nhỏ (minor) nhưng rất quan trọng, giới thiệu các trang mới, phần trưng bày dự án chi tiết, và các cải tiến lớn về cấu trúc cho portfolio. Mục tiêu của bản cập nhật này là cung cấp một trải nghiệm người dùng hấp dẫn, toàn diện và chuyên nghiệp hơn.

---

✨ Tính năng & Trang mới

• 🚀 Trang Chào mừng Animation mới (animation.html):

  • Thêm một trang "splash page" hoàn toàn mới, cực kỳ bắt mắt với các hiệu ứng animation, gradient, và hạt bay được tạo bằng CSS.
  • Trang này đóng vai trò là một điểm vào đầy sáng tạo và ấn tượng để chào mừng khách ghé thăm portfolio.

• 📄 Trang Chi tiết Dự án mới (brickshop.html, omachashop.html):

  • Mỗi dự án lớn giờ đây đều có một trang chi tiết riêng.
  • Các trang này cung cấp cái nhìn sâu sắc về từng dự án, bao gồm danh sách tính năng chi tiết, ngăn xếp công nghệ, và thư viện ảnh chụp màn hình phong phú cho cả giao diện người dùng và quản trị.

• 📄 Trang Tải CV mới (download-resume.html):

  • Tạo một trang chuyên dụng cho phép người xem tải về hai phiên bản CV của tôi:
    1. CV Tóm tắt (1 Trang): Cho một cái nhìn tổng quan nhanh và hiệu quả.
    2. CV Đầy đủ: Cho việc xem xét chi tiết và sâu sắc.
  • Tính năng này nâng cao trải nghiệm chuyên nghiệp cho các nhà tuyển dụng.

🔧 Cải tiến và Nâng cấp

• 🎨 Nâng cấp Thiết kế Footer:

  • Thay thế footer cũ bằng một thiết kế footer tối, nhiều cột hiện đại.
  • Thiết kế mới có cấu trúc tốt hơn, hấp dẫn về mặt thị giác và cung cấp truy cập nhanh đến các liên kết chính và hồ sơ mạng xã hội.

• 🌐 Hỗ trợ Song ngữ Đầy đủ trên các Trang mới:

  • Tất cả các trang mới (animation.html, download-resume.html, trang chi tiết dự án) đều được tích hợp đầy đủ với bộ chuyển đổi ngôn ngữ Anh/Việt.

• 🛠️ Tái cấu trúc Mã nguồn (Nguyên tắc DRY):

  • Tách Header và Footer ra các tệp JavaScript riêng biệt (header.js, footer.js) để tránh lặp lại mã.
  • Điều này giúp trang web dễ bảo trì và cập nhật hơn, vì các thay đổi chỉ cần được thực hiện ở một nơi duy nhất.

v1.1.2: Code Refactoring & Maintenance Improvements

This is a patch release focused on improving the codebase's structure and maintainability. While there are no new user-facing features, these changes make the project significantly easier to manage and scale in the future.

This update follows the principles of Don't Repeat Yourself (DRY) by centralizing shared UI components.

---

🔧 Improvements & Code Refactoring

• Centralized Header & Footer: The navigation bar (Header) and the footer section have been extracted into their own dedicated JavaScript files (header.js, footer.js).

  • Benefit: Any future updates to the header or footer now only need to be made in one place, automatically applying the changes across all pages.
  • Implementation: Placeholders (<header-placeholder>, <footer-placeholder>) are used in the HTML, and the content is dynamically injected via JavaScript.

• Active Page Highlighting: The navigation menu now automatically highlights the link corresponding to the current page (.active class), improving user navigation experience.

---

Tiếng Việt

Đây là một bản phát hành vá lỗi, tập trung vào việc cải thiện cấu trúc và khả năng bảo trì của mã nguồn. Mặc dù không có tính năng mới nào dành cho người dùng, những thay đổi này giúp dự án dễ dàng quản lý và mở rộng hơn trong tương lai.

Bản cập nhật này tuân theo nguyên tắc "Don't Repeat Yourself" (DRY) bằng cách tập trung hóa các thành phần giao diện người dùng được chia sẻ.

---

🔧 Cải tiến & Tái cấu trúc Mã nguồn

• Tập trung hóa Header & Footer: Thanh điều hướng (Header) và phần chân trang (Footer) đã được tách ra thành các tệp JavaScript chuyên dụng của riêng chúng (header.js, footer.js).

  • Lợi ích: Mọi cập nhật trong tương lai cho header hoặc footer giờ đây chỉ cần thực hiện ở một nơi duy nhất, các thay đổi sẽ tự động được áp dụng trên tất cả các trang.
  • Triển khai: Các phần giữ chỗ (<header-placeholder>, <footer-placeholder>) được sử dụng trong HTML, và nội dung được chèn động thông qua JavaScript.

• Làm nổi bật Trang hiện tại: Menu điều hướng giờ đây tự động làm nổi bật liên kết tương ứng với trang hiện tại (lớp .active), cải thiện trải nghiệm điều hướng của người dùng.

v1.1.1: Refined UI with Pastel Color Palette for Tags

Version 1.1.1: Refined UI with Pastel Color Palette 🎨🖌️

This release builds upon v1.1.0 by introducing a more refined and subtle color palette for the project category tags and technology stack pills on the "My Projects" page. The move to pastel colors aims to enhance visual comfort, maintain professionalism, and improve overall aesthetic harmony.

🌟 Key Improvements in this Version:

• Pastel Color Scheme for Tags:
  • Project category tags (e.g., "SPECIAL PROJECT", "NEW RELEASE") and technology stack pills now utilize a softer, pastel color scheme.
  • This change provides a more modern, elegant, and less visually overwhelming experience, especially when viewing multiple projects with many tech tags.
• Enhanced Readability: The pastel backgrounds are chosen to ensure good text contrast, maintaining or improving readability of the tag labels.
• Improved Visual Cohesion: The softer colors contribute to a more cohesive and sophisticated visual design across the project showcase.
• Retained Functionality: All features introduced in v1.1.0, such as project categorization and clear tech stack Taging, are retained. The primary change is aesthetic.

Visual Comparison (Conceptual):

This version offers a more subdued yet equally informative presentation compared to the brighter tags in v1.1.0.

The goal of this iteration is to provide a polished and professional look that is both informative and pleasant to the eye, making it easier for visitors to focus on project content while still benefiting from visual cues for categorization and technology.

v1.1.0: Vibrant Project Tags & Categorization

Version 1.1.0: Vibrant Project Tags & Enhanced Categorization ✨

This release introduces a significant visual upgrade to the "My Projects" page, focusing on better project discoverability and a more engaging presentation of technical skills.

🎨 Key Changes & New Features:

• Vibrant Category Tags: Implemented distinct, brightly colored category tags (e.g., "SPECIAL PROJECT", "NEW RELEASE", "HIGHLY RECOMMENDED") for each project card. These tags help to quickly highlight and differentiate projects based on their status or importance.
• Colorful Technology Stack Pills: The "Tech Stack" section within each project card now features individual, color-coded "pills" or "badges" for each technology used. This provides a highly visual and easy-to-scan overview of the technical skills applied to each project.
  • Colors are generally chosen to reflect the branding or common association with each technology.
• Improved Project Categorization: Projects are now grouped under clear headings such as "Full-Stack Websites," "GitHub Pages & Frontend," "Android (Java) Apps," and "Machine Learning" for easier navigation.
• Consistent Card Layout: Standardized the internal layout of project cards for a more uniform and professional appearance across different project types.

Visual Highlights:

This version aimed to make the project showcase more dynamic and visually appealing, making it easier for visitors (including potential employers) to quickly grasp the nature and technical depth of each project.

v1.0.0 - Portfolio Project

Trần Hữu Đạt - Personal Portfolio & Project Showcase

Welcome to the source code repository for my personal portfolio website! This site serves as a central hub to showcase my skills, projects, and professional resume. It's designed with a clean, responsive interface and enhanced with interactive elements to provide an engaging user experience.
This README is available in English and Vietnamese. Please expand the section for your preferred language.

🚀 Live Portfolio: https://tranhuudat2004.github.io/
👤 Author GitHub: @TranHuuDat2004

---

English Version (Click to Expand)

✨ Key Features

This portfolio website incorporates several key features:

• Comprehensive Multi-Page Layout:
  • 🏠 Home (index.html): A welcoming landing page introducing myself, highlighting key skills through an interactive grid, and providing an overview of my capabilities.
  • 📄 Resume (resume.html): A detailed presentation of my professional experience, educational background, and notable achievements.
  • 💡 Projects (projects.html): A categorized showcase of my software development projects, complete with descriptions, tech stacks, and direct links to live demos and GitHub repositories. This page dynamically fetches project data from the GitHub API.
  • ✉️ Contact (contact.html): A user-friendly contact form (powered by SB Forms - API token setup required for full functionality) alongside direct contact information.
• 🖱️ Interactive Custom Cursor: A unique, custom-designed mouse cursor that follows user movement across all pages. It features dynamically cycling text (with fade-in/fade-out animations) that is contextually tailored to each specific page (Home, Resume, Projects, Contact), offering relevant greetings or information. The cursor also changes appearance when hovering over interactive elements.
• 🌐 Bilingual Support (English/Vietnamese): Users can seamlessly switch website content between English and Vietnamese using an intuitive language switcher located in the navigation bar. Language preferences are saved locally for a consistent experience.
• 📱 Responsive Design: Built with Bootstrap 5, ensuring the website adapts beautifully and functions optimally across various screen sizes, including desktops, tablets, and mobile devices.
• 🛠️ Interactive Skills Display: Technical skills are presented in an engaging, interactive grid format on the Home and Resume pages, where hovering reveals more information via the custom cursor.

🛠️ Technology Stack

This portfolio is built using a combination of modern front-end technologies:

• HTML5: Semantic markup for structuring the content of all pages.
• CSS3: Custom styling for visual appeal, layout management (Flexbox, Grid), and animations.
  • Bootstrap 5: Leveraged for its robust responsive grid system, pre-styled UI components, and utility classes.
• JavaScript (ES6+): Powers all dynamic functionalities:
  • Custom Cursor Logic: Manages cursor movement, text cycling with fade effects, and context-aware text display (embedded in each HTML page).
  • Bilingual System: Dynamically loads and applies language translations to page content.
  • GitHub API Integration (js/github.js): Fetches and renders project information on the "Projects" page.
  • UI Interactions: Handles events for the language switcher, interactive grids, and other dynamic elements.
• External Libraries & APIs:
  • Bootstrap Icons
  • Google Fonts (Plus Jakarta Sans)
  • SB Forms (for the contact form - API token required)
  • GitHub API (for project data)
• Hosting: Deployed as a static website via GitHub Pages.

🚀 How to View / Local Setup

1. Live Site:

   • The portfolio is best viewed live at: https://tranhuudat2004.github.io/

2. Local Setup:

   • Clone this repository:

     git clone https://github.com/TranHuuDat2004/tranhuudat2004.github.io.git

     (Replace with your actual repository URL if it's different)

   • Navigate into the cloned directory:

     cd tranhuudat2004.github.io

   • Open any of the .html files (e.g., index.html) directly in your preferred web browser. No compilation or build steps are necessary as this is a static website.

   • Important Note for Contact Form: The contact form on contact.html uses SB Forms. For it to send emails, you must:

     1. Sign up at https://startbootstrap.com/solution/contact-forms.
     2. Obtain your unique API token.
     3. Replace the placeholder API_TOKEN_CUA_BAN in the data-sb-form-api-token attribute of the <form> tag in contact.html with your actual token.

💡 Development Insights & Customizations

• Contextual Cursor Text: The custom cursor's text changes based on the page being viewed, providing relevant, cycling messages. This is achieved by defining unique autoTexts arrays within the JavaScript embedded in each HTML page.
• Dynamic Language Switching: A JavaScript-driven system allows users to toggle between English and Vietnamese content. The selected language is persisted in localStorage.
• GitHub Projects Showcase: The projects.html page leverages the GitHub API to automatically fetch and display public repositories as project cards.

🌟 Future Enhancements (Ideas)

• Implement a dark mode/light mode toggle.
• Add a dedicated blog section.
• Further optimize image loading and performance.

👤 Author & Contact

• Trần Hữu Đạt
  • GitHub: @TranHuuDat2004
  • LinkedIn: linkedin.com/in/tranhuudat2004
  • Email: [email protected]

---

Thank you for exploring my portfolio and its source code! Feel free to connect.

---

Phiên bản Tiếng Việt (Nhấn để Mở rộng)

✨ Các Tính năng Chính

Trang web portfolio này tích hợp một số tính năng chính:

• Bố cục Đa trang Toàn diện:
  • 🏠 Trang chủ (index.html): Giới thiệu bản thân, làm nổi bật các kỹ năng chính thông qua một lưới tương tác và cung cấp cái nhìn tổng quan về khả năng của tôi.
  • 📄 Hồ sơ (resume.html): Trình bày chi tiết về kinh nghiệm chuyên môn, quá trình học vấn và những thành tích đáng chú ý.
  • 💡 Dự án (projects.html): Giới thiệu các dự án phát triển phần mềm của tôi theo danh mục, kèm theo mô tả, ngăn xếp công nghệ và liên kết trực tiếp đến demo trực tuyến cũng như kho lưu trữ GitHub. Trang này tự động tải dữ liệu dự án từ GitHub API.
  • ✉️ Liên hệ (contact.html): Một biểu mẫu liên hệ thân thiện với người dùng (sử dụng SB Forms - cần thiết lập API token để hoạt động đầy đủ) cùng với thông tin liên hệ trực tiếp.
• 🖱️ Con trỏ Chuột Tùy chỉnh Tương tác: Một con trỏ chuột được thiết kế tùy chỉnh độc đáo, theo dõi chuyển động của người dùng trên tất cả các trang. Nó hiển thị văn bản thay đổi động (với hiệu ứng fade-in/fade-out) được điều chỉnh theo ngữ cảnh cho từng trang cụ thể (Trang chủ, Hồ sơ, Dự án, Liên hệ), cung cấp các thông điệp chào mừng hoặc thông tin liên quan. Con trỏ cũng thay đổi giao diện khi di chuột qua các yếu tố tương tác.
• 🌐 Hỗ trợ Song ngữ (Tiếng Anh/Tiếng Việt): Người dùng có thể chuyển đổi liền mạch nội dung trang web giữa tiếng Anh và tiếng Việt bằng cách sử dụng bộ chọn ngôn ngữ trực quan trên thanh điều hướng. Tùy chọn ngôn ngữ được lưu cục bộ để mang lại trải nghiệm nhất quán.
• 📱 Thiết kế Đáp ứng (Responsive): Được xây dựng với Bootstrap 5, đảm bảo trang web hiển thị đẹp mắt và hoạt động tối ưu trên nhiều kích thước màn hình khác nhau, bao gồm máy tính để bàn, máy tính bảng và thiết bị di động.
• 🛠️ Hiển thị Kỹ năng Tương tác: Các kỹ năng kỹ thuật được trình bày dưới dạng lưới tương tác hấp dẫn trên trang Chủ và Hồ sơ, nơi việc di chuột qua sẽ hiển thị thêm thông tin thông qua con trỏ tùy chỉnh.

🛠️ Ngăn xếp Công nghệ

Portfolio này được xây dựng bằng sự kết hợp của các công nghệ front-end hiện đại:

• HTML5: Đánh dấu ngữ nghĩa để cấu trúc nội dung của tất cả các trang.
• CSS3: Tạo kiểu tùy chỉnh cho giao diện, quản lý bố cục (Flexbox, Grid) và hiệu ứng động.
  • Bootstrap 5: Được tận dụng cho hệ thống lưới đáp ứng mạnh mẽ, các thành phần UI được tạo kiểu sẵn và các lớp tiện ích.
• JavaScript (ES6+): Cung cấp năng lượng cho tất cả các chức năng động:
  • Logic Con trỏ Tùy chỉnh: Quản lý chuyển động của con trỏ, thay đổi văn bản theo chu kỳ với hiệu ứng mờ dần và hiển thị văn bản theo ngữ cảnh (được nhúng trong từng trang HTML).
  • Hệ thống Song ngữ: Tải và áp dụng các bản dịch ngôn ngữ động cho nội dung trang.
  • Tích hợp GitHub API (js/github.js): Tìm nạp và hiển thị thông tin dự án trên trang "Dự án".
  • Tương tác UI: Xử lý các sự kiện cho bộ chọn ngôn ngữ, lưới tương tác và các yếu tố động khác.
• Thư viện & API Bên ngoài:
  • Bootstrap Icons
  • [Google Fonts (Plus Jakarta Sans)](https://fonts.google.com/specimen/Plus+Jakarta+San...