-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
f9ba7e8
commit 4b48bdf
Showing
8 changed files
with
272 additions
and
3 deletions.
There are no files selected for viewing
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| id,title,subtitle,thumbnail,modal_image,description,tech_stack,youtube_url,live_link,source_link,problem,solution,award_text | ||
| 1,Hue,Create & Sell AI Art,assets/images/projects/thumb-hue.png,assets/images/hue.png,"Hue is a digital art store powered by AI and MindsDB.","PYTHON, DJANGO, MINDSDB, OPENAI","https://www.youtube.com/embed/cvy4uK9LyjM?t=1s","https://hue-alissa.herokuapp.com/","https://github.com/alissatroiano/hue","Create or update a web application that integrates MindsDB to improve its overall functionality.","Added an AI Image Generation Tool, trained models on famous artwork datasets, added permissions for public/downloadable artwork, connected store with selling capabilities.","" | ||
| 2, Hue,Create & Sell AI Art,assets/images/projects/thumb-hue.png,assets/images/hue.png,"Hue is a digital art store powered by AI and MindsDB.","PYTHON, DJANGO, MINDSDB, OPENAI","https://www.youtube.com/embed/cvy4uK9LyjM?t=1s","https://hue-alissa.herokuapp.com/","https://github.com/alissatroiano/hue","Create or update a web application that integrates MindsDB to improve its overall functionality.","Added an AI Image Generation Tool, trained models on famous artwork datasets, added permissions for public/downloadable artwork, connected store with selling capabilities.","" |
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,130 @@ | ||
| document.addEventListener('DOMContentLoaded', function() { | ||
| // Path to your CSV file | ||
| const csvPath = 'assets/data/projects.csv'; // Update the path accordingly | ||
|
|
||
| // Fetch and parse the CSV | ||
| Papa.parse(csvPath, { | ||
| download: true, | ||
| header: true, | ||
| skipEmptyLines: true, | ||
| complete: function(results) { | ||
| const projects = results.data; | ||
| createThumbnails(projects); | ||
| createModals(projects); | ||
| }, | ||
| error: function(err) { | ||
| console.error('Error parsing CSV:', err); | ||
| } | ||
| }); | ||
|
|
||
| // Function to create project thumbnails | ||
| function createThumbnails(projects) { | ||
| const thumbnailContainer = document.getElementById('project-thumbnails'); | ||
|
|
||
| projects.forEach(project => { | ||
| const projectCol = document.createElement('div'); | ||
| projectCol.classList.add('col-12', 'col-xs-8', 'col-sm-4'); | ||
|
|
||
| projectCol.innerHTML = ` | ||
| <div class="gallery-item h-100"> | ||
| <img src="${project.thumbnail}" alt="${project.title}" class="img-fluid" /> | ||
| <div class="gallery-links d-flex align-items-center justify-content-center"> | ||
| <a href="#" class="stretched-link btn btn-primary" data-bs-toggle="modal" data-bs-target="#projectModal${project.id}"></a> | ||
| </div> | ||
| </div> | ||
| `; | ||
|
|
||
| thumbnailContainer.appendChild(projectCol); | ||
| }); | ||
| } | ||
|
|
||
| // Function to create project modals | ||
| function createModals(projects) { | ||
| const modalContainer = document.getElementById('project-modals'); | ||
|
|
||
| projects.forEach(project => { | ||
| const modal = document.createElement('div'); | ||
| modal.classList.add('modal', 'fade'); | ||
| modal.id = `projectModal${project.id}`; | ||
| modal.setAttribute('tabindex', '-1'); | ||
| modal.setAttribute('aria-labelledby', `modalLabel${project.id}`); | ||
| modal.setAttribute('aria-hidden', 'true'); | ||
|
|
||
| modal.innerHTML = ` | ||
| <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl"> | ||
| <div class="modal-content"> | ||
| <div class="text-end"> | ||
| <button type="button" class="btn-close me-3 mt-3" data-bs-dismiss="modal" aria-label="Close"></button> | ||
| </div> | ||
| <div class="modal-header"> | ||
| <div class="col-12"> | ||
| <h1 class="folio-title display-3 text-center text-sm-start"> | ||
| ${project.title}: <span class="text-light-purple">${project.subtitle}</span> | ||
| </h1> | ||
| </div> | ||
| </div> | ||
| <div class="modal-body"> | ||
| <div class="row"> | ||
| <!-- Video and About Section --> | ||
| <div class="col-lg-7 mb-4 mb-lg-0"> | ||
| <div class="pe-lg-4 me-lg-3 pe-xl-0 me-xl-0"> | ||
| <div class="ratio ratio-16x9 mb-4"> | ||
| <iframe src="${project.youtube_url}" title="YouTube video player" frameborder="0" | ||
| allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" | ||
| allowfullscreen></iframe> | ||
| </div> | ||
| <h2 class="h1 my-4 text-mark-projects"> | ||
| <i class="fas fa-circle-info"></i> About | ||
| </h2> | ||
| <p class="fs-lg mb-0">${project.description}</p> | ||
| </div> | ||
| </div> | ||
| <!-- Details Section --> | ||
| <div class="col-lg-5 col-xl-4 offset-xl-1 border-start-lg"> | ||
| ${project.problem || project.solution ? ` | ||
| <div> | ||
| ${project.problem ? ` | ||
| <h3 class="h5 d-flex align-items-center text-mark-projects"> | ||
| <i class="fas fa-circle-question mx-1"></i> Problem | ||
| </h3> | ||
| <p class="my-3">${project.problem}</p> | ||
| ` : ''} | ||
| ${project.solution ? ` | ||
| <h3 class="h5 d-flex align-items-center text-mark-projects"> | ||
| <i class="fas fa-lightbulb me-2"></i> Solution | ||
| </h3> | ||
| <p class="my-3">${project.solution}</p> | ||
| ` : ''} | ||
| </div> | ||
| ` : ''} | ||
| <h3 class="h5 d-flex align-items-center text-mark-projects"> | ||
| <i class="fas fa-wrench mx-1"></i> Tech Stack | ||
| </h3> | ||
| <p class="tech-stack">${project.tech_stack}</p> | ||
| ${project.award_text ? ` | ||
| <div class="mt-3"> | ||
| <span class="award-text text-center text-sm-start">${project.award_text}</span> | ||
| </div> | ||
| ` : ''} | ||
| <div class="photo my-3"> | ||
| <img src="${project.modal_image}" class="img-fluid project-img" alt="${project.title}" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="modal-footer"> | ||
| ${project.live_link ? `<a href="${project.live_link}" target="_blank"><button class="btn btn-primary">Live Project</button></a>` : ''} | ||
| ${project.source_link ? `<a href="${project.source_link}" target="_blank"><button class="btn btn-secondary">Source Code</button></a>` : ''} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| `; | ||
|
|
||
| modalContainer.appendChild(modal); | ||
| }); | ||
| } | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <!-- Your existing head content --> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>My Projects</title> | ||
| <!-- Include Bootstrap CSS --> | ||
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> | ||
| <!-- Include any additional CSS here --> | ||
| </head> | ||
| <body> | ||
|
|
||
| <!-- Project Thumbnails Section --> | ||
| <section id="gallery" class="gallery"> | ||
| <div class="container"> | ||
| <!-- Section Title --> | ||
| <div class="row d-flex gy-4 gx-3 justify-content-center"> | ||
| <div class="col-12 text-center text-sm-start py-3"> | ||
| <h1 class="section-title display-3 text-light my-3" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500">MY PROJECTS</h1> | ||
| <hr data-aos="fade-down" data-aos-easing="linear" data-aos-duration="2000" data-aos-delay="1200"> | ||
| </div> | ||
| </div> | ||
| <!-- Thumbnails Container --> | ||
| <div id="project-thumbnails" class="row d-flex gy-4 g-3 justify-content-center py-3 mb-5" data-masonry='{"percentPosition": true }'> | ||
| <!-- Project Thumbnails will be inserted here by JavaScript --> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- Modals Container --> | ||
| <div id="project-modals"> | ||
| <!-- Project Modals will be inserted here by JavaScript --> | ||
| </div> | ||
|
|
||
| <!-- Back to Top Button --> | ||
| <div class="pb-3 d-flex justify-content-end"> | ||
| <button type="button" class="btn border-0" id="btn-back-to-top" style="display: block;"> | ||
| <i class="fas fa-chevron-up fa-2x" aria-hidden="true"></i> | ||
| </button> | ||
| </div> | ||
|
|
||
| <!-- Include Bootstrap JS and dependencies --> | ||
| <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-..." crossorigin="anonymous"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | ||
| <!-- Include Font Awesome for icons --> | ||
| <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> | ||
| <!-- Include PapaParse for CSV parsing --> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.2/papaparse.min.js" integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer"></script> | ||
| <!-- Your custom JavaScript --> | ||
| <script src="assets/js/projects.js"></script> <!-- Update the path accordingly --> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters