Show company logos on portfolio venture cards

Add logos for READTYCH, Growth360Partners, Infinitus Texas, Skinny Spiritz and
Techie Marketing on white plates so they read in both themes; ventures
without a logo keep their monogram on the same plate.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Alejandro Veras
2026-10-01 11:42:57 -04:00
parent 60f58cfc20
commit e6279c2e91
7 changed files with 22 additions and 14 deletions
+11 -11
View File
@@ -1,15 +1,15 @@
import { icon, eyebrow, btn, textLink } from '../layout.mjs'; import { icon, eyebrow, btn, textLink } from '../layout.mjs';
const ventures = [ const ventures = [
['AI Growth Media Service', 'AG', 'CEO &amp; Board Member', 'AI-focused marketing and growth company working at the intersection of digital visibility, strategy, and performance.', ['AI Search', 'Digital Visibility', 'Growth Strategy']], ['AI Growth Media Service', 'AG', 'CEO &amp; Board Member', 'AI-focused marketing and growth company working at the intersection of digital visibility, strategy, and performance.', ['AI Search', 'Digital Visibility', 'Growth Strategy'], null],
['READTYCH', 'RT', 'Chief Marketing Officer, Co-Founder &amp; Board Member', 'Education technology company developing a two-screen Digital Book and connected learning platform designed around how students and educators actually work.', ['EdTech', 'Product Strategy', 'Market Development']], ['READTYCH', 'RT', 'Chief Marketing Officer, Co-Founder &amp; Board Member', 'Education technology company developing a two-screen Digital Book and connected learning platform designed around how students and educators actually work.', ['EdTech', 'Product Strategy', 'Market Development'], 'readtych.png'],
['Growth360Partners', 'G3', 'Chief Executive Officer &amp; Founder', 'Full-service digital marketing agency bringing together search, websites, paid media, social, optimization, and growth strategy.', ['Marketing', 'Search', 'Digital Growth']], ['Growth360Partners', 'G3', 'Chief Executive Officer &amp; Founder', 'Full-service digital marketing agency bringing together search, websites, paid media, social, optimization, and growth strategy.', ['Marketing', 'Search', 'Digital Growth'], 'growth360partners.png'],
['Infinitus Texas', 'IT', 'Partner &amp; Strategic Advisor', 'Strategic partnership focused on brand positioning, marketing direction, and creating stronger foundations for scalable growth.', ['Strategy', 'Positioning', 'Growth']], ['Infinitus Texas', 'IT', 'Partner &amp; Strategic Advisor', 'Strategic partnership focused on brand positioning, marketing direction, and creating stronger foundations for scalable growth.', ['Strategy', 'Positioning', 'Growth'], 'infinitus-texas.png'],
['Skinny Spiritz', 'SS', 'Chief Executive Officer &amp; Board Member', 'Beverage brand where product, positioning, placement, partnerships, and customer attention all have to work together.', ['Spirits', 'Brand Growth', 'Partnerships']], ['Skinny Spiritz', 'SS', 'Chief Executive Officer &amp; Board Member', 'Beverage brand where product, positioning, placement, partnerships, and customer attention all have to work together.', ['Spirits', 'Brand Growth', 'Partnerships'], 'skinny-spiritz.svg'],
['Techie Marketing', 'TM', 'Chief Web3 Officer, Co-Founder &amp; Advisor', 'Digital marketing and branding company created around the needs of technology and Web3-focused businesses.', ['Web3', 'Branding', 'Digital Strategy']], ['Techie Marketing', 'TM', 'Chief Web3 Officer, Co-Founder &amp; Advisor', 'Digital marketing and branding company created around the needs of technology and Web3-focused businesses.', ['Web3', 'Branding', 'Digital Strategy'], 'techie-marketing.png'],
['AiGrowth360', 'A3', 'Chief Executive Officer &amp; Founder', 'Performance-driven digital marketing company using AI, analytics, and search strategy to find better ways to create measurable growth.', ['AI', 'Analytics', 'Performance Marketing']], ['AiGrowth360', 'A3', 'Chief Executive Officer &amp; Founder', 'Performance-driven digital marketing company using AI, analytics, and search strategy to find better ways to create measurable growth.', ['AI', 'Analytics', 'Performance Marketing'], null],
['Gangi Apparel', 'GA', 'Strategic Advisor &amp; Partner', 'Apparel brand focused on fashion, identity, positioning, and creating a brand people can recognize beyond the product itself.', ['Apparel', 'Brand Positioning', 'Consumer']], ['Gangi Apparel', 'GA', 'Strategic Advisor &amp; Partner', 'Apparel brand focused on fashion, identity, positioning, and creating a brand people can recognize beyond the product itself.', ['Apparel', 'Brand Positioning', 'Consumer'], null],
['meSEO', 'me', 'Founder &amp; Strategic Growth Leader', 'Web application built around AI search, SEO, and the changing ways businesses are discovered online.', ['Software', 'AI Search', 'SEO']], ['meSEO', 'me', 'Founder &amp; Strategic Growth Leader', 'Web application built around AI search, SEO, and the changing ways businesses are discovered online.', ['Software', 'AI Search', 'SEO'], null],
]; ];
const capabilities = [ const capabilities = [
@@ -61,8 +61,8 @@ export default {
<div class="ventures reveal"> <div class="ventures reveal">
${ventures ${ventures
.map( .map(
([name, mono, role, desc, focus]) => `<article class="venture"> ([name, mono, role, desc, focus, logo]) => `<article class="venture">
<div class="venture-head"><span class="mono" aria-hidden="true">${mono}</span></div> <div class="vlogo${logo ? '' : ' vlogo-empty'}">${logo ? `<img src="/assets/logos/${logo}" alt="${name} logo" loading="lazy">` : `<span class="mono" aria-hidden="true">${mono}</span>`}</div>
<div class="stack-xs"><h3>${name}</h3><p class="vrole">${role}</p></div> <div class="stack-xs"><h3>${name}</h3><p class="vrole">${role}</p></div>
<p>${desc}</p> <p>${desc}</p>
<div class="focus"><small>FOCUS:</small><div class="chips">${focus.map((f) => `<span class="tag">${f}</span>`).join('')}</div></div> <div class="focus"><small>FOCUS:</small><div class="chips">${focus.map((f) => `<span class="tag">${f}</span>`).join('')}</div></div>
Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

+10 -3
View File
@@ -613,10 +613,17 @@ html:not(.js) .tabs { grid-template-columns: 1fr; }
.ventures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .ventures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.venture { background: var(--cloud); border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 16px; min-width: 0; position: relative; overflow: hidden; transition: background-color .2s ease, transform .25s ease; } .venture { background: var(--cloud); border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 16px; min-width: 0; position: relative; overflow: hidden; transition: background-color .2s ease, transform .25s ease; }
.venture:hover { background: var(--porcelain); box-shadow: var(--shadow-float); outline: 1px solid var(--mist); transform: translateY(-3px); } .venture:hover { background: var(--porcelain); box-shadow: var(--shadow-float); outline: 1px solid var(--mist); transform: translateY(-3px); }
.venture-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .vlogo {
height: 104px; border-radius: 18px; background: #ffffff; border: 1px solid var(--mist);
display: flex; align-items: center; justify-content: center; padding: 14px 24px; overflow: hidden;
}
.vlogo img { display: block; max-width: 85%; max-height: 72px; width: auto; height: auto; object-fit: contain; }
.vlogo img[src$=".svg"] { width: 85%; max-height: 40px; }
.venture:hover .vlogo { border-color: var(--ash); }
.mono { width: 52px; height: 52px; border-radius: 16px; background: var(--surface-dark); color: var(--on-dark); display: grid; place-items: center; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; flex: none; } .mono { width: 52px; height: 52px; border-radius: 16px; background: var(--surface-dark); color: var(--on-dark); display: grid; place-items: center; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; flex: none; }
.venture:nth-child(3n+2) .mono { background: var(--accent); } .vlogo .mono { background: #1f1f1f; color: #ffffff; }
.venture:nth-child(3n+3) .mono { background: var(--porcelain); color: var(--ink); border: 1px solid var(--mist); } .venture:nth-child(3n+2) .vlogo .mono { background: #0870c4; }
.venture:nth-child(3n+3) .vlogo .mono { background: #ffffff; color: #1f1f1f; border: 1px solid #e7e7e7; }
.venture h3 { font-size: 24px; letter-spacing: -0.02em; line-height: 1.15; } .venture h3 { font-size: 24px; letter-spacing: -0.02em; line-height: 1.15; }
.venture .vrole { font-size: 13px; color: var(--accent); letter-spacing: 0.02em; line-height: 1.4; } .venture .vrole { font-size: 13px; color: var(--accent); letter-spacing: 0.02em; line-height: 1.4; }
.venture p { color: var(--slate); font-size: 15px; } .venture p { color: var(--slate); font-size: 15px; }