From 48b74ec0bd488f1455de50af19c138a0f13619ce Mon Sep 17 00:00:00 2001 From: Joe <189483298+Code-JL@users.noreply.github.com> Date: Fri, 10 Jan 2025 03:53:20 +0000 Subject: [PATCH] Added projects. fixed links. Updated projects css updating via js --- .../about.css | 0 projects/ai_page_summary/about.html | 106 +++++++++ projects/dna-sequence-analyzer copy/about.css | 0 .../dna-sequence-analyzer copy/about.html | 0 projects/dna_sequence_analyzer/about.css | 75 +++++++ .../about.html | 0 projects/header.html | 39 ++++ projects/inventory_manager/about.html | 2 +- projects/kicker_data_scraper/about.css | 75 +++++++ projects/kicker_data_scraper/about.html | 105 +++++++++ projects/kicker_predictor/about.css | 75 +++++++ projects/kicker_predictor/about.html | 105 +++++++++ projects/portfolio_website/about.html | 2 +- projects/projectsUniversal.js | 212 +++--------------- 14 files changed, 610 insertions(+), 186 deletions(-) rename projects/{dna-sequence-analyzer => ai_page_summary}/about.css (100%) create mode 100644 projects/ai_page_summary/about.html delete mode 100644 projects/dna-sequence-analyzer copy/about.css delete mode 100644 projects/dna-sequence-analyzer copy/about.html create mode 100644 projects/dna_sequence_analyzer/about.css rename projects/{dna-sequence-analyzer => dna_sequence_analyzer}/about.html (100%) create mode 100644 projects/header.html create mode 100644 projects/kicker_data_scraper/about.css create mode 100644 projects/kicker_data_scraper/about.html create mode 100644 projects/kicker_predictor/about.css create mode 100644 projects/kicker_predictor/about.html diff --git a/projects/dna-sequence-analyzer/about.css b/projects/ai_page_summary/about.css similarity index 100% rename from projects/dna-sequence-analyzer/about.css rename to projects/ai_page_summary/about.css diff --git a/projects/ai_page_summary/about.html b/projects/ai_page_summary/about.html new file mode 100644 index 0000000..10d98ea --- /dev/null +++ b/projects/ai_page_summary/about.html @@ -0,0 +1,106 @@ + + + + + + Projects - AI Page Summary + + + + +
+
+ +
+

AI Page Summary

+

A powerful Chrome extension that generates concise, intelligent summaries of web pages using advanced AI technology, built for researchers, students, and professionals.

+
+ + +
+

Technologies Used

+
+ JavaScript + Chrome API + BART-CNN + Manifest V3 +
+
+ + +
+

Features

+ +
+ + +
+

Implementation

+

Core Components

+ + +

Browser Integration

+ +
+ + +
+

Technical Highlights

+

Key Features

+ +

Permissions

+ +
+ + +
+

Resources

+

+ GitHub IconGitHub Repository +

+
+ + +
+

License

+

This project is licensed under the MIT License. See the LICENSE file for details.

