make everything looks better

hnthap · Jul 5, 2024 · 4cd1f1a · 4cd1f1a
1 parent 8b0bb53
commit 4cd1f1a
Show file tree

Hide file tree

Showing 15 changed files with 373 additions and 182 deletions.
diff --git a/about.html b/about.html
@@ -3,21 +3,22 @@
     <head>
         <title>About me</title>
       <link rel="stylesheet" type="text/css" href="styles.css">
+    <link rel="icon" type="image/x-icon" href="./images/profile.jpg">
     </head>
     <body>
         <div class="content">
             <!-- HEADER -->
-            <div 
-                id="menu"
-                class="blue header" 
-                style="padding-bottom: 20px; display: flex; justify-content: space-between;"
-            ></div>
+            <div id="menu" class="blue header"></div>
             <!-- END HEADER -->
 
-            <div class="center blueborder blue box">
+            <div class="center box">
                 <img class="big-profile" src="./images/profile.jpg">
                 <p>I'm Huynh Nhan Thap, a Computer Science student from<br/> the VNUHCM &mdash; University of Information Technology.</p>
                 <p>I created this site in 2021 to introduce some projects I had been working on.</p>
+            </div>
+            <br />
+            <div class="center box">
+                <h3>Some accounts of mine</h3>
                 <div style="display: flex; justify-content: space-evenly; align-items: center; padding-top: 10px;">
                     <a href="https://github.com/hnthap">
                         <img src="./images/kaggle.png" style="height: 30px">
@@ -36,10 +37,7 @@
         <script src="./utils.js"></script>
         <script lang="jquery">
 
-(() => {
-  $("h1").text("Welcome!");
-  initializeMenu(true);
-})();
+initializeMenu(true);
 
         </script>
     </body>

diff --git a/images/cloud.png b/images/cloud.png
diff --git a/images/front-end.png b/images/front-end.png
diff --git a/images/nodejs-2015.png → images/nodejs.2015.png b/images/nodejs-2015.png → images/nodejs.2015.png
diff --git a/images/projects/portfolio.jpg b/images/projects/portfolio.jpg
diff --git a/images/server.png b/images/server.png
diff --git a/images/star.png b/images/star.png
diff --git a/images/threejs.png b/images/threejs.png
diff --git a/index.html b/index.html
@@ -3,60 +3,64 @@
     <head>
       <title>hnthap from GitHub</title>
       <link rel="stylesheet" type="text/css" href="styles.css">
+    <link rel="icon" type="image/x-icon" href="./images/profile.jpg">
     </head>
     <body>
         <div class="content">
-            <div 
-                id="menu" 
-                class="blue header" 
-                style="padding-bottom: 20px; display: flex; justify-content: space-between;"
-            ></div>
+            <div id="menu" class="blue header"></div>
 
             <div class="row">
                 <!-- COLUMN LEFT -->
                 <div class="columnleft">
-                    <div class="blueborder blue box">
-                        <div class="center">
-                            <img 
-                                src="./images/projects/car-ride-1.png" 
-                                style="width: 360px;" 
-                                alt="project"
-                            >
-                        </div>
-                        <h3 style="text-align: center;">Car Ride Simulation</h3>
-                        <p style="text-align: center;"><a href="./projects.html">see more...</a></p>
+                    <div id="project" class="box">
+
                     </div>
-                    <p><br></p>
                 </div>
                 <!-- END COLUMN LEFT -->
 
                 <!-- COLUMN RIGHT -->
                 <div class="columnright">
-                    <div id="about-box" class="blueborder blue box">
-                        <h3>Hello</h3>
-                        <p>I'm <a href="./about.html">@hnthap</a> from GitHub.</p>
-                        <p>
-                            This site introduces some of my school and hobby projects.
-                        </p>
-                    </div>
-                    <p><br></p>
-                    <div id="project-box" class="blueborder blue box">
-                        <h3>Other projects...</h3>
+                    <div id="about-box" class="box">
+                        <div class="profile-div">
+                            <img src="./images/profile.jpg" alt="My profile image">
+                        </div>
+                        <p>Nice to meet you.</p>
+                        <p>I'm <a href="./about.html">Thap</a>, a CS student at UIT, Vietnam.</p>
                     </div>
                 </div>
                 <!-- END COLUMN RIGHT -->
             </div>
         </div>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
         <script src="./utils.js"></script>
