create-foliokit 1.0.0 → 1.0.1

package/templates/default/src/styles.css

@@ -15,6 +15,7 @@
   --elevated: #090909;
   --secondary: #0b0b0b;
   --lime: #e5cf9c;
+  --social-hover: #00e676;
   --pink: #ec4899;
   --violet: #a78bfa;
   --warm-white: #ffffffde;
@@ -26,6 +27,8 @@
   --frame-dot-hover: #3a352b;
   --content-width: 880px;
   --page-gutter: 16px;
+  --grid-size: 40px;
+  --grid-line: rgba(255, 255, 255, .18);
   --section-space: 20px;
   --section-space-end: 22px;
   --panel-inset: 12px;
@@ -44,41 +47,21 @@
 
 * { box-sizing: border-box; }
 html, body { overflow-x: clip; }
-body { min-width: 320px; margin: 0; color: var(--warm-white); background: #000000; isolation: isolate; }
+body { position: relative; min-width: 320px; margin: 0; color: var(--warm-white); background: #000000; isolation: isolate; }
 body::before {
-  position: fixed;
+  position: absolute;
   z-index: -1;
   inset: 0;
   pointer-events: none;
-  background: url('/stars-landscape.svg') center / cover no-repeat;
-  opacity: .9;
-  content: '';
-}
-body::after {
-  --near-stars: url('/stars-foreground-landscape.svg');
-  position: fixed;
-  z-index: -1;
-  inset: -2%;
-  pointer-events: none;
+  background-color: var(--obsidian);
   background-image:
-    radial-gradient(ellipse at 16% 26%, rgba(255, 255, 255, .004), transparent 43%),
-    radial-gradient(ellipse at 82% 70%, rgba(255, 255, 255, .003), transparent 44%),
-    radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, .002), transparent 48%),
-    var(--near-stars);
-  background-position: center;
-  background-size: 100% 100%, 100% 100%, 100% 100%, cover;
-  background-repeat: no-repeat;
-  opacity: .96;
-  mix-blend-mode: screen;
-  transform-origin: center;
-  animation: galaxy-depth 36s ease-in-out infinite alternate;
-  will-change: transform;
+    linear-gradient(var(--grid-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
+  background-position: center center, center center;
+  background-size: var(--grid-size) var(--grid-size);
+  background-repeat: repeat;
   content: '';
 }
-@keyframes galaxy-depth {
-  from { transform: translate3d(-.45%, .3%, 0) scale(1); }
-  to { transform: translate3d(.35%, -.25%, 0) scale(1.025); }
-}
 a { color: inherit; text-decoration: none; transition: color var(--interaction-duration) var(--interaction-ease); }
 a:hover, a:focus-visible { color: var(--lime); }
 button, a { -webkit-tap-highlight-color: transparent; }
@@ -86,11 +69,12 @@ button:focus-visible, a:focus-visible { outline: 2px solid var(--lime); outline-
 h1, h2, h3, p { margin-top: 0; }
 h1, h2, h3 { font-family: var(--heading-font); }
 .mono { font-family: var(--mono-font); }
-.section-wrap { width: min(var(--content-width), calc(100% - var(--page-gutter) - var(--page-gutter))); margin-inline: auto; }
+.section-wrap { width: min(var(--content-width), calc(100% - var(--page-gutter) - var(--page-gutter))); margin-inline: auto; background: var(--obsidian); }
 .dotted-frame { position: relative; }
 .dotted-frame::before { position: absolute; z-index: 0; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(90deg, var(--frame-dot) 0 1px, transparent 1px 5px), repeating-linear-gradient(90deg, var(--frame-dot) 0 1px, transparent 1px 5px), repeating-linear-gradient(0deg, var(--frame-dot) 0 1px, transparent 1px 5px), repeating-linear-gradient(0deg, var(--frame-dot) 0 1px, transparent 1px 5px); background-repeat: no-repeat; background-position: center top, center bottom, left center, right center; background-size: calc(100% - 16px) 1px, calc(100% - 16px) 1px, 1px calc(100% - 16px), 1px calc(100% - 16px); content: ''; transition: background-image .18s ease; }
 .dotted-frame > * { position: relative; z-index: 1; }
 
+
 .site-header {
   position: sticky;
   top: 0;
@@ -124,7 +108,6 @@ h1, h2, h3 { font-family: var(--heading-font); }
 a.text-interaction:hover, a.text-interaction:focus-visible,
 a:hover .text-interaction, a:focus-visible .text-interaction,
 .project-card:hover .text-interaction, .project-card:focus-within .text-interaction,
-.portfolio-history-row:hover .text-interaction, .portfolio-history-row:focus-within .text-interaction,
 .contact-submit:hover .text-interaction, .contact-submit:focus-visible .text-interaction { color: var(--lime); }
 .main-nav .nav-link.is-active { color: var(--lime); }
 .main-nav .nav-link { transition: color var(--interaction-duration) var(--interaction-ease); }
@@ -211,13 +194,9 @@ a:not(.social-link):not(.contact-social-link):hover > img, a:not(.social-link):n
 .profile-photo-stage { position: relative; width: 100px; height: 96px; flex: 0 0 100px; }
 .profile-photo { position: absolute; top: 6px; left: 8px; z-index: 2; display: block; width: 84px; height: 84px; border: 1px solid color-mix(in srgb, var(--warm-white) 26%, transparent); border-radius: 50%; object-fit: cover; object-position: center; }
 .hero h1 { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 7px; margin: 0; color: var(--warm-white); font: 600 25px/1.15 var(--heading-font); letter-spacing: -.05em; }
-.name-heart-wrap { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; }
-.name-heart-icon { display: block; width: 20px; height: 20px; object-fit: contain; animation: heart-beat 1.15s ease-in-out infinite; transform-origin: center; }
+.verified-mark { display: inline-flex; width: 20px; height: 20px; flex: 0 0 20px; align-self: center; align-items: center; justify-content: center; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
+.verified-mark svg { display: block; width: 100%; height: 100%; }
 .skill-name, .site-tooltip { padding: 6px 9px; border: 1px dotted var(--frame-dot-hover); border-radius: 4px; color: var(--warm-white); background: var(--elevated); font: 10px/1.3 var(--body-font); font-weight: 400; letter-spacing: 0; text-align: center; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .16); }
-.heart-message { position: absolute; top: 50%; left: calc(100% + 10px); z-index: 6; width: max-content; max-width: min(190px, calc(100vw - 24px)); padding: 7px 10px; border: 1px dotted var(--frame-dot-hover); border-radius: 4px; color: var(--warm-white); background: var(--elevated); font: 11px/1.35 var(--body-font); letter-spacing: .01em; text-align: center; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .16); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-3px, -50%); transition: opacity 180ms var(--interaction-ease), transform 180ms var(--interaction-ease), visibility 180ms; }
-@media (hover: hover) and (pointer: fine) {
-  .name-heart-wrap:hover .heart-message { opacity: 1; visibility: visible; transform: translate(0, -50%); }
-}
 .site-tooltip { position: fixed; z-index: 100; max-width: min(220px, calc(100vw - 24px)); overflow: hidden; text-overflow: ellipsis; opacity: 0; pointer-events: none; transform: translate(-50%, -100%) scale(.98); animation: tooltip-enter .16s ease both; }
 .site-tooltip.is-below { transform: translate(-50%, 0) scale(.98); }
 @keyframes tooltip-enter { from { opacity: 0; transform: translate(-50%, -100%) scale(.97); } to { opacity: 1; transform: translate(-50%, -100%) scale(1); } }
@@ -268,30 +247,36 @@ a:not(.social-link):not(.contact-social-link):hover > img, a:not(.social-link):n
 .testimonial-card .portfolio-content-organization { margin-bottom: 0; }
 [hidden] { display: none !important; }
 .portfolio-content-card a { display: inline-block; margin: 2px 10px 2px 0; color: var(--lime); font-size: var(--text-sm); }
-.portfolio-history-panel { padding: 0; }
-.portfolio-history-panel > header { margin: 0; padding: 16px; border-bottom: 1px dashed var(--border); }
+.portfolio-history-panel { overflow: hidden; margin: 4px 0; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
+.portfolio-history-panel > header { margin: 0; padding: 16px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 70%, var(--graphite)); }
 .portfolio-history-panel > header h2 { margin: 0; }
-.portfolio-history-list { display: grid; }
-.portfolio-history-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(100px, 22%); align-items: center; gap: 16px; min-width: 0; padding: 18px 16px; border-bottom: 1px dashed var(--frame-dot); transition: border-color var(--interaction-duration) var(--interaction-ease); }
+.portfolio-history-list { display: grid; gap: 7px; padding: 12px; }
+.portfolio-history-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(100px, 22%); align-items: center; gap: 16px; min-width: 0; padding: 16px; border: 1px dashed var(--frame-dot); border-radius: 4px; background: transparent; transition: border-color var(--interaction-duration) var(--interaction-ease); }
 .portfolio-history-row.is-education-row { grid-template-columns: minmax(0, 1fr) minmax(100px, 22%); }
