Skip to content

Commit 5de0307

Browse files
lunarcloudlunarcloud
committed
update projects display
1 parent 2ed59e9 commit 5de0307

7 files changed

Lines changed: 88 additions & 37 deletions

File tree

‎controllers/projects.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,10 @@ export default class ProjectsPageController {
4040

4141
if (this.pageFilters.length === 0) {
4242
this.filterClearBtn.toggleAttribute('disabled', true)
43-
document.getElementById('project-tags-label').toggleAttribute('hidden', true)
43+
document.getElementById('no-filters-label').style.display = 'inline'
4444
} else {
4545
this.filterClearBtn.addEventListener('click', () => this.clearFilters())
46+
document.getElementById('no-filters-label').style.display = 'none'
4647
}
4748

4849
// Setup the list of current filters at clickable items

‎css/index.css‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,24 @@
11
@import url("./common.css");
22

33
:root {
4-
--blue-shadow: hsl(260deg 40% 40%);
4+
--block-shadow: oklab(0.42 0.03 0.09);
55
--further-explore-bg: hsl(65deg 100% 85% / 20%);
66
--further-explore-header-hover: hsl(240deg 80% 50%);
77
--further-explore-header-active: hsl(240deg 40% 50%);
88
--further-explore-headerimg-hover: brightness(0.75);
9+
--hover-alt-page-filter: brightness(0.75);
10+
--hover-highlighted-section-filter: brightness(0.5);
911
}
1012

1113
@media screen and (prefers-color-scheme: dark) {
1214
:root {
13-
--blue-shadow: hsl(215deg 100% 20%);
15+
--block-shadow: hsl(260deg 40% 40%);
1416
--further-explore-bg: hsl(180deg 45% 30% / 20%);
1517
--further-explore-header-hover: hsl(240deg 60% 65%);
1618
--further-explore-header-active: hsl(240deg 30% 65%);
1719
--further-explore-headerimg-hover: invert(1);
20+
--hover-alt-page-filter: brightness(1.25);
21+
--hover-highlighted-section-filter: brightness(2);
1822
}
1923
}
2024

@@ -189,8 +193,13 @@ main {
189193
margin-top: 0.5em;
190194
padding: 0 1em 0.5em;
191195
background-color: var(--further-explore-bg);
192-
border: 2px solid var(--blue-shadow);
196+
border: 2px solid var(--block-shadow);
193197
border-radius: 8px;
198+
transition: filter 300ms ease-out;
199+
200+
&:hover{
201+
filter: var(--hover-highlighted-section-filter);
202+
}
194203

195204
&, &:link, &:hover, &:focus {
196205
color: unset;
@@ -257,11 +266,12 @@ main {
257266
border-radius: 8px;
258267
position: relative;
259268
overflow: hidden;
260-
border: 4px solid var(--blue-shadow);
261-
transition: border-bottom-width,margin-top,background-size 400ms ease;
269+
border: 4px solid var(--block-shadow);
270+
transition: border-bottom-width 300ms ease, margin-top 300ms ease, background-size 500ms ease, filter 300ms ease-out;
262271

263272
&:hover {
264273
background-size: 110%;
274+
filter: var(--hover-alt-page-filter);
265275
}
266276

267277
@media (width < 640px) {

‎css/projects.css‎

Lines changed: 49 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,31 +6,74 @@ main {
66

77
#all-projects {
88
display: flex;
9+
flex-wrap: wrap;
910
margin: auto;
10-
flex-direction: column;
1111
align-items: center;
12+
margin-top: calc(var(--top-nav-height) + 2em);
1213
}
1314

1415
#filters-list,
1516
#all-projects project-display {
1617
max-width: 100%;
17-
width: 720px;
18+
width: 680px;
1819
margin: auto;
20+
flex-shrink: 0;
21+
}
22+
23+
#all-projects project-display {
24+
flex-grow: 1;
25+
height: stretch;
1926
}
2027

2128
#filters-list {
29+
--filters-bg-color: oklab(100% 0 0);
30+
--filters-box-shadow-color: oklab(50% 0 0);
2231
display: flex;
2332
flex-direction: row-reverse;
33+
padding: 0.5em 1em;
34+
border-radius: 1em;
35+
background-color: var(--filters-bg-color);
36+
box-shadow: 0 0 6px 0 var(--filters-box-shadow-color);
37+
margin-top: 1em;
38+
position: fixed;
39+
top: calc(var(--top-nav-height) + 1em);
40+
left: 0;
41+
right: 0;
42+
z-index: 100;
43+
line-height: 1.5em;
44+
vertical-align: text-bottom;
45+
46+
@media screen and (prefers-color-scheme: dark) {
47+
--filters-bg-color: oklab(50% 0 0);
48+
--filters-box-shadow-color: oklab(0% 0 0);
49+
}
50+
51+
#no-filters-label {
52+
line-height: 2em;
53+
filter: opacity(0.5);
54+
}
2455
}
2556

26-
#filters-list #filter-clear {
27-
text-align: right;
28-
margin-right: 20px;
57+
#filter-clear {
58+
margin-right: 1em;
2959
flex-grow: 0;
3060
white-space: nowrap;
3161
overflow: hidden;
3262
overflow-wrap: break-word;
3363
text-overflow: ellipsis;
64+
appearance: none;
65+
background-color: transparent;
66+
border: unset;
67+
border-radius: 1em;
68+
font-size: 2em;
69+
line-height: 1em;
70+
padding-left: 0.1em;
71+
transition: background-color 300ms ease-out;
72+
73+
&:not(:disabled):hover {
74+
color: var(--main-a-hover-color);
75+
background-color: oklab(50% 0 0 / 0.5);
76+
}
3477
}
3578

