src/index.html
15,020 bytes · 348 lines · capsule://quake0day/[email protected]
raw on github
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="description" content="The online gallery of Yingjie Li — painter and mixed media artist based in West Chester, Pennsylvania. Selected works, 2013–2024. Recent originals on view at Visual Expansion Gallery." />
<meta name="theme-color" content="#1a1714" />
<meta property="og:title" content="Yingjie Li — Selected Works" />
<meta property="og:description" content="Painter & mixed-media artist. Selected works, 2013–2024." />
<meta property="og:image" content="/images/rowing_tea_party.jpg" />
<meta property="og:type" content="website" />
<title>Yingjie Li — Selected Works, 2013–2024</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%23f4ede0'/%3E%3Ctext x='50%25' y='54%25' text-anchor='middle' dominant-baseline='middle' font-family='Georgia,serif' font-size='34' font-style='italic' fill='%231a1714'%3EYL%3C/text%3E%3C/svg%3E" type="image/svg+xml" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..900,0..100,0..1;1,9..144,300..900,0..100,0..1&family=Inter+Tight:wght@300;400;500;600&display=swap" />
<link rel="preload" as="image" href="/images/rowing_tea_party.jpg" fetchpriority="high" />
<link rel="stylesheet" href="/assets/styles.css" />
<!-- Inline theme bootstrap: default dark, honor saved preference -->
<script>
(function(){
try {
var t = localStorage.getItem('yl-theme');
document.documentElement.dataset.theme = (t === 'light') ? 'light' : 'dark';
} catch(e){}
})();
</script>
</head>
<body>
<!-- Paper texture overlay -->
<div class="grain" aria-hidden="true"></div>
<!-- Top navigation -->
<header class="site-header">
<div class="nav-inner">
<a href="#top" class="monogram" aria-label="Return to top">
<span class="mono-mark">YL</span>
<span class="mono-line"></span>
</a>
<nav class="primary-nav" aria-label="Primary">
<a href="#biography">Biography</a>
<a href="#works">Works</a>
<a href="#exhibitions">Exhibitions</a>
<a href="#contact">Contact</a>
</nav>
<div class="nav-actions">
<button id="theme-toggle" class="theme-toggle" type="button" aria-label="Toggle dark mode" title="Toggle dark mode">
<svg class="ti-sun" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" stroke-width="1.4"/><path stroke="currentColor" stroke-width="1.4" stroke-linecap="round" d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
<svg class="ti-moon" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round" d="M21 12.8A9 9 0 1111.2 3a7 7 0 009.8 9.8z"/></svg>
</button>
<a href="https://www.etsy.com/shop/CuriousJCArt" target="_blank" rel="noopener" class="nav-cta">
<span>Shop Prints</span>
<svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="1.2" d="M3 13L13 3M6 3h7v7"/></svg>
</a>
</div>
</div>
</header>
<main id="top">
<!-- HERO -->
<section class="hero" aria-labelledby="artist-name">
<div class="hero-bg" aria-hidden="true">
<img src="/images/rowing_tea_party.jpg" alt="" loading="eager" fetchpriority="high" />
<div class="hero-bg-fade"></div>
<div class="hero-bg-vignette"></div>
</div>
<div class="hero-content">
<p class="eyebrow eyebrow-on-art">
<span class="dot"></span>
Selected Works · 2013 — 2024
</p>
<h1 id="artist-name" class="display-name display-on-art">
<span class="dn-word">Yingjie</span><span class="dn-space"> </span><span class="dn-word"><em>Li</em></span>
</h1>
<p class="hero-tag hero-tag-on-art">
Painter & mixed-media artist · Fine art originals
</p>
<div class="hero-meta hero-meta-on-art">
<div class="meta-block">
<span class="meta-label">Based</span>
<span class="meta-value">West Chester, PA</span>
</div>
<div class="meta-divider" aria-hidden="true"></div>
<div class="meta-block">
<span class="meta-label">Practice</span>
<span class="meta-value">Acrylic · Oil · Pen & Ink</span>
</div>
<div class="meta-divider" aria-hidden="true"></div>
<div class="meta-block">
<span class="meta-label">Member</span>
<span class="meta-value">Chester County Art Assoc.</span>
</div>
</div>
<div class="hero-actions hero-actions-on-art">
<a href="#works" class="btn-link btn-on-art">
<span>Enter the Gallery</span>
<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
<path fill="none" stroke="currentColor" stroke-width="1.2" d="M4 12h16M14 6l6 6-6 6"/>
</svg>
</a>
<a href="#biography" class="text-link text-on-art">Read biography</a>
</div>
</div>
<figcaption class="hero-attribution" aria-label="Featured work">
<span class="ha-num">N° 020</span>
<span class="ha-divider" aria-hidden="true"></span>
<span class="ha-title"><em>Rowing Tea Party</em>, 2023</span>
</figcaption>
<div class="hero-scroll" aria-hidden="true">
<span class="scroll-line"></span>
<span class="scroll-text">Scroll</span>
</div>
</section>
<!-- BIOGRAPHY -->
<section id="biography" class="bio-section reveal">
<div class="section-head">
<span class="section-num">I.</span>
<h2 class="section-title">Biography</h2>
<span class="section-rule" aria-hidden="true"></span>
</div>
<div class="bio-grid">
<aside class="bio-aside">
<p class="aside-eyebrow">A Note on the Artist</p>
<p class="aside-quote">
<span class="quote-mark" aria-hidden="true">“</span>
Painting is the way I keep
<em>the small things</em>
from disappearing.
</p>
</aside>
<div class="bio-body">
<p class="lead">
<span class="dropcap">B</span>orn in China and now living in
West Chester, Pennsylvania, <strong>Yingjie Li</strong> is a
self-taught painter whose work draws from folklore, childhood
memory, and the textures of everyday family life.
</p>
<p>
A scientist by training — she holds a Ph.D. in Biochemistry from
Rutgers, the State University of New Jersey — Yingjie has drawn
and painted since childhood. Her practice moves fluidly between
acrylic, oil, pen and ink, often layering narrative imagery with
decorative detail and quiet, dreamlike palettes.
</p>
<p>
She lives with her husband and two children, and is a member of
the Chester County Art Association, where she has received awards
and honors for her work.
</p>
<p class="bio-aside-cta">
Recent originals are currently exhibiting at
<a href="https://www.visualexpansiongallery.com/yingjie-li" target="_blank" rel="noopener">Visual Expansion Gallery ↗</a>.
Giclée prints of selected works are available through
<a href="https://www.etsy.com/shop/CuriousJCArt" target="_blank" rel="noopener">CuriousJCArt on Etsy ↗</a>.
</p>
</div>
</div>
</section>
<!-- WORKS / GALLERY -->
<section id="works" class="works-section">
<div class="section-head reveal">
<span class="section-num">II.</span>
<h2 class="section-title">Selected Works</h2>
<span class="section-rule" aria-hidden="true"></span>
</div>
<div class="works-intro reveal">
<p>
A selection of twenty-three works spanning a decade of practice.
Recent pieces marked <em>“On view”</em> are currently exhibited at
<a href="https://www.visualexpansiongallery.com/yingjie-li" target="_blank" rel="noopener" class="inline-link">Visual Expansion Gallery</a>.
Click any piece to view at full scale.
</p>
<div class="works-filter" role="tablist" aria-label="Filter by year">
<button class="chip is-active" data-year="all" role="tab" aria-selected="true">All</button>
<button class="chip" data-year="recent" role="tab">Recent</button>
<button class="chip" data-year="2024" role="tab">2024</button>
<button class="chip" data-year="2023" role="tab">2023</button>
<button class="chip" data-year="2018" role="tab">2018</button>
<button class="chip" data-year="2017" role="tab">2017</button>
<button class="chip" data-year="2016" role="tab">2016</button>
<button class="chip" data-year="2015" role="tab">2015</button>
<button class="chip" data-year="2014" role="tab">2014</button>
<button class="chip" data-year="2013" role="tab">2013</button>
</div>
</div>
<div class="gallery" id="gallery"
data-total="12"></div>
</section>
<!-- EXHIBITIONS -->
<section id="exhibitions" class="exhib-section reveal">
<div class="section-head">
<span class="section-num">III.</span>
<h2 class="section-title">Exhibitions</h2>
<span class="section-rule" aria-hidden="true"></span>
</div>
<ol class="exhib-list">
<li class="exhib-item">
<span class="ex-marker">01</span>
<div class="ex-content">
<h3 class="ex-name">Chester County Art Association</h3>
<p class="ex-meta">West Chester Galleries, Pennsylvania</p>
</div>
<span class="ex-rule" aria-hidden="true"></span>
</li>
<li class="exhib-item">
<span class="ex-marker">02</span>
<div class="ex-content">
<h3 class="ex-name">Exton Square Studio Gallery</h3>
<p class="ex-meta">Exton, Pennsylvania</p>
</div>
<span class="ex-rule" aria-hidden="true"></span>
</li>
<li class="exhib-item">
<span class="ex-marker">03</span>
<div class="ex-content">
<h3 class="ex-name">
<a href="https://visualexpansiongallery.com/yingjie-li/" target="_blank" rel="noopener">
Visual Expansion Gallery <span class="link-arrow">↗</span>
</a>
</h3>
<p class="ex-meta">Pennsylvania</p>
</div>
<span class="ex-rule" aria-hidden="true"></span>
</li>
<li class="exhib-item">
<span class="ex-marker">04</span>
<div class="ex-content">
<h3 class="ex-name">Barbara Moore Fine Art Gallery</h3>
<p class="ex-meta">Pennsylvania</p>
</div>
<span class="ex-rule" aria-hidden="true"></span>
</li>
</ol>
</section>
<!-- CONTACT -->
<section id="contact" class="contact-section reveal">
<div class="contact-grid">
<div class="contact-left">
<p class="eyebrow">
<span class="dot"></span>
Inquiries
</p>
<h2 class="contact-headline">
For studio visits,<br/>
commissions & prints,<br/>
<em>get in touch.</em>
</h2>
</div>
<div class="contact-right">
<a href="mailto:[email protected]" class="contact-card">
<span class="cc-label">Email</span>
<span class="cc-value">[email protected]</span>
<span class="cc-arrow">↗</span>
</a>
<a href="https://www.visualexpansiongallery.com/yingjie-li" target="_blank" rel="noopener" class="contact-card">
<span class="cc-label">Currently Showing</span>
<span class="cc-value">Visual Expansion Gallery</span>
<span class="cc-arrow">↗</span>
</a>
<a href="https://www.etsy.com/shop/CuriousJCArt" target="_blank" rel="noopener" class="contact-card">
<span class="cc-label">Shop · Giclée Prints</span>
<span class="cc-value">CuriousJCArt on Etsy</span>
<span class="cc-arrow">↗</span>
</a>
</div>
</div>
</section>
</main>
<!-- FOOTER -->
<footer class="site-footer">
<div class="footer-grid">
<div class="footer-mark">
<span class="fmark-mono">YL</span>
<span class="fmark-name">Yingjie Li</span>
</div>
<p class="footer-disclaimer">
All works © Yingjie Li. All rights reserved.
Unauthorized reproduction is prohibited under U.S. copyright law.
</p>
<p class="footer-meta">
<span>Online Gallery</span>
<span class="dot-sep" aria-hidden="true">·</span>
<span>MMXIII — MMXVIII</span>
</p>
</div>
</footer>
<!-- LIGHTBOX -->
<div id="lightbox" class="lightbox" role="dialog" aria-modal="true" aria-hidden="true" aria-label="Artwork viewer">
<button class="lb-close" aria-label="Close viewer">
<svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
<path fill="none" stroke="currentColor" stroke-width="1.2" d="M6 6l12 12M18 6L6 18"/>
</svg>
</button>
<button class="lb-nav lb-prev" aria-label="Previous artwork">
<svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
<path fill="none" stroke="currentColor" stroke-width="1.2" d="M15 6l-6 6 6 6"/>
</svg>
</button>
<button class="lb-nav lb-next" aria-label="Next artwork">
<svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
<path fill="none" stroke="currentColor" stroke-width="1.2" d="M9 6l6 6-6 6"/>
</svg>
</button>
<figure class="lb-figure">
<div class="lb-image-wrap">
<img class="lb-image" alt="" />
</div>
<figcaption class="lb-caption">
<span class="lb-num"></span>
<span class="lb-title"></span>
<span class="lb-year"></span>
</figcaption>
</figure>
</div>
<script src="/assets/app.js" defer></script>
</body>
</html>