-.portfolio-history-row:last-child { border-bottom: 0; }
 .portfolio-history-row:hover, .portfolio-history-row:focus-within { border-color: color-mix(in srgb, var(--lime) 58%, var(--frame-dot)); }
-.portfolio-history-logo { width: 56px; height: 56px; margin: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); object-fit: contain; }
-.portfolio-history-logo-placeholder { display: grid; place-items: center; color: var(--text-muted); font: 500 10px/1 var(--body-font); }
+.portfolio-history-logo { width: 56px; height: 56px; margin: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--card); object-fit: contain; }
 .portfolio-history-main { min-width: 0; }
+.portfolio-history-main h3, .portfolio-content-organization { overflow-wrap: anywhere; }
 .portfolio-history-main h3 { margin: 0 0 4px; color: var(--warm-white); font: 600 var(--text-md)/1.35 var(--heading-font); }
 .portfolio-history-row .portfolio-content-organization, .portfolio-history-date, .portfolio-history-description { margin: 0; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; }
-.portfolio-history-date { justify-self: end; text-align: right; }
+.portfolio-history-meta { display: grid; min-width: 0; max-width: 100%; justify-items: end; align-content: center; gap: 6px; }
+.portfolio-history-date { justify-self: end; width: fit-content; min-width: 0; max-width: 100%; padding: 4px 8px; border: 1px solid var(--border); border-radius: 3px; background: var(--card); color: var(--muted); text-align: right; white-space: normal; overflow-wrap: anywhere; }
+.portfolio-history-location { display: inline-flex; align-items: center; gap: 4px; margin: 0; color: var(--text-muted); font-size: 10px; line-height: 1.3; text-align: right; }
+.portfolio-history-location { min-width: 0; max-width: 100%; flex-wrap: wrap; overflow-wrap: anywhere; }
+.portfolio-history-location svg { flex: 0 0 auto; }
+.portfolio-organization-link { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: underline dotted var(--frame-dot); text-underline-offset: 3px; transition: color var(--interaction-duration) var(--interaction-ease), text-decoration-color var(--interaction-duration) var(--interaction-ease); }
+.portfolio-organization-link:hover, .portfolio-organization-link:focus-visible { color: var(--lime); text-decoration-color: var(--lime); }
 .portfolio-history-link { display: inline-flex; margin-left: 8px; color: var(--text-muted); font-size: 1.15em; text-decoration: none; transition: color .2s ease, transform .2s ease; }
 .portfolio-history-link:hover, .portfolio-history-link:focus-visible { color: var(--lime); transform: translate(2px, -2px); }
 .portfolio-history-description { margin-top: 5px; }
 @media (max-width: 600px) {
   .portfolio-history-panel > header { padding: 14px 12px; }
-  .portfolio-history-row { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 15px 12px; }
+  .portfolio-history-row { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px 12px; }
   .portfolio-history-row.is-education-row { grid-template-columns: minmax(0, 1fr); }
   .portfolio-history-logo { width: 46px; height: 46px; border-radius: 10px; }
-  .portfolio-history-date { grid-column: 2; justify-self: start; text-align: left; }
-  .portfolio-history-row.is-education-row .portfolio-history-date { grid-column: 1; }
+  .portfolio-history-meta { grid-column: 2; justify-items: start; }
+  .portfolio-history-date, .portfolio-history-location { justify-self: start; text-align: left; }
+  .portfolio-history-row.is-education-row .portfolio-history-meta { grid-column: 1; }
 }
 .metallic-shimmer-text { color: #D6B77A; }
 @supports ((background-clip: text) or (-webkit-background-clip: text)) {
@@ -314,15 +299,13 @@ a:not(.social-link):not(.contact-social-link):hover > img, a:not(.social-link):n
 .social-links { display: flex; max-width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 7px; margin-top: 14px; }
 .social-link { display: inline-flex; width: auto; min-width: 0; height: 35px; flex: 0 0 auto; align-items: center; justify-content: flex-start; gap: 7px; padding: 6px 9px; border: 1px dotted var(--frame-dot); border-radius: 5px; color: var(--muted); background: var(--surface); font: 10px/1.2 var(--body-font); transition: transform var(--interaction-duration) var(--interaction-ease), color var(--interaction-duration) var(--interaction-ease), border-color var(--interaction-duration) var(--interaction-ease), background var(--interaction-duration) var(--interaction-ease), opacity var(--interaction-duration) var(--interaction-ease); }
 .social-link:hover, .social-link:focus-visible,
-.contact-social-link:hover, .contact-social-link:focus-visible { color: var(--lime); border-color: color-mix(in srgb, var(--lime) 58%, var(--frame-dot)); }
-.social-link:hover .brand-icon, .social-link:focus-visible .brand-icon,
-.contact-social-link:hover > img, .contact-social-link:focus-visible > img { filter: brightness(0) saturate(100%) invert(86%) sepia(17%) saturate(560%) hue-rotate(356deg) brightness(96%) contrast(90%); }
-.social-link:hover .social-icon, .social-link:focus-visible .social-icon, .contact-social-link:hover > svg, .contact-social-link:focus-visible > svg, .contact-social-link:hover > img, .contact-social-link:focus-visible > img { transform: translateY(-2px); opacity: 1; }
-.social-link:active .social-icon, .contact-social-link:active > svg, .contact-social-link:active > img { transform: translateY(0); opacity: .72; }
+.contact-social-link:hover, .contact-social-link:focus-visible { color: var(--social-hover); border-color: var(--frame-dot); }
+.social-link:hover .social-icon, .social-link:focus-visible .social-icon, .contact-social-link:hover > svg, .contact-social-link:focus-visible > svg, .contact-social-link:hover > img, .contact-social-link:focus-visible > img { opacity: 1; }
+.social-link:hover .social-icon, .social-link:focus-visible .social-icon, .contact-social-link:hover > img, .contact-social-link:focus-visible > img { filter: brightness(0) saturate(100%) invert(72%) sepia(99%) saturate(1037%) hue-rotate(82deg) brightness(102%) contrast(104%); }
+.contact-social-link:hover > svg, .contact-social-link:focus-visible > svg { color: var(--social-hover); }
 .social-link.is-unavailable { cursor: default; }
-.social-icon { display: block; width: 16px; height: 16px; object-fit: contain; opacity: .82; transition: opacity var(--interaction-duration) var(--interaction-ease), transform var(--interaction-duration) var(--interaction-ease); }
-.brand-icon-fallback { display: inline-grid; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--lime) 38%, var(--frame-dot)); border-radius: 3px; color: var(--muted); background: color-mix(in srgb, var(--surface) 82%, transparent); font: 700 6px/1 var(--mono-font); letter-spacing: -.04em; }
-.social-link:hover .brand-icon-fallback, .social-link:focus-visible .brand-icon-fallback, .contact-social-link:hover .brand-icon-fallback, .contact-social-link:focus-visible .brand-icon-fallback { border-color: var(--lime); color: var(--lime); }
+.social-icon { display: block; width: 16px; height: 16px; object-fit: contain; opacity: .82; transition: opacity var(--interaction-duration) var(--interaction-ease), transform var(--interaction-duration) var(--interaction-ease), filter var(--interaction-duration) var(--interaction-ease); }
+.brand-icon-fallback { display: inline-grid; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid var(--frame-dot); border-radius: 3px; color: var(--muted); background: color-mix(in srgb, var(--surface) 82%, transparent); font: 700 6px/1 var(--mono-font); letter-spacing: -.04em; }
 .resume-icon { color: var(--muted); }
 
 .section-rule { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 8px; letter-spacing: .09em; }
