diff --git a/css/style.css b/css/style.css index 3fa3ce8..85d4d02 100644 --- a/css/style.css +++ b/css/style.css @@ -6,6 +6,7 @@ --accent-color: #9B70ff; --background-color: #141414; --secondary-background-color: #525252; +--tertiary-background-color: #272727; --primary-text-color: #fff; --secondary-text-color: #ccc; } @@ -92,6 +93,7 @@ footer a { .row { display: flex; flex-direction: row; + justify-content: center; align-items: center; width: 100%; } @@ -127,7 +129,6 @@ h2 { font-weight: bold; font-size: 32px; text-transform: uppercase; - /* margin-top: 0; */ margin-bottom: 10px; margin-left: 40px; align-self: flex-start; @@ -184,7 +185,6 @@ ul { #home { max-width: 800px; - min-width: 100px; } /* Add your custom styles below */ @@ -218,33 +218,147 @@ ul { } #experience { - width: 800px; + max-width: 1000px; } .grid-container { display: grid; grid-template-columns: repeat(5, 90px); - /* 6 columns with equal width */ grid-auto-rows: auto; - /* Automatically adjust row height based on content */ gap: 30px 60px; - /* Adjust the gap between grid items as needed */ padding: 20px; + + .logo { + width: 60px; + height: 60px; + } } @media (max-width: 800px) { .grid-container { - align-self: flex-start; grid-template-columns: repeat(2, 90px); gap: 40px 20px; } } - -.grid-container img { - width: 60px; - height: 60px; +.logo { object-fit: cover; display: block; padding-bottom: 10px; +} + +#projects { + max-width: 1000px; + + .logo { + width: 30px; + height: 30px; + } + + h2 { + margin-top: 10px; + margin-bottom: 10px; + } + + a { + text-decoration: none; + color: var(--primary-text-color); + border-radius: 8px; + } + + a:hover { + background-color: var(--tertiary-background-color); + } + + .tech-stack { + display: flex; + justify-content: space-between; + align-items: center; + + > .filler { + flex-grow: 1; + } + + > *:not(.filler) { + padding: 10px 20px; + margin-left: 10px; + margin-right: 10px; + } + } +} + +#projects > .column > :nth-child(3n+4) { + margin-top: 80px; +} + +#project1 { + flex: 0.3; +} + +.container { + --radius: 25px; + position: relative; + display: flex; + justify-content: center; + margin: 0 60px; + margin-bottom: 50px; + + .content { + border: none; + object-fit: cover; + max-width: 100%; + max-height: 80vh; + border-radius: var(--radius); + } + + .arrow { + width: 40px; + aspect-ratio: 1/1; + position: absolute; + top: calc(50% - 40px); + cursor: pointer; + + img { + border-radius: 50%; + width: 100%; + } + } + + .left-arrow { + left: -50px; + } + + .right-arrow { + right: -50px; + } + + .arrow:hover * { + background-color: var(--accent-color); + } + .dots { + display: flex; + justify-content: center; + gap: 10px; + position: absolute; + bottom: -50px; + width: 100%; + padding: 20px 0; + + .dot { + width: 10px; + height: 10px; + border-radius: 50%; + background-color: var(--secondary-background-color); + transition: all 200ms ease-in-out; + } + + .active { + background-color: var(--primary-text-color); + } + + .dot:hover { + cursor: pointer; + background-color: var(--accent-color); + } + } } \ No newline at end of file diff --git a/experience.html b/experience.html index c2bf8b2..fd9ac8f 100644 --- a/experience.html +++ b/experience.html @@ -5,7 +5,7 @@ Hugh's Portfolio | Experience - + diff --git a/images/favicon.ico b/favicon.ico similarity index 100% rename from images/favicon.ico rename to favicon.ico diff --git a/images/appstore.png b/images/appstore.png new file mode 100644 index 0000000..2dfe201 Binary files /dev/null and b/images/appstore.png differ diff --git a/images/c.png b/images/c.png new file mode 100644 index 0000000..00660e6 Binary files /dev/null and b/images/c.png differ diff --git a/images/neuralnetwork/1.jpg b/images/neuralnetwork/1.jpg new file mode 100644 index 0000000..cbfb80d Binary files /dev/null and b/images/neuralnetwork/1.jpg differ diff --git a/images/neuralnetwork/2.jpg b/images/neuralnetwork/2.jpg new file mode 100644 index 0000000..8b43083 Binary files /dev/null and b/images/neuralnetwork/2.jpg differ diff --git a/images/neuralnetwork/3.jpg b/images/neuralnetwork/3.jpg new file mode 100644 index 0000000..c50e11e Binary files /dev/null and b/images/neuralnetwork/3.jpg differ diff --git a/images/neuralnetwork/4.jpg b/images/neuralnetwork/4.jpg new file mode 100644 index 0000000..7707800 Binary files /dev/null and b/images/neuralnetwork/4.jpg differ diff --git a/images/next.png b/images/next.png new file mode 100644 index 0000000..3f36c7f Binary files /dev/null and b/images/next.png differ diff --git a/images/pathfinding/1.jpg b/images/pathfinding/1.jpg new file mode 100644 index 0000000..234c355 Binary files /dev/null and b/images/pathfinding/1.jpg differ diff --git a/images/pathfinding/1.png b/images/pathfinding/1.png new file mode 100644 index 0000000..e3105bb Binary files /dev/null and b/images/pathfinding/1.png differ diff --git a/images/pathfinding/2.jpg b/images/pathfinding/2.jpg new file mode 100644 index 0000000..eb3d9cb Binary files /dev/null and b/images/pathfinding/2.jpg differ diff --git a/images/pathfinding/2.png b/images/pathfinding/2.png new file mode 100644 index 0000000..a8ab516 Binary files /dev/null and b/images/pathfinding/2.png differ diff --git a/images/pathfinding/3.jpg b/images/pathfinding/3.jpg new file mode 100644 index 0000000..bb332f2 Binary files /dev/null and b/images/pathfinding/3.jpg differ diff --git a/images/pathfinding/3.png b/images/pathfinding/3.png new file mode 100644 index 0000000..df4058a Binary files /dev/null and b/images/pathfinding/3.png differ diff --git a/images/playstore.png b/images/playstore.png new file mode 100644 index 0000000..d9aa167 Binary files /dev/null and b/images/playstore.png differ diff --git a/images/prev.png b/images/prev.png new file mode 100644 index 0000000..607f171 Binary files /dev/null and b/images/prev.png differ diff --git a/images/snake/1.gif b/images/snake/1.gif new file mode 100644 index 0000000..ab7e448 Binary files /dev/null and b/images/snake/1.gif differ diff --git a/images/snake/2.jpg b/images/snake/2.jpg new file mode 100644 index 0000000..c022ee7 Binary files /dev/null and b/images/snake/2.jpg differ diff --git a/images/snake/3.jpg b/images/snake/3.jpg new file mode 100644 index 0000000..9f8b773 Binary files /dev/null and b/images/snake/3.jpg differ diff --git a/images/sorting/1.png b/images/sorting/1.png new file mode 100644 index 0000000..caba2e8 Binary files /dev/null and b/images/sorting/1.png differ diff --git a/images/sorting/2.png b/images/sorting/2.png new file mode 100644 index 0000000..439b5e9 Binary files /dev/null and b/images/sorting/2.png differ diff --git a/images/sorting/3.png b/images/sorting/3.png new file mode 100644 index 0000000..817a5af Binary files /dev/null and b/images/sorting/3.png differ diff --git a/images/timetable/1.png b/images/timetable/1.png new file mode 100644 index 0000000..52cda13 Binary files /dev/null and b/images/timetable/1.png differ diff --git a/images/timetable/2.png b/images/timetable/2.png new file mode 100644 index 0000000..1b855b6 Binary files /dev/null and b/images/timetable/2.png differ diff --git a/images/timetable/3.png b/images/timetable/3.png new file mode 100644 index 0000000..bb86064 Binary files /dev/null and b/images/timetable/3.png differ diff --git a/images/timetable/4.png b/images/timetable/4.png new file mode 100644 index 0000000..70f2dbd Binary files /dev/null and b/images/timetable/4.png differ diff --git a/images/timetable/5.png b/images/timetable/5.png new file mode 100644 index 0000000..d5e52eb Binary files /dev/null and b/images/timetable/5.png differ diff --git a/images/timetable/6.png b/images/timetable/6.png new file mode 100644 index 0000000..9f9f325 Binary files /dev/null and b/images/timetable/6.png differ diff --git a/images/website.png b/images/website.png new file mode 100644 index 0000000..11e4f4e Binary files /dev/null and b/images/website.png differ diff --git a/index.html b/index.html index 1db4a47..e21e674 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ Hugh's Portfolio - + diff --git a/js/script.js b/js/script.js index 9be8762..eb2567e 100644 --- a/js/script.js +++ b/js/script.js @@ -15,8 +15,6 @@ function loadNav() { }); }); - // Load the footer - // On scroll, hide/show the navbar var lastScroll = 0; $(window).scroll(function (event) { @@ -37,7 +35,93 @@ function loadFooter() { $("footer").load("_footer.html"); } +let counter = { + project1: 0, + project2: 0, + project3: 0, + project4: 0, + project5: 0, +}; + +const images = { + project1: [ + "/images/timetable/1.png", + "/images/timetable/2.png", + "/images/timetable/3.png", + "/images/timetable/4.png", + "/images/timetable/5.png", + "/images/timetable/6.png", + ], + project2: [ + "/images/pathfinding/1.png", + "/images/pathfinding/2.png", + "/images/pathfinding/3.png", + ], + project3: [ + "/images/sorting/1.png", + "/images/sorting/2.png", + "/images/sorting/3.png", + ], + project4: [ + "/images/neuralnetwork/1.jpg", + "/images/neuralnetwork/2.jpg", + "/images/neuralnetwork/3.jpg", + "/images/neuralnetwork/4.jpg", + ], + project5: [ + "/images/snake/1.gif", + "/images/snake/2.jpg", + "/images/snake/3.jpg", + ], +}; + +function setContent(projectname) { + let selector = `#${projectname} > .content`; + $(selector).fadeOut(200, function () { + $(selector).attr("src", images[projectname][counter[projectname]]); + $(selector).fadeIn(200); + }); + let dots = ""; + for (let i = 0; i < images[projectname].length; i++) { + dots += ``; + } + $(`#${projectname} .dots`).html(dots); + $(`#${projectname} .dot`).on("click", function () { + counter[projectname] = $(this).index(); + setContent(projectname); + }); +} + +function loadImageSliders() { + for (let projectname in counter) { + setContent(projectname); + } + + $(".left-arrow").on("click", function () { + let projectname = $(this).parent().attr("id"); + if (counter[projectname] === 0) { + counter[projectname] = images[projectname].length - 1; + } else { + counter[projectname]--; + } + setContent(projectname); + }); + + $(".right-arrow").on("click", function () { + let projectname = $(this).parent().attr("id"); + if (counter[projectname] === images[projectname].length - 1) { + counter[projectname] = 0; + } else { + counter[projectname]++; + } + setContent(projectname); + }); +} + $(function () { loadNav(); loadFooter(); + loadImageSliders(); }); diff --git a/projects.html b/projects.html new file mode 100644 index 0000000..73b7506 --- /dev/null +++ b/projects.html @@ -0,0 +1,412 @@ + + + + + + Hugh's Portfolio | Projects + + + + + + +
+
+
+
+
+

UQ Social Timetable

+
Mobile App
+
+
+
    +
  • + Developed a mobile application for students to + view their own timetable in conjunction with + their friends' timetables. +
    • +
  • + Published application on the App Store and + Google Play Store. Over 3000 users and 500 daily + active users. +
    • +
  • + Designed a user-friendly interface to display + timetable information and allow students to + manage their schedule. Initially written in + Swift and later translated to Flutter for cross + platform compatibility. +
    • +
  • + Leveraged Firebase's NoSQL cloud database to + implement a comprehensive social networking + feature set, allowing users to send, accept, and + decline friend requests. +
    • +
  • + Facilitated real time messaging between users + and timetable sharing capabilities leveraging + Firebase's cloud database +
    • +
  • + Utilised OneSignal to facilitate push + notifications for group chat messages and friend + requests. +
    • +
+
+ +
+ +
+
+ +
+
+
+
+
+
+
+ + Flutter +
+
+ + Firebase +
+
+ + Swift +
+
+ +
+ + GitHub +
+ + +
+ + App Store +
+ + +
+ + Play Store +
+ +
+
+
+

Maze Generation and Pathfinding Visualiser

+
Web App
+
+
+
+ +
+ +
+
+ +
+
+
+
    +
  • + Developed a web application to visualise maze + generation and pathfinding algorithms. +
    • +
  • + Implemented maze generation algorithms such as + Recursive Backtracking, Recursive Division, + Prim's Algorithm, and Kruskal's Algorithm. +
    • +
  • + Implemented pathfinding algorithms such as + Greedy-Best-First Search, A* Search, Breadth + First Search and Depth First Search. +
    • +
  • + Designed a user-friendly interface to allow + users to select the size of the maze, the + algorithm to generate the maze, and the + algorithm to find the path. +
    • +
  • + Utilised React and canvas graphics using p5JS to + create the web application. +
    • +
