Added projects. fixed links. Updated projects css updating via js

Code-JL · Jan 10, 2025 · 48b74ec · 48b74ec
1 parent 9d8738e
commit 48b74ec
Show file tree

Hide file tree

Showing 14 changed files with 610 additions and 186 deletions.
diff --git a/projects/dna-sequence-analyzer/about.css → projects/ai_page_summary/about.css b/projects/dna-sequence-analyzer/about.css → projects/ai_page_summary/about.css
diff --git a/projects/ai_page_summary/about.html b/projects/ai_page_summary/about.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Projects - AI Page Summary</title>
+    <link rel="stylesheet" href="../../assets/load/universal.css">
+    <link rel="stylesheet" href="about.css">
+</head>
+<body>
+    <header></header>
+    <main>
+        <!-- Project Title -->
+        <section class="title">
+            <h1 id="type">AI Page Summary</h1>
+            <p>A powerful <strong>Chrome extension</strong> that generates concise, intelligent summaries of web pages using advanced AI technology, built for researchers, students, and professionals.</p>
+        </section>
+
+        <!-- Technologies -->
+        <section class="technologies">
+            <h2>Technologies Used</h2>
+            <div class="tech-grid">
+                <span class="tech-badge">JavaScript</span>
+                <span class="tech-badge">Chrome API</span>
+                <span class="tech-badge">BART-CNN</span>
+                <span class="tech-badge">Manifest V3</span>
+            </div>
+        </section>
+
+        <!-- Features Section -->
+        <section class="project">
+            <h2>Features</h2>
+            <ul>
+                <li><strong>One-Click Summaries:</strong> Generate instant summaries of any web page</li>
+                <li><strong>Customizable Length:</strong> Choose summary length (1-10 sentences)</li>
+                <li><strong>Theme Options:</strong> Dark/Light theme support for comfortable viewing</li>
+                <li><strong>History Tracking:</strong> Keep track of recent page summaries</li>
+                <li><strong>Smart Detection:</strong> Protected URL handling and browser compatibility</li>
+            </ul>
+        </section>
+
+        <!-- Implementation -->
+        <section class="project">
+            <h2>Implementation</h2>
+            <h3>Core Components</h3>
+            <ul>
+                <li>Hugging Face's BART-large-CNN model for AI summarization</li>
+                <li>Chrome Extension Manifest V3 architecture</li>
+                <li>Modern JavaScript with async/await patterns</li>
+                <li>Responsive UI design system</li>
+            </ul>
+
+            <h3>Browser Integration</h3>
+            <ul>
+                <li>Active tab content processing</li>
+                <li>Local storage for user preferences</li>
+                <li>Cross-page scripting capabilities</li>
+                <li>Secure permission management</li>
+            </ul>
+        </section>
+
+        <!-- Technical Details -->
+        <section class="project">
+            <h2>Technical Highlights</h2>
+            <h3>Key Features</h3>
+            <ul>
+                <li>Automatic summarization triggers</li>
+                <li>Clipboard integration for easy copying</li>
+                <li>Persistent settings management</li>
+                <li>Protected URL detection system</li>
+            </ul>
+            <h3>Permissions</h3>
+            <ul>
+                <li>activeTab: Current page access</li>
+                <li>storage: User preference saving</li>
+                <li>scripting: Content processing</li>
+                <li>host: Cross-site summarization</li>
+            </ul>
+        </section>
+
+        <!-- Documentation -->
+        <section id="contact">
+            <h2>Resources</h2>
+            <p><a href="https://github.com/Code-JL/AI-Page-Summary" target="_blank">
+                <img src="../../images/github.png" alt="GitHub Icon">GitHub Repository
+            </a></p>
+        </section>
+
+        <!-- License -->
+        <section class="project">
+            <h2>License</h2>
+            <p>This project is licensed under the MIT License. See the <a href="https://github.com/Code-JL/AI-Page-Summary/blob/main/LICENSE" target="_blank">LICENSE</a> file for details.</p>
+        </section>
+    </main>
+
+    <footer>
+        <p>© 2025 AI Page Summary</p>
+    </footer>
+
+    <canvas id="bg1"></canvas>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/plugins/matter-wrap.min.js"></script>
+    <script src="../projectsUniversal.js"></script>
+</body>
+</html>
diff --git a/projects/dna-sequence-analyzer copy/about.css b/projects/dna-sequence-analyzer copy/about.css
diff --git a/projects/dna-sequence-analyzer copy/about.html b/projects/dna-sequence-analyzer copy/about.html
diff --git a/projects/dna_sequence_analyzer/about.css 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 → projects/dna_sequence_analyzer/about.html b/projects/dna-sequence-analyzer/about.html → projects/dna_sequence_analyzer/about.html
diff --git a/projects/header.html b/projects/header.html
@@ -0,0 +1,39 @@
+<nav>
+    <ul>
+        <li>
+            <a href="../../assets/home.html" aria-label="Home">
+                <img src="../../images/home.png" alt="Home Icon"> Home
+            </a>
+        </li>
+        <li>
+            <a href="../../assets/about.html" aria-label="About">
+                <img src="../../images/about.png" alt="About Icon"> About
+            </a>
+        </li>
+        <li>
+            <a href="../../assets/projects.html" aria-label="Projects">
+                <img src="../../images/projects.png" alt="Projects Icon"> Projects
+            </a>
+        </li>
+        <li>
+            <a href="../../assets/skills.html" aria-label="Skills">
+                <img src="../../images/skills.png" alt="Skills Icon"> Skills
+            </a>
+        </li>
+        <li>
+            <a href="../../assets/education.html" aria-label="Education">
+                <img src="../../images/education.png" alt="Education Icon"> Education
+            </a>
+        </li>
+        <li>
+            <a href="../../assets/home.html#contact" aria-label="Contact">
+                <img src="../../images/contact.png" alt="Contact Icon"> Contact
+            </a>
+        </li>
+        <li>
+            <a href="../../assets/resume.html" aria-label="Resume">
+                <img src="../../images/resume.png" alt="Resume Icon"> Resume
+            </a>
+        </li>
+    </ul>
+</nav>
diff --git a/projects/inventory_manager/about.html b/projects/inventory_manager/about.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Projects - Inventory Manager</title>
-    <link rel="stylesheet" href="../../assets/load/universal.css">
+	<link rel="stylesheet" href="../../assets/load/universal.css">
     <link rel="stylesheet" href="about.css">
 </head>
 <body>

diff --git a/projects/kicker_data_scraper/about.css 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;
+}