keith/Portfolio-2026
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance project handling for websites in portfolio
Sync TODOs with Issues / sync_todos (push) Successful in 6s
Details

Browse Source 
- Added methods in Projects class to determine if a project is a website, retrieve its URL, platform, and screenshot.
- Updated single-project template to display website-specific information and actions.
- Modified project card component to show website details and adjust action buttons accordingly.
- Improved CSS for project cards and buttons to align with new website features.
This commit is contained in:
Keith Solomon
2026-08-22 15:14:28 -05:00
parent d0dd9fa98a
commit 0613e33411
7 changed files with 382 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/components/project-card.css
+11 -5
View File
@@ -66,6 +66,7 @@
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 4;
line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
@@ -96,23 +97,22 @@
text-decoration: none;
border: 2px solid transparent;
transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
&:hover { background: var(--color-primary-87); border-color: var(--color-primary-87); }
}
.project-card__action--primary {
background: var(--color-primary, #b6c4ff);
color: var(--color-on-primary, #05297a);
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary, #b6c4ff);
}
.project-card__action--primary:hover { background: var(--color-primary-87); border-color: var(--color-primary-87); }
.project-card__action--secondary {
color: var(--color-on-surface, #e3e1e9);
border-color: var(--color-outline, #8f909d);
}
.project-card__action--secondary:hover { border-color: var(--color-primary, #b6c4ff); color: var(--color-primary, #b6c4ff); }
.project-card__action:focus-visible {
outline: 2px solid var(--color-primary, #b6c4ff);
outline-offset: 3px;
@@ -327,3 +327,9 @@
}
.home-recent__empty { text-align: center; padding: 4rem 1rem; color: var(--color-on-surface-variant, #c5c5d3); }
/* Website-mode project card + single-project screenshot/platform */
.single-project__screenshot { margin: 0 0 1.5rem; }
.single-project__screenshot img { width: 100%; height: auto; border-radius: 0.75rem; display: block; border: 1px solid var(--color-outline-variant, #444651); }
.project-card__platform { color: var(--color-on-surface-variant, #c5c5d3); font-size: 0.875rem; }