+
+
+
+
+ + React +
+
+ + JavaScript +
+
+ +
+ + GitHub +
+ + +
+ + Web App +
+ +
+
+
+

Sorting Algorithm Visualiser

+
Desktop App
+
+
+
    +
  • + Developed a desktop application to visualise + sorting algorithms. +
    • +
  • + Implemented sorting algorithms such as Bubble + Sort, Selection Sort, Insertion Sort, Merge + Sort, Quick Sort, and Heap Sort. +
    • +
  • + Designed a user-friendly interface to allow + users to select the size of the array, the + algorithm to sort the array, and the speed of + the visualisation. +
    • +
  • + Utilised Java Swing to create the desktop + application. +
    • +
+
+ +
+ +
+
+ +
+
+
+
+
+
+
+ + Java +
+
+ +
+ + GitHub +
+ +
+
+
+

Nerual Network Solving XOR Visualised

+
Desktop App
+
+
+
+ +
+ +
+
+ +
+
+
+
    +
  • + Developed neural network framework capable of an + arbitrary number of layers and nodes. +
    • +
  • + Visualised the XOR problem using the neural + network framework and SDL2 graphics. +
    • +
  • + The grayscale pixels represent the output values + of the neural network with black representing 0 + and white representing 1. +
    • +
  • + An input of (0, 0) should output 0, (0, 1), (1, + 0) should output 1, and (1, 1) should output 0. + So in the visualisation, the top left and bottom + right corners should be black, and the top right + and bottom left corners should be white. +
    • +
+
+
+
+
+ + C++ +
+
+ +
+ + GitHub +
+ +
+
+
+

Snake Game

+
Desktop App
+
+
+
    +
  • + A simple window-based Snake game implemented in + C using SDL library. +
    • +
  • + The game features a snake that moves around the + screen eating food to grow. +
    • +
  • + The game ends when the snake collides with the + walls or itself. +
    • +
  • + Written in C using the SDL library for graphics. +
    • +
+
+ +
+ +
+
+ +
+
+
+
+
+
+
+ + C +
+
+ +
+ + GitHub +
+ +
+
+
+
+
+ + +