Skip to content

Commit

Permalink
Revamp open source project cards
Browse files Browse the repository at this point in the history
  • Loading branch information
@Adamouization
Adamouization committed Dec 14, 2024
1 parent d07cdaf commit 7667fae
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 26 deletions.
46 changes: 31 additions & 15 deletions _includes/open_source_projects.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ <h1>Open Source Projects</h1>
title: "My Personal Retro Blog",
description: "A retro blog built with Hexo and EJS dedicated to my personal hobbies and activities outside of work.",
githubLink: "https://github.com/Adamouization/Adamouization.github.io",
languages: "EJS"
languages: "EJS",
websiteLink: "https://adamouization.github.io"
},
{
title: "Short-Term Solar Irradiance Forecasting using LSTMs",
Expand All @@ -36,7 +37,8 @@ <h1>Open Source Projects</h1>
title: "Trello Card Counter",
description: "A Firefox extension that counts the number of cards in each column of any Trello board.",
githubLink: "https://github.com/Adamouization/Trello-Card-Counter-Mozilla-Extension",
languages: "CSS, Javascript, HTML"
languages: "CSS, Javascript, HTML",
websiteLink: "https://trellocardcounter.jaamour.com/"
},
{
title: "Machine Learning, Data Science & Python Notes",
Expand All @@ -54,7 +56,8 @@ <h1>Open Source Projects</h1>
title: "Coronavirus Insights Dashboard",
description: "A node.js application deployed on Heroku showing the spread of Coronavirus through visualisations designed in D3.JS.",
githubLink: "https://github.com/Adamouization/Corona-Virus-Insights-Dashboard",
languages: "Javascript, CSS, HTML"
languages: "Javascript, CSS, HTML",
websiteLink: "https://corona-virus-insights.fly.dev/"
},
{
title: "Predicting Superconductors' Critical Temperatures using Regression",
Expand Down Expand Up @@ -84,7 +87,8 @@ <h1>Open Source Projects</h1>
title: "Introduction to Web Standards Website",
description: "A website introducing users to the role/influence of web standards and the W3C in the World Wide Web.",
githubLink: "https://github.com/Adamouization/Introduction-to-Web-Standards-Website",
languages: "HTML, CSS, Javascript"
languages: "HTML, CSS, Javascript",
websiteLink: "https://webstandards.jaamour.com/index.html"
},
{
title: "Flight Route Planner using AI Search",
Expand All @@ -108,7 +112,8 @@ <h1>Open Source Projects</h1>
title: "Formula 1 Crash Statistics Website",
description: "Flask web application parsing F1 crash statistics from Wikipedia and displaying them in charts and tables.",
githubLink: "https://github.com/Adamouization/Formula1-Crash-Stats",
languages: "Python, HTML, CSS"
languages: "Python, HTML, CSS",
websiteLink: "https://f1-dnf-stats.fly.dev/"
},
{
title: "Computer Vision: Filtering, Object Recognition & Features",
Expand All @@ -132,13 +137,14 @@ <h1>Open Source Projects</h1>
title: "AdamouizationFilms Website",
description: "One-page mobile-friendly website built with Jekyll and Bootstrap showcasing my online filmmaking projects.",
githubLink: "https://github.com/Adamouization/AdamouizationFilms",
languages: "HTML, CSS"
languages: "HTML, CSS",
websiteLink: "http://www.adamouization.jaamour.com/"
},
{
title: "Space Shooter Video Game",
description: "A prototype space-shooter video game created in AGK BASIC v2 to learn the basics of game development through a 2D game engine.",
githubLink: "https://github.com/Adamouization/Space-Shooter",
languages: "Basic"
languages: "Assembly"
},
{
title: "Binary Image Classifier",
Expand All @@ -156,23 +162,33 @@ <h1>Open Source Projects</h1>

function createCard(project) {
const card = document.createElement('div');
card.className = 'card';
card.className = 'card shadow-2xl rounded-lg p-4 transition-transform transform hover:scale-110 border border-gray-300';
card.innerHTML = `
<div class="card-text-wrapper">
<h4>${project.title}</h4>
<p>${project.description}</p>
<h4 class="text-xl font-semibold">${project.title}</h4>
<p class="text-gray-700">${project.description}</p>
</div>
<div class="language-tag-wrapper">
${project.languages.split(',').map(lang => `
<a href="https://github.com/Adamouization?tab=repositories&q=&type=public&language=${lang.trim().toLowerCase()}" target="_blank">
<div class="language-tag ${lang.trim().toLowerCase()}-language">${lang.trim()}</div>
<div class="language-tag ${lang.trim().toLowerCase()}-language bg-gray-200 rounded-full px-3 py-1 text-sm">
${lang.trim()}
</div>
</a>
`).join('')}
</div>
<button class="github-button" onclick="window.open('${project.githubLink}', '_blank');">
<i class="icon fa fa-github-alt github-button-icon" aria-hidden="true"></i>
View on GitHub
</button>
<div class="button-container flex space-x-2 mt-2">
<button class="github-button bg-blue-500 text-white rounded-lg px-4 py-2 hover:bg-blue-700 transition-colors duration-300 transform hover:scale-105" onclick="window.open('${project.githubLink}', '_blank');">
<i class="icon fa fa-github-alt github-button-icon" aria-hidden="true"></i>
View on GitHub
</button>
${project.websiteLink ? `
<button class="github-button bg-green-500 text-white rounded-lg px-4 py-2 hover:bg-green-700 transition-colors duration-300 transform hover:scale-105" onclick="window.open('${project.websiteLink}', '_blank');">
<i class="icon fa fa-globe github-button-icon" aria-hidden="true"></i>
Visit Website
</button>
` : ''}
</div>
`;
return card;
}
Expand Down
54 changes: 43 additions & 11 deletions assets/css/project-cards.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,27 @@
flex-direction: row;
flex-wrap: wrap;
align-content: flex-end;
align-items: end;
align-items: stretch;
justify-content: center;
width: 100%;
height: auto
height: auto;
padding: 10px;
}

.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin: 15px;
width: 30%;
min-width: 288px;
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 12px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
margin: 20px;
width: calc(33.33% - 40px);
transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}

.card-text-wrapper {
Expand All @@ -40,12 +50,13 @@
}

.card h4 {
font-size: 18px
font-size: 20px;
font-weight: 600;
}

.card p {
font-size: 16px;
margin-top: -15px;
margin-top: 5px;
}

/* Mozilla Firefox download button. */
Expand All @@ -58,13 +69,13 @@
border: none;
outline: 0;
display: inline-block;
padding: 8px;
padding: 6px;
color: white;
background-color: #3d516e;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 16px;
font-size: 14px;
margin-top: 10px;
}

Expand All @@ -77,6 +88,27 @@
margin-right: 5px;
}

/* Button fits at the bottom of the card */
.button-container {
display: flex;
justify-content: space-between;
margin-top: 10px;
}

/* Media query for medium screens (tablets) */
@media (max-width: 1000px) {
.card {
width: calc(50% - 40px); /* 2 cards per row */
}
}

/* Media query for small screens (mobile) */
@media (max-width: 575px) {
.card {
width: calc(100% - 40px); /* 1 card per row */
}
}

.language-tag-wrapper {
margin-top: -15px;
}
Expand All @@ -86,7 +118,7 @@

.language-tag {
display: inline-flex;
width: 50px;
width: 45px;
height: 20px;
line-height: 20px;
padding-right: 10px;
Expand Down

0 comments on commit 7667fae

Please sign in to comment.