@@ -351,7 +334,7 @@ a:not(.social-link):not(.contact-social-link):hover > img, a:not(.social-link):n
 .project-actions .project-action-placeholder { max-width: 190px; color: var(--text-muted); font-family: var(--body-font); cursor: pointer; }
 .project-actions a:hover, .project-actions a:focus-visible, .project-actions .project-action-placeholder:hover { color: var(--lime); }
 .project-actions a > svg, .project-actions a > img, .project-actions .project-action-placeholder > svg { display: block; width: 14px; height: 14px; flex: 0 0 14px; object-fit: contain; transition: transform var(--interaction-duration) var(--interaction-ease), filter var(--interaction-duration) var(--interaction-ease), color var(--interaction-duration) var(--interaction-ease); }
-.project-actions a:focus-visible, .project-actions .project-action-placeholder:focus-visible { outline: 1px solid var(--lime); outline-offset: 1px; }
+.project-actions a:focus-visible, .project-actions .project-action-placeholder:focus-visible { outline: 1px solid var(--frame-dot-hover); outline-offset: 1px; }
 
 .skills, .contact-section { position: relative; padding: var(--section-space) 0 var(--section-space-end); }
 .contact-section::before { position: absolute; top: 0; right: 0; left: 0; height: 1px; background: repeating-linear-gradient(90deg, var(--stitch) 0 4px, transparent 4px 8px); content: ''; }
