<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Projects Archive - Nogginusers</title>
	<atom:link href="https://www.nogginusers.com/project/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.nogginusers.com/project/</link>
	<description>Creative Content for Complex Ideas</description>
	<lastBuildDate>Thu, 16 Jul 2026 17:24:55 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://www.nogginusers.com/wp-content/uploads/cropped-facing-heads_blue_logo-32x32.png</url>
	<title>Projects Archive - Nogginusers</title>
	<link>https://www.nogginusers.com/project/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Climate Protection &#8211; Featured</title>
		<link>https://www.nogginusers.com/project/climate-protection-featured/</link>
					<comments>https://www.nogginusers.com/project/climate-protection-featured/#respond</comments>
		
		<dc:creator><![CDATA[Shana]]></dc:creator>
		<pubDate>Wed, 24 Mar 2021 02:08:39 +0000</pubDate>
				<guid isPermaLink="false">http://www.nogginusers.com/wordpress/?post_type=project&#038;p=28852</guid>

					<description><![CDATA[<p>The post <a href="https://www.nogginusers.com/project/climate-protection-featured/">Climate Protection &#8211; Featured</a> appeared first on <a href="https://www.nogginusers.com">Nogginusers</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><div class="et_pb_section et_pb_section_0 et_pb_fullwidth_section et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_module et_pb_fullwidth_code et_pb_fullwidth_code_0">
				
				
				
				
				<div class="et_pb_code_inner"><!--
  NOGGINUSERS â€” PROJECT PAGE TEMPLATE (matches the homepage)
  Self-hosted MP4, click-to-play facade (no native controls). Replayable.
  DIVI: paste this whole block into a Fullwidth Code module (padding 0).
-->

<style>
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=Instrument+Serif:ital@0;1&family=Geist+Mono:wght@300..600&display=swap');

.np {
  --cream: #0c1428;
  --navy: #f2ead9;
  --klein: #7d83ff;
  --rule: rgba(241,234,217,0.16);
  --dim: rgba(241,234,217,0.6);
  background: var(--cream);
  color: var(--navy);
  font-family: 'Instrument Serif', Georgia, serif;
  padding: 40px 64px 110px;
  box-sizing: border-box;
}
.np * { box-sizing: border-box; }

/* Back link */
.np-back {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim); text-decoration: none;
  padding-bottom: 28px;
  transition: color 0.25s, gap 0.25s;
}
.np-back:hover { color: var(--klein); gap: 14px; }

/* Two-column grid */
.np-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 72px;
  align-items: start;
  border-top: 1px solid var(--rule);
  padding-top: 56px;
}

/* LEFT column â€” sticky so it stays while the right scrolls */
.np-left { position: sticky; top: 40px; }
.np-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--klein); margin-bottom: 20px;
}
.np-title {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  font-weight: 360;
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 1.0; letter-spacing: -0.025em; margin: 0;
  color: #f2ead9;
}
.np-brief {
  font-size: 23px; line-height: 1.45; color: var(--navy);
  margin: 26px 0 0; max-width: 30ch;
}

/* Meta block (labels) */
.np-meta { margin-top: 40px; display: grid; gap: 22px; }
.np-meta-item { display: grid; gap: 5px; }
.np-meta-label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dim);
}
.np-meta-value { font-size: 19px; line-height: 1.3; color: var(--navy); }

.np-cta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 38px; padding: 13px 22px 13px 26px;
  border: 1.5px solid var(--navy); border-radius: 40px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  transition: background 0.3s, color 0.3s;
}
.np-cta:hover { background: var(--navy); color: var(--cream); }
.np-cta .np-cta-dot {
  width: 24px; height: 24px; border-radius: 50%; background: var(--klein); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}

/* RIGHT column â€” media + reading */
.np-media {
  position: relative; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden;
  background: #05080f; box-shadow: 0 22px 50px rgba(0,0,0,0.45);
}
.np-media video, .np-media img { width: 100%; height: 100%; border: 0; object-fit: cover; display: block; }

/* Click-to-play facade â€” blue play button, no native controls */
.np-facade { cursor: pointer; }
.np-play {
  position: absolute; inset: 0; margin: auto;
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(47,44,223,0.92); color: #f2ead9;
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
  transition: transform 0.25s, background 0.25s;
}
.np-facade:hover .np-play { transform: scale(1.08); background: #2f2cdf; }
.np-play svg { width: 26px; height: 26px; margin-left: 3px; }

.np-section { margin-top: 56px; }
.np-section + .np-section { margin-top: 48px; }
.np-section-label {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--klein); margin-bottom: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--rule);
}
.np-body {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 30, "SOFT" 30, "WONK" 0;
  font-weight: 330;
  font-size: 21px; line-height: 1.6; color: var(--navy); max-width: 58ch;
}
.np-body p { margin: 0 0 20px; }
.np-body p:last-child { margin-bottom: 0; }
.np-body em { font-style: italic; color: var(--klein); }

/* Secondary images under the reading */
.np-gallery { margin-top: 52px; display: grid; gap: 20px; }
.np-gallery img { width: 100%; border-radius: 8px; display: block; }

@media (max-width: 1024px) {
  .np { padding: 32px 44px 90px; }
  .np-grid { gap: 48px; }
}
@media (max-width: 820px) {
  .np-grid { grid-template-columns: 1fr; gap: 40px; }
  .np-left { position: static; }
  .np-brief { max-width: none; }
  .np-body { max-width: none; }
}
@media (max-width: 600px) {
  .np { padding: 24px 22px 70px; }
  .np-title { font-size: clamp(34px, 9vw, 48px); }
  .np-brief { font-size: 20px; }
  .np-body { font-size: 20px; }
}
</style>

<section class="np">

  <!-- EDIT: back link -->
  <a class="np-back" href="https://www.nogginusers.com/#portfolio">← Selected works</a>

  <div class="np-grid">

    <!-- ============ LEFT ============ -->
    <div class="np-left">
      <h1 class="np-title">Climate Protection Agreement Awards</h1>
      <p class="np-brief">Brightly colored illustrations representing climate-change issues, used at an awards event celebrating local companies.</p> 

      <div class="np-meta">
        <div class="np-meta-item">
          <div class="np-meta-label">Role</div>
          <div class="np-meta-value">Concept · Design · Illustration · Motion</div>
        </div>
        <div class="np-meta-item">
          <div class="np-meta-label">Client</div>
          <div class="np-meta-value">City of Columbia</div>
        </div>
        <div class="np-meta-item">
          <div class="np-meta-label">Deliverable</div>
          <div class="np-meta-value">Video · Web · Social media</div>
        </div>
      </div>
    </div>

    <!-- ============ RIGHT ============ -->
    <div class="np-right">

      <!-- Hero: Bear -->
      <div class="np-media np-facade" data-mp4="https://www.nogginusers.com/wp-content/uploads/Bear.mp4">
        <img decoding="async" class="np-poster" src="https://vumbnail.com/214206847.jpg" alt="Climate Protection title sequence" loading="lazy">
        <button class="np-play" aria-label="Play video"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 3l16 9-16 9z"/></svg></button>
      </div>

      <div class="np-section">
        <div class="np-section-label">The challenge</div>
        <div class="np-body">
          <p>Each year, the City of Columbia honors local businesses that take meaningful steps to reduce their environmental impact. Our media department was asked to produce a series of short films showcasing the innovative sustainability, recycling, and conservation practices of the award-winning companies.</p> 
          <p>These videos were featured at a community celebration and later shared on the City's website and social media. I was challenged with incorporating a logo designed by another team and creating title sequences that felt fresh, relevant, and inviting.</em></p> 
        </div>
      </div>

      <div class="np-section">
        <div class="np-section-label">The solution</div>
        <div class="np-body">
          <p>I developed illustrated title sequences featuring animals and habitats threatened by climate change. The City's message was about positive action, so I chose bright primary colors and avoided somber imagery.</p> 
          <p>Each piece included a radiant sun representing both warmth and rising temperatures. I animated the logo's land, sea, and sky elements individually, then united them to emphasize connection and balance.</em></p> 
        </div>
      </div>

      <!-- The full set of award title sequences. Each loads only on click. -->
      <div class="np-gallery">
        <div class="np-media np-facade" data-mp4="https://www.nogginusers.com/wp-content/uploads/Fish.mp4" style="box-shadow:none">
          <img decoding="async" class="np-poster" src="https://vumbnail.com/214217369.jpg" alt="Climate Protection title sequence" loading="lazy">
          <button class="np-play" aria-label="Play video"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 3l16 9-16 9z"/></svg></button>
        </div>
        <div class="np-media np-facade" data-mp4="https://www.nogginusers.com/wp-content/uploads/Coral_1-1.mp4" style="box-shadow:none">
          <img decoding="async" class="np-poster" src="https://vumbnail.com/214217421.jpg" alt="Climate Protection title sequence" loading="lazy">
          <button class="np-play" aria-label="Play video"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 3l16 9-16 9z"/></svg></button>
        </div>
        <div class="np-media np-facade" data-mp4="https://www.nogginusers.com/wp-content/uploads/Elephant.mp4" style="box-shadow:none">
          <img decoding="async" class="np-poster" src="https://vumbnail.com/214217457.jpg" alt="Climate Protection title sequence" loading="lazy">
          <button class="np-play" aria-label="Play video"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 3l16 9-16 9z"/></svg></button>
        </div>
        <div class="np-media np-facade" data-mp4="https://www.nogginusers.com/wp-content/uploads/Desertification.mp4" style="box-shadow:none">
          <img decoding="async" class="np-poster" src="https://www.nogginusers.com/wp-content/uploads/thumb-2.jpg" alt="Climate Protection title sequence" loading="lazy">
          <button class="np-play" aria-label="Play video"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 3l16 9-16 9z"/></svg></button>
        </div>
      </div>

    </div>
  </div>

  <script>
    document.querySelectorAll('.np-facade').forEach(function (f) {
      var poster = f.innerHTML;
      function mount() {
        f.addEventListener('click', function handler() {
          f.removeEventListener('click', handler);
          var v = document.createElement('video');
          v.src = f.getAttribute('data-mp4');
          v.playsInline = true; v.autoplay = true;
          v.style.width = '100%'; v.style.height = '100%'; v.style.objectFit = 'cover';
          v.addEventListener('click', function () { v.paused ? v.play() : v.pause(); });
          v.addEventListener('ended', function () { f.innerHTML = poster; mount(); });
          f.innerHTML = '';
          f.appendChild(v);
        });
      }
      mount();
    });
  </script>

</section>
</div>
			</div>
				
				
			</div></p>
<p>The post <a href="https://www.nogginusers.com/project/climate-protection-featured/">Climate Protection &#8211; Featured</a> appeared first on <a href="https://www.nogginusers.com">Nogginusers</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.nogginusers.com/project/climate-protection-featured/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Stephens Stormwater Partnership &#8211; Featured</title>
		<link>https://www.nogginusers.com/project/stephens-stormwater-partnership-featured/</link>
					<comments>https://www.nogginusers.com/project/stephens-stormwater-partnership-featured/#respond</comments>
		
		<dc:creator><![CDATA[Shana]]></dc:creator>
		<pubDate>Wed, 24 Mar 2021 02:31:26 +0000</pubDate>
				<guid isPermaLink="false">http://www.nogginusers.com/wordpress/?post_type=project&#038;p=28864</guid>

					<description><![CDATA[<p>The post <a href="https://www.nogginusers.com/project/stephens-stormwater-partnership-featured/">Stephens Stormwater Partnership &#8211; Featured</a> appeared first on <a href="https://www.nogginusers.com">Nogginusers</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><div class="et_pb_section et_pb_section_4 et_pb_fullwidth_section et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_module et_pb_fullwidth_code et_pb_fullwidth_code_1">
				
				
				
				
				<div class="et_pb_code_inner"><!--
  NOGGINUSERS — PROJECT PAGE TEMPLATE (matches the homepage)
  Self-hosted MP4, click-to-play facade (no native controls). Replayable.
  DIVI: paste this whole block into a Fullwidth Code module (padding 0).
-->

<style>
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=Instrument+Serif:ital@0;1&family=Geist+Mono:wght@300..600&display=swap');

.np {
  --cream: #0c1428;
  --navy: #f2ead9;
  --klein: #7d83ff;
  --rule: rgba(241,234,217,0.16);
  --dim: rgba(241,234,217,0.6);
  background: var(--cream);
  color: var(--navy);
  font-family: 'Instrument Serif', Georgia, serif;
  padding: 40px 64px 110px;
  box-sizing: border-box;
}
.np * { box-sizing: border-box; }

/* Back link */
.np-back {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim); text-decoration: none;
  padding-bottom: 28px;
  transition: color 0.25s, gap 0.25s;
}
.np-back:hover { color: var(--klein); gap: 14px; }

/* Two-column grid */
.np-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 72px;
  align-items: start;
  border-top: 1px solid var(--rule);
  padding-top: 56px;
}

/* LEFT column — sticky so it stays while the right scrolls */
.np-left { position: sticky; top: 40px; }
.np-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--klein); margin-bottom: 20px;
}
.np-title {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  font-weight: 360;
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 1.0; letter-spacing: -0.025em; margin: 0;
  color: #f2ead9;
}
.np-brief {
  font-size: 23px; line-height: 1.45; color: var(--navy);
  margin: 26px 0 0; max-width: 30ch;
}

/* Meta block (labels) */
.np-meta { margin-top: 40px; display: grid; gap: 22px; }
.np-meta-item { display: grid; gap: 5px; }
.np-meta-label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dim);
}
.np-meta-value { font-size: 19px; line-height: 1.3; color: var(--navy); }

.np-cta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 38px; padding: 13px 22px 13px 26px;
  border: 1.5px solid var(--navy); border-radius: 40px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  transition: background 0.3s, color 0.3s;
}
.np-cta:hover { background: var(--navy); color: var(--cream); }
.np-cta .np-cta-dot {
  width: 24px; height: 24px; border-radius: 50%; background: var(--klein); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}

/* RIGHT column — media + reading */
.np-media {
  position: relative; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden;
  background: #05080f; box-shadow: 0 22px 50px rgba(0,0,0,0.45);
}
.np-media video, .np-media img { width: 100%; height: 100%; border: 0; object-fit: cover; display: block; }

/* Click-to-play facade — blue play button, no native controls */
.np-facade { cursor: pointer; }
.np-play {
  position: absolute; inset: 0; margin: auto;
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(47,44,223,0.92); color: #f2ead9;
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
  transition: transform 0.25s, background 0.25s;
}
.np-facade:hover .np-play { transform: scale(1.08); background: #2f2cdf; }
.np-play svg { width: 26px; height: 26px; margin-left: 3px; }

.np-section { margin-top: 56px; }
.np-section + .np-section { margin-top: 48px; }
.np-section-label {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--klein); margin-bottom: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--rule);
}
.np-body {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 30, "SOFT" 30, "WONK" 0;
  font-weight: 330;
  font-size: 21px; line-height: 1.6; color: var(--navy); max-width: 58ch;
}
.np-body p { margin: 0 0 20px; }
.np-body p:last-child { margin-bottom: 0; }
.np-body em { font-style: italic; color: var(--klein); }

/* Secondary images under the reading */
.np-gallery { margin-top: 52px; display: grid; gap: 20px; }
.np-gallery img { width: 100%; border-radius: 8px; display: block; }

@media (max-width: 1024px) {
  .np { padding: 32px 44px 90px; }
  .np-grid { gap: 48px; }
}
@media (max-width: 820px) {
  .np-grid { grid-template-columns: 1fr; gap: 40px; }
  .np-left { position: static; }
  .np-brief { max-width: none; }
  .np-body { max-width: none; }
}
@media (max-width: 600px) {
  .np { padding: 24px 22px 70px; }
  .np-title { font-size: clamp(34px, 9vw, 48px); }
  .np-brief { font-size: 20px; }
  .np-body { font-size: 20px; }
}
</style>

<section class="np">

  <!-- EDIT: back link -->
  <a class="np-back" href="https://www.nogginusers.com/#portfolio">← Selected works</a>

  <div class="np-grid">

    <!-- ============ LEFT ============ -->
    <div class="np-left">
      <h1 class="np-title">Stephens Stormwater Partnership</h1>
      <p class="np-brief">“Rain garden” sounds lovely, looks pretty, and works efficiently to filter stormwater.</p> 

      <div class="np-meta">
        <div class="np-meta-item">
          <div class="np-meta-label">Role</div>
          <div class="np-meta-value">Concept · Design · Illustration · Motion</div>
        </div>
        <div class="np-meta-item">
          <div class="np-meta-label">Client</div>
          <div class="np-meta-value">City of Columbia</div>
        </div>
        <div class="np-meta-item">
          <div class="np-meta-label">Deliverable</div>
          <div class="np-meta-value">Video · Web · Social media</div>
        </div>
      </div>
    </div>

    <!-- ============ RIGHT ============ -->
    <div class="np-right">

      <!-- Self-hosted MP4, click-to-play. Tap button to play, tap video to pause, replay when finished. -->
      <div class="np-media np-facade" data-mp4="https://www.nogginusers.com/wp-content/uploads/stormwater_stephens_college_title_v2-1080p.mp4">
        <img decoding="async" class="np-poster" src="https://vumbnail.com/201054446.jpg" alt="Stephens Stormwater Partnership title sequence" loading="lazy">
        <button class="np-play" aria-label="Play video"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 3l16 9-16 9z"/></svg></button>
      </div>

      <div class="np-section">
        <div class="np-section-label">The challenge</div>
        <div class="np-body">
          <p>The City of Columbia is surrounded by rivers and creeks that flow into the Missouri River, waterways increasingly affected by stormwater pollution. Our team produced a series of videos featuring green-infrastructure solutions and community partnerships.</p> 
          <p>This video highlighted a rain-garden development partnership with Stephens College. The challenge was to <em>translate technical, data-driven concepts into something visually engaging and accessible.</em></p> 
        </div>
      </div>

      <div class="np-section">
        <div class="np-section-label">The solution</div>
        <div class="np-body">
          <p>I designed a title illustration that turns stormwater into a visual journey. Flowing waves of neon blues and greens morph into the organic shapes of a rain garden, with purples and pinks representing growth and renewal.</p> 
          <p>Each layer of water becomes a layer of the garden, showing how natural filtration works. The animation blends science and artistry, <em>making a complex process feel bright and alive.</em></p> 
        </div>
      </div>

    </div>
  </div>

  <script>
    document.querySelectorAll('.np-facade').forEach(function (f) {
      var poster = f.innerHTML;
      function mount() {
        f.addEventListener('click', function handler() {
          f.removeEventListener('click', handler);
          var v = document.createElement('video');
          v.src = f.getAttribute('data-mp4');
          v.playsInline = true; v.autoplay = true;
          v.style.width = '100%'; v.style.height = '100%'; v.style.objectFit = 'cover';
          v.addEventListener('click', function () { v.paused ? v.play() : v.pause(); });
          v.addEventListener('ended', function () { f.innerHTML = poster; mount(); });
          f.innerHTML = '';
          f.appendChild(v);
        });
      }
      mount();
    });
  </script>

</section></div>
			</div>
				
				
			</div></p>
<p>The post <a href="https://www.nogginusers.com/project/stephens-stormwater-partnership-featured/">Stephens Stormwater Partnership &#8211; Featured</a> appeared first on <a href="https://www.nogginusers.com">Nogginusers</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.nogginusers.com/project/stephens-stormwater-partnership-featured/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Pedestrian Bridge &#8211; Featured</title>
		<link>https://www.nogginusers.com/project/pedestrian-bridge-featured/</link>
					<comments>https://www.nogginusers.com/project/pedestrian-bridge-featured/#respond</comments>
		
		<dc:creator><![CDATA[Shana]]></dc:creator>
		<pubDate>Wed, 24 Mar 2021 02:08:22 +0000</pubDate>
				<guid isPermaLink="false">http://www.nogginusers.com/wordpress/?post_type=project&#038;p=28850</guid>

					<description><![CDATA[<p>The post <a href="https://www.nogginusers.com/project/pedestrian-bridge-featured/">Pedestrian Bridge &#8211; Featured</a> appeared first on <a href="https://www.nogginusers.com">Nogginusers</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><div class="et_pb_section et_pb_section_7 et_pb_fullwidth_section et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_module et_pb_fullwidth_code et_pb_fullwidth_code_2">
				
				
				
				
				<div class="et_pb_code_inner"><!--
  NOGGINUSERS â€” PROJECT PAGE TEMPLATE (matches the homepage)
  Self-hosted MP4, click-to-play facade (no native controls). Replayable.
  DIVI: paste this whole block into a Fullwidth Code module (padding 0).
-->

<style>
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=Instrument+Serif:ital@0;1&family=Geist+Mono:wght@300..600&display=swap');

.np {
  --cream: #0c1428;
  --navy: #f2ead9;
  --klein: #7d83ff;
  --rule: rgba(241,234,217,0.16);
  --dim: rgba(241,234,217,0.6);
  background: var(--cream);
  color: var(--navy);
  font-family: 'Instrument Serif', Georgia, serif;
  padding: 40px 64px 110px;
  box-sizing: border-box;
}
.np * { box-sizing: border-box; }

/* Back link */
.np-back {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim); text-decoration: none;
  padding-bottom: 28px;
  transition: color 0.25s, gap 0.25s;
}
.np-back:hover { color: var(--klein); gap: 14px; }

/* Two-column grid */
.np-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 72px;
  align-items: start;
  border-top: 1px solid var(--rule);
  padding-top: 56px;
}

/* LEFT column â€” sticky so it stays while the right scrolls */
.np-left { position: sticky; top: 40px; }
.np-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--klein); margin-bottom: 20px;
}
.np-title {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  font-weight: 360;
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 1.0; letter-spacing: -0.025em; margin: 0;
  color: #f2ead9;
}
.np-brief {
  font-size: 23px; line-height: 1.45; color: var(--navy);
  margin: 26px 0 0; max-width: 30ch;
}

/* Meta block (labels) */
.np-meta { margin-top: 40px; display: grid; gap: 22px; }
.np-meta-item { display: grid; gap: 5px; }
.np-meta-label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dim);
}
.np-meta-value { font-size: 19px; line-height: 1.3; color: var(--navy); }

.np-cta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 38px; padding: 13px 22px 13px 26px;
  border: 1.5px solid var(--navy); border-radius: 40px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  transition: background 0.3s, color 0.3s;
}
.np-cta:hover { background: var(--navy); color: var(--cream); }
.np-cta .np-cta-dot {
  width: 24px; height: 24px; border-radius: 50%; background: var(--klein); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}

/* RIGHT column â€” media + reading */
.np-media {
  position: relative; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden;
  background: #05080f; box-shadow: 0 22px 50px rgba(0,0,0,0.45);
}
.np-media video, .np-media img { width: 100%; height: 100%; border: 0; object-fit: cover; display: block; }

/* Click-to-play facade â€” blue play button, no native controls */
.np-facade { cursor: pointer; }
.np-play {
  position: absolute; inset: 0; margin: auto;
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(47,44,223,0.92); color: #f2ead9;
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
  transition: transform 0.25s, background 0.25s;
}
.np-facade:hover .np-play { transform: scale(1.08); background: #2f2cdf; }
.np-play svg { width: 26px; height: 26px; margin-left: 3px; }

/* Color-match the Pedestrian Bridge media to the adjusted version on the live site */
.np-colormatch img, .np-colormatch video { filter: saturate(194%) hue-rotate(346deg) brightness(85%); }

.np-section { margin-top: 56px; }
.np-section + .np-section { margin-top: 48px; }
.np-section-label {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--klein); margin-bottom: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--rule);
}
.np-body {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 30, "SOFT" 30, "WONK" 0;
  font-weight: 330;
  font-size: 21px; line-height: 1.6; color: var(--navy); max-width: 58ch;
}
.np-body p { margin: 0 0 20px; }
.np-body p:last-child { margin-bottom: 0; }
.np-body em { font-style: italic; color: var(--klein); }

/* Secondary images under the reading */
.np-gallery { margin-top: 52px; display: grid; gap: 20px; }
.np-gallery img { width: 100%; border-radius: 8px; display: block; }

@media (max-width: 1024px) {
  .np { padding: 32px 44px 90px; }
  .np-grid { gap: 48px; }
}
@media (max-width: 820px) {
  .np-grid { grid-template-columns: 1fr; gap: 40px; }
  .np-left { position: static; }
  .np-brief { max-width: none; }
  .np-body { max-width: none; }
}
@media (max-width: 600px) {
  .np { padding: 24px 22px 70px; }
  .np-title { font-size: clamp(34px, 9vw, 48px); }
  .np-brief { font-size: 20px; }
  .np-body { font-size: 20px; }
}
</style>

<section class="np">

  <!-- EDIT: back link -->
  <a class="np-back" href="https://www.nogginusers.com/#portfolio">← Selected works</a>

  <div class="np-grid">

    <!-- ============ LEFT ============ -->
    <div class="np-left">
      <h1 class="np-title">Forum Pedestrian Bridge</h1>
      <p class="np-brief">Illustration and motion title based on my photograph of a newly built local bridge, a safer route for cyclists and pedestrians.</p> 

      <div class="np-meta">
        <div class="np-meta-item">
          <div class="np-meta-label">Role</div>
          <div class="np-meta-value">Concept · Design · Illustration · Motion</div>
        </div>
        <div class="np-meta-item">
          <div class="np-meta-label">Client</div>
          <div class="np-meta-value">City of Columbia</div>
        </div>
        <div class="np-meta-item">
          <div class="np-meta-label">Deliverable</div>
          <div class="np-meta-value">Video · Web · Social media</div>
        </div>
      </div>
    </div>

    <!-- ============ RIGHT ============ -->
    <div class="np-right">

      <!-- Self-hosted MP4, click-to-play. Tap button to play, tap video to pause, replay when finished. -->
      <div class="np-media np-facade np-colormatch np-darkframe" data-mp4="https://www.nogginusers.com/wp-content/uploads/Forum_Pedestrian_Bridge.mp4">
        <img decoding="async" class="np-poster" src="https://vumbnail.com/180957819.jpg" alt="Forum Pedestrian Bridge title sequence" loading="lazy">
        <button class="np-play" aria-label="Play video"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 3l16 9-16 9z"/></svg></button>
      </div>

      <div class="np-section">
        <div class="np-section-label">The challenge</div>
        <div class="np-body">
          <p>This video informed the public about the bridge's development and its role in improving pedestrian and cyclist access. The subject seemed fairly unremarkable, so the challenge was to <em>create something that would capture interest and inspire civic pride.</em></p> 
        </div>
      </div>

      <div class="np-section">
        <div class="np-section-label">The solution</div>
        <div class="np-body">
          <p>I visited the bridge and photographed it on site, hoping to find a visual cue for inspiration. I noticed that vegetation had already begun to grow around the iron bars, nature coexisting with urban design.</p> 
          <p>Using that detail as inspiration, I transformed a plain concept into a vibrant illustration and motion title, <em>reimagining the bridge as a symbol of connection and growth.</em></p> 
        </div>
      </div>

    </div>
  </div>

  <script>
    document.querySelectorAll('.np-facade').forEach(function (f) {
      var poster = f.innerHTML;
      function mount() {
        f.addEventListener('click', function handler() {
          f.removeEventListener('click', handler);
          var v = document.createElement('video');
          v.src = f.getAttribute('data-mp4');
          v.playsInline = true; v.autoplay = true;
          v.style.width = '100%'; v.style.height = '100%'; v.style.objectFit = 'cover';
          v.addEventListener('click', function () { v.paused ? v.play() : v.pause(); });
          v.addEventListener('ended', function () { f.innerHTML = poster; mount(); });
          f.innerHTML = '';
          f.appendChild(v);
        });
      }
      mount();
    });
  </script>

</section>
</div>
			</div>
				
				
			</div></p>
<p>The post <a href="https://www.nogginusers.com/project/pedestrian-bridge-featured/">Pedestrian Bridge &#8211; Featured</a> appeared first on <a href="https://www.nogginusers.com">Nogginusers</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.nogginusers.com/project/pedestrian-bridge-featured/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Cycle City &#8211; Featured</title>
		<link>https://www.nogginusers.com/project/cycle-city-featured/</link>
					<comments>https://www.nogginusers.com/project/cycle-city-featured/#respond</comments>
		
		<dc:creator><![CDATA[Shana]]></dc:creator>
		<pubDate>Wed, 24 Mar 2021 02:36:20 +0000</pubDate>
				<guid isPermaLink="false">http://www.nogginusers.com/wordpress/?post_type=project&#038;p=28873</guid>

					<description><![CDATA[<p>The post <a href="https://www.nogginusers.com/project/cycle-city-featured/">Cycle City &#8211; Featured</a> appeared first on <a href="https://www.nogginusers.com">Nogginusers</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><div class="et_pb_section et_pb_section_11 et_pb_fullwidth_section et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_module et_pb_fullwidth_code et_pb_fullwidth_code_3">
				
				
				
				
				<div class="et_pb_code_inner"><!--
  NOGGINUSERS — PROJECT PAGE TEMPLATE (matches the homepage)
  Self-hosted MP4, click-to-play facade (no native controls). Replayable.
  DIVI: paste this whole block into a Fullwidth Code module (padding 0).
-->

<style>
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=Instrument+Serif:ital@0;1&family=Geist+Mono:wght@300..600&display=swap');

.np {
  --cream: #0c1428;
  --navy: #f2ead9;
  --klein: #7d83ff;
  --rule: rgba(241,234,217,0.16);
  --dim: rgba(241,234,217,0.6);
  background: var(--cream);
  color: var(--navy);
  font-family: 'Instrument Serif', Georgia, serif;
  padding: 40px 64px 110px;
  box-sizing: border-box;
}
.np * { box-sizing: border-box; }

/* Back link */
.np-back {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim); text-decoration: none;
  padding-bottom: 28px;
  transition: color 0.25s, gap 0.25s;
}
.np-back:hover { color: var(--klein); gap: 14px; }

/* Two-column grid */
.np-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 72px;
  align-items: start;
  border-top: 1px solid var(--rule);
  padding-top: 56px;
}

/* LEFT column — sticky so it stays while the right scrolls */
.np-left { position: sticky; top: 40px; }
.np-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--klein); margin-bottom: 20px;
}
.np-title {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  font-weight: 360;
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 1.0; letter-spacing: -0.025em; margin: 0;
  color: #f2ead9;
}
.np-brief {
  font-size: 23px; line-height: 1.45; color: var(--navy);
  margin: 26px 0 0; max-width: 30ch;
}

/* Meta block (labels) */
.np-meta { margin-top: 40px; display: grid; gap: 22px; }
.np-meta-item { display: grid; gap: 5px; }
.np-meta-label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dim);
}
.np-meta-value { font-size: 19px; line-height: 1.3; color: var(--navy); }

.np-cta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 38px; padding: 13px 22px 13px 26px;
  border: 1.5px solid var(--navy); border-radius: 40px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  transition: background 0.3s, color 0.3s;
}
.np-cta:hover { background: var(--navy); color: var(--cream); }
.np-cta .np-cta-dot {
  width: 24px; height: 24px; border-radius: 50%; background: var(--klein); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}

/* RIGHT column — media + reading */
.np-media {
  position: relative; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden;
  background: #05080f; box-shadow: 0 22px 50px rgba(0,0,0,0.45);
}
.np-media video, .np-media img { width: 100%; height: 100%; border: 0; object-fit: cover; display: block; }

/* Click-to-play facade — blue play button, no native controls */
.np-facade { cursor: pointer; }
.np-play {
  position: absolute; inset: 0; margin: auto;
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(47,44,223,0.92); color: #f2ead9;
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
  transition: transform 0.25s, background 0.25s;
}
.np-facade:hover .np-play { transform: scale(1.08); background: #2f2cdf; }
.np-play svg { width: 26px; height: 26px; margin-left: 3px; }

.np-section { margin-top: 56px; }
.np-section + .np-section { margin-top: 48px; }
.np-section-label {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--klein); margin-bottom: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--rule);
}
.np-body {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 30, "SOFT" 30, "WONK" 0;
  font-weight: 330;
  font-size: 21px; line-height: 1.6; color: var(--navy); max-width: 58ch;
}
.np-body p { margin: 0 0 20px; }
.np-body p:last-child { margin-bottom: 0; }
.np-body em { font-style: italic; color: var(--klein); }

/* Secondary images under the reading */
.np-gallery { margin-top: 52px; display: grid; gap: 20px; }
.np-gallery img { width: 100%; border-radius: 8px; display: block; }

@media (max-width: 1024px) {
  .np { padding: 32px 44px 90px; }
  .np-grid { gap: 48px; }
}
@media (max-width: 820px) {
  .np-grid { grid-template-columns: 1fr; gap: 40px; }
  .np-left { position: static; }
  .np-brief { max-width: none; }
  .np-body { max-width: none; }
}
@media (max-width: 600px) {
  .np { padding: 24px 22px 70px; }
  .np-title { font-size: clamp(34px, 9vw, 48px); }
  .np-brief { font-size: 20px; }
  .np-body { font-size: 20px; }
}
</style>

<section class="np">

  <!-- EDIT: back link -->
  <a class="np-back" href="https://www.nogginusers.com/#portfolio">← Selected works</a>

  <div class="np-grid">

    <!-- ============ LEFT ============ -->
    <div class="np-left">
      <h1 class="np-title">Cycle City</h1>
      <p class="np-brief">An energetic title sequence capturing motion and speed, promoting the city’s new bike lanes and the joy of getting around by bike.</p> 

      <div class="np-meta">
        <div class="np-meta-item">
          <div class="np-meta-label">Role</div>
          <div class="np-meta-value">Concept · Design · Illustration · Motion</div>
        </div>
        <div class="np-meta-item">
          <div class="np-meta-label">Client</div>
          <div class="np-meta-value">City of Columbia</div>
        </div>
        <div class="np-meta-item">
          <div class="np-meta-label">Deliverable</div>
          <div class="np-meta-value">Video · Web · Social media</div>
        </div>
      </div>
    </div>

    <!-- ============ RIGHT ============ -->
    <div class="np-right">

      <!-- Self-hosted MP4, click-to-play. Tap button to play, tap video to pause, replay when finished. -->
      <div class="np-media np-facade" data-mp4="https://www.nogginusers.com/wp-content/uploads/Cycle_City_Title.mp4.mp4">
        <img decoding="async" class="np-poster" src="https://vumbnail.com/169016327.jpg" alt="Cycle City title sequence" loading="lazy">
        <button class="np-play" aria-label="Play video"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 3l16 9-16 9z"/></svg></button>
      </div>

      <div class="np-section">
        <div class="np-section-label">The challenge</div>
        <div class="np-body">
          <p>The goal was to create a title sequence for a public video introducing the city’s new bike paths. The challenge was to make the piece <em>informative yet playful</em>, reflecting the excitement of cycling and the city’s investment in active transportation.</p> 
        </div>
      </div>

      <div class="np-section">
        <div class="np-section-label">The solution</div>
        <div class="np-body">
          <p>Because the piece centered on cycling, motion became the heart of the design. I created a title sequence that blended illustration and typography to evoke the rhythm of a bicycle in motion.</p> 
          <p>The words “Columbia, Missouri” were set in a flowing script inspired by the winding country roads where many of the new paths were built, <em>an upbeat introduction that invited viewers to feel the joy of the ride.</em></p> 
        </div>
      </div>

    </div>
  </div>

  <script>
    document.querySelectorAll('.np-facade').forEach(function (f) {
      var poster = f.innerHTML;
      function mount() {
        f.addEventListener('click', function handler() {
          f.removeEventListener('click', handler);
          var v = document.createElement('video');
          v.src = f.getAttribute('data-mp4');
          v.playsInline = true; v.autoplay = true;
          v.style.width = '100%'; v.style.height = '100%'; v.style.objectFit = 'cover';
          v.addEventListener('click', function () { v.paused ? v.play() : v.pause(); });
          v.addEventListener('ended', function () { f.innerHTML = poster; mount(); });
          f.innerHTML = '';
          f.appendChild(v);
        });
      }
      mount();
    });
  </script>

</section></div>
			</div>
				
				
			</div></p>
<p>The post <a href="https://www.nogginusers.com/project/cycle-city-featured/">Cycle City &#8211; Featured</a> appeared first on <a href="https://www.nogginusers.com">Nogginusers</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.nogginusers.com/project/cycle-city-featured/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Downtown Trees &#8211; Featured</title>
		<link>https://www.nogginusers.com/project/downtown-trees-featured/</link>
					<comments>https://www.nogginusers.com/project/downtown-trees-featured/#respond</comments>
		
		<dc:creator><![CDATA[Shana]]></dc:creator>
		<pubDate>Wed, 24 Mar 2021 02:08:31 +0000</pubDate>
				<guid isPermaLink="false">http://www.nogginusers.com/wordpress/?post_type=project&#038;p=28851</guid>

					<description><![CDATA[<p>The post <a href="https://www.nogginusers.com/project/downtown-trees-featured/">Downtown Trees &#8211; Featured</a> appeared first on <a href="https://www.nogginusers.com">Nogginusers</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><div class="et_pb_section et_pb_section_15 et_pb_fullwidth_section et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_module et_pb_fullwidth_code et_pb_fullwidth_code_4">
				
				
				
				
				<div class="et_pb_code_inner"><!--
  NOGGINUSERS â€” PROJECT PAGE TEMPLATE (matches the homepage)
  Self-hosted MP4, click-to-play facade (no native controls). Replayable.
  DIVI: paste this whole block into a Fullwidth Code module (padding 0).
-->

<style>
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=Instrument+Serif:ital@0;1&family=Geist+Mono:wght@300..600&display=swap');

.np {
  --cream: #0c1428;
  --navy: #f2ead9;
  --klein: #7d83ff;
  --rule: rgba(241,234,217,0.16);
  --dim: rgba(241,234,217,0.6);
  background: var(--cream);
  color: var(--navy);
  font-family: 'Instrument Serif', Georgia, serif;
  padding: 40px 64px 110px;
  box-sizing: border-box;
}
.np * { box-sizing: border-box; }

/* Back link */
.np-back {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim); text-decoration: none;
  padding-bottom: 28px;
  transition: color 0.25s, gap 0.25s;
}
.np-back:hover { color: var(--klein); gap: 14px; }

/* Two-column grid */
.np-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 72px;
  align-items: start;
  border-top: 1px solid var(--rule);
  padding-top: 56px;
}

/* LEFT column â€” sticky so it stays while the right scrolls */
.np-left { position: sticky; top: 40px; }
.np-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--klein); margin-bottom: 20px;
}
.np-title {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  font-weight: 360;
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 1.0; letter-spacing: -0.025em; margin: 0;
  color: #f2ead9;
}
.np-brief {
  font-size: 23px; line-height: 1.45; color: var(--navy);
  margin: 26px 0 0; max-width: 30ch;
}

/* Meta block (labels) */
.np-meta { margin-top: 40px; display: grid; gap: 22px; }
.np-meta-item { display: grid; gap: 5px; }
.np-meta-label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dim);
}
.np-meta-value { font-size: 19px; line-height: 1.3; color: var(--navy); }

.np-cta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 38px; padding: 13px 22px 13px 26px;
  border: 1.5px solid var(--navy); border-radius: 40px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  transition: background 0.3s, color 0.3s;
}
.np-cta:hover { background: var(--navy); color: var(--cream); }
.np-cta .np-cta-dot {
  width: 24px; height: 24px; border-radius: 50%; background: var(--klein); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}

/* RIGHT column â€” media + reading */
.np-media {
  position: relative; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden;
  background: #05080f; box-shadow: 0 22px 50px rgba(0,0,0,0.45);
}
.np-media video, .np-media img { width: 100%; height: 100%; border: 0; object-fit: cover; display: block; }

/* Click-to-play facade â€” blue play button, no native controls */
.np-facade { cursor: pointer; }
.np-play {
  position: absolute; inset: 0; margin: auto;
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(47,44,223,0.92); color: #f2ead9;
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
  transition: transform 0.25s, background 0.25s;
}
.np-facade:hover .np-play { transform: scale(1.08); background: #2f2cdf; }
.np-play svg { width: 26px; height: 26px; margin-left: 3px; }

.np-section { margin-top: 56px; }
.np-section + .np-section { margin-top: 48px; }
.np-section-label {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--klein); margin-bottom: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--rule);
}
.np-body {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 30, "SOFT" 30, "WONK" 0;
  font-weight: 330;
  font-size: 21px; line-height: 1.6; color: var(--navy); max-width: 58ch;
}
.np-body p { margin: 0 0 20px; }
.np-body p:last-child { margin-bottom: 0; }
.np-body em { font-style: italic; color: var(--klein); }

/* Secondary images under the reading */
.np-gallery { margin-top: 52px; display: grid; gap: 20px; }
.np-gallery img { width: 100%; border-radius: 8px; display: block; }

@media (max-width: 1024px) {
  .np { padding: 32px 44px 90px; }
  .np-grid { gap: 48px; }
}
@media (max-width: 820px) {
  .np-grid { grid-template-columns: 1fr; gap: 40px; }
  .np-left { position: static; }
  .np-brief { max-width: none; }
  .np-body { max-width: none; }
}
@media (max-width: 600px) {
  .np { padding: 24px 22px 70px; }
  .np-title { font-size: clamp(34px, 9vw, 48px); }
  .np-brief { font-size: 20px; }
  .np-body { font-size: 20px; }
}
</style>

<section class="np">

  <!-- EDIT: back link -->
  <a class="np-back" href="https://www.nogginusers.com/#portfolio">← Selected works</a>

  <div class="np-grid">

    <!-- ============ LEFT ============ -->
    <div class="np-left">
      <h1 class="np-title">Downtown Trees</h1>
      <p class="np-brief">A video title imagining a bright, tree-lined downtown brought to life through innovative rainwater filtration systems.</p> 

      <div class="np-meta">
        <div class="np-meta-item">
          <div class="np-meta-label">Role</div>
          <div class="np-meta-value">Concept · Design · Illustration · Motion</div>
        </div>
        <div class="np-meta-item">
          <div class="np-meta-label">Client</div>
          <div class="np-meta-value">City of Columbia</div>
        </div>
        <div class="np-meta-item">
          <div class="np-meta-label">Deliverable</div>
          <div class="np-meta-value">Video · Web · Social media</div>
        </div>
      </div>
    </div>

    <!-- ============ RIGHT ============ -->
    <div class="np-right">

      <!-- Self-hosted MP4, click-to-play. Tap button to play, tap video to pause, replay when finished. -->
      <div class="np-media np-facade" data-mp4="https://www.nogginusers.com/wp-content/uploads/Downtown_Trees_Title-1.mp4">
        <img decoding="async" class="np-poster" src="https://vumbnail.com/178485685.jpg" alt="Downtown Trees title sequence" loading="lazy">
        <button class="np-play" aria-label="Play video"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 3l16 9-16 9z"/></svg></button>
      </div>

      <div class="np-section">
        <div class="np-section-label">The challenge</div>
        <div class="np-body">
          <p>The goal was to show Columbia residents how large, shade-giving trees could take root in the city's rapidly growing downtown, planted in <em>Silva Cells</em>, underground systems that let roots spread freely while filtering stormwater.</p> 
          <p>The creative challenge was to present this technical, infrastructure-driven concept in a way that felt <em>clear, inviting, and visually inspiring.</em></p> 
        </div>
      </div>

      <div class="np-section">
        <div class="np-section-label">The solution</div>
        <div class="np-body">
          <p>To ground the project in reality, I used photographs of the specific tree species planned for downtown and overlaid them onto video footage of Columbia's streets, helping viewers imagine the city's future landscape.</p> 
          <p>I paired two contrasting typefaces, a clean, modern font for the urban environment and a flowing script for trees, echoing urban progress in harmony with natural growth.</em></p> 
        </div>
      </div>

    </div>
  </div>

  <script>
    document.querySelectorAll('.np-facade').forEach(function (f) {
      var poster = f.innerHTML;
      function mount() {
        f.addEventListener('click', function handler() {
          f.removeEventListener('click', handler);
          var v = document.createElement('video');
          v.src = f.getAttribute('data-mp4');
          v.playsInline = true; v.autoplay = true;
          v.style.width = '100%'; v.style.height = '100%'; v.style.objectFit = 'cover';
          v.addEventListener('click', function () { v.paused ? v.play() : v.pause(); });
          v.addEventListener('ended', function () { f.innerHTML = poster; mount(); });
          f.innerHTML = '';
          f.appendChild(v);
        });
      }
      mount();
    });
  </script>

</section>
</div>
			</div>
				
				
			</div></p>
<p>The post <a href="https://www.nogginusers.com/project/downtown-trees-featured/">Downtown Trees &#8211; Featured</a> appeared first on <a href="https://www.nogginusers.com">Nogginusers</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.nogginusers.com/project/downtown-trees-featured/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Housing the Homeless &#8211; Featured</title>
		<link>https://www.nogginusers.com/project/housing_the_homeless/</link>
					<comments>https://www.nogginusers.com/project/housing_the_homeless/#respond</comments>
		
		<dc:creator><![CDATA[Shana]]></dc:creator>
		<pubDate>Wed, 24 Mar 2021 01:53:56 +0000</pubDate>
				<guid isPermaLink="false">http://www.nogginusers.com/wordpress/?post_type=project&#038;p=28846</guid>

					<description><![CDATA[<p>The post <a href="https://www.nogginusers.com/project/housing_the_homeless/">Housing the Homeless &#8211; Featured</a> appeared first on <a href="https://www.nogginusers.com">Nogginusers</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><div class="et_pb_section et_pb_section_19 et_pb_fullwidth_section et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_module et_pb_fullwidth_code et_pb_fullwidth_code_5">
				
				
				
				
				<div class="et_pb_code_inner"><!--
  NOGGINUSERS â€” PROJECT PAGE TEMPLATE (matches the homepage)
  Self-hosted MP4, click-to-play facade (no native controls).
  DIVI: paste this whole block into a Fullwidth Code module (padding 0).
-->

<style>
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=Instrument+Serif:ital@0;1&family=Geist+Mono:wght@300..600&display=swap');

.np {
  --cream: #0c1428;
  --navy: #f1ead9;
  --klein: #7d83ff;
  --rule: rgba(241,234,217,0.16);
  --dim: rgba(241,234,217,0.6);
  background: var(--cream);
  color: var(--navy);
  font-family: 'Instrument Serif', Georgia, serif;
  padding: 40px 64px 110px;
  box-sizing: border-box;
}
.np * { box-sizing: border-box; }

/* Back link */
.np-back {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim); text-decoration: none;
  padding-bottom: 28px;
  transition: color 0.25s, gap 0.25s;
}
.np-back:hover { color: var(--klein); gap: 14px; }

/* Two-column grid */
.np-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 72px;
  align-items: start;
  border-top: 1px solid var(--rule);
  padding-top: 56px;
}

/* LEFT column â€” sticky so it stays while the right scrolls */
.np-left { position: sticky; top: 40px; }
.np-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--klein); margin-bottom: 20px;
}
.np-title {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  font-weight: 360;
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 1.0; letter-spacing: -0.025em; margin: 0;
}
.np-brief {
  font-size: 23px; line-height: 1.45; color: var(--navy);
  margin: 26px 0 0; max-width: 30ch;
}
.np-award {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 16px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--klein);
}

/* Meta block (labels) */
.np-meta { margin-top: 40px; display: grid; gap: 22px; }
.np-meta-item { display: grid; gap: 5px; }
.np-meta-label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dim);
}
.np-meta-value { font-size: 19px; line-height: 1.3; color: var(--navy); }

.np-cta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 38px; padding: 13px 22px 13px 26px;
  border: 1.5px solid var(--navy); border-radius: 40px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  transition: background 0.3s, color 0.3s;
}
.np-cta:hover { background: var(--navy); color: var(--cream); }
.np-cta .np-cta-dot {
  width: 24px; height: 24px; border-radius: 50%; background: var(--klein); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}

/* RIGHT column â€” media + reading */
.np-media {
  position: relative; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden;
  background: #05080f; box-shadow: 0 22px 50px rgba(0,0,0,0.45);
}
.np-media video, .np-media img { width: 100%; height: 100%; border: 0; object-fit: cover; display: block; }

/* Hue tint to match the homepage thumbnail (hue-rotate 338deg) */
.np-tint-338 video, .np-tint-338 img { filter: saturate(1.15) hue-rotate(338deg); }

/* Click-to-play facade â€” blue play button, no native controls */
.np-facade { cursor: pointer; }
.np-play {
  position: absolute; inset: 0; margin: auto;
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(47,44,223,0.92); color: #f2ead9;
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
  transition: transform 0.25s, background 0.25s;
}
.np-facade:hover .np-play { transform: scale(1.08); background: #2f2cdf; }
.np-play svg { width: 26px; height: 26px; margin-left: 3px; }

.np-section { margin-top: 56px; }
.np-section + .np-section { margin-top: 48px; }
.np-section-label {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--klein); margin-bottom: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--rule);
}
.np-body { font-size: 22px; line-height: 1.58; color: var(--navy); max-width: 64ch; }
.np-body p { margin: 0 0 20px; }
.np-body p:last-child { margin-bottom: 0; }
.np-body em { font-style: italic; color: var(--klein); }

/* Secondary images under the reading */
.np-gallery { margin-top: 52px; display: grid; gap: 20px; }
.np-gallery img { width: 100%; border-radius: 8px; display: block; }

@media (max-width: 1024px) {
  .np { padding: 32px 44px 90px; }
  .np-grid { gap: 48px; }
}
@media (max-width: 820px) {
  .np-grid { grid-template-columns: 1fr; gap: 40px; }
  .np-left { position: static; }
  .np-brief { max-width: none; }
  .np-body { max-width: none; }
}
@media (max-width: 600px) {
  .np { padding: 24px 22px 70px; }
  .np-title { font-size: clamp(34px, 9vw, 48px); }
  .np-brief { font-size: 20px; }
  .np-body { font-size: 20px; }
}
</style>

<section class="np">

  <!-- EDIT: back link -->
  <a class="np-back" href="https://www.nogginusers.com/#portfolio">← Selected works</a>

  <div class="np-grid">

    <!-- ============ LEFT ============ -->
    <div class="np-left">
      <h1 class="np-title">Housing the Homeless</h1>
      <div class="np-award">Telly Award winner</div>
      <p class="np-brief">An abstract line drawing of a house, a fitting metaphor for the fragile, shifting nature of "home" experienced by so many.</p> 

      <div class="np-meta">
        <div class="np-meta-item">
          <div class="np-meta-label">Role</div>
          <div class="np-meta-value">Concept · Design · Illustration · Motion</div>
        </div>
        <div class="np-meta-item">
          <div class="np-meta-label">Client</div>
          <div class="np-meta-value">City of Columbia</div>
        </div>
        <div class="np-meta-item">
          <div class="np-meta-label">Deliverable</div>
          <div class="np-meta-value">Video · Web · Social media</div>
        </div>
      </div>
    </div>

    <!-- ============ RIGHT ============ -->
    <div class="np-right">

      <!-- Self-hosted MP4, click-to-play. Tap button to play, tap video to pause. -->
      <div class="np-media np-tint-338 np-facade" data-mp4="https://www.nogginusers.com/wp-content/uploads/Housing_the_Homeless.mp4">
        <img decoding="async" class="np-poster" src="https://vumbnail.com/1134327073.jpg" alt="Housing the Homeless" loading="lazy">
        <button class="np-play" aria-label="Play video"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 3l16 9-16 9z"/></svg></button>
      </div>

      <div class="np-section">
        <div class="np-section-label">The challenge</div>
        <div class="np-body">
          <p>After I created and animated several versions of the illustration, the producer requested the addition of a subtitle. Though it seemed like a small change, this adjustment significantly altered the layout and timing of the animation, <em>requiring a full rework to maintain balance and readability.</em></p> 
        </div>
      </div>

      <div class="np-section">
        <div class="np-section-label">The solution</div>
        <div class="np-body">
          <p>To meet the deadline, I integrated the subtitle and refined the animation accordingly. While the client was pleased with the outcome, the piece never felt fully resolved to me.</p> 
          <p>I've revisited and revised it several times since, <em>continuing to refine the movement and composition in pursuit of a version that truly feels complete.</em></p> 
        </div>
      </div>

    </div>
  </div>

  <script>
    document.querySelectorAll('.np-facade').forEach(function (f) {
      var poster = f.innerHTML;
      function mount() {
        f.addEventListener('click', function handler() {
          f.removeEventListener('click', handler);
          var v = document.createElement('video');
          v.src = f.getAttribute('data-mp4');
          v.playsInline = true; v.autoplay = true;
          v.style.width = '100%'; v.style.height = '100%'; v.style.objectFit = 'cover';
          v.addEventListener('click', function () { v.paused ? v.play() : v.pause(); });
          v.addEventListener('ended', function () { f.innerHTML = poster; mount(); });
          f.innerHTML = '';
          f.appendChild(v);
        });
      }
      mount();
    });
  </script>

</section>
</div>
			</div>
				
				
			</div></p>