+        <script src="./project-list.js"></script>
+        <script src="./projects.js"></script>
         <script lang="jquery">
 
 (() => {
   $("h1").text("Welcome!");
   initializeMenu(true);
-
   appendBoxButton($("#about-box"), "ABOUT", "./about.html", true);
-  appendBoxButton($("#project-box"), "PROJECTS", "./projects.html", true);
+
+  const highlight = highlights[0];
+  $("#project").append(
+    $("<h2></h2>").text("My recent project"),
+    $("<h3></h3>").text(highlight.name),
+    $("<div></div>")
+        .addClass("project-small-info")
+        .append(
+            $("<img>")
+                .attr("style", "width: 100%;")
+                .attr("src", "./images/projects/" + highlight.image),
+            $("<p></p>")
+                .attr("style", "text-indent: 1em;")
+                .text(highlight.description[0]),
+            $("<p></p>")
+                .attr("style", "font-style: italic; text-align: right;")
+                .text("Click to see more...")
+        )
+        .on("click", () => window.location.replace("./projects.html"))
+  );
 })();
 
         </script>

diff --git a/project-list.js b/project-list.js
@@ -0,0 +1,86 @@
+/**
+ * Projects' information.
+ * @type {{
+ *  tags: string[];
+ *  name: string;
+ *  description: string;
+ *  collaborators: string[];
+ *  image: string;
+ *  github: string;
+ *  year: number;
+ *  githubPage: string;
+ *  highlight: boolean;
+ * }[]}
+ * */
+const projects = [
+  {
+    tags: [
+      "Graphics",
+      "JavaScript/TypeScript",
+      "ReactJS",
+      "NodeJS",
+      "Front-end",
+    ],
+    name: "Car Ride Simulation",
+    description: [
+      `
+Simulating car movement on an artificial landscape, alongside some landmarks in 
+Paris, France. This is the capstone project for my Computer Graphics course at
+university.
+      `,
+      `
+This project involved the use of 3D library (three.js) and a 
+physics engine (cannon.js) through React Three Fiber, React Three Drei and
+React Three Cannon, and a frontend build tool (Vite).
+      `,
+    ],
+    collaborators: ["VuNamPhuong", "daccuong110320"],
+    image: "car-ride-1.png",
+    github: "hnthap/car-ride",
+    year: 2024,
+    githubPage: null,
+    highlight: true,
+  },
+  {
+    tags: ["CSS", "JavaScript/TypeScript", "JQuery", "Front-end"],
+    name: "Basic Calculator",
+    description: [
+      `
+Basic calculator.
+      `,
+      `
+It can perform addition, subtraction, multiplication and
+division. This project uses only plain HTML, CSS and vanilla JavaScript
+(JQuery).
+    `,
+    ],
+    collaborators: [],
+    image: "js-calculator.png",
+    github: "hnthap/js-calculator",
+    year: 2024,
+    githubPage: "https://hnthap.github.io/js-calculator",
+    highlight: false,
+  },
+  {
+    tags: [
+      "JQuery",
+      "JavaScript/TypeScript",
+      "Front-end",
+    ],
+    name: "Personal Portfolio",
+    description: [
+      `
+My GitHub portfolio as a static website using GitHub Pages.
+      `,
+      `
+This project only uses HTML, CSS, vanilla JavaScript and JQuery.
+      `,
+    ],
+    collaborators: [],
+    image: "portfolio.jpg",
+    github: "hnthap/hnthap.github.io",
+    year: 2021,
+    githubPage: "https://hnthap.github.io",
+    highlight: true,
+  },
+];
diff --git a/projects.html b/projects.html
@@ -8,10 +8,7 @@
     <body>
         <div class="content">
             <!-- HEADER -->
-            <div 
-                id="menu"
-                class="blue header" 
-            ></div>
+            <div id="menu" class="blue header"></div>
             <!-- END HEADER -->
 
             <div class="row">
@@ -24,13 +21,24 @@
 
                 <!-- COLUMN RIGHT -->
                 <div class="columnright">
+                    <div id="project-highlights" class="blue box"></div>
                     <div id="tags" class="blue box"></div>
                 </div>
                 <!-- END COLUMN RIGHT -->
             </div>
         </div>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
         <script src="./utils.js"></script>
+        <script src="./project-list.js"></script>
         <script src="./projects.js"></script>
+        <script lang="jquery">
+(() => {
+  $("title").text("My Projects");
+  initializeMenu(true);
+  showSmallHighlightList();
+  showTagList();
+  showProjects();
+})();
+        </script>
     </body>
 </html>