fix: slow down hero float/marquee animations on small screens; add SEO schema + meta
Changes
@@@ -52,7 +52,7 @@<div class="hero__portrait-frame"><div class="hero__portrait-placeholder" role="img" aria-label="Portrait of Alex Frison"><img src="/assets/img/alex-cut1.png" alt="Alex Frison" class="hero__portrait-img hero__portrait-img--a" id="portrait-a">-- <img src="/assets/img/alex-cut2.png" alt="Alex Frison" class="hero__portrait-img hero__portrait-img--b" id="portrait-b" aria-hidden="true">++ <img src="/assets/img/alex-cut2.png" alt="Alex Frison" class="hero__portrait-img hero__portrait-img--b" id="portrait-b" aria-hidden="true" loading="lazy"></div></div></div>@@@ -138,7 +138,7 @@position: absolute; inset: -10%;background: radial-gradient(closest-side, rgba(76,201,176,.35), transparent 70%);filter: blur(20px);-- animation: breathe 5s ease-in-out infinite;++ animation: breathe 8s ease-in-out infinite;}.hero__portrait-frame {position: relative;@@@ -148,7 +148,7 @@border: 1px solid var(--border-strong);background: var(--surface);box-shadow: var(--shadow-card), var(--shadow-glow);-- animation: float 6s ease-in-out infinite;++ animation: float 12s ease-in-out infinite;}.hero__portrait-placeholder { position: relative; width: 100%; height: 100%; overflow: hidden; }.hero__portrait-img {@@@ -180,7 +180,7 @@}@keyframes float {0%, 100% { transform: translateY(0); }-- 50% { transform: translateY(-8px); }++ 50% { transform: translateY(-6px); }}.hero__metrics {@@@ -20,7 +20,7 @@ const tech = [.marquee__track {display: flex; gap: 56px; padding: 18px 0;width: max-content;-- animation: scroll 40s linear infinite;++ animation: scroll 80s linear infinite;font-family: var(--font-mono);color: var(--muted);font-size: .95rem;@@@ -36,6 +36,43 @@ const pageUrl = canonical ?? new URL(Astro.url.pathname, Astro.site).toString();<meta property="og:image" content={image} /><meta property="og:url" content={pageUrl} /><meta name="twitter:card" content="summary_large_image" />++ <meta name="robots" content="index, follow" />++ <meta name="author" content="Alex Frison" />++ <meta name="keywords" content="Alex Frison, Data Analyst, Software Engineer, Seattle, Arlington WA, Amazon ICQA, SQL, Python, TypeScript, Node.js, React, Full-Stack Developer, Autonomous Agents, AI Agent Builder, Systems Architect, SOX Compliance, Open Source, Pacific Northwest" />++++ <script type="application/ld+json">++ {++ "@context": "https://schema.org",++ "@type": "Person",++ "name": "Alex Frison",++ "url": "https://alexfrison.net",++ "email": "[email protected]",++ "telephone": "+14253673997",++ "image": "https://alexfrison.net/assets/img/alex-cut1.png",++ "jobTitle": "Data Analyst · Software Engineer",++ "description": "Seattle-area data analyst and full-stack software engineer with 10+ years shipping web platforms, autonomous analytics agents, and creator infrastructure. Currently open to new roles.",++ "worksFor": {++ "@type": "Organization",++ "name": "Amazon"++ },++ "knowsAbout": [++ "Data Analysis", "SQL", "Python", "TypeScript", "Node.js",++ "Machine Learning", "Autonomous Agents", "Streaming Platforms",++ "Systems Architecture", "SOX Compliance", "React", "MongoDB",++ "Redis", "NGINX", "Linux", "Excel", "Power Query"++ ],++ "address": {++ "@type": "PostalAddress",++ "addressLocality": "Arlington",++ "addressRegion": "WA",++ "addressCountry": "US"++ },++ "sameAs": [++ "https://github.com/HoboStreamer",++ "https://www.linkedin.com/in/fris/"++ ]++ }++ </script><link rel="stylesheet" href="/assets/vendor/fontawesome/css/all.min.css" /><link rel="stylesheet" href="/assets/vendor/splitting/splitting.css" />@@@ -40,7 +40,7 @@ import ContactBlock from "../components/ContactBlock.astro";<li><strong><i class="fa-solid fa-briefcase"></i> Open to</strong>Hybrid · Remote · On-site PNW</li><li><strong><i class="fa-solid fa-building-columns"></i> Founder</strong>GameServerStats, LLC</li><li><strong><i class="fa-solid fa-laptop-code"></i> Currently</strong>Amazon Data Analyst (ICQA)</li>-- <li><strong><i class="fa-solid fa-hammer"></i> Building</strong>Hobo Network creator stack</li>++ <li><strong><i class="fa-solid fa-hammer"></i> Building</strong>OpenVibe — open-source creator platform</li></ul></aside></div>
@@ -52,7 +52,7 @@
@@ -52,7 +52,7 @@
<div class="hero__portrait-frame">
<div class="hero__portrait-frame">
<div class="hero__portrait-placeholder" role="img" aria-label="Portrait of Alex Frison">
<div class="hero__portrait-placeholder" role="img" aria-label="Portrait of Alex Frison">
<img src="/assets/img/alex-cut1.png" alt="Alex Frison" class="hero__portrait-img hero__portrait-img--a" id="portrait-a">
<img src="/assets/img/alex-cut1.png" alt="Alex Frison" class="hero__portrait-img hero__portrait-img--a" id="portrait-a">
- <img src="/assets/img/alex-cut2.png" alt="Alex Frison" class="hero__portrait-img hero__portrait-img--b" id="portrait-b" aria-hidden="true">
+ <img src="/assets/img/alex-cut2.png" alt="Alex Frison" class="hero__portrait-img hero__portrait-img--b" id="portrait-b" aria-hidden="true" loading="lazy">
</div>
</div>
</div>
</div>
</div>
</div>
@@ -138,7 +138,7 @@
@@ -138,7 +138,7 @@
position: absolute; inset: -10%;
position: absolute; inset: -10%;
background: radial-gradient(closest-side, rgba(76,201,176,.35), transparent 70%);
background: radial-gradient(closest-side, rgba(76,201,176,.35), transparent 70%);
filter: blur(20px);
filter: blur(20px);
- animation: breathe 5s ease-in-out infinite;
+ animation: breathe 8s ease-in-out infinite;
}
}
.hero__portrait-frame {
.hero__portrait-frame {
position: relative;
position: relative;
@@ -148,7 +148,7 @@
@@ -148,7 +148,7 @@
border: 1px solid var(--border-strong);
border: 1px solid var(--border-strong);
background: var(--surface);
background: var(--surface);
box-shadow: var(--shadow-card), var(--shadow-glow);
box-shadow: var(--shadow-card), var(--shadow-glow);
- animation: float 6s ease-in-out infinite;
+ animation: float 12s ease-in-out infinite;
}
}
.hero__portrait-placeholder { position: relative; width: 100%; height: 100%; overflow: hidden; }
.hero__portrait-placeholder { position: relative; width: 100%; height: 100%; overflow: hidden; }
.hero__portrait-img {
.hero__portrait-img {
@@ -180,7 +180,7 @@
@@ -180,7 +180,7 @@
}
}
@keyframes float {
@keyframes float {
0%, 100% { transform: translateY(0); }
0%, 100% { transform: translateY(0); }
- 50% { transform: translateY(-8px); }
+ 50% { transform: translateY(-6px); }
}
}
.hero__metrics {
.hero__metrics {
@@ -20,7 +20,7 @@ const tech = [
@@ -20,7 +20,7 @@ const tech = [
.marquee__track {
.marquee__track {
display: flex; gap: 56px; padding: 18px 0;
display: flex; gap: 56px; padding: 18px 0;
width: max-content;
width: max-content;
- animation: scroll 40s linear infinite;
+ animation: scroll 80s linear infinite;
font-family: var(--font-mono);
font-family: var(--font-mono);
color: var(--muted);
color: var(--muted);
font-size: .95rem;
font-size: .95rem;
@@ -36,6 +36,43 @@ const pageUrl = canonical ?? new URL(Astro.url.pathname, Astro.site).toString();
@@ -36,6 +36,43 @@ const pageUrl = canonical ?? new URL(Astro.url.pathname, Astro.site).toString();
<meta property="og:image" content={image} />
<meta property="og:image" content={image} />
<meta property="og:url" content={pageUrl} />
<meta property="og:url" content={pageUrl} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:card" content="summary_large_image" />
+ <meta name="robots" content="index, follow" />
+ <meta name="author" content="Alex Frison" />
+ <meta name="keywords" content="Alex Frison, Data Analyst, Software Engineer, Seattle, Arlington WA, Amazon ICQA, SQL, Python, TypeScript, Node.js, React, Full-Stack Developer, Autonomous Agents, AI Agent Builder, Systems Architect, SOX Compliance, Open Source, Pacific Northwest" />
+
+ <script type="application/ld+json">
+ {
+ "@context": "https://schema.org",
+ "@type": "Person",
+ "name": "Alex Frison",
+ "url": "https://alexfrison.net",
+ "email": "[email protected]",
+ "telephone": "+14253673997",
+ "image": "https://alexfrison.net/assets/img/alex-cut1.png",
+ "jobTitle": "Data Analyst · Software Engineer",
+ "description": "Seattle-area data analyst and full-stack software engineer with 10+ years shipping web platforms, autonomous analytics agents, and creator infrastructure. Currently open to new roles.",
+ "worksFor": {
+ "@type": "Organization",
+ "name": "Amazon"
+ },
+ "knowsAbout": [
+ "Data Analysis", "SQL", "Python", "TypeScript", "Node.js",
+ "Machine Learning", "Autonomous Agents", "Streaming Platforms",
+ "Systems Architecture", "SOX Compliance", "React", "MongoDB",
+ "Redis", "NGINX", "Linux", "Excel", "Power Query"
+ ],
+ "address": {
+ "@type": "PostalAddress",
+ "addressLocality": "Arlington",
+ "addressRegion": "WA",
+ "addressCountry": "US"
+ },
+ "sameAs": [
+ "https://github.com/HoboStreamer",
+ "https://www.linkedin.com/in/fris/"
+ ]
+ }
+ </script>
<link rel="stylesheet" href="/assets/vendor/fontawesome/css/all.min.css" />
<link rel="stylesheet" href="/assets/vendor/fontawesome/css/all.min.css" />
<link rel="stylesheet" href="/assets/vendor/splitting/splitting.css" />
<link rel="stylesheet" href="/assets/vendor/splitting/splitting.css" />
@@ -40,7 +40,7 @@ import ContactBlock from "../components/ContactBlock.astro";
@@ -40,7 +40,7 @@ import ContactBlock from "../components/ContactBlock.astro";
<li><strong><i class="fa-solid fa-briefcase"></i> Open to</strong>Hybrid · Remote · On-site PNW</li>
<li><strong><i class="fa-solid fa-briefcase"></i> Open to</strong>Hybrid · Remote · On-site PNW</li>
<li><strong><i class="fa-solid fa-building-columns"></i> Founder</strong>GameServerStats, LLC</li>
<li><strong><i class="fa-solid fa-building-columns"></i> Founder</strong>GameServerStats, LLC</li>
<li><strong><i class="fa-solid fa-laptop-code"></i> Currently</strong>Amazon Data Analyst (ICQA)</li>
<li><strong><i class="fa-solid fa-laptop-code"></i> Currently</strong>Amazon Data Analyst (ICQA)</li>
- <li><strong><i class="fa-solid fa-hammer"></i> Building</strong>Hobo Network creator stack</li>
+ <li><strong><i class="fa-solid fa-hammer"></i> Building</strong>OpenVibe — open-source creator platform</li>
</ul>
</ul>
</aside>
</aside>
</div>
</div>