@@ -363,7 +346,7 @@ a:not(.social-link):not(.contact-social-link):hover > img, a:not(.social-link):n
 .skill-tile { position: relative; display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 4px; color: var(--warm-white); background: transparent; }
 .skill-tile:hover { z-index: 2; }
 .skill-logo { width: 32px; height: 32px; object-fit: contain; }
-.skill-logo-fallback { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid color-mix(in srgb, var(--lime) 38%, var(--frame-dot)); border-radius: 4px; color: var(--lime); font: 700 8px/1 var(--mono-font); letter-spacing: -.02em; }
+.skill-logo-fallback { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--frame-dot); border-radius: 4px; color: var(--muted); font: 700 8px/1 var(--mono-font); letter-spacing: -.02em; }
 .skill-logo-fallback[hidden] { display: none; }
 .skill-name { position: absolute; top: calc(100% + 7px); left: 50%; z-index: 8; min-width: max-content; opacity: 0; pointer-events: none; transform: translate(-50%, -3px) scale(.97); transition: opacity var(--interaction-duration) var(--interaction-ease), transform var(--interaction-duration) var(--interaction-ease); }
 .skill-tile:hover .skill-name { opacity: 1; transform: translate(-50%, 0) scale(1); }
@@ -392,10 +375,11 @@ a:not(.social-link):not(.contact-social-link):hover > img, a:not(.social-link):n
 .contact-social-panel { min-width: 0; padding: 10px 1px 0 14px; border-left: 1px dotted var(--frame-dot); }
 .contact-social-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 9px; }
 .contact-social-link { display: flex; min-width: 0; min-height: 34px; align-items: center; justify-content: center; gap: 7px; padding: 6px 8px; border: 1px dotted var(--frame-dot); border-radius: 3px; color: var(--muted); background: transparent; font: 10px/1.25 var(--body-font); transition: color var(--interaction-duration) var(--interaction-ease), border-color var(--interaction-duration) var(--interaction-ease); }