<p>The post <a href="https://www.nogginusers.com/project/housing_the_homeless/">Housing the Homeless &#8211; Featured</a> appeared first on <a href="https://www.nogginusers.com">Nogginusers</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.nogginusers.com/project/housing_the_homeless/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Budget 102 &#8211; Public Service Announcement</title>
		<link>https://www.nogginusers.com/project/budget-102-public-service-announcement-2/</link>
					<comments>https://www.nogginusers.com/project/budget-102-public-service-announcement-2/#respond</comments>
		
		<dc:creator><![CDATA[Shana]]></dc:creator>
		<pubDate>Wed, 24 Mar 2021 02:38:12 +0000</pubDate>
				<guid isPermaLink="false">http://www.nogginusers.com/wordpress/?post_type=project&#038;p=28881</guid>

					<description><![CDATA[<p>The post <a href="https://www.nogginusers.com/project/budget-102-public-service-announcement-2/">Budget 102 &#8211; Public Service Announcement</a> appeared first on <a href="https://www.nogginusers.com">Nogginusers</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><div class="et_pb_section et_pb_section_23 et_pb_fullwidth_section et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_module et_pb_fullwidth_code et_pb_fullwidth_code_6">
				
				
				
				
				<div class="et_pb_code_inner"><!--
  NOGGINUSERS — PROJECT PAGE TEMPLATE (matches the homepage)
  Self-hosted MP4, click-to-play facade (no native controls). Replayable.
  DIVI: paste this whole block into a Fullwidth Code module (padding 0).
-->

<style>
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=Instrument+Serif:ital@0;1&family=Geist+Mono:wght@300..600&display=swap');

.np {
  --cream: #0c1428;
  --navy: #f2ead9;
  --klein: #7d83ff;
  --rule: rgba(241,234,217,0.16);
  --dim: rgba(241,234,217,0.6);
  background: var(--cream);
  color: var(--navy);
  font-family: 'Instrument Serif', Georgia, serif;
  padding: 40px 64px 110px;
  box-sizing: border-box;
}
.np * { box-sizing: border-box; }

/* Back link */
.np-back {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim); text-decoration: none;
  padding-bottom: 28px;
  transition: color 0.25s, gap 0.25s;
}
.np-back:hover { color: var(--klein); gap: 14px; }

/* Two-column grid */
.np-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 72px;
  align-items: start;
  border-top: 1px solid var(--rule);
  padding-top: 56px;
}

/* LEFT column — sticky so it stays while the right scrolls */
.np-left { position: sticky; top: 40px; }
.np-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--klein); margin-bottom: 20px;
}
.np-title {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  font-weight: 360;
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 1.0; letter-spacing: -0.025em; margin: 0;
}
.np-brief {
  font-size: 23px; line-height: 1.45; color: var(--navy);
  margin: 26px 0 0; max-width: 30ch;
}

/* Meta block (labels) */
.np-meta { margin-top: 40px; display: grid; gap: 22px; }
.np-meta-item { display: grid; gap: 5px; }
.np-meta-label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dim);
}
.np-meta-value { font-size: 19px; line-height: 1.3; color: var(--navy); }

.np-cta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 38px; padding: 13px 22px 13px 26px;
  border: 1.5px solid var(--navy); border-radius: 40px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  transition: background 0.3s, color 0.3s;
}
.np-cta:hover { background: var(--navy); color: var(--cream); }
.np-cta .np-cta-dot {
  width: 24px; height: 24px; border-radius: 50%; background: var(--klein); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}

/* RIGHT column — media + reading */
.np-media {
  position: relative; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden;
  background: #05080f; box-shadow: 0 22px 50px rgba(0,0,0,0.45);
}
.np-media video, .np-media img { width: 100%; height: 100%; border: 0; object-fit: cover; display: block; }

/* Click-to-play facade — blue play button, no native controls */
.np-facade { cursor: pointer; }
.np-play {
  position: absolute; inset: 0; margin: auto;
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(47,44,223,0.92); color: #f2ead9;
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
  transition: transform 0.25s, background 0.25s;
}
.np-facade:hover .np-play { transform: scale(1.08); background: #2f2cdf; }
.np-play svg { width: 26px; height: 26px; margin-left: 3px; }

.np-section { margin-top: 56px; }
.np-section + .np-section { margin-top: 48px; }
.np-section-label {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--klein); margin-bottom: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--rule);
}
.np-body {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 30, "SOFT" 30, "WONK" 0;
  font-weight: 330;
  font-size: 21px; line-height: 1.6; color: var(--navy); max-width: 58ch;
}
.np-body p { margin: 0 0 20px; }
.np-body p:last-child { margin-bottom: 0; }
.np-body em { font-style: italic; color: var(--klein); }

/* Secondary images under the reading */
.np-gallery { margin-top: 52px; display: grid; gap: 20px; }
.np-gallery img { width: 100%; border-radius: 8px; display: block; }

@media (max-width: 1024px) {
  .np { padding: 32px 44px 90px; }
  .np-grid { gap: 48px; }
}
@media (max-width: 820px) {
  .np-grid { grid-template-columns: 1fr; gap: 40px; }
  .np-left { position: static; }
  .np-brief { max-width: none; }
  .np-body { max-width: none; }
}
@media (max-width: 600px) {
  .np { padding: 24px 22px 70px; }
  .np-title { font-size: clamp(34px, 9vw, 48px); }
  .np-brief { font-size: 20px; }
  .np-body { font-size: 20px; }
}
</style>

<section class="np">

  <!-- EDIT: back link -->
  <a class="np-back" href="https://www.nogginusers.com/#portfolio">← Selected works</a>

  <div class="np-grid">

    <!-- ============ LEFT ============ -->
    <div class="np-left">
      <h1 class="np-title">Budget 102</h1>
      <p class="np-brief">“What does it take to keep a city running?” A PSA where a man runs past roads, playgrounds, and fire engines, each tagged with its dollar value, showing how taxes fund everyday city services.</p> 

      <div class="np-meta">
        <div class="np-meta-item">
          <div class="np-meta-label">Role</div>
          <div class="np-meta-value">Concept · Design · Illustration · Motion</div>
        </div>
        <div class="np-meta-item">
          <div class="np-meta-label">Client</div>
          <div class="np-meta-value">City of Columbia</div>
        </div>
        <div class="np-meta-item">
          <div class="np-meta-label">Deliverable</div>
          <div class="np-meta-value">Video · Web · Social media</div>
        </div>
      </div>
    </div>

    <!-- ============ RIGHT ============ -->
    <div class="np-right">

      <!-- Self-hosted MP4, click-to-play. Tap button to play, tap video to pause, replay when finished. -->
      <div class="np-media np-facade" data-mp4="https://www.nogginusers.com/wp-content/uploads/Budget_102.mp4">
        <img decoding="async" class="np-poster" src="https://vumbnail.com/153164877.jpg" alt="Budget 102 public service announcement" loading="lazy">
        <button class="np-play" aria-label="Play video"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 3l16 9-16 9z"/></svg></button>
      </div>

      <div class="np-section">
        <div class="np-section-label">The challenge</div>
        <div class="np-body">
          <p>The challenge was to communicate the real cost of maintaining city services in a way that felt engaging rather than bureaucratic, abstract budget numbers needed to become something the public could quickly understand.</p> 
          <p>The project also required <em>close collaboration with videographers across multiple locations with limited resources.</em></p> 
        </div>
      </div>

      <div class="np-section">
        <div class="np-section-label">The solution</div>
        <div class="np-body">
          <p>I developed a concept inspired by <em>Rocky</em>: a man running through town past fire engines, police cars, roads, and playgrounds, each labeled with its cost. The runner symbolized both the working taxpayer and the city itself.</p> 
          <p>For visual style I drew from Budweiser commercials, a gritty, industrial aesthetic matching the city’s infrastructure. A City of Columbia employee volunteered as the runner; I created the shot list and collaborated closely with videographers to capture the action.</p> 
        </div>
      </div>

    </div>
  </div>

  <script>
    document.querySelectorAll('.np-facade').forEach(function (f) {
      var poster = f.innerHTML;
      function mount() {
        f.addEventListener('click', function handler() {
          f.removeEventListener('click', handler);
          var v = document.createElement('video');
          v.src = f.getAttribute('data-mp4');
          v.playsInline = true; v.autoplay = true;
          v.style.width = '100%'; v.style.height = '100%'; v.style.objectFit = 'cover';
          v.addEventListener('click', function () { v.paused ? v.play() : v.pause(); });
          v.addEventListener('ended', function () { f.innerHTML = poster; mount(); });
          f.innerHTML = '';
          f.appendChild(v);
        });
      }
      mount();
    });
  </script>

</section></div>
			</div>
				
				
			</div></p>
<p>The post <a href="https://www.nogginusers.com/project/budget-102-public-service-announcement-2/">Budget 102 &#8211; Public Service Announcement</a> appeared first on <a href="https://www.nogginusers.com">Nogginusers</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.nogginusers.com/project/budget-102-public-service-announcement-2/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Student Diversity Writings &#8211; Featured</title>
		<link>https://www.nogginusers.com/project/como-diversity-writings-featured/</link>
					<comments>https://www.nogginusers.com/project/como-diversity-writings-featured/#respond</comments>
		
		<dc:creator><![CDATA[Shana]]></dc:creator>
		<pubDate>Wed, 24 Mar 2021 02:38:24 +0000</pubDate>
				<guid isPermaLink="false">http://www.nogginusers.com/wordpress/?post_type=project&#038;p=28882</guid>

					<description><![CDATA[<p>The post <a href="https://www.nogginusers.com/project/como-diversity-writings-featured/">Student Diversity Writings &#8211; Featured</a> appeared first on <a href="https://www.nogginusers.com">Nogginusers</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><div class="et_pb_section et_pb_section_27 et_pb_fullwidth_section et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_module et_pb_fullwidth_code et_pb_fullwidth_code_7">
				
				
				
				
				<div class="et_pb_code_inner"><!--
  NOGGINUSERS — PROJECT PAGE TEMPLATE (matches the homepage)
  Self-hosted MP4, click-to-play facade (no native controls). Replayable.
  DIVI: paste this whole block into a Fullwidth Code module (padding 0).
-->

<style>
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=Instrument+Serif:ital@0;1&family=Geist+Mono:wght@300..600&display=swap');

.np {
  --cream: #0c1428;
  --navy: #f2ead9;
  --klein: #7d83ff;
  --rule: rgba(241,234,217,0.16);
  --dim: rgba(241,234,217,0.6);
  background: var(--cream);
  color: var(--navy);
  font-family: 'Instrument Serif', Georgia, serif;
  padding: 40px 64px 110px;
  box-sizing: border-box;
}
.np * { box-sizing: border-box; }

/* Back link */
.np-back {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim); text-decoration: none;
  padding-bottom: 28px;
  transition: color 0.25s, gap 0.25s;
}
.np-back:hover { color: var(--klein); gap: 14px; }

/* Two-column grid */
.np-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 72px;
  align-items: start;
  border-top: 1px solid var(--rule);
  padding-top: 56px;
}

/* LEFT column — sticky so it stays while the right scrolls */
.np-left { position: sticky; top: 40px; }
.np-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--klein); margin-bottom: 20px;
}
.np-title {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  font-weight: 360;
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 1.0; letter-spacing: -0.025em; margin: 0;
  color: #f2ead9;
}
.np-brief {
  font-size: 23px; line-height: 1.45; color: var(--navy);
  margin: 26px 0 0; max-width: 30ch;
}

/* Meta block (labels) */
.np-meta { margin-top: 40px; display: grid; gap: 22px; }
.np-meta-item { display: grid; gap: 5px; }
.np-meta-label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dim);
}
.np-meta-value { font-size: 19px; line-height: 1.3; color: var(--navy); }

.np-cta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 38px; padding: 13px 22px 13px 26px;
  border: 1.5px solid var(--navy); border-radius: 40px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  transition: background 0.3s, color 0.3s;
}
.np-cta:hover { background: var(--navy); color: var(--cream); }
.np-cta .np-cta-dot {
  width: 24px; height: 24px; border-radius: 50%; background: var(--klein); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}