3679
#filters-list .project-tags {
@@ -40,18 +83,9 @@ main {
4083

4184
#project-tags-label {
4285
margin: auto;
86+
margin-right: 1em;
4387
}
4488

4589
#all-projects project-display[hidden] {
4690
display: none !important;
4791
}
48-
49-
@media screen and (width >= 640px) {
50-
main {
51-
font-size: 10pt;
52-
}
53-
54-
main > h1 {
55-
font-size: 24pt;
56-
}
57-
}

‎project-display/project-display-element.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export default class ProjectDisplayElement extends HTMLElement {
5858

5959
anchorEl.textContent = tag
6060
anchorEl.href = `?filter=${tag}`
61+
anchorEl.title = `fitler on '${tag}'`
6162
anchorEl.addEventListener('fadednavigate', () => {
6263
const active = listItemEl.toggleAttribute('active')
6364
this.dispatchEvent(new CustomEvent('projectfilterselected', { detail: { tag, active } }))

‎project-display/project-display.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ internal {
1818
border-radius: 8px;
1919
margin: 12px 6px;
2020
width: calc(100% - 28px); /* full, minus 12px*2 margin and 2px*2 border */
21+
height: stretch;
2122
overflow: hidden;
2223
hyphens: auto;
2324
break-inside: avoid;

‎project-display/project-tags.css‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,12 @@ ul.project-tags > li > a:link {
1818

1919
ul.project-tags > li > a::before {
2020
display: inline;
21-
content: " ▶ ";
21+
content: "▶";
2222
font-size: 0.5rem;
23-
vertical-align: text-top;
23+
margin-right: 2px;
24+
margin-left: 4px;
25+
vertical-align: middle;
26+
font-family: 'Noto Emoji', monospace;
2427
}
2528

2629
@media screen {

‎project-list-view.html‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,14 @@
1818
<span slot="about-info">This is a list of projects that Sam Sarette has been involved in.</span>
1919
</nav-header>
2020
<main id="main" class="page-fade">
21-
<h1>
22-
Projects <span id="projects-count"></span>
23-
</h1>
24-
2521
<div id="filters-list">
26-
<button id="filter-clear" type="reset" print-hidden>Clear Filters</button>
22+
<button id="filter-clear" type="reset" print-hidden title="clear all filters">
23+
<symbol>⌫</symbol>
24+
</button>
2725
<a is="fadeout-anchor" id="filter-clear-a" hidden href="?"></a>
2826
<ul id="active-project-tags" class="tags project-tags"></ul>
29-
<span id="project-tags-label">Active:</span>
27+
<span id="no-filters-label" disabled>no filters</span>
28+
<span id="project-tags-label">Projects <span id="projects-count"></span></span>
3029
</div>
3130

3231
<div id="all-projects">
@@ -133,17 +132,18 @@ <h1>
133132
</span>
134133
</project-display>
135134

136-
<project-display id="hiarc-sdk" name="Internal SDK"
135+
<project-display id="hiarc-launchcode" name="HiArc LaunchCode"
137136
for="HiArc (Formerly KMC Systems)" size="trio"
138-
team-role="Installer, Packaging, and XR expert."
137+
team-role="Improver of the user experience."
138+
link-main="https://ctrl.hiarc.inc/launchcode"
139139
tags="professional,c#,c++,xaml,nuget,installers,os-integration,continuous-integration,godot,xr"
140140
thumbnail="img/projects/hiarc-simple.svg" thumbnail-bg-color-override="#27424a" first="2022-08-11">
141141
<!--last="2025-06-26"-->
142142
<span slot="description">
143-
<p>Created the Installer (msi) and NuGet packages for our primary Robotics SDK. Involved lots of manually-created nuspec files, adjusting project templates, devops yaml build scripts.</p>
144-
<p>Ensured the project’s lead developer was happy. The work has process improvement implications of nearly all projects at HiArc (an internally-fundamental SDK).</p>
143+
<p>Created the MSI installer and was first to implement NuGet packages for the SDK. Involved lots of manually-created nuspec files, adjusting project templates, devops yaml build scripts.</p>
145144
<p>Added Godot-powered XR capabilities to the simulator template.</p>
146-
<p>Rewrote a key SDK utility from Winforms to Avalonia.</p>
145+
<p>Rewrote the Diagnostics application from Winforms to Avalonia and made several improvements to it and the Designer application.</p>
146+
<p>The work has process improvement implications of nearly all projects at HiArc as it is the (originally internal-only) fundamental SDK.</p>
147147
</span>
148148
</project-display>
149149

@@ -153,15 +153,15 @@ <h1>
153153
tags="professional,c#,yaml,markdown,nuget,continuous-integration"
154154
thumbnail="img/projects/hiarc-simple.svg" thumbnail-bg-color-override="#27424a" first="2023-09-10">
155155
<span slot="description">
156-
<p>Helped to develop a series of standardized Azure DevOps build pipelines for use on all company projects in future, starting with the Internal SDK.</p>
156+
<p>Helped to develop a series of standardized Azure DevOps build pipelines for use on all company projects in future, starting with HiArc LaunchCode.</p>
157157
<p>Additionally, he built a utility which uses standard tools and a highly customized CSS template to produce the documentation required of a regulated medical program, written in markdown and output as PDF.</p>
158158
</span>
159159
</project-display>
160160

161161
<project-display id="hiarc-large-ivd-nextgen" name="Next Generation IVD Device"
162162
for="HiArc (Formerly KMC Systems)" size="team" team-role="Technical Lead of a large firmware team."
163163
tags="professional,c#,c++,robotics,nuget,continuous-integration"
164-
thumbnail="img/projects/hiarc-simple.svg" thumbnail-bg-color-override="#27424a" first="2024-12-17">
164+
thumbnail="img/projects/hiarc-simple.svg" thumbnail-bg-color-override="#27424a" first="2024-12-17" last="2026-02-28">
165165
<span slot="description">
166166
<p>Helped to reorganize and train a large team of firmware developers to produce RTOS firmware running nearly two dozen ARM SBCs.</p>
167167
<p>Utilized the company's Internal SDK and standard CI/CD Toolkit in order to develop firmware and supporting documentation automatically and continuously.</p>
@@ -556,14 +556,15 @@ <h1>
556556
</project-display>
557557

558558
<project-display id="sta-play-app" name="Play App for Star Trek Adventures" for="Personal" size="solo"
559-
team-role="Developed solo." tags="hobby,js/ts,gamedev"
559+
team-role="Developed solo." tags="hobby,js/ts,gamedev,agentic-development"
560560
thumbnail="img/projects/sta-play-app.jpg" thumbnail-size="contain" thumbnail-x="50%" thumbnail-bg-color-override="black"
561561
released="2024-05-20" first="2024-05-15"
562562
link-main="https://samsarette.itch.io/sta-play"
563563
link-repo="https://github.com/lunarcloud/sta-play-webapp">
564564
<span slot="description">
565565
<p>An unofficial, unaffiliated app for displaying game information for players of the <a href="https://www.startrekttrpg.com/">Star Trek Adventures</a> game by Modiphius® Entertainment.</p>
566566
<p>Uses indexeddb in-browser database, drag and drop, 3D model displays multiple themes, custom web components, and custom keyboard shortcuts.</p>
567+
<p>Recently, Sam has used this project to test agentic development using GitHub copilot (AI), but make no mistake about the hands-on craftmanship still on display. The AI still has no account for good taste (awful at the theme CSS work), and the fun parts should be for humans anyway.</p>
567568
</span>
568569
</project-display>
569570
</div>

0 commit comments

Comments
 (0)