-.contact-social-link:hover, .contact-social-link:focus-visible { color: var(--lime); }
+.contact-social-link:hover, .contact-social-link:focus-visible { color: var(--social-hover); }
+.social-link:focus-visible, .contact-social-link:focus-visible, .skill-tile:focus-visible { outline-color: var(--frame-dot-hover); }
 .contact-social-link > svg, .contact-social-link > img, .contact-brand-icon { display: block; width: 16px; height: 16px; flex: 0 0 16px; object-fit: contain; }
 .contact-social-link > svg { color: var(--muted); }
-.contact-social-link > svg, .contact-social-link > img { opacity: .82; transition: transform var(--interaction-duration) var(--interaction-ease), opacity var(--interaction-duration) var(--interaction-ease); }
+.contact-social-link > svg, .contact-social-link > img { opacity: .82; transition: transform var(--interaction-duration) var(--interaction-ease), opacity var(--interaction-duration) var(--interaction-ease), filter var(--interaction-duration) var(--interaction-ease), color var(--interaction-duration) var(--interaction-ease); }
 .contact-brand-icon { fill: currentColor; }
 .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
 .site-footer { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 17px var(--page-gutter) 20px; border-top: 1px dotted var(--frame-dot); color: var(--muted); text-align: center; }
@@ -403,9 +387,7 @@ a:not(.social-link):not(.contact-social-link):hover > img, a:not(.social-link):n
 .footer-copyright, .footer-credit, .footer-quote { margin: 0; font-family: var(--body-font); }
 .footer-copyright { color: var(--text-muted); font-size: 10px; line-height: 1.45; }
 .footer-credit { color: var(--muted); font-size: 10px; line-height: 1.45; }