/* RIGHT column — media + reading */
.np-media {
  position: relative; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden;
  background: #05080f; box-shadow: 0 22px 50px rgba(0,0,0,0.45);
}
.np-media video, .np-media img { width: 100%; height: 100%; border: 0; object-fit: cover; display: block; }

/* Click-to-play facade — blue play button, no native controls */
.np-facade { cursor: pointer; }
.np-play {
  position: absolute; inset: 0; margin: auto;
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(47,44,223,0.92); color: #f2ead9;
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
  transition: transform 0.25s, background 0.25s;
}
.np-facade:hover .np-play { transform: scale(1.08); background: #2f2cdf; }
.np-play svg { width: 26px; height: 26px; margin-left: 3px; }

.np-section { margin-top: 56px; }
.np-section + .np-section { margin-top: 48px; }
.np-section-label {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--klein); margin-bottom: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--rule);
}
.np-body {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 30, "SOFT" 30, "WONK" 0;
  font-weight: 330;
  font-size: 21px; line-height: 1.6; color: var(--navy); max-width: 58ch;
}
.np-body p { margin: 0 0 20px; }
.np-body p:last-child { margin-bottom: 0; }
.np-body em { font-style: italic; color: var(--klein); }

/* Secondary images under the reading */
.np-gallery { margin-top: 52px; display: grid; gap: 20px; }
.np-gallery img { width: 100%; border-radius: 8px; display: block; }

@media (max-width: 1024px) {
  .np { padding: 32px 44px 90px; }
  .np-grid { gap: 48px; }
}
@media (max-width: 820px) {
  .np-grid { grid-template-columns: 1fr; gap: 40px; }
  .np-left { position: static; }
  .np-brief { max-width: none; }
  .np-body { max-width: none; }
}
@media (max-width: 600px) {
  .np { padding: 24px 22px 70px; }
  .np-title { font-size: clamp(34px, 9vw, 48px); }
  .np-brief { font-size: 20px; }
  .np-body { font-size: 20px; }
}
</style>

<section class="np">

  <!-- EDIT: back link -->
  <a class="np-back" href="https://www.nogginusers.com/#portfolio">← Selected works</a>

  <div class="np-grid">

    <!-- ============ LEFT ============ -->
    <div class="np-left">
      <h1 class="np-title">Student Diversity Writings</h1>
      <p class="np-brief">A multimedia video that added a playful visual twist to students’ poetry readings at the city’s annual <em>Celebrating Diversity</em> event.</p> 

      <div class="np-meta">
        <div class="np-meta-item">
          <div class="np-meta-label">Role</div>
          <div class="np-meta-value">Concept · Design · Illustration · Motion</div>
        </div>
        <div class="np-meta-item">
          <div class="np-meta-label">Client</div>
          <div class="np-meta-value">City of Columbia</div>
        </div>
        <div class="np-meta-item">
          <div class="np-meta-label">Deliverable</div>
          <div class="np-meta-value">Video · Web · Social media</div>
        </div>
      </div>
    </div>

    <!-- ============ RIGHT ============ -->
    <div class="np-right">

      <!-- Self-hosted MP4, click-to-play. Tap button to play, tap video to pause, replay when finished. -->
      <div class="np-media np-facade" data-mp4="https://www.nogginusers.com/wp-content/uploads/student_diversity_writings_final_v1-720p.mp4">
        <img decoding="async" class="np-poster" src="https://vumbnail.com/119251978.jpg" alt="Student Diversity Writings multimedia titles" loading="lazy">
        <button class="np-play" aria-label="Play video"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 3l16 9-16 9z"/></svg></button>
      </div>

      <div class="np-section">
        <div class="np-section-label">The challenge</div>
        <div class="np-body">
          <p>The producer provided a blank white canvas behind talking heads and challenged me to “use your creativity.” The goal was <em>keeping the audience engaged visually while honoring the students’ words.</em></p> 
        </div>
      </div>

      <div class="np-section">
        <div class="np-section-label">The solution</div>
        <div class="np-body">
          <p>I overlaid playful illustrations, subtle animations, and colorful typography to complement the students’ readings without distracting from them.</p> 
          <p>The result was a lively video that <em>enhanced the poetry and celebrated the creativity and voices of the students.</em></p> 
        </div>
      </div>

    </div>
  </div>

  <script>
    document.querySelectorAll('.np-facade').forEach(function (f) {
      var poster = f.innerHTML;
      function mount() {
        f.addEventListener('click', function handler() {
          f.removeEventListener('click', handler);
          var v = document.createElement('video');
          v.src = f.getAttribute('data-mp4');
          v.playsInline = true; v.autoplay = true;
          v.style.width = '100%'; v.style.height = '100%'; v.style.objectFit = 'cover';
          v.addEventListener('click', function () { v.paused ? v.play() : v.pause(); });
          v.addEventListener('ended', function () { f.innerHTML = poster; mount(); });
          f.innerHTML = '';
          f.appendChild(v);
        });
      }
      mount();
    });
  </script>

</section></div>
			</div>
				
				
			</div></p>
<p>The post <a href="https://www.nogginusers.com/project/como-diversity-writings-featured/">Student Diversity Writings &#8211; Featured</a> appeared first on <a href="https://www.nogginusers.com">Nogginusers</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.nogginusers.com/project/como-diversity-writings-featured/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>COMO Public Art App &#8211; Featured</title>
		<link>https://www.nogginusers.com/project/como-public-art-app-featured/</link>
					<comments>https://www.nogginusers.com/project/como-public-art-app-featured/#respond</comments>
		
		<dc:creator><![CDATA[Shana]]></dc:creator>
		<pubDate>Wed, 24 Mar 2021 02:35:32 +0000</pubDate>
				<guid isPermaLink="false">http://www.nogginusers.com/wordpress/?post_type=project&#038;p=28871</guid>

					<description><![CDATA[<p>The post <a href="https://www.nogginusers.com/project/como-public-art-app-featured/">COMO Public Art App &#8211; Featured</a> appeared first on <a href="https://www.nogginusers.com">Nogginusers</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><div class="et_pb_section et_pb_section_31 et_pb_fullwidth_section et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_module et_pb_fullwidth_code et_pb_fullwidth_code_8">
				
				
				
				
				<div class="et_pb_code_inner"><!--
  NOGGINUSERS — PROJECT PAGE TEMPLATE (matches the homepage)
  Self-hosted MP4, click-to-play facade (no native controls). Replayable.
  DIVI: paste this whole block into a Fullwidth Code module (padding 0).
-->

<style>
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=Instrument+Serif:ital@0;1&family=Geist+Mono:wght@300..600&display=swap');

.np {
  --cream: #0c1428;
  --navy: #f2ead9;
  --klein: #7d83ff;
  --rule: rgba(241,234,217,0.16);
  --dim: rgba(241,234,217,0.6);
  background: var(--cream);
  color: var(--navy);
  font-family: 'Instrument Serif', Georgia, serif;
  padding: 40px 64px 110px;
  box-sizing: border-box;
}
.np * { box-sizing: border-box; }

/* Back link */
.np-back {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim); text-decoration: none;
  padding-bottom: 28px;
  transition: color 0.25s, gap 0.25s;
}
.np-back:hover { color: var(--klein); gap: 14px; }

/* Two-column grid */
.np-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 72px;
  align-items: start;
  border-top: 1px solid var(--rule);
  padding-top: 56px;
}

/* LEFT column — sticky so it stays while the right scrolls */
.np-left { position: sticky; top: 40px; }
.np-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--klein); margin-bottom: 20px;
}
.np-title {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  font-weight: 360;
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 1.0; letter-spacing: -0.025em; margin: 0;
  color: #f2ead9;
}
.np-brief {
  font-size: 23px; line-height: 1.45; color: var(--navy);
  margin: 26px 0 0; max-width: 30ch;
}
.np-award {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 16px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--klein);
}

/* Meta block (labels) */
.np-meta { margin-top: 40px; display: grid; gap: 22px; }
.np-meta-item { display: grid; gap: 5px; }
.np-meta-label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dim);
}
.np-meta-value { font-size: 19px; line-height: 1.3; color: var(--navy); }

.np-cta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 38px; padding: 13px 22px 13px 26px;
  border: 1.5px solid var(--navy); border-radius: 40px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  transition: background 0.3s, color 0.3s;
}
.np-cta:hover { background: var(--navy); color: var(--cream); }
.np-cta .np-cta-dot {
  width: 24px; height: 24px; border-radius: 50%; background: var(--klein); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}

/* RIGHT column — media + reading */
.np-media {
  position: relative; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden;
  background: #05080f; box-shadow: 0 22px 50px rgba(0,0,0,0.45);
}
.np-media video, .np-media img { width: 100%; height: 100%; border: 0; object-fit: cover; display: block; }

/* Click-to-play facade — blue play button, no native controls */
.np-facade { cursor: pointer; }
.np-play {
  position: absolute; inset: 0; margin: auto;
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(47,44,223,0.92); color: #f2ead9;
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
  transition: transform 0.25s, background 0.25s;
}
.np-facade:hover .np-play { transform: scale(1.08); background: #2f2cdf; }
.np-play svg { width: 26px; height: 26px; margin-left: 3px; }

.np-section { margin-top: 56px; }
.np-section + .np-section { margin-top: 48px; }
.np-section-label {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--klein); margin-bottom: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--rule);
}
.np-body {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 30, "SOFT" 30, "WONK" 0;
  font-weight: 330;
  font-size: 21px; line-height: 1.6; color: var(--navy); max-width: 58ch;
}
.np-body p { margin: 0 0 20px; }
.np-body p:last-child { margin-bottom: 0; }
.np-body em { font-style: italic; color: var(--klein); }

/* Secondary images under the reading */
.np-gallery { margin-top: 52px; display: grid; gap: 20px; }
.np-gallery img { width: 100%; border-radius: 8px; display: block; }

@media (max-width: 1024px) {
  .np { padding: 32px 44px 90px; }
  .np-grid { gap: 48px; }
}
@media (max-width: 820px) {
  .np-grid { grid-template-columns: 1fr; gap: 40px; }
  .np-left { position: static; }
  .np-brief { max-width: none; }
  .np-body { max-width: none; }
}
@media (max-width: 600px) {
  .np { padding: 24px 22px 70px; }
  .np-title { font-size: clamp(34px, 9vw, 48px); }
  .np-brief { font-size: 20px; }
  .np-body { font-size: 20px; }
}
</style>

<section class="np">

  <!-- EDIT: back link -->
  <a class="np-back" href="https://www.nogginusers.com/#portfolio">← Selected works</a>

  <div class="np-grid">

    <!-- ============ LEFT ============ -->
    <div class="np-left">
      <h1 class="np-title">Columbia Public Art Tour</h1>
      <div class="np-award">★ Telly Award winner</div>
      <p class="np-brief">Imagery swipes across the screen just like the app it promotes, a playful, educational tour of Columbia’s local sculptures and public art.</p> 

      <div class="np-meta">
        <div class="np-meta-item">
          <div class="np-meta-label">Role</div>
          <div class="np-meta-value">Concept · Design · Illustration · Motion</div>
        </div>
        <div class="np-meta-item">
          <div class="np-meta-label">Client</div>
          <div class="np-meta-value">City of Columbia</div>
        </div>
        <div class="np-meta-item">
          <div class="np-meta-label">Deliverable</div>
          <div class="np-meta-value">Video · Web · Social media</div>
        </div>
      </div>
    </div>

    <!-- ============ RIGHT ============ -->
    <div class="np-right">

      <!-- Self-hosted MP4, click-to-play. Tap button to play, tap video to pause, replay when finished. -->
      <div class="np-media np-facade" data-mp4="https://www.nogginusers.com/wp-content/uploads/Columbia_Public_Art_Otocast_App-2.mp4">
        <img decoding="async" class="np-poster" src="https://vumbnail.com/117618332.jpg" alt="Columbia Public Art Tour title sequence" loading="lazy">
        <button class="np-play" aria-label="Play video"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 3l16 9-16 9z"/></svg></button>
      </div>

      <div class="np-section">
        <div class="np-section-label">The challenge</div>
        <div class="np-body">
          <p>The producer requested that the title sequence mimic the fun, homemade aesthetic of the Buzzfeed website. The challenge was to <em>translate that casual feel into a dynamic video title.</em></p> 
        </div>
      </div>

      <div class="np-section">
        <div class="np-section-label">The solution</div>
        <div class="np-body">
          <p>I combined the producer’s images and video with a bold, colorful typeface inspired by Buzzfeed’s signature style.</p> 
          <p>To reinforce the app’s interactive concept, I animated the title so it <em>swiped across the screen, a playful, tactile feel that mirrored exploring the city’s art through the app.</em></p> 
        </div>
      </div>

    </div>
  </div>

  <script>
    document.querySelectorAll('.np-facade').forEach(function (f) {
      var poster = f.innerHTML;
      function mount() {
        f.addEventListener('click', function handler() {
          f.removeEventListener('click', handler);
          var v = document.createElement('video');
          v.src = f.getAttribute('data-mp4');
          v.playsInline = true; v.autoplay = true;
          v.style.width = '100%'; v.style.height = '100%'; v.style.objectFit = 'cover';
          v.addEventListener('click', function () { v.paused ? v.play() : v.pause(); });
          v.addEventListener('ended', function () { f.innerHTML = poster; mount(); });
          f.innerHTML = '';
          f.appendChild(v);
        });
      }
      mount();
    });
  </script>

</section></div>
			</div>
				
				
			</div></p>
<p>The post <a href="https://www.nogginusers.com/project/como-public-art-app-featured/">COMO Public Art App &#8211; Featured</a> appeared first on <a href="https://www.nogginusers.com">Nogginusers</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.nogginusers.com/project/como-public-art-app-featured/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Undercover Art &#8211; Featured</title>
		<link>https://www.nogginusers.com/project/undercover-art-featured/</link>
					<comments>https://www.nogginusers.com/project/undercover-art-featured/#respond</comments>
		
		<dc:creator><![CDATA[Shana]]></dc:creator>
		<pubDate>Wed, 24 Mar 2021 02:31:09 +0000</pubDate>
				<guid isPermaLink="false">http://www.nogginusers.com/wordpress/?post_type=project&#038;p=28863</guid>

					<description><![CDATA[<p>The post <a href="https://www.nogginusers.com/project/undercover-art-featured/">Undercover Art &#8211; Featured</a> appeared first on <a href="https://www.nogginusers.com">Nogginusers</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><div class="et_pb_section et_pb_section_35 et_pb_fullwidth_section et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_module et_pb_fullwidth_code et_pb_fullwidth_code_9">
				
				
				
				
				<div class="et_pb_code_inner"><!--
  NOGGINUSERS — PROJECT PAGE TEMPLATE (matches the homepage)
  Self-hosted MP4, click-to-play facade (no native controls). Replayable.
-->

<style>
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=Instrument+Serif:ital@0;1&family=Geist+Mono:wght@300..600&display=swap');

.np {
  --cream: #0c1428;
  --navy: #f2ead9;
  --klein: #7d83ff;
  --rule: rgba(241,234,217,0.16);
  --dim: rgba(241,234,217,0.6);
  background: var(--cream);
  color: var(--navy);
  font-family: 'Instrument Serif', Georgia, serif;
  padding: 40px 64px 110px;
  box-sizing: border-box;
}
.np * { box-sizing: border-box; }

.np-back {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim); text-decoration: none;
  padding-bottom: 28px;
  transition: color 0.25s, gap 0.25s;
}
.np-back:hover { color: var(--klein); gap: 14px; }

.np-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 72px;
  align-items: start;
  border-top: 1px solid var(--rule);
  padding-top: 56px;
}

.np-left { position: sticky; top: 40px; }
.np-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--klein); margin-bottom: 20px;
}
.np-title {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  font-weight: 360;
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 1.0; letter-spacing: -0.025em; margin: 0;
  color: #f2ead9;
}
.np-brief {
  font-size: 23px; line-height: 1.45; color: var(--navy);
  margin: 26px 0 0; max-width: 30ch;
}

.np-meta { margin-top: 40px; display: grid; gap: 22px; }
.np-meta-item { display: grid; gap: 5px; }
.np-meta-label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dim);
}
.np-meta-value { font-size: 19px; line-height: 1.3; color: var(--navy); }

.np-cta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 38px; padding: 13px 22px 13px 26px;
  border: 1.5px solid var(--navy); border-radius: 40px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  transition: background 0.3s, color 0.3s;
}
.np-cta:hover { background: var(--navy); color: var(--cream); }
.np-cta .np-cta-dot {
  width: 24px; height: 24px; border-radius: 50%; background: var(--klein); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}

.np-media {
  position: relative; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden;
  background: #05080f; box-shadow: 0 22px 50px rgba(0,0,0,0.45);
}
.np-media video, .np-media img { width: 100%; height: 100%; border: 0; object-fit: cover; display: block; }

.np-facade { cursor: pointer; }
.np-play {
  position: absolute; inset: 0; margin: auto;
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(47,44,223,0.92); color: #f2ead9;
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
  transition: transform 0.25s, background 0.25s;
}
.np-facade:hover .np-play { transform: scale(1.08); background: #2f2cdf; }
.np-play svg { width: 26px; height: 26px; margin-left: 3px; }

.np-section { margin-top: 56px; }
.np-section + .np-section { margin-top: 48px; }
.np-section-label {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--klein); margin-bottom: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--rule);
}
.np-body {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 30, "SOFT" 30, "WONK" 0;
  font-weight: 330;
  font-size: 21px; line-height: 1.6; color: var(--navy); max-width: 58ch;
}
.np-body p { margin: 0 0 20px; }
.np-body p:last-child { margin-bottom: 0; }
.np-body em { font-style: italic; color: var(--klein); }

.np-gallery { margin-top: 52px; display: grid; gap: 20px; }
.np-gallery img { width: 100%; border-radius: 8px; display: block; }

@media (max-width: 1024px) {
  .np { padding: 32px 44px 90px; }
  .np-grid { gap: 48px; }
}
@media (max-width: 820px) {
  .np-grid { grid-template-columns: 1fr; gap: 40px; }
  .np-left { position: static; }
  .np-brief { max-width: none; }
  .np-body { max-width: none; }
}
@media (max-width: 600px) {
  .np { padding: 24px 22px 70px; }
  .np-title { font-size: clamp(34px, 9vw, 48px); }
  .np-brief { font-size: 20px; }
  .np-body { font-size: 20px; }
}
</style>

<section class="np">

  <a class="np-back" href="https://www.nogginusers.com/#portfolio">← Selected works</a>

  <div class="np-grid">

    <div class="np-left">
      <h1 class="np-title">Undercover Art</h1>
      <p class="np-brief">A title that reveals "Art" hidden in an unexpected mural, blending mystery and play to showcase creativity in an unlikely location.</p> 

      <div class="np-meta">
        <div class="np-meta-item">
          <div class="np-meta-label">Role</div>
          <div class="np-meta-value">Concept · Design · Illustration · Motion</div>
        </div>
        <div class="np-meta-item">
          <div class="np-meta-label">Client</div>
          <div class="np-meta-value">City of Columbia</div>
        </div>
        <div class="np-meta-item">
          <div class="np-meta-label">Deliverable</div>
          <div class="np-meta-value">Video · Web · Social media</div>
        </div>
      </div>
    </div>

    <div class="np-right">

      <!-- Self-hosted MP4, click-to-play. Tap button to play, tap video to pause, replay when finished. -->
      <div class="np-media np-facade" data-mp4="https://www.nogginusers.com/wp-content/uploads/under_cover_art_new_v2-720p.mp4">
        <img decoding="async" class="np-poster" src="https://vumbnail.com/184923963.jpg" alt="Undercover Art title sequence" loading="lazy">
        <button class="np-play" aria-label="Play video"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 3l16 9-16 9z"/></svg></button>
      </div>

      <div class="np-section">
        <div class="np-section-label">The challenge</div>
        <div class="np-body">
          <p>This video highlighted a community mural painted on an unusual City of Columbia waterway structure. Representing it visually was challenging because it was the work of multiple artists, each contributing different styles and colors.</p> 
          <p>The task was to <em>create a title that captured the mural's energy while introducing a sense of discovery.</em></p> 
        </div>
      </div>

      <div class="np-section">
        <div class="np-section-label">The solution</div>
        <div class="np-body">
          <p>I visited the mural site and selected a section with a compelling palette and texture. Using the title "Undercover Art," I animated the words so "Art" stayed hidden until "Undercover" moved up the screen, then "Art" bounces playfully into view before zooming out to reveal the full mural.</p> 
          <p>The sequence balances whimsy and intrigue: <em>the playful animation draws viewers in, while the "Undercover" concept echoes discovering hidden art in unexpected places.</em></p> 
        </div>
      </div>

    </div>
  </div>

  <script>
    document.querySelectorAll('.np-facade').forEach(function (f) {
      var poster = f.innerHTML;
      function mount() {
        f.addEventListener('click', function handler() {
          f.removeEventListener('click', handler);
          var v = document.createElement('video');
          v.src = f.getAttribute('data-mp4');
          v.playsInline = true; v.autoplay = true;
          v.style.width = '100%'; v.style.height = '100%'; v.style.objectFit = 'cover';
          v.addEventListener('click', function () { v.paused ? v.play() : v.pause(); });
          v.addEventListener('ended', function () { f.innerHTML = poster; mount(); });
          f.innerHTML = '';
          f.appendChild(v);
        });
      }
      mount();
    });
  </script>
</section></div>
			</div>
				
				
			</div></p>
<p>The post <a href="https://www.nogginusers.com/project/undercover-art-featured/">Undercover Art &#8211; Featured</a> appeared first on <a href="https://www.nogginusers.com">Nogginusers</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.nogginusers.com/project/undercover-art-featured/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