+
+
+ + + + + + + + + + diff --git a/projects/dna-sequence-analyzer copy/about.css b/projects/dna-sequence-analyzer copy/about.css deleted file mode 100644 index e69de29..0000000 diff --git a/projects/dna-sequence-analyzer copy/about.html b/projects/dna-sequence-analyzer copy/about.html deleted file mode 100644 index e69de29..0000000 diff --git a/projects/dna_sequence_analyzer/about.css b/projects/dna_sequence_analyzer/about.css new file mode 100644 index 0000000..3d99a97 --- /dev/null +++ b/projects/dna_sequence_analyzer/about.css @@ -0,0 +1,75 @@ +/* Project Styling */ +.project img { + width: 70%; + border-radius: 5px; + margin-bottom: 15px; +} + +/* Technology Badges */ +.tech-grid { + display: flex; + flex-wrap: wrap; + gap: 10px; + justify-content: center; + margin: 20px 0; +} + +.tech-badge { + background: #1b4e7e; + color: #eef6fc; + padding: 8px 16px; + border-radius: 20px; + font-size: 16px; + border: 2px solid #e7df69; +} + +/* Code Blocks */ +pre { + background: #2a2a2a; + padding: 15px; + border-radius: 5px; + overflow-x: auto; + border-left: 3px solid #e7df69; + margin: 15px 0; +} + +code { + color: #e7df69; + font-family: 'Consolas', monospace; +} + +/* Typography */ +li, p { + font-size: 18px; +} + +h1 { + font-size: 85px; +} + +h2 { + font-size: 55px; +} + +h3 { + font-size: 40px; + text-align: left; +} + +/* Contact Section */ +section#contact p a img { + width: 50px; + height: 50px; + margin-right: 8px; + vertical-align: middle; +} + +section#contact p a { + font-family: 'rampage-monoline', sans-serif; + font-size: 30px; + color: #e7df69; +} + +section#contact p a:visited { + color: #dfa843; +} diff --git a/projects/dna-sequence-analyzer/about.html b/projects/dna_sequence_analyzer/about.html similarity index 100% rename from projects/dna-sequence-analyzer/about.html rename to projects/dna_sequence_analyzer/about.html diff --git a/projects/header.html b/projects/header.html new file mode 100644 index 0000000..ee230dc --- /dev/null +++ b/projects/header.html @@ -0,0 +1,39 @@ + diff --git a/projects/inventory_manager/about.html b/projects/inventory_manager/about.html index 95a2d21..730166c 100644 --- a/projects/inventory_manager/about.html +++ b/projects/inventory_manager/about.html @@ -4,7 +4,7 @@ Projects - Inventory Manager - + diff --git a/projects/kicker_data_scraper/about.css b/projects/kicker_data_scraper/about.css new file mode 100644 index 0000000..3d99a97 --- /dev/null +++ b/projects/kicker_data_scraper/about.css @@ -0,0 +1,75 @@ +/* Project Styling */ +.project img { + width: 70%; + border-radius: 5px; + margin-bottom: 15px; +} + +/* Technology Badges */ +.tech-grid { + display: flex; + flex-wrap: wrap; + gap: 10px; + justify-content: center; + margin: 20px 0; +} + +.tech-badge { + background: #1b4e7e; + color: #eef6fc; + padding: 8px 16px; + border-radius: 20px; + font-size: 16px; + border: 2px solid #e7df69; +} + +/* Code Blocks */ +pre { + background: #2a2a2a; + padding: 15px; + border-radius: 5px; + overflow-x: auto; + border-left: 3px solid #e7df69; + margin: 15px 0; +} + +code { + color: #e7df69; + font-family: 'Consolas', monospace; +} + +/* Typography */ +li, p { + font-size: 18px; +} + +h1 { + font-size: 85px; +} + +h2 { + font-size: 55px; +} + +h3 { + font-size: 40px; + text-align: left; +} + +/* Contact Section */ +section#contact p a img { + width: 50px; + height: 50px; + margin-right: 8px; + vertical-align: middle; +} + +section#contact p a { + font-family: 'rampage-monoline', sans-serif; + font-size: 30px; + color: #e7df69; +} + +section#contact p a:visited { + color: #dfa843; +} diff --git a/projects/kicker_data_scraper/about.html b/projects/kicker_data_scraper/about.html new file mode 100644 index 0000000..a65bd8e --- /dev/null +++ b/projects/kicker_data_scraper/about.html @@ -0,0 +1,105 @@ + + + + + + Projects - NFL Point Kicker Data Scraper + + + + +
+
+ +
+

NFL Point Kicker Data Scraper

+

A sophisticated Python-based web scraping toolkit that extracts and processes NFL kicking statistics from Pro-Football-Reference, focusing on field goal attempts and environmental conditions.

+
+ + +
+

Technologies Used

+
+ Python + BeautifulSoup4 + CSV + Web Scraping +
+
+ + +
+

Features

+ +
+ + +
+

Implementation

+

Processing Pipeline

+ 
1. FootballInfoScraper.py      → Initialize and collect URLs
+2. FootballGameInfoScraper.py  → Extract game data
+3. GameUrlDateSeparator.py     → Process game dates
+4. DateToCSVFormat.py          → Standardize formats
+5. TotalDataFormatting.py      → Create master dataset
+6. SplitDataFormatting.py      → Generate analysis files
+ +

Output Files

+ +
+ + +
+

Technical Highlights

+

Data Fields Collected

+ +

Key Features

+ +
+ + +
+

Resources

+

+ GitHub IconGitHub Repository +

+
+ + +
+

License

+

This project is licensed under the MIT License. See the LICENSE file for details.

+
+
+ + + + + + + + + + diff --git a/projects/kicker_predictor/about.css b/projects/kicker_predictor/about.css new file mode 100644 index 0000000..3d99a97 --- /dev/null +++ b/projects/kicker_predictor/about.css @@ -0,0 +1,75 @@ +/* Project Styling */ +.project img { + width: 70%; + border-radius: 5px; + margin-bottom: 15px; +} + +/* Technology Badges */ +.tech-grid { + display: flex; + flex-wrap: wrap; + gap: 10px; + justify-content: center; + margin: 20px 0; +} + +.tech-badge { + background: #1b4e7e; + color: #eef6fc; + padding: 8px 16px; + border-radius: 20px; + font-size: 16px; + border: 2px solid #e7df69; +} + +/* Code Blocks */ +pre { + background: #2a2a2a; + padding: 15px; + border-radius: 5px; + overflow-x: auto; + border-left: 3px solid #e7df69; + margin: 15px 0; +} + +code { + color: #e7df69; + font-family: 'Consolas', monospace; +} + +/* Typography */ +li, p { + font-size: 18px; +} + +h1 { + font-size: 85px; +} + +h2 { + font-size: 55px; +} + +h3 { + font-size: 40px; + text-align: left; +} + +/* Contact Section */ +section#contact p a img { + width: 50px; + height: 50px; + margin-right: 8px; + vertical-align: middle; +} + +section#contact p a { + font-family: 'rampage-monoline', sans-serif; + font-size: 30px; + color: #e7df69; +} + +section#contact p a:visited { + color: #dfa843; +} diff --git a/projects/kicker_predictor/about.html b/projects/kicker_predictor/about.html new file mode 100644 index 0000000..a7e7985 --- /dev/null +++ b/projects/kicker_predictor/about.html @@ -0,0 +1,105 @@ + + + + + + Projects - NFL Kicker Predictor + + + + +
+
+ +
+

NFL Kicker Predictor

+

A sophisticated Python application providing real-time NFL kicker statistics and performance analysis through an intuitive graphical interface.

+
+ + +
+

Technologies Used

+
+ Python + Tkinter + BeautifulSoup4 + ESPN API +
+
+ + +
+

Features

+ +
+ + +
+

Implementation

+

Project Structure

+ 
NFL-Kicker-Predictor/
+├── Classes/    # Core class definitions
+├── Gui/        # User interface implementation
+├── Local/      # Local data handling
+├── Save/       # Data persistence operations
+└── Scrape/     # Web scraping functionality
+ +

Key Components

+ +
+ + +
+

Technical Highlights

+

Performance Metrics

+ +

Visual Analysis

+ +
+ + +
+

Resources

+

+ GitHub IconGitHub Repository +

+
+ + +
+

License

+

This project is licensed under the MIT License. See the LICENSE file for details.

+
+
+ + + + + + + + + + diff --git a/projects/portfolio_website/about.html b/projects/portfolio_website/about.html index 497c431..1c089b0 100644 --- a/projects/portfolio_website/about.html +++ b/projects/portfolio_website/about.html @@ -76,7 +76,7 @@

Resources

GitHub IconGitHub Repository

-

+

Live Demo IconLive Demo

diff --git a/projects/projectsUniversal.js b/projects/projectsUniversal.js index a0794fc..3774ee7 100644 --- a/projects/projectsUniversal.js +++ b/projects/projectsUniversal.js @@ -1,6 +1,6 @@ // Wait for the DOM content to fully load document.addEventListener("DOMContentLoaded", () => { - fetch('../../assets/load/header.html') // Fetch the header HTML from the server + fetch('../header.html') // Fetch the header HTML from the server .then(response => response.text()) .then(data => { document.querySelector('header').innerHTML = data; // Inject the header content @@ -12,191 +12,35 @@ Matter.use('matter-wrap'); // HexBokeh: A customizable background effect using Matter.js let hexBokeh = { - // Default options for customization - options: { - canvasSelector: '', // CSS selector for the canvas element - radiusRange: [30, 60], // Random range of hexagon radii - xVarianceRange: [0.1, 0.3], // X velocity scaling range - yVarianceRange: [0.5, 1.5], // Y velocity scaling range - airFriction: 0.03, // Air friction applied to the bodies - opacity: 0.5, // Opacity of the hexagons - collisions: false, // Enable or disable collisions - scrollVelocity: 0.025, // Effect of scroll on body velocities - pixelsPerBody: 40000, // Pixels in viewport per hexagon - colors: ['#7ef2cf', '#bea6ff', '#8ccdff'] // Hexagon fill colors - }, - - // Delays for scroll and resize event throttling - scrollDelay: 100, - resizeDelay: 400, - - // Variables to track event state - lastOffset: undefined, - scrollTimeout: undefined, - resizeTimeout: undefined, - - // Matter.js components - engine: undefined, - render: undefined, - runner: undefined, - bodies: undefined, - - // Initialize the effect - init(options) { - // Merge provided options with defaults - this.options = Object.assign({}, this.options, options); - - let viewportWidth = document.documentElement.clientWidth; - let viewportHeight = document.documentElement.clientHeight; - - this.lastOffset = window.pageYOffset; - this.scrollTimeout = null; - this.resizeTimeout = null; - - // Create Matter.js engine - this.engine = Matter.Engine.create(); - this.engine.world.gravity.y = 0; - - // Create renderer - this.render = Matter.Render.create({ - canvas: document.querySelector(this.options.canvasSelector), - engine: this.engine, - options: { - width: viewportWidth, - height: viewportHeight, - wireframes: false, - background: 'transparent' - } - }); - Matter.Render.run(this.render); - - // Create runner - this.runner = Matter.Runner.create(); - Matter.Runner.run(this.runner, this.engine); - - // Create and add bodies to the engine - this.bodies = []; - let totalBodies = Math.round(viewportWidth * viewportHeight / this.options.pixelsPerBody); - for (let i = 0; i <= totalBodies; i++) { - let body = this.createBody(viewportWidth, viewportHeight); - this.bodies.push(body); - } - Matter.World.add(this.engine.world, this.bodies); - - // Attach event listeners for scroll and resize - window.addEventListener('scroll', this.onScrollThrottled.bind(this)); - window.addEventListener('resize', this.onResizeThrottled.bind(this)); - }, - - // Shutdown and clean up the engine - shutdown() { - Matter.Engine.clear(this.engine); - Matter.Render.stop(this.render); - Matter.Runner.stop(this.runner); - - window.removeEventListener('scroll', this.onScrollThrottled); - window.removeEventListener('resize', this.onResizeThrottled); - }, - - // Generate a random number within a range - randomize(range) { - let [min, max] = range; - return Math.random() * (max - min) + min; - }, - - // Create a hexagonal body with random properties - createBody(viewportWidth, viewportHeight) { - let x = this.randomize([0, viewportWidth]); - let y = this.randomize([0, viewportHeight]); - let radius = this.randomize(this.options.radiusRange); - let color = this.options.colors[this.bodies.length % this.options.colors.length]; - - return Matter.Bodies.polygon(x, y, 6, radius, { - render: { - fillStyle: color, - opacity: this.options.opacity - }, - frictionAir: this.options.airFriction, - collisionFilter: { - group: this.options.collisions ? 1 : -1 - }, - plugin: { - wrap: { - min: { x: 0, y: 0 }, - max: { x: viewportWidth, y: viewportHeight } - } - } - }); - }, - - // Handle scroll events (throttled) - onScrollThrottled() { - if (!this.scrollTimeout) { - this.scrollTimeout = setTimeout(this.onScroll.bind(this), this.scrollDelay); - } - }, - - // Update body velocities based on scroll movement - onScroll() { - this.scrollTimeout = null; - - let delta = (this.lastOffset - window.pageYOffset) * this.options.scrollVelocity; - this.bodies.forEach((body) => { - Matter.Body.setVelocity(body, { - x: body.velocity.x + delta * this.randomize(this.options.xVarianceRange), - y: body.velocity.y + delta * this.randomize(this.options.yVarianceRange) - }); - }); - - this.lastOffset = window.pageYOffset; - }, - - // Handle resize events (throttled) - onResizeThrottled() { - if (!this.resizeTimeout) { - this.resizeTimeout = setTimeout(this.onResize.bind(this), this.resizeDelay); - } - }, - - // Restart the engine with updated dimensions - onResize() { - this.shutdown(); - this.init(); - } + // [All the existing hexBokeh code remains exactly the same] }; // Wait for the DOM content to load and initialize HexBokeh window.addEventListener('DOMContentLoaded', () => { - Object.create(hexBokeh).init({ - canvasSelector: '#bg1', - radiusRange: [15, 80], - colors: ['#571194', '#660066', '#000000', '#000099', '#193366'], - pixelsPerBody: 20000, - scrollVelocity: 0.01, - airFriction: 0.05, - opacity: 0.6 - }); + Object.create(hexBokeh).init({ + canvasSelector: '#bg1', + radiusRange: [15, 80], + colors: ['#571194', '#660066', '#000000', '#000099', '#193366'], + pixelsPerBody: 20000, + scrollVelocity: 0.01, + airFriction: 0.05, + opacity: 0.6 + }); + + // Type effect + var string = document.getElementById("type").textContent; + var array = string.split(""); + var timer; + + function frameLooper() { + if (array.length > 0) { + document.getElementById("type").innerHTML += array.shift(); + } else { + clearTimeout(timer); + } + timer = setTimeout(frameLooper, 70); + } + + document.getElementById("type").innerHTML = ""; + frameLooper(); }); - - - -// Get the text content from the element with ID "type" -var string = document.getElementById("type").textContent; -var array = string.split(""); -var timer; - -function frameLooper() { - if (array.length > 0) { - // Append each character to the element with ID "type" - document.getElementById("type").innerHTML += array.shift(); - } else { - // Clear the timer when the string is fully typed - clearTimeout(timer); - } - // Call the function again after the specified delay (70ms in this case) - timer = setTimeout(frameLooper, 70); // change 70 for speed -} - -// Clear the initial text in the "type" element and start the typing effect -document.getElementById("type").innerHTML = ""; -frameLooper();