-.footer-heart { display: inline-block; width: 14px; height: 14px; margin: 0 2px; object-fit: contain; vertical-align: -3px; animation: footer-heart-pulse 1.8s ease-in-out infinite; }
 .footer-quote { width: min(100%, var(--content-width)); margin-top: 5px; padding-top: 9px; border-top: 1px dotted color-mix(in srgb, var(--frame-dot) 72%, transparent); color: var(--text-muted); font-size: 10px; font-style: italic; line-height: 1.45; letter-spacing: .01em; }
-@keyframes footer-heart-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
 
 @keyframes wave-hand {
   0%, 62%, 100% { transform: rotate(0); }
@@ -421,35 +403,21 @@ a:not(.social-link):not(.contact-social-link):hover > img, a:not(.social-link):n
   from { text-shadow: 0 0 3px rgba(229, 207, 156, .2); }
   to { text-shadow: 0 0 5px rgba(229, 207, 156, .32); }
 }
-@keyframes heart-beat {
-  0%, 10%, 25%, 42%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(229, 207, 156, 0)); }
-  14% { transform: scale(1.14); filter: drop-shadow(0 0 3px rgba(229, 207, 156, .48)); }
-  19% { transform: scale(1.03); }
-  31% { transform: scale(1.2); filter: drop-shadow(0 0 5px rgba(229, 207, 156, .62)); }
-  37% { transform: scale(1.05); }
-}
 @keyframes role-metallic-shimmer {
   from { background-position: 0 0, 100% 50%; }
   to { background-position: 0 0, 0% 50%; }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .name-heart-icon, .footer-heart, .profile-intro .profile-role, .metallic-shimmer-text { animation: none; }
+  .profile-intro .profile-role, .metallic-shimmer-text { animation: none; }
 }
 
 @media (max-width: 760px) {
   :root { --page-gutter: 14px; }
-  body::before { opacity: .2; }
-  body::after { display: none; animation: none; will-change: auto; }
-  .heart-message { top: auto; bottom: calc(100% + 5px); left: 50%; transform: translate(-50%, 3px); }
-  @media (hover: hover) and (pointer: fine) {
-    .name-heart-wrap:hover .heart-message { transform: translate(-50%, 0); }
-  }
   .main-nav { gap: 12px; }
   .project-grid { gap: 8px; }
 }
 @media (max-width: 600px) {
-  body::before { background-image: url('/stars-portrait.svg'); opacity: .16; }
   :root { --page-gutter: 12px; --section-space: 16px; --section-space-end: 18px; --panel-inset: 10px; }
   .site-header { min-height: 44px; }
   .wordmark { font-size: 13px; }
@@ -466,10 +434,10 @@ a:not(.social-link):not(.contact-social-link):hover > img, a:not(.social-link):n
   .hero h1 { margin-top: 7px; font-size: 22px; }
   .profile-intro { font-size: 13px; }
   .profile-intro .profile-role { font-size: 14px; }
-  .profile-metadata { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; font-size: 10px; }
+  .profile-metadata { min-width: 0; flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px; font-size: 10px; }
   .profile-bio { max-width: 100%; font-size: 12px; line-height: 1.55; }
   .social-links { gap: 6px; margin-top: 12px; }
-  .social-link { min-height: 36px; padding: 7px 10px; }
+  .social-link { min-height: 44px; padding: 7px 10px; }
   .projects { padding: var(--section-space) 0 var(--section-space-end) 12px; }
   .projects-intro { gap: 4px; padding: 5px 0 9px; }
   .projects-intro h2 { font-size: 22px; }
@@ -479,7 +447,7 @@ a:not(.social-link):not(.contact-social-link):hover > img, a:not(.social-link):n
   .project-info { gap: 7px; }
   .project-info > h3 { font-size: 14px; }
   .project-info > p { font-size: 10px; }
-  .project-actions a { min-height: 32px; padding: 5px 10px; font-size: 11px; }
+  .project-actions a { min-height: 44px; padding: 5px 10px; font-size: 11px; }
   .skills-panel { padding: 9px 10px 11px; }
   .skills-panel > h2 { margin-bottom: 7px; padding-bottom: 6px; font-size: 18px; }
   .skills-grid { gap: 4px; }
@@ -490,12 +458,9 @@ a:not(.social-link):not(.contact-social-link):hover > img, a:not(.social-link):n
   .contact-content { grid-template-columns: minmax(0, 1fr); }
   .contact-form { padding: 9px 0 10px; }
   .contact-social-panel { padding: 9px 0 0; border-top: 1px dotted var(--frame-dot); border-left: 0; }
-  .contact-social-link { min-height: 38px; }
+  .contact-submit, .contact-social-link { min-height: 44px; }
   .site-footer { padding: 16px var(--page-gutter) 18px; }
 }
-@media (max-width: 600px) and (hover: none) {
-  .heart-message { display: none; }
-}
 @media (max-width: 380px) {
   :root { --page-gutter: 10px; }
   .profile-metadata { gap: 4px; font-size: 9px; }
@@ -513,7 +478,7 @@ main > section.section-wrap::before,
 main > section.section-wrap::after { display: none; }
 .dotted-frame::before { display: none; }
 .skills-panel, .contact-panel { border: 0; border-radius: 0; }
-.project-card, .portfolio-history-row { border: 1px dashed var(--frame-dot); border-radius: 0; }
+.project-card { border: 1px dashed var(--frame-dot); border-radius: 0; }
 .project-card {
   transition: border-color var(--interaction-duration) var(--interaction-ease);
 }

package/templates/default/tests/portfolio.test.js

@@ -32,8 +32,8 @@ test('portfolio content, optional sections, section ordering and custom sections
       assert.ok(aboutSection)
       assert.equal([...aboutSection.matchAll(/<p>/g)].length, 3, 'bio content renders as three paragraphs')
       await access(resolve(templateRoot, 'public', config.profile.profileImage.slice(1)))
-      assert.ok(config.projects.every(({ image }) => image === '/project-placeholder.svg'))
-      await access(resolve(templateRoot, 'public', 'project-placeholder.svg'))
+      assert.ok(config.projects.every(({ image }) => image === '/project-placeholder.png'))
+      await access(resolve(templateRoot, 'public', 'project-placeholder.png'))
       const styles = await readFile(resolve(templateRoot, 'src/styles.css'), 'utf8')
       assert.match(styles, /\.profile-photo\s*\{[^}]*border-radius:\s*50%/)
       assert.deepEqual(config.skills.map(({ name }) => name), [

package/templates/default/types.ts

@@ -0,0 +1,73 @@
+export interface Skill {
+  name: string
+  icon: string
+  category?: string
+}
+
+export interface Project {
+  name: string
+  category?: string
+  description: string
+  image?: string
+  imageAlt?: string
+  technologies: Skill[]
+  liveUrl?: string
+  githubUrl?: string
+  featured?: boolean
+}
+
+export interface ContentItem {
+  title: string
+  organization?: string
+  organizationUrl?: string
+  date?: string
+  location?: string
+  description?: string
+  image?: string
+  imageAlt?: string
+  imagePlaceholder?: string
+  links?: { label: string; url: string }[]
+}
+
+export interface Testimonial {
+  name: string
+  role: string
+  company?: string
+  message: string
+  image?: string
+}
+
+export interface SocialIcon {
+  label: string
+  icon: string
+  url?: string
+  color?: string
+}
+
+export interface PortfolioConfig {
+  profile: {
+    name: string
+    headline: string
+    introduction: string
+    about: string
+    location?: string
+    timeZone?: string
+    timeZoneLabel?: string
+    profileImage?: string
+    resumeUrl?: string
+    quote?: string
+  }
+  socialIcons: SocialIcon[]
+  experience: ContentItem[]
+  education: ContentItem[]
+  skills: Skill[]
+  projects: Project[]
+  testimonials: Testimonial[]
+  contact: { email?: string }
+  seo: {
+    title: string
+    description: string
+    siteUrl?: string
+    image?: string
+  }
+}

package/templates/default/.gitignore

@@ -1,20 +0,0 @@
-node_modules/
-dist/
-.vite/
-.netlify/
-.vercel/
-coverage/
-*.tsbuildinfo
-*.log
-npm-debug.log*
-.DS_Store
-Thumbs.db
-.env
-.env.*
-secrets/
-*.pem
-*.key
-*.p12
-*.pfx
-*.credentials
-*.secret

package/templates/default/public/avatar-placeholder.svg

@@ -1,10 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" role="img" aria-labelledby="title description">
-  <title id="title">Avatar placeholder</title>
-  <desc id="description">A neutral circular placeholder for a 400 by 400 profile image.</desc>
-  <circle cx="200" cy="200" r="192" fill="#29292c"/>
-  <circle cx="200" cy="200" r="176" fill="#e7e7e9" stroke="#45454a" stroke-width="12"/>
-  <g fill="#77777d" font-family="Arial, sans-serif" text-anchor="middle">
-    <text x="200" y="188" font-size="30" font-weight="700">Avatar</text>
-    <text x="200" y="224" font-size="25" font-weight="600">400 x 400</text>
-  </g>
-</svg>

package/templates/default/public/project-placeholder.svg

@@ -1,10 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 675" role="img" aria-labelledby="title description">
-  <title id="title">Project image placeholder</title>
-  <desc id="description">A neutral 1200 by 675 project thumbnail placeholder.</desc>
-  <rect width="1200" height="675" fill="#050505"/>
-  <rect x="24" y="24" width="1152" height="627" rx="34" fill="#e7e7e9"/>
-  <g fill="#77777d" font-family="Arial, sans-serif" text-anchor="middle">
-    <text x="600" y="310" font-size="58" font-weight="700">Project image</text>
-    <text x="600" y="376" font-size="52" font-weight="600">1200 x 675</text>
-  </g>
-</svg>