From f9cdb2621efa51233048318205ef96ea11b3a3ee Mon Sep 17 00:00:00 2001 From: Matt Senick Date: Sat, 18 Nov 2023 21:18:01 -0600 Subject: [PATCH] js script to generate project tiles --- index.html | 130 ++--------------------------------- script.js | 13 ++++ scripts/gen_project_tiles.js | 73 ++++++++++++++++++++ 3 files changed, 90 insertions(+), 126 deletions(-) create mode 100644 scripts/gen_project_tiles.js diff --git a/index.html b/index.html index 13aa60a..ecabc1b 100644 --- a/index.html +++ b/index.html @@ -23,6 +23,9 @@ + + + @@ -211,135 +214,10 @@

Bachelor of Computer Science and Economics

- - - -
-
-

Projects

- -
- - - -
-
-
- - GitHub icon - - University 2 -
-
-
Q-Learning Auction Agent
-
-

The goal of this project was to take an initial step to exploring - reinforcement learning and agent-based machine learning. Essentially, this JavaScript - application uses a single state Q-Learning algorithm to teach an artifiical agent how to - optimally bid in a two-player sealed bid auction setting. -

-
-
- Show Me -
-
-
-
- -
-
-
- - GitHub icon - - University 2 -
-
-
Helper Website for Students
-
-

I built a website for my students that generated practice questions, visualizations, and a glossary of - terminology to help them learn the material. With this interactive tool, my students were able to test their knowledge and - reinforce key concepts, making the learning experience more engaging and effective.

-
-
- Show Me -
-
-
-
-
- - - -
-
-
-
- - GitHub icon - - University 2 -
-
-
Command Line Chess
-
-

A minimalist command line chess application built with python. In this game, - you can choose to play against another user, a random-moving AI player, or a simple cost-minimizing AI player.

-
-
-
-
- -
-
-
- - GitHub icon - - University 2 -
-
-
Olympic Medal Data Visualization
-
-

A tool that lets you explore and compare historical medal counts in the Olympics. A completely interactive - map is available to the user and a variety of settings can be explored. Medal counts are shown in stacked bar charts along - with a time series trend.

-
-
- Show Me -
-
-
-
-
-
- +
diff --git a/script.js b/script.js index 92a24b6..26dcab9 100644 --- a/script.js +++ b/script.js @@ -1,3 +1,16 @@ +/*** window onload functionality ***/ +window.onload = function(){ + + generateProjectTiles(); + + + +} + + + + + /*** fading animation between sections ***/ // Get all sections on the page diff --git a/scripts/gen_project_tiles.js b/scripts/gen_project_tiles.js new file mode 100644 index 0000000..635146a --- /dev/null +++ b/scripts/gen_project_tiles.js @@ -0,0 +1,73 @@ + +function generateProjectTiles(){ + + // Define an array of project data + const projects = [ + { + title: "Q-Learning Auction Agent", + githubLink: "https://github.com/Matts52/Q_Learn_Single_Sealed_Bid_Auction", + imageSrc: "assets/projects/Q_Learn.PNG", + description: "The goal of this project was to take an initial step to exploring reinforcement learning and agent-based machine learning. Essentially, this JavaScript application uses a single state Q-Learning algorithm to teach an artificial agent how to optimally bid in a two-player sealed bid auction setting.", + demoLink: "https://matthewsenick.com/Q_Learn_Single_Sealed_Bid_Auction/", + }, + { + title: "Helper Website for Students", + githubLink: "https://github.com/Matts52/ECO304", + imageSrc: "assets/projects/ECO304_HOME.PNG", + description: "I built a website for my students that generated practice questions, visualizations, and a glossary of terminology to help them learn the material. With this interactive tool, my students were able to test their knowledge and reinforce key concepts, making the learning experience more engaging and effective.", + demoLink: "http://www.matthewsenick.com/ECO304/", + }, + { + title: "Command Line Chess", + githubLink: "https://github.com/Matts52/CLChess", + imageSrc: "assets/projects/CLChess.jpg", + description: "A minimalist command line chess application built with python. In this game, you can choose to play against another user, a random-moving AI player, or a simple cost-minimizing AI player.", + demoLink: "https://github.com/Matts52/CLChess", + }, + { + title: "Olympic Medal Data Visualization", + githubLink: "https://github.com/Matts52/olympic-data-visualization", + imageSrc: "assets/projects/Olympic_DataVis.jpg", + description: "A tool that lets you explore and compare historical medal counts in the Olympics. A completely interactive map is available to the user and a variety of settings can be explored. Medal counts are shown in stacked bar charts along with a time series trend", + demoLink: "https://www.matthewsenick.com/olympic-data-visualization/", + }, + + ]; + + // Get the container element + const container = document.getElementById("projects"); + + // Create the projects section HTML + const projectsHTML = ` +
+

Projects

+
+ ${projects.map(project => ` +
+
+
+ + GitHub icon + + ${project.title} +
+
+
${project.title}
+
+

${project.description}

+
+
+ Show Me +
+
+
+
+ `).join('')} +
+
+ `; + + // Set the innerHTML of the container + container.innerHTML = projectsHTML; +} +