<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Taishi Walden's RSS Feed]]></title><description><![CDATA[Hey, I'm Taishi! I am passionate about project management, digital product design, and software development.]]></description><link>https://taishiwalden.com</link><generator>GatsbyJS</generator><lastBuildDate>Mon, 15 Dec 2025 16:41:49 GMT</lastBuildDate><item><title><![CDATA[Supply Chain ERP Implementation and Activation]]></title><description><![CDATA[Summary My team and I successfully implemented and optimized a modern Enterprise Resource Planning (ERP) system for a global retailer. This…]]></description><link>https://taishiwalden.com/blog/fortune100-consulting/</link><guid isPermaLink="false">https://taishiwalden.com/blog/fortune100-consulting/</guid><pubDate>Sat, 25 Oct 2025 03:00:00 GMT</pubDate><content:encoded>&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 62.576687116564415%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACZklEQVQoz3XSz0sqURQH8NlaztXEuZfxzh1phudgvxCSbBEuFLS0jbZIScoWo85UNqYEUQ2CBSZSYqJgf4jgJqxIeC6iTX/Po5levEXvszjce7lnc86XYlkWY8wZiIE1uH6C/zKvlCiKPM8jhFiWhRA6nU5BEH4ZCCH/fsUYI4QghAgh85FKJBKHh4dHR0cFQ6lUCgaDp6en1Wp1bm5uenoaIcRxHMaYYRhJklZWVkRRdDqdGGNqY2Pj/v7+5uam0Wi02+1SqZTL5RqNxuXlpaZpsiyvrq46HA4IYSAQUBQlnU7v7u76fD4IIRWJRPL5/M7OTqFQUBQlmUymUqlKpaKqaqVSubi4iEQiXq9XEIS1tbXz83Nd109OTpaXlz+bw+FwOp1OJpNbW1vb29uZTGZ9fd3j8czPz3s8HkmSFhYW/H7/7OxsMBis1+uapqmqGggEGIahXC6X2+3meZ4QIgiCKIosy1qtVpqmZ2ZmAABWq3VqagoAIEnS7e3t2dlZNpvlOO5zYPF4vFgsKoqSz+fNenBwcHx8rGlaNBpVVbVYLJbL5VgsBgAIhUKtVsvn830NrNPpvL6+DofD8Xj89PQ0mUxGo9FwOBwMBv1+fzQaPT4+vr+/d7tdi8WyublZrVbD4fBXc7vd/vj4mBh+G97e3p6fnx8eHl5eXnq9niAIi4uLPM8zDOP3+7PZ7NLSkrlqSpblZrN5fX19dXVVq9V0Xa/X67qu7+3t3d3d7e/vAwAghGYQIYQOhwMh9JUwm81G0zQAwGazfVfzQNO03W4nhJgh+Y7nd1opQoj7JzzPm9X1f38AOR/OyKX192gAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;This consulting engagement was for a Fortune 100 retailer in their supply chain product management organization.&quot; title=&quot;This consulting engagement was for a Fortune 100 retailer in their supply chain product management organization.&quot; src=&quot;/static/57d2f2a6c30034bc6c57ace7f2e10e3f/a6d36/fortune100-cover.png&quot; srcset=&quot;/static/57d2f2a6c30034bc6c57ace7f2e10e3f/222b7/fortune100-cover.png 163w,
/static/57d2f2a6c30034bc6c57ace7f2e10e3f/ff46a/fortune100-cover.png 325w,
/static/57d2f2a6c30034bc6c57ace7f2e10e3f/a6d36/fortune100-cover.png 650w,
/static/57d2f2a6c30034bc6c57ace7f2e10e3f/e548f/fortune100-cover.png 975w,
/static/57d2f2a6c30034bc6c57ace7f2e10e3f/21b4d/fortune100-cover.png 1280w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h2&gt;Summary&lt;/h2&gt;
&lt;p&gt;My team and I successfully implemented and optimized a modern Enterprise Resource Planning (ERP) system for a global retailer. This 24-month engagement aimed to modernize the ERP and consolidate all geographies onto a global platform, aligning technology with marketplace demands to drive growth, improve profitability, and reduce operational costs. The initiative also strengthened the company&apos;s ability to process customer orders and returns efficiently across multiple geographies.&lt;/p&gt;
&lt;p&gt;Through targeted program management, stakeholder change management, and analytics-driven product development, we enhanced  the client&apos;s global supply chain technology capabilities, driving seamless ERP adoption and long-term product management maturity.&lt;/p&gt;
&lt;h3&gt;Challenge&lt;/h3&gt;
&lt;p&gt;The client&apos;s Supply Chain Technology team operates in a fast-paced, complex environment, managing multiple initiatives simultaneously. Organizational changes, team newness, and varying expertise levels resulted in unclear roles, inconsistent processes, and a lack of historical context for decision-making, slowing momentum during the ERP implementation. The global scope of the ERP rollout, with its cross-functional complexities and time zone differences, further intensified resource constraints and decision-making cycles. To address these challenges, the client sought our team&apos;s support to scale capabilities and accelerate delivery.&lt;/p&gt;
&lt;h3&gt;Solution&lt;/h3&gt;
&lt;p&gt;We provided expertise in program management, business analysis, and stakeholder change management to support the global ERP implementation:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Change Management and Go-Live Support&lt;/strong&gt;: We implemented a comprehensive change management strategy to onboard the North America region onto the Global ERP platform, including solution confirmation, stakeholder engagement, integrated testing, and knowledge transfer to foster user adoption and platform familiarity.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Stakeholder Engagement&lt;/strong&gt;: In alignment with the change management approach, we facilitated recurring forums such as monthly backlog refinement sessions with business leads from live geographies, providing a structured avenue for capturing pain points, gathering contextual feedback, and aligning on evolving requirements to continuously improve the ERP platform.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Data-Driven Product Management&lt;/strong&gt;: We drove the adoption of a product analytics platform, enabling real-time visibility into feature adoption, usage trends, and product health without heavily relying on our scarce engineering resources. In tandem, we developed a centralized in-app feedback portal and enhanced stakeholder engagement processes, creating a two-way channel for idea sharing, voting, and discussion. This shifted the organization from a reactive service model to a proactive, product-led approach, strengthening backlog management and enabling high-impact, user-centered enhancements.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;User Feedback and Measurement&lt;/strong&gt;: We implemented a Net Promoter Score (NPS) framework for over 3,000 internal business users, segmenting the feedback by persona and revenue contribution. This enabled leaders to prioritize high-impact enhancements and track adoption and satisfaction over time.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Continuous Product Improvement&lt;/strong&gt;: We established a structured backlog refinement process to bridge the gap between engineering and business stakeholders, enabling stakeholders to surface pain points, clarify requirements, and provide business context. This improved prioritization, ensured actionable ideas, and strengthened alignment between engineering and business.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;Results&lt;/h3&gt;
&lt;p&gt;By aligning technology with marketplace demands, my team and I successfully drove growth in market share, enhanced profitability, and reduced operational costs. The engagement delivered measurable, impactful outcomes for our client:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Strategic Growth Enablement&lt;/strong&gt;: Supported immediate ERP implementation goals and contributed to the client&apos;s long-term roadmap, reinforcing operational resilience and product management maturity.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Enhanced Operational Efficiency&lt;/strong&gt;: Leveraged analytics to reduce dependency on engineers for system performance metrics, freeing up resources for higher-priority development work. New capabilities such as tracking feature adoption and measuring KPIs by business segment enabled precise, data-informed analysis.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Improved User Experience&lt;/strong&gt;: Developed a centralized in-app feedback portal and enhanced stakeholder engagement processes, shifting the client from a reactive service model to a proactive, product-led approach. This empowered product managers to drive prioritization and road mapping efforts in alignment with business input.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;Client Testimonials&lt;/h3&gt;
&lt;blockquote&gt;
&lt;p&gt;“Thank you for your AMAZING support. You helped ensure the release was on track from start until finish. It was critical to have your full technical expertise during planning and super important to keep the deployment effective as we ramped down and ramped up the systems in scope. As opportunities and challenges were identified during execution, we made it to the finish line successfully. Truly appreciate your dedication and commitment.”&lt;/p&gt;
&lt;p&gt;– Senior Enterprise Manager&lt;/p&gt;
&lt;/blockquote&gt;
&lt;blockquote&gt;
&lt;p&gt;“Huge thank you for staging hundreds of cases for 100+ end users for training. No one else has successfully staged errors for end users to resolve! This is a huge advancement in the experience we can offer end users, and their preparedness for go-live. Your work directly supports business readiness!”&lt;/p&gt;
&lt;p&gt;– Transformational Change Lead&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;Skills&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;SAP S4 Hana&lt;/li&gt;
&lt;li&gt;Postman&lt;/li&gt;
&lt;li&gt;Pendo&lt;/li&gt;
&lt;li&gt;Change Management&lt;/li&gt;
&lt;/ul&gt;
&lt;style class=&quot;grvsc-styles&quot;&gt;
  .grvsc-container {
    overflow: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
    padding-top: 1rem;
    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));
    padding-bottom: 1rem;
    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));
    border-radius: 8px;
    border-radius: var(--grvsc-border-radius, 8px);
    font-feature-settings: normal;
    line-height: 1.4;
  }
  
  .grvsc-code {
    display: table;
  }
  
  .grvsc-line {
    display: table-row;
    box-sizing: border-box;
    width: 100%;
    position: relative;
  }
  
  .grvsc-line &gt; * {
    position: relative;
  }
  
  .grvsc-gutter-pad {
    display: table-cell;
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  .grvsc-gutter {
    display: table-cell;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter::before {
    content: attr(data-content);
  }
  
  .grvsc-source {
    display: table-cell;
    padding-left: 1.5rem;
    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));
    padding-right: 1.5rem;
    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
  }
  
  .grvsc-source:empty::after {
    content: &apos; &apos;;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter + .grvsc-source {
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  /* Line transformer styles */
  
  .grvsc-has-line-highlighting &gt; .grvsc-code &gt; .grvsc-line::before {
    content: &apos; &apos;;
    position: absolute;
    width: 100%;
  }
  
  .grvsc-line-diff-add::before {
    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));
  }
  
  .grvsc-line-diff-del::before {
    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));
  }
  
  .grvsc-line-number {
    padding: 0 2px;
    text-align: right;
    opacity: 0.7;
  }
  
&lt;/style&gt;</content:encoded></item><item><title><![CDATA[Company Website Redesign]]></title><description><![CDATA[Summary Forum Solutions, a boutique consulting firm, needed a refreshed digital presence to better reflect their expertise and company story…]]></description><link>https://taishiwalden.com/blog/forum-solutions-website-redesign/</link><guid isPermaLink="false">https://taishiwalden.com/blog/forum-solutions-website-redesign/</guid><pubDate>Mon, 20 Oct 2025 03:00:00 GMT</pubDate><content:encoded>&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 62.576687116564415%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAQBAgMF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABv1sU0kfB/8QAGxAAAQUBAQAAAAAAAAAAAAAAAgABAwQSFCH/2gAIAQEAAQUCltPsvR5wR14jTVcSYX//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAWEQEBAQAAAAAAAAAAAAAAAAAAARH/2gAIAQIBAT8BbX//xAAeEAACAQMFAAAAAAAAAAAAAAAAAQIRIjJCUZGhwf/aAAgBAQAGPwKKUR+GowVdyN3RlLk//8QAHhABAQABAwUAAAAAAAAAAAAAAREAITFhQXGBkdH/2gAIAQEAAT8hEAKa2OAkaSTFdg+H7hiIxoDbOtJeL7x4fbH/2gAMAwEAAgADAAAAELcP/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAERIUH/2gAIAQMBAT8QvSEf/8QAFhEAAwAAAAAAAAAAAAAAAAAAECFB/9oACAECAQE/EFAf/8QAHBABAAMAAgMAAAAAAAAAAAAAAQARITFBUWGR/9oACAEBAAE/ECxGGoq439gUt2wN3LDSmVze4xkJQK6cgKCV2gmdByXuA8KE/9k=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Image of an app UX mockup on Figma.&quot; title=&quot;Image of an app UX mockup on Figma.&quot; src=&quot;/static/b9b8c9e7302eb4c89e7f095409e76e76/6aca1/forum-solutions-website-redesign.jpg&quot; srcset=&quot;/static/b9b8c9e7302eb4c89e7f095409e76e76/d2f63/forum-solutions-website-redesign.jpg 163w,
/static/b9b8c9e7302eb4c89e7f095409e76e76/c989d/forum-solutions-website-redesign.jpg 325w,
/static/b9b8c9e7302eb4c89e7f095409e76e76/6aca1/forum-solutions-website-redesign.jpg 650w,
/static/b9b8c9e7302eb4c89e7f095409e76e76/7c09c/forum-solutions-website-redesign.jpg 975w,
/static/b9b8c9e7302eb4c89e7f095409e76e76/eea4a/forum-solutions-website-redesign.jpg 1280w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h2&gt;Summary&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://forumsolutionsllc.com&quot;&gt;Forum Solutions&lt;/a&gt;, a boutique consulting firm, needed a refreshed digital presence to better reflect their expertise and company story. The original website design was outdated, with inconsistent image usage, poor scaling, and a lack of clear visual hierarchy. The goal of the project was to modernize the site while respecting the existing brand guidelines.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Improved visual hierarchy by introducing strategic accent colors for CTAs and curated cohesive imagery to better align with the company’s story and values.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3&gt;Scope&lt;/h3&gt;
&lt;p&gt;Led the full redesign of Forum Solutions’ Squarespace website, focusing on enhancing the user experience, optimizing site performance, and aligning the visual identity with the firm&apos;s professional brand.&lt;/p&gt;
&lt;h3&gt;Design&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;• Maintained the original color palette, introducing a structured hierarchy to highlight key CTAs using brighter accent colors for improved user flow and engagement.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;• Optimized and replaced images to ensure consistency, better performance, and stronger storytelling aligned with the firm&apos;s messaging.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;• Refined layouts for clarity, accessibility, and responsiveness across devices, improving both aesthetics and functionality without disrupting the firm&apos;s established brand.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 62.576687116564415%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIEAQX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABd7Ms5ZaH/8QAHBAAAQQDAQAAAAAAAAAAAAAAAgABAwQREhMU/9oACAEBAAEFAjGTXvzrtaMk8GXetGS8kYr/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAVEQEBAAAAAAAAAAAAAAAAAAAAIf/aAAgBAgEBPwFH/8QAHhAAAQQBBQAAAAAAAAAAAAAAAQAREiECAxBhkaH/2gAIAQEABj8CrTKjEjLEe7PMoye+VT9r/8QAGhABAAMBAQEAAAAAAAAAAAAAAQARITFhcf/aAAgBAQABPyFVGr5BLhThRGg/IwK8KyEO1Ww4sex//9oADAMBAAIAAwAAABB37//EABYRAQEBAAAAAAAAAAAAAAAAAAAhcf/aAAgBAwEBPxDFf//EABcRAQADAAAAAAAAAAAAAAAAAAEQETH/2gAIAQIBAT8Qsdh//8QAHhABAAICAgMBAAAAAAAAAAAAAQARITFB8GFxodH/2gAIAQEAAT8QYiikR+zPh3X0Hkg6BZyDvMsR5bCxgGWqqBdaPRE8NaNu6n//2Q==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;before after home page&quot; title=&quot;before after home page&quot; src=&quot;/static/c7d4324c7c0223bc08ed9386c5adc113/6aca1/before-after-home-page.jpg&quot; srcset=&quot;/static/c7d4324c7c0223bc08ed9386c5adc113/d2f63/before-after-home-page.jpg 163w,
/static/c7d4324c7c0223bc08ed9386c5adc113/c989d/before-after-home-page.jpg 325w,
/static/c7d4324c7c0223bc08ed9386c5adc113/6aca1/before-after-home-page.jpg 650w,
/static/c7d4324c7c0223bc08ed9386c5adc113/7c09c/before-after-home-page.jpg 975w,
/static/c7d4324c7c0223bc08ed9386c5adc113/eea4a/before-after-home-page.jpg 1280w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 62.576687116564415%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMFBP/EABUBAQEAAAAAAAAAAAAAAAAAAAEA/9oADAMBAAIQAxAAAAFjsNRJZdC//8QAGhAAAwEAAwAAAAAAAAAAAAAAAQIDAAQSE//aAAgBAQABBQIxvvUJKlSWbl16qpfHf//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EAB8QAAIBAgcAAAAAAAAAAAAAAAABAhESEBMhIjFBUf/aAAgBAQAGPwLmBlybuS6RsuoLUhKvjw//xAAcEAEAAgIDAQAAAAAAAAAAAAABABEhMUFhceH/2gAIAQEAAT8hPwHvyLuAjdvpidXvcuQBFNbgC1cuN4iup//aAAwDAQACAAMAAAAQEz//xAAXEQEAAwAAAAAAAAAAAAAAAAABEBEh/9oACAEDAQE/EKByP//EABcRAQEBAQAAAAAAAAAAAAAAAAEAESH/2gAIAQIBAT8Q6mthf//EABwQAAICAwEBAAAAAAAAAAAAAAERACExQWFRgf/aAAgBAQABPxALWAALGDZq2udqF9jCwkEkei4QZdCh4oxK5p5NM9hGcn//2Q==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;before after career page&quot; title=&quot;before after career page&quot; src=&quot;/static/a062848d3b5c6f156e43a4237ac8e915/6aca1/before-after-career-page.jpg&quot; srcset=&quot;/static/a062848d3b5c6f156e43a4237ac8e915/d2f63/before-after-career-page.jpg 163w,
/static/a062848d3b5c6f156e43a4237ac8e915/c989d/before-after-career-page.jpg 325w,
/static/a062848d3b5c6f156e43a4237ac8e915/6aca1/before-after-career-page.jpg 650w,
/static/a062848d3b5c6f156e43a4237ac8e915/7c09c/before-after-career-page.jpg 975w,
/static/a062848d3b5c6f156e43a4237ac8e915/eea4a/before-after-career-page.jpg 1280w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 62.576687116564415%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABQAB/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAXR2cQSXq//EABwQAAEDBQAAAAAAAAAAAAAAAAEAAgMEEBIUMf/aAAgBAQABBQJS1WEu4Td3f//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABwQAAEDBQAAAAAAAAAAAAAAAAEAAhETIDEyof/aAAgBAQAGPwJObTBg5WnbP//EABoQAAICAwAAAAAAAAAAAAAAAAABESEQMUH/2gAIAQEAAT8hLY0UnYuOhoWL/9oADAMBAAIAAwAAABAv7//EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAwEBPxCsr//EABgRAQEAAwAAAAAAAAAAAAAAAAEAEUFR/9oACAECAQE/EBN2Tl//xAAdEAACAwACAwAAAAAAAAAAAAABIQARMWFxgbHB/9oACAEBAAE/EKIDvYcJVAjyzmAbWSI/IUAE3qfuYdT/2Q==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;before after contact page&quot; title=&quot;before after contact page&quot; src=&quot;/static/b340a943fa18abd4cabe6c593088604f/6aca1/before-after-contact-page.jpg&quot; srcset=&quot;/static/b340a943fa18abd4cabe6c593088604f/d2f63/before-after-contact-page.jpg 163w,
/static/b340a943fa18abd4cabe6c593088604f/c989d/before-after-contact-page.jpg 325w,
/static/b340a943fa18abd4cabe6c593088604f/6aca1/before-after-contact-page.jpg 650w,
/static/b340a943fa18abd4cabe6c593088604f/7c09c/before-after-contact-page.jpg 975w,
/static/b340a943fa18abd4cabe6c593088604f/eea4a/before-after-contact-page.jpg 1280w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;./images/forumsolutions/before-after-footer-page.jpeg&quot;
  alt=&quot;&quot;
  style=&quot;border-radius: 5px;&quot; /&gt;&lt;/p&gt;
&lt;h2&gt;Skills&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Squarespace&lt;/li&gt;
&lt;li&gt;Canva&lt;/li&gt;
&lt;/ul&gt;
&lt;style class=&quot;grvsc-styles&quot;&gt;
  .grvsc-container {
    overflow: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
    padding-top: 1rem;
    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));
    padding-bottom: 1rem;
    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));
    border-radius: 8px;
    border-radius: var(--grvsc-border-radius, 8px);
    font-feature-settings: normal;
    line-height: 1.4;
  }
  
  .grvsc-code {
    display: table;
  }
  
  .grvsc-line {
    display: table-row;
    box-sizing: border-box;
    width: 100%;
    position: relative;
  }
  
  .grvsc-line &gt; * {
    position: relative;
  }
  
  .grvsc-gutter-pad {
    display: table-cell;
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  .grvsc-gutter {
    display: table-cell;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter::before {
    content: attr(data-content);
  }
  
  .grvsc-source {
    display: table-cell;
    padding-left: 1.5rem;
    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));
    padding-right: 1.5rem;
    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
  }
  
  .grvsc-source:empty::after {
    content: &apos; &apos;;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter + .grvsc-source {
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  /* Line transformer styles */
  
  .grvsc-has-line-highlighting &gt; .grvsc-code &gt; .grvsc-line::before {
    content: &apos; &apos;;
    position: absolute;
    width: 100%;
  }
  
  .grvsc-line-diff-add::before {
    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));
  }
  
  .grvsc-line-diff-del::before {
    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));
  }
  
  .grvsc-line-number {
    padding: 0 2px;
    text-align: right;
    opacity: 0.7;
  }
  
&lt;/style&gt;</content:encoded></item><item><title><![CDATA[Turning an Image Into a Functional Web Game]]></title><description><![CDATA[View the live project: maedamarbles.netlify.app Summary Maeda Marbles is a web-based version of a traditional Japanese marble puzzle game I…]]></description><link>https://taishiwalden.com/blog/maedamarbles/</link><guid isPermaLink="false">https://taishiwalden.com/blog/maedamarbles/</guid><pubDate>Sun, 25 May 2025 03:00:00 GMT</pubDate><content:encoded>&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 62.576687116564415%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAABAAMBAAAAAAAAAAAAAAAAAAECAwX/xAAWAQEBAQAAAAAAAAAAAAAAAAABAgP/2gAMAwEAAhADEAAAAerbRnRJP//EABoQAQEAAgMAAAAAAAAAAAAAAAECAAMQIjH/2gAIAQEAAQUC20Tl11PEHHj/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAZEAADAAMAAAAAAAAAAAAAAAABEBEAITH/2gAIAQEABj8CFzlWw//EABoQAQACAwEAAAAAAAAAAAAAAAEAERAhUTH/2gAIAQEAAT8hHpW+SgIg8xeaNTTZAoqf/9oADAMBAAIAAwAAABCb/wD/xAAWEQADAAAAAAAAAAAAAAAAAAABEBH/2gAIAQMBAT8QoX//xAAXEQADAQAAAAAAAAAAAAAAAAABECER/9oACAECAQE/EMNq/8QAHBABAQEBAAIDAAAAAAAAAAAAAREAITFBUaGx/9oACAEBAAE/ELwqYfbBPJhw9/M6WPVQfXcOBKpTw6hQ5yTSfgTf/9k=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Image of Maeda Marbles, the web app which allows users to play a simple marble game.&quot; title=&quot;Image of Maeda Marbles, the web app which allows users to play a simple marble game.&quot; src=&quot;/static/feb77dae7c2be2db38880e3e40090496/6aca1/Maeda-Marbles-Hero.jpg&quot; srcset=&quot;/static/feb77dae7c2be2db38880e3e40090496/d2f63/Maeda-Marbles-Hero.jpg 163w,
/static/feb77dae7c2be2db38880e3e40090496/c989d/Maeda-Marbles-Hero.jpg 325w,
/static/feb77dae7c2be2db38880e3e40090496/6aca1/Maeda-Marbles-Hero.jpg 650w,
/static/feb77dae7c2be2db38880e3e40090496/7c09c/Maeda-Marbles-Hero.jpg 975w,
/static/feb77dae7c2be2db38880e3e40090496/01ab0/Maeda-Marbles-Hero.jpg 1300w,
/static/feb77dae7c2be2db38880e3e40090496/0f98f/Maeda-Marbles-Hero.jpg 1920w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h3&gt;View the live project: &lt;a href=&quot;https://maedamarbles.netlify.app/&quot;&gt;maedamarbles.netlify.app&lt;/a&gt;&lt;/h3&gt;
&lt;h2&gt;Summary&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;(https://maedamarbles.netlify.app/)&quot;&gt;Maeda Marbles&lt;/a&gt; is a web-based version of a traditional Japanese marble puzzle game I played growing up. The physical set I used to own was left behind in Japan, so I set out to recreate the experience digitally — making it accessible to anyone, anywhere. Built using Lovable.Dev, a natural language-to-code platform, this project blends childhood nostalgia with modern web development and prompt-based programming.&lt;/p&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 62.576687116564415%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAMBAgT/xAAVAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAABvtGxSyRP/8QAGhAAAgMBAQAAAAAAAAAAAAAAAQIDERIAIf/aAAgBAQABBQIG19rLrywZJj0kcAQf/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAHhAAAgICAgMAAAAAAAAAAAAAAAECERIhAzIzYXH/2gAIAQEABj8C80pasrf07sclySv2YORWTZ//xAAbEAEAAwEAAwAAAAAAAAAAAAABABEhMWGBkf/aAAgBAQABPyGovGQPPkOHdVvzHAe1uJeKUoHIyIpOhsQ6Tes//9oADAMBAAIAAwAAABCbz//EABYRAQEBAAAAAAAAAAAAAAAAABEAIf/aAAgBAwEBPxBwIv/EABcRAAMBAAAAAAAAAAAAAAAAAAABESH/2gAIAQIBAT8Q22jZ/8QAHhABAAEDBQEAAAAAAAAAAAAAAREAITFBUWGRoXH/2gAIAQEAAT8QRjbdE2DUQfdqVjjga4d+0hNGc7uKeEBMEKhEbtZxtEJTM7Z4pmZIvFi3lf/Z&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Image showing the various features of the Maeda Marbles game, such as sharing with friends, game logic, notifications, and leaderboard.&quot; title=&quot;Image showing the various features of the Maeda Marbles game, such as sharing with friends, game logic, notifications, and leaderboard.&quot; src=&quot;/static/8b91adbb3c75904664396d82d1182464/6aca1/Maeda-Marbles-Notifications.jpg&quot; srcset=&quot;/static/8b91adbb3c75904664396d82d1182464/d2f63/Maeda-Marbles-Notifications.jpg 163w,
/static/8b91adbb3c75904664396d82d1182464/c989d/Maeda-Marbles-Notifications.jpg 325w,
/static/8b91adbb3c75904664396d82d1182464/6aca1/Maeda-Marbles-Notifications.jpg 650w,
/static/8b91adbb3c75904664396d82d1182464/7c09c/Maeda-Marbles-Notifications.jpg 975w,
/static/8b91adbb3c75904664396d82d1182464/01ab0/Maeda-Marbles-Notifications.jpg 1300w,
/static/8b91adbb3c75904664396d82d1182464/0f98f/Maeda-Marbles-Notifications.jpg 1920w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h2&gt;How to Play&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;• Move a marble by jumping it vertically or horizontally over one adjacent marble into an empty cup.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;• The jumped-over marble is removed.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;• Continue jumping marbles until no more valid moves remain.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;• 🎯 Goal: End the game with only one marble left on the board.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;Why I Built It&lt;/h2&gt;
&lt;p&gt;This game was a core memory from my childhood in Japan. I wanted to preserve and share that tactile, meditative experience online — both as a personal keepsake and as a tribute to the simplicity of traditional Japanese puzzles.&lt;/p&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 62.576687116564415%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAQCBf/EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAGnoSXymif/xAAYEAEBAQEBAAAAAAAAAAAAAAABAhEEEP/aAAgBAQABBQI6NbsJl0OTGpK8/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQIBAT8Bh//EABoQAAICAwAAAAAAAAAAAAAAAAAQESEyQaH/2gAIAQEABj8C2Taz4Wv/xAAZEAEBAQEBAQAAAAAAAAAAAAABEQAxIVH/2gAIAQEAAT8hlF7+6yILOe6CjRxE0zAIaYITf//aAAwDAQACAAMAAAAQCz//xAAWEQADAAAAAAAAAAAAAAAAAAAAARH/2gAIAQMBAT8Qqoz/xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAECAQE/EG0wVh//xAAaEAEBAQEBAQEAAAAAAAAAAAABEQAhcTFR/9oACAEBAAE/EIqFBoFqhEJ8cEsAj+m7FgUT3vuj7axxkOB8N//Z&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Image showing the starting image to the user interface after only two prompts.&quot; title=&quot;Image showing the starting image to the user interface after only two prompts.&quot; src=&quot;/static/c8b1aed8567db4d9de3f77dc25a54f1d/6aca1/Maeda-Marbles-Process.jpg&quot; srcset=&quot;/static/c8b1aed8567db4d9de3f77dc25a54f1d/d2f63/Maeda-Marbles-Process.jpg 163w,
/static/c8b1aed8567db4d9de3f77dc25a54f1d/c989d/Maeda-Marbles-Process.jpg 325w,
/static/c8b1aed8567db4d9de3f77dc25a54f1d/6aca1/Maeda-Marbles-Process.jpg 650w,
/static/c8b1aed8567db4d9de3f77dc25a54f1d/7c09c/Maeda-Marbles-Process.jpg 975w,
/static/c8b1aed8567db4d9de3f77dc25a54f1d/01ab0/Maeda-Marbles-Process.jpg 1300w,
/static/c8b1aed8567db4d9de3f77dc25a54f1d/0f98f/Maeda-Marbles-Process.jpg 1920w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h3&gt;The Build Process:&lt;/h3&gt;
&lt;p&gt;The development process started with a photo of my original game set, followed by a detailed prompt explaining the rules. Within a few iterations, Lovable.Dev generated a functional prototype. From there, I refined it by:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;• Fine-tuning layout and component spacing for responsiveness&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;• Integrating a leaderboard using browser-based LocalStorage&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;• Adding gentle UI sounds for a satisfying game experience&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 62.576687116564415%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMEAf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHJ1IiomD//xAAaEAEAAwADAAAAAAAAAAAAAAACAQMEEBET/9oACAEBAAEFAox9gZ3YHShPrZz/AP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EAB4QAAEEAQUAAAAAAAAAAAAAAAEAAhESEDEyQYGR/9oACAEBAAY/ArX4nRWBb2VBIW93uf/EABgQAQADAQAAAAAAAAAAAAAAAAEAESEQ/9oACAEBAAE/IXKvYDQgwNotXjMAyMqKOf/aAAwDAQACAAMAAAAQnC//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAbEAEBAQADAQEAAAAAAAAAAAABEQAhMVFBYf/aAAgBAQABPxCcmEcvlneuNuEHhnmTNINycnn5gCgUUgdTKdg4A3//2Q==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Image showing the Leaderboard funtionality within Maeda Marbles.&quot; title=&quot;Image showing the Leaderboard funtionality within Maeda Marbles.&quot; src=&quot;/static/84652412f06c0e9421f37e8551664153/6aca1/Maeda-Marbles-Leaderboard.jpg&quot; srcset=&quot;/static/84652412f06c0e9421f37e8551664153/d2f63/Maeda-Marbles-Leaderboard.jpg 163w,
/static/84652412f06c0e9421f37e8551664153/c989d/Maeda-Marbles-Leaderboard.jpg 325w,
/static/84652412f06c0e9421f37e8551664153/6aca1/Maeda-Marbles-Leaderboard.jpg 650w,
/static/84652412f06c0e9421f37e8551664153/7c09c/Maeda-Marbles-Leaderboard.jpg 975w,
/static/84652412f06c0e9421f37e8551664153/01ab0/Maeda-Marbles-Leaderboard.jpg 1300w,
/static/84652412f06c0e9421f37e8551664153/0f98f/Maeda-Marbles-Leaderboard.jpg 1920w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;Currently, the leaderboard is not connected to a backend - it&apos;s only stored locally in each user&apos;s browser using localStorage. This means:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;• Each user only sees their own scores&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;• Scores are not shared between different users/devices&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;• Data is lost if the user clears their browser data&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;What I Learned&lt;/h2&gt;
&lt;p&gt;Recreating Maeda Marbles taught me how to translate physical experiences into digital logic through natural language prompting. By breaking down the game&apos;s rules into clear, structured prompts, I was able to guide Lovable.Dev toward generating functional and accurate code. This process reinforced the importance of clarity, iteration, and creative problem-solving when working with AI-assisted development tools.&lt;/p&gt;
&lt;p&gt;I also gained a deeper appreciation for the subtle elements of game design — how layout, sound, and feedback can elevate a simple mechanic into something engaging and memorable. Balancing the nostalgia of a childhood game with the expectations of modern web users pushed me to consider not just how the game worked, but how it felt to play.&lt;/p&gt;
&lt;h2&gt;Skills&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Lovable.Dev&lt;/li&gt;
&lt;li&gt;Netlify&lt;/li&gt;
&lt;/ul&gt;
&lt;style class=&quot;grvsc-styles&quot;&gt;
  .grvsc-container {
    overflow: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
    padding-top: 1rem;
    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));
    padding-bottom: 1rem;
    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));
    border-radius: 8px;
    border-radius: var(--grvsc-border-radius, 8px);
    font-feature-settings: normal;
    line-height: 1.4;
  }
  
  .grvsc-code {
    display: table;
  }
  
  .grvsc-line {
    display: table-row;
    box-sizing: border-box;
    width: 100%;
    position: relative;
  }
  
  .grvsc-line &gt; * {
    position: relative;
  }
  
  .grvsc-gutter-pad {
    display: table-cell;
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  .grvsc-gutter {
    display: table-cell;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter::before {
    content: attr(data-content);
  }
  
  .grvsc-source {
    display: table-cell;
    padding-left: 1.5rem;
    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));
    padding-right: 1.5rem;
    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
  }
  
  .grvsc-source:empty::after {
    content: &apos; &apos;;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter + .grvsc-source {
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  /* Line transformer styles */
  
  .grvsc-has-line-highlighting &gt; .grvsc-code &gt; .grvsc-line::before {
    content: &apos; &apos;;
    position: absolute;
    width: 100%;
  }
  
  .grvsc-line-diff-add::before {
    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));
  }
  
  .grvsc-line-diff-del::before {
    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));
  }
  
  .grvsc-line-number {
    padding: 0 2px;
    text-align: right;
    opacity: 0.7;
  }
  
&lt;/style&gt;</content:encoded></item><item><title><![CDATA[Mobile App UI & Prototype]]></title><description><![CDATA[Summary Kiuks: The Social Sharing App for Mindful Eating. The Kiuks mobile app prototype was created to support users with restrictive diets…]]></description><link>https://taishiwalden.com/blog/food-app/</link><guid isPermaLink="false">https://taishiwalden.com/blog/food-app/</guid><pubDate>Thu, 30 May 2024 03:00:00 GMT</pubDate><content:encoded>&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 62.576687116564415%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAECBf/EABYBAQEBAAAAAAAAAAAAAAAAAAIAAf/aAAwDAQACEAMQAAABzYokhi3/xAAZEAEBAQADAAAAAAAAAAAAAAABAAIREjH/2gAIAQEAAQUCTJn2OJIWznsf/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAECERP/2gAIAQMBAT8BcaM2z//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAECAQE/AYj/xAAaEAACAgMAAAAAAAAAAAAAAAAAARARIVFh/9oACAEBAAY/AulJGY3H/8QAGRABAQEBAQEAAAAAAAAAAAAAAREAITFh/9oACAEBAAE/IQCFyXCOQ+tPxxKr1zuGm//aAAwDAQACAAMAAAAQK8//xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQMBAT8QRYwLS//EABURAQEAAAAAAAAAAAAAAAAAAAEA/9oACAECAQE/EFENv//EABwQAQADAAIDAAAAAAAAAAAAAAEAESExQXGB8f/aAAgBAQABPxALyVYq8wRJG4bUAQrbr7GzSDZmnuIWANt14jZqbU//2Q==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Image of an app UX mockup on Figma.&quot; title=&quot;Image of an app UX mockup on Figma.&quot; src=&quot;/static/a89fa0fa53ae6f243b572c37011bf4dd/6aca1/Kiuk-Home-page.jpg&quot; srcset=&quot;/static/a89fa0fa53ae6f243b572c37011bf4dd/d2f63/Kiuk-Home-page.jpg 163w,
/static/a89fa0fa53ae6f243b572c37011bf4dd/c989d/Kiuk-Home-page.jpg 325w,
/static/a89fa0fa53ae6f243b572c37011bf4dd/6aca1/Kiuk-Home-page.jpg 650w,
/static/a89fa0fa53ae6f243b572c37011bf4dd/7c09c/Kiuk-Home-page.jpg 975w,
/static/a89fa0fa53ae6f243b572c37011bf4dd/01ab0/Kiuk-Home-page.jpg 1300w,
/static/a89fa0fa53ae6f243b572c37011bf4dd/0f98f/Kiuk-Home-page.jpg 1920w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h2&gt;Summary&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;Kiuks: The Social Sharing App for Mindful Eating.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;The Kiuks mobile app prototype was created to support users with restrictive diets by helping them discover safe and inclusive dining options. With this app, users can explore and rate restaurants based on specific dietary restrictions, such as allergies or lifestyle choices, ensuring they find suitable meals. The design aims to foster a community of mindful eaters who share recommendations, tips, and experiences, creating a supportive network for those with dietary restrictions.&lt;/p&gt;
&lt;!-- &lt;img src=&quot;./images/visneto-app/Visneto-App-BCG-Matrix.jpg&quot;
     alt=&quot;&quot;
     style=&quot;border-radius: 5px;&quot; /&gt; --&gt;
&lt;h3&gt;User Stories&lt;/h3&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 62.576687116564415%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIDBAX/xAAWAQEBAQAAAAAAAAAAAAAAAAAAAgP/2gAMAwEAAhADEAAAAcdkcjLRWn//xAAXEAEBAQEAAAAAAAAAAAAAAAABAAMg/9oACAEBAAEFAuCMy//EABYRAQEBAAAAAAAAAAAAAAAAAAACE//aAAgBAwEBPwFlT//EABYRAQEBAAAAAAAAAAAAAAAAAAABEv/aAAgBAgEBPwFmv//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABoQAQACAwEAAAAAAAAAAAAAAAEAERAxQWH/2gAIAQEAAT8hLiKPmLiWx7FG5//aAAwDAQACAAMAAAAQLx//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAEDAQE/EJcQmH//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAgEBPxAIf//EABwQAAMAAgMBAAAAAAAAAAAAAAABESFRMWGBkf/aAAgBAQABPxBEdk8o3Ipk4kVbM+b1GWQ9ygbfD//Z&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Image of an app UX mockup on Figma showcasing the user sign up flow.&quot; title=&quot;Image of an app UX mockup on Figma showcasing the user sign up flow.&quot; src=&quot;/static/6f486b91cfc04fc0e1ad4c84e7bd8954/6aca1/Kiuk-user-flow.jpg&quot; srcset=&quot;/static/6f486b91cfc04fc0e1ad4c84e7bd8954/d2f63/Kiuk-user-flow.jpg 163w,
/static/6f486b91cfc04fc0e1ad4c84e7bd8954/c989d/Kiuk-user-flow.jpg 325w,
/static/6f486b91cfc04fc0e1ad4c84e7bd8954/6aca1/Kiuk-user-flow.jpg 650w,
/static/6f486b91cfc04fc0e1ad4c84e7bd8954/7c09c/Kiuk-user-flow.jpg 975w,
/static/6f486b91cfc04fc0e1ad4c84e7bd8954/01ab0/Kiuk-user-flow.jpg 1300w,
/static/6f486b91cfc04fc0e1ad4c84e7bd8954/0f98f/Kiuk-user-flow.jpg 1920w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Allergy-Friendly Dining&lt;/strong&gt; – Users with food allergies (e.g., peanuts, shellfish, dairy) can rate restaurants on their allergy accommodation practices, including menu options and staff knowledge.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Keto-Friendly Options&lt;/strong&gt; – People following a ketogenic diet can find and review restaurants with low-carb, high-fat menu items that align with keto requirements.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Pescatarian Preferences&lt;/strong&gt; – Users can filter and recommend restaurants that offer high-quality pescatarian-friendly meals, helping others find sustainable and diverse fish options.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Gluten-Free Dining&lt;/strong&gt; – Users with gluten intolerance or Celiac disease can find restaurants with gluten-free menu items and rate the restaurant’s adherence to cross-contamination protocols.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Vegan and Vegetarian Choices&lt;/strong&gt; – Users seeking plant-based options can review and recommend eateries based on the variety and quality of vegan or vegetarian dishes.&lt;/p&gt;
&lt;h3&gt;Design Elements&lt;/h3&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 62.576687116564415%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAMBBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHnJ6sgn//EABcQAQEBAQAAAAAAAAAAAAAAAAECEBH/2gAIAQEAAQUCQ5YYr1trP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABcQAAMBAAAAAAAAAAAAAAAAAAAQIUH/2gAIAQEABj8CI7i//8QAGxAAAgIDAQAAAAAAAAAAAAAAAREAIRAxYXH/2gAIAQEAAT8hUgInkFTHzG4LXIJFK1Ubn//aAAwDAQACAAMAAAAQkC//xAAWEQEBAQAAAAAAAAAAAAAAAAARECH/2gAIAQMBAT8QDJ//xAAXEQEAAwAAAAAAAAAAAAAAAAAAAREx/9oACAECAQE/EJ1b/8QAHBABAQACAgMAAAAAAAAAAAAAAREAITFRYYGh/9oACAEBAAE/ENkMAMPXvBNwssNfBxgo2nWSEEqaGDJdyORrnFq8eBz/2Q==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Image of an app UX mockup on Figma showcasing the social features and user profile settings.&quot; title=&quot;Image of an app UX mockup on Figma showcasing the social features and user profile settings.&quot; src=&quot;/static/ec8d1f432c4a230b66e7660aab658fa5/6aca1/Kiuk-social-features.jpg&quot; srcset=&quot;/static/ec8d1f432c4a230b66e7660aab658fa5/d2f63/Kiuk-social-features.jpg 163w,
/static/ec8d1f432c4a230b66e7660aab658fa5/c989d/Kiuk-social-features.jpg 325w,
/static/ec8d1f432c4a230b66e7660aab658fa5/6aca1/Kiuk-social-features.jpg 650w,
/static/ec8d1f432c4a230b66e7660aab658fa5/7c09c/Kiuk-social-features.jpg 975w,
/static/ec8d1f432c4a230b66e7660aab658fa5/01ab0/Kiuk-social-features.jpg 1300w,
/static/ec8d1f432c4a230b66e7660aab658fa5/0f98f/Kiuk-social-features.jpg 1920w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Clear, Icon-Based Filters&lt;/strong&gt; – Filters allow users to quickly search for restaurants based on their dietary preferences (e.g., vegan, keto, gluten-free), each represented by clear, intuitive icons.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Interactive Rating System&lt;/strong&gt; – A ratings system lets users evaluate each restaurant’s dietary accommodations, with criteria like &quot;allergy awareness,&quot; &quot;menu variety,&quot; and &quot;cross-contamination precautions.&quot;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Social and Follower Features&lt;/strong&gt; – Users can follow other like-minded individuals, view their restaurant recommendations, and build a community focused on safe, enjoyable dining.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Map-Based Restaurant Finder&lt;/strong&gt; – A location-based map displays restaurants that meet users’ dietary needs, with color-coded pins indicating restriction types.&lt;/p&gt;
&lt;p&gt;The Kiuks app design prioritizes inclusivity, usability, and community support, providing a valuable resource for individuals who need or prefer specific dietary accommodations.&lt;/p&gt;
&lt;h2&gt;Skills&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Figma&lt;/li&gt;
&lt;li&gt;Requirements Gathering&lt;/li&gt;
&lt;li&gt;Canva&lt;/li&gt;
&lt;li&gt;MockMagic&lt;/li&gt;
&lt;/ul&gt;
&lt;style class=&quot;grvsc-styles&quot;&gt;
  .grvsc-container {
    overflow: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
    padding-top: 1rem;
    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));
    padding-bottom: 1rem;
    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));
    border-radius: 8px;
    border-radius: var(--grvsc-border-radius, 8px);
    font-feature-settings: normal;
    line-height: 1.4;
  }
  
  .grvsc-code {
    display: table;
  }
  
  .grvsc-line {
    display: table-row;
    box-sizing: border-box;
    width: 100%;
    position: relative;
  }
  
  .grvsc-line &gt; * {
    position: relative;
  }
  
  .grvsc-gutter-pad {
    display: table-cell;
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  .grvsc-gutter {
    display: table-cell;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter::before {
    content: attr(data-content);
  }
  
  .grvsc-source {
    display: table-cell;
    padding-left: 1.5rem;
    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));
    padding-right: 1.5rem;
    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
  }
  
  .grvsc-source:empty::after {
    content: &apos; &apos;;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter + .grvsc-source {
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  /* Line transformer styles */
  
  .grvsc-has-line-highlighting &gt; .grvsc-code &gt; .grvsc-line::before {
    content: &apos; &apos;;
    position: absolute;
    width: 100%;
  }
  
  .grvsc-line-diff-add::before {
    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));
  }
  
  .grvsc-line-diff-del::before {
    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));
  }
  
  .grvsc-line-number {
    padding: 0 2px;
    text-align: right;
    opacity: 0.7;
  }
  
&lt;/style&gt;</content:encoded></item><item><title><![CDATA[Mapbox API Web Application]]></title><description><![CDATA[View the live project: Mappa News Summary According to Learning Theory Research, nearly 65% of the general population are visual learners…]]></description><link>https://taishiwalden.com/blog/mappa-news/</link><guid isPermaLink="false">https://taishiwalden.com/blog/mappa-news/</guid><pubDate>Mon, 20 May 2024 03:00:00 GMT</pubDate><content:encoded>&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 66.87116564417178%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQBAwX/xAAWAQEBAQAAAAAAAAAAAAAAAAADAAH/2gAMAwEAAhADEAAAAXl89mG4gwf/xAAaEAACAgMAAAAAAAAAAAAAAAABAgMRABAi/9oACAEBAAEFArVVeyMk6kRAmv/EABYRAQEBAAAAAAAAAAAAAAAAAAEQEf/aAAgBAwEBPwHQJ//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABwQAAEEAwEAAAAAAAAAAAAAAAEAAhAhETFhUf/aAAgBAQAGPwJti9olmOGCF32P/8QAHBAAAgICAwAAAAAAAAAAAAAAAREAIRAxQVFh/9oACAEBAAE/IQAEDbLSg1IY9auFOozDoQcFww//2gAMAwEAAgADAAAAEEDv/8QAFhEBAQEAAAAAAAAAAAAAAAAAAQAR/9oACAEDAQE/EE3SXW//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAdEAEBAAIBBQAAAAAAAAAAAAABEQAhQRAxUWGx/9oACAEBAAE/EJJBa0Lu37xgC30IKg15nGNPhr5gRyUGWEMdzTDyen//2Q==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Image of website mockup on a desktop for a startup that allows you to view global events on a map.&quot; title=&quot;Image of website mockup on a desktop for a startup that allows you to view global events on a map.&quot; src=&quot;/static/02b1a262bf3a55fbe8ad01af26193bbf/6aca1/mappa-news-project.jpg&quot; srcset=&quot;/static/02b1a262bf3a55fbe8ad01af26193bbf/d2f63/mappa-news-project.jpg 163w,
/static/02b1a262bf3a55fbe8ad01af26193bbf/c989d/mappa-news-project.jpg 325w,
/static/02b1a262bf3a55fbe8ad01af26193bbf/6aca1/mappa-news-project.jpg 650w,
/static/02b1a262bf3a55fbe8ad01af26193bbf/6a068/mappa-news-project.jpg 960w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h2&gt;View the live project: &lt;a href=&quot;https://mappanews.netlify.app/&quot;&gt;Mappa News&lt;/a&gt;&lt;/h2&gt;
&lt;h2&gt;Summary&lt;/h2&gt;
&lt;p&gt;According to &lt;a href=&quot;https://papers.ssrn.com/sol3/papers.cfm?abstract_id=587201&quot;&gt;Learning Theory Research&lt;/a&gt;, nearly &lt;strong&gt;65% of the general population are visual learners&lt;/strong&gt;, meaning they need to see information in order to retain it.&lt;/p&gt;
&lt;p&gt;This prompted the creation of &lt;a href=&quot;https://mappanews.netlify.app/about&quot;&gt;Mappa&lt;/a&gt;: utilizing graphs, charts, maps, and other forms of visual stimulation to effectively illustrate current events and global news. To stand up a minimum viable product for my &lt;em&gt;&quot;million dollar idea&quot;&lt;/em&gt;, I deduced it would be the most efficient to use HTML, CSS, and Vanilla JavaScript to create the blog, and utilize existing JavaScript Libraries like &lt;a href=&quot;https://docs.mapbox.com/mapbox-gl-js/guides/&quot;&gt;MapBox GL JS&lt;/a&gt;.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&quot;Mapbox GL JS is a client-side JavaScript library for building web maps and web applications with Mapbox&apos;s modern mapping technology. You can use Mapbox GL JS to display Mapbox maps in a web browser or client, add user interactivity, and customize the map experience in your application.&quot;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3&gt;Featured Articles&lt;/h3&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 57.05521472392638%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAEEAgP/xAAWAQEBAQAAAAAAAAAAAAAAAAABAAL/2gAMAwEAAhADEAAAAYOCTnBQT//EABgQAAMBAQAAAAAAAAAAAAAAAAABAhID/9oACAEBAAEFAn006tm6EMwj/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAHBAAAgICAwAAAAAAAAAAAAAAAAECMRARQXGB/9oACAEBAAY/AnLcl6clsfeKP//EABwQAQACAQUAAAAAAAAAAAAAAAEAIRFRYYGR8P/aAAgBAQABPyFMIG4rYe00C5lDZBFnkz//2gAMAwEAAgADAAAAEE8f/8QAFhEAAwAAAAAAAAAAAAAAAAAAECFB/9oACAEDAQE/EKx//8QAFREBAQAAAAAAAAAAAAAAAAAAEHH/2gAIAQIBAT8Qh//EABsQAQADAQADAAAAAAAAAAAAAAEAESExQVHR/9oACAEBAAE/EEA4Tp68rxEiCN69SniehzIOAF7lMQKa1NfpP//Z&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Screenshot of a Mappa news article describing the Belt and Road Initiative with an interactive map.&quot; title=&quot;Screenshot of a Mappa news article describing the Belt and Road Initiative with an interactive map.&quot; src=&quot;/static/004fc42935a5ac49aa7c3f4a8eece989/6aca1/mappa-bri.jpg&quot; srcset=&quot;/static/004fc42935a5ac49aa7c3f4a8eece989/d2f63/mappa-bri.jpg 163w,
/static/004fc42935a5ac49aa7c3f4a8eece989/c989d/mappa-bri.jpg 325w,
/static/004fc42935a5ac49aa7c3f4a8eece989/6aca1/mappa-bri.jpg 650w,
/static/004fc42935a5ac49aa7c3f4a8eece989/6a068/mappa-bri.jpg 960w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;China’s President Xi Jinping unveiled The Initiative in 2013, and it is often referred to as one of the most ambitious infrastructure projects ever conceived.. &lt;a href=&quot;https://mappanews.netlify.app/belt-and-road-initiative&quot;&gt;View the BRI article here&lt;/a&gt;.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 54.601226993865026%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEE/8QAFwEAAwEAAAAAAAAAAAAAAAAAAAECA//aAAwDAQACEAMQAAAB17YwuoR//8QAFxAAAwEAAAAAAAAAAAAAAAAAAQQgIv/aAAgBAQABBQIsan//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAgEBPwFZ/8QAFxAAAwEAAAAAAAAAAAAAAAAAERIgQf/aAAgBAQAGPwILtf/EABkQAQACAwAAAAAAAAAAAAAAAAEQESAxQf/aAAgBAQABPyFBWcbi3D//2gAMAwEAAgADAAAAEPT/AP/EABcRAAMBAAAAAAAAAAAAAAAAAAABIVH/2gAIAQMBAT8QS0h//8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAhMf/aAAgBAgEBPxAHhbf/xAAbEAACAgMBAAAAAAAAAAAAAAAAAREhMUGRcf/aAAgBAQABPxCVO1b7icEuXb6RbfRaHgVo/9k=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Screenshot of a Mappa news article showcasing the 7 world wonders on an interactive map.&quot; title=&quot;Screenshot of a Mappa news article showcasing the 7 world wonders on an interactive map.&quot; src=&quot;/static/4f6b6575b7d523f7dbeb24eeef98cbb4/6aca1/mappa-seven-world-wonders.jpg&quot; srcset=&quot;/static/4f6b6575b7d523f7dbeb24eeef98cbb4/d2f63/mappa-seven-world-wonders.jpg 163w,
/static/4f6b6575b7d523f7dbeb24eeef98cbb4/c989d/mappa-seven-world-wonders.jpg 325w,
/static/4f6b6575b7d523f7dbeb24eeef98cbb4/6aca1/mappa-seven-world-wonders.jpg 650w,
/static/4f6b6575b7d523f7dbeb24eeef98cbb4/6a068/mappa-seven-world-wonders.jpg 960w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Given that the original Seven Wonders list was compiled in the 2nd century BCE, it seemed time for an update. &lt;a href=&quot;https://mappanews.netlify.app/seven-world-wonders&quot;&gt;View the 7 World Wonders article here&lt;/a&gt;.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 57.05521472392638%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAwAE/8QAFgEBAQEAAAAAAAAAAAAAAAAAAgED/9oADAMBAAIQAxAAAAFW0rc8c8x//8QAGBAAAwEBAAAAAAAAAAAAAAAAAQISEQD/2gAIAQEAAQUCMVC8okQuhRmDv//EABcRAQADAAAAAAAAAAAAAAAAAAACEiH/2gAIAQMBAT8B1WT/xAAYEQACAwAAAAAAAAAAAAAAAAAAAREhQf/aAAgBAgEBPwGtJR//xAAaEAACAgMAAAAAAAAAAAAAAAAAASGREDFB/9oACAEBAAY/AnDs7ZA4RrH/xAAbEAADAQEAAwAAAAAAAAAAAAAAAREhQTFhkf/aAAgBAQABPyHyFLwZ7TCJJ9Ey+XohYE650//aAAwDAQACAAMAAAAQVN//xAAYEQEAAwEAAAAAAAAAAAAAAAABABEhMf/aAAgBAwEBPxAHxlm3P//EABgRAAIDAAAAAAAAAAAAAAAAAAARASEx/9oACAECAQE/EFDAmkf/xAAcEAEBAQEAAgMAAAAAAAAAAAABEQAhMUFhcYH/2gAIAQEAAT8QfV06wBv3rgCPkZpyLerklSqfjWNFC03cew87/9k=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Screenshot of a Mappa news article depicting the first 12 major cities to go underwater due to climate change on an interactive map.&quot; title=&quot;Screenshot of a Mappa news article depicting the first 12 major cities to go underwater due to climate change on an interactive map.&quot; src=&quot;/static/6d652fc9aa44d4433414bb355b729740/6aca1/underwater-cities.jpg&quot; srcset=&quot;/static/6d652fc9aa44d4433414bb355b729740/d2f63/underwater-cities.jpg 163w,
/static/6d652fc9aa44d4433414bb355b729740/c989d/underwater-cities.jpg 325w,
/static/6d652fc9aa44d4433414bb355b729740/6aca1/underwater-cities.jpg 650w,
/static/6d652fc9aa44d4433414bb355b729740/7c09c/underwater-cities.jpg 975w,
/static/6d652fc9aa44d4433414bb355b729740/01ab0/underwater-cities.jpg 1300w,
/static/6d652fc9aa44d4433414bb355b729740/eec88/underwater-cities.jpg 2880w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;There is little doubt our oceans are rising and cities will go under. It is no longer an issue of if but when. &lt;a href=&quot;https://mappanews.netlify.app/underwater-cities&quot;&gt;View the Underwater Cities article here&lt;/a&gt;.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3&gt;Documentation&lt;/h3&gt;
&lt;p&gt;Although Mappa was initially built with the idea of giving visual learners more exposure to international relations and global politics, I developed a documentation page so that people could create interactive maps for other purposes–like mapping their study abroad program or travel plans.&lt;/p&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 57.05521472392638%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIDBf/EABYBAQEBAAAAAAAAAAAAAAAAAAEAAv/aAAwDAQACEAMQAAAB1ktMzUYb/8QAGRABAQEAAwAAAAAAAAAAAAAAAQIDABMh/9oACAEBAAEFAtb6wq3kUprE2EgQef/EABURAQEAAAAAAAAAAAAAAAAAAAAB/9oACAEDAQE/Aaj/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAcEAACAgIDAAAAAAAAAAAAAAAAEQECECEiMYH/2gAIAQEABj8ChL0jjXZsVoYo6x//xAAbEAEAAwADAQAAAAAAAAAAAAABABEhMUFRYf/aAAgBAQABPyF3DTUGs+jyIs3fUF0g3AVgONYBj2f/2gAMAwEAAgADAAAAELsf/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAERIf/aAAgBAwEBPxBoypp//8QAFxEBAAMAAAAAAAAAAAAAAAAAAAERIf/aAAgBAgEBPxDbS//EAB0QAQACAwADAQAAAAAAAAAAAAEAESExQVGBobH/2gAIAQEAAT8Q3OmsgYXkMY6thXWOsagRTetHmBJoAqU+oOehGL7F4HNsq/s//9k=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Screenshot of the Documentation section I created for Mappa, allowing users to create these maps themselves.&quot; title=&quot;Screenshot of the Documentation section I created for Mappa, allowing users to create these maps themselves.&quot; src=&quot;/static/21d92ae9f432252e9bc09f225a3db9ce/6aca1/mappa-docs-1.jpg&quot; srcset=&quot;/static/21d92ae9f432252e9bc09f225a3db9ce/d2f63/mappa-docs-1.jpg 163w,
/static/21d92ae9f432252e9bc09f225a3db9ce/c989d/mappa-docs-1.jpg 325w,
/static/21d92ae9f432252e9bc09f225a3db9ce/6aca1/mappa-docs-1.jpg 650w,
/static/21d92ae9f432252e9bc09f225a3db9ce/6a068/mappa-docs-1.jpg 960w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h3&gt;Analytics&lt;/h3&gt;
&lt;p&gt;To measure the popularity of the project, I used &lt;strong&gt;Google Analytics&lt;/strong&gt; to track web traffic, average time spent on the page, number of active users, as well as other key digital marketing indicators. I built a dashboard on &lt;strong&gt;Google Data Studio&lt;/strong&gt; to allow for easy interpretation.&lt;/p&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 74.84662576687117%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAMEAQL/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABhyXpHiQ//8QAGRAAAgMBAAAAAAAAAAAAAAAAAAECERIh/9oACAEBAAEFAm6LNHRyRqJ//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8BV//EABcQAQADAAAAAAAAAAAAAAAAAAAgMUH/2gAIAQEABj8Chin/xAAbEAACAgMBAAAAAAAAAAAAAAAAAREhMUFRgf/aAAgBAQABPyGpJV7PR08CCShulClJP//aAAwDAQACAAMAAAAQDO//xAAXEQADAQAAAAAAAAAAAAAAAAAAARFR/9oACAEDAQE/EIRYf//EABYRAQEBAAAAAAAAAAAAAAAAAAEAEf/aAAgBAgEBPxAW3f/EAB0QAQACAwADAQAAAAAAAAAAAAEAIRExQWGBkdH/2gAIAQEAAT8QZX3rUb6DmiPn7BL4t0L+QVtAyR33sKQYXgf2f//Z&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Image of a data analytics dashboard containing digital marketing insights about Mappa News.&quot; title=&quot;Image of a data analytics dashboard containing digital marketing insights about Mappa News.&quot; src=&quot;/static/d1d0beef03091b60161937873ff16a1a/6aca1/mappa-analytics.jpg&quot; srcset=&quot;/static/d1d0beef03091b60161937873ff16a1a/d2f63/mappa-analytics.jpg 163w,
/static/d1d0beef03091b60161937873ff16a1a/c989d/mappa-analytics.jpg 325w,
/static/d1d0beef03091b60161937873ff16a1a/6aca1/mappa-analytics.jpg 650w,
/static/d1d0beef03091b60161937873ff16a1a/6a068/mappa-analytics.jpg 960w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h2&gt;Skills&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;HTML, CSS, JavaScript&lt;/li&gt;
&lt;li&gt;Mapbox Studio&lt;/li&gt;
&lt;li&gt;Mapbox GL JS&lt;/li&gt;
&lt;li&gt;Netlify&lt;/li&gt;
&lt;li&gt;Google Analytics&lt;/li&gt;
&lt;/ul&gt;
&lt;style class=&quot;grvsc-styles&quot;&gt;
  .grvsc-container {
    overflow: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
    padding-top: 1rem;
    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));
    padding-bottom: 1rem;
    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));
    border-radius: 8px;
    border-radius: var(--grvsc-border-radius, 8px);
    font-feature-settings: normal;
    line-height: 1.4;
  }
  
  .grvsc-code {
    display: table;
  }
  
  .grvsc-line {
    display: table-row;
    box-sizing: border-box;
    width: 100%;
    position: relative;
  }
  
  .grvsc-line &gt; * {
    position: relative;
  }
  
  .grvsc-gutter-pad {
    display: table-cell;
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  .grvsc-gutter {
    display: table-cell;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter::before {
    content: attr(data-content);
  }
  
  .grvsc-source {
    display: table-cell;
    padding-left: 1.5rem;
    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));
    padding-right: 1.5rem;
    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
  }
  
  .grvsc-source:empty::after {
    content: &apos; &apos;;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter + .grvsc-source {
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  /* Line transformer styles */
  
  .grvsc-has-line-highlighting &gt; .grvsc-code &gt; .grvsc-line::before {
    content: &apos; &apos;;
    position: absolute;
    width: 100%;
  }
  
  .grvsc-line-diff-add::before {
    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));
  }
  
  .grvsc-line-diff-del::before {
    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));
  }
  
  .grvsc-line-number {
    padding: 0 2px;
    text-align: right;
    opacity: 0.7;
  }
  
&lt;/style&gt;</content:encoded></item><item><title><![CDATA[A Nostalgic Tribute Built through Prompt Engineering]]></title><description><![CDATA[View the live project: iconxp.netlify.app Summary This project is a faithful, interactive tribute to the Windows XP interface — the first…]]></description><link>https://taishiwalden.com/blog/windowsxp/</link><guid isPermaLink="false">https://taishiwalden.com/blog/windowsxp/</guid><pubDate>Wed, 27 Mar 2024 03:00:00 GMT</pubDate><content:encoded>&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 62.576687116564415%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIFA//EABYBAQEBAAAAAAAAAAAAAAAAAAMAAf/aAAwDAQACEAMQAAAB2aY6FSJJt//EABoQAQADAAMAAAAAAAAAAAAAAAEAAgMREiP/2gAIAQEAAQUC68rmz0IWsLpexP/EABURAQEAAAAAAAAAAAAAAAAAABAh/9oACAEDAQE/AYf/xAAZEQACAwEAAAAAAAAAAAAAAAAAEgIDUVL/2gAIAQIBAT8BezBpcn//xAAaEAADAQADAAAAAAAAAAAAAAAAAiERARAy/9oACAEBAAY/Ao1K2HojGctvX//EABwQAAICAgMAAAAAAAAAAAAAAAABESFhkTFBcf/aAAgBAQABPyGUewRU0wfKOi/hPmSVxMovGj//2gAMAwEAAgADAAAAEPwf/8QAFxEAAwEAAAAAAAAAAAAAAAAAABFRIf/aAAgBAwEBPxBWZT//xAAZEQACAwEAAAAAAAAAAAAAAAAAoQERMWH/2gAIAQIBAT8QjSiOBH//xAAbEAEAAwEAAwAAAAAAAAAAAAABABEhMUGBkf/aAAgBAQABPxBFsou8R9IA5OwQ5DBQWeyU4xZeToA3Q9m/Pzn/2Q==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;windowsxpremake about&quot; title=&quot;windowsxpremake about&quot; src=&quot;/static/a7e2b4ed2356f79333f23212e97c9828/6aca1/windowsxpremake-about.jpg&quot; srcset=&quot;/static/a7e2b4ed2356f79333f23212e97c9828/d2f63/windowsxpremake-about.jpg 163w,
/static/a7e2b4ed2356f79333f23212e97c9828/c989d/windowsxpremake-about.jpg 325w,
/static/a7e2b4ed2356f79333f23212e97c9828/6aca1/windowsxpremake-about.jpg 650w,
/static/a7e2b4ed2356f79333f23212e97c9828/7c09c/windowsxpremake-about.jpg 975w,
/static/a7e2b4ed2356f79333f23212e97c9828/e5166/windowsxpremake-about.jpg 1200w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h3&gt;View the live project: &lt;a href=&quot;https://iconxp.netlify.app/&quot;&gt;iconxp.netlify.app&lt;/a&gt;&lt;/h3&gt;
&lt;h2&gt;Summary&lt;/h2&gt;
&lt;p&gt;This project is a faithful, interactive tribute to the Windows XP interface — the first operating system I ever used, and a nostalgic cornerstone of early computing for many. Recreated using modern web technologies, it captures the look, feel, and behavior of XP&apos;s iconic design, all built through carefully crafted prompts using Lovable.Dev, a prompt-to-code development platform.&lt;/p&gt;
&lt;p&gt;Windows XP shaped how I first understood computers, and I’ve always loved its playful yet functional UI. I wanted to see if I could bring that experience back using today’s web stack — not by hand-coding from scratch, but by exploring how far intentional prompt design could take me. This was a creative and technical experiment in guiding an AI coding assistant to produce a polished, complex interface.&lt;/p&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 62.576687116564415%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAGSHZw6lgsH/8QAGRAAAgMBAAAAAAAAAAAAAAAAAgMBBBAS/9oACAEBAAEFAn15SOXj6Xn/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAWEQADAAAAAAAAAAAAAAAAAAABEBH/2gAIAQIBAT8BNX//xAAZEAADAAMAAAAAAAAAAAAAAAABEBECIUH/2gAIAQEABj8CpyrGuv8A/8QAHBAAAQMFAAAAAAAAAAAAAAAAAAERQRAhMVHh/9oACAEBAAE/IUwkcrGZL7Iu5r//2gAMAwEAAgADAAAAEEcP/8QAFhEBAQEAAAAAAAAAAAAAAAAAARAR/9oACAEDAQE/EDEn/8QAGBEAAwEBAAAAAAAAAAAAAAAAAAERMVH/2gAIAQIBAT8Qg8K+H//EAB4QAAEEAQUAAAAAAAAAAAAAAAEAESExQWFxkcHw/9oACAEBAAE/EKdIwGw/SZwhuFGEhFM2+Sc+CnThf//Z&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;windowsxpremake profile&quot; title=&quot;windowsxpremake profile&quot; src=&quot;/static/64ae0c471d8600f960e3688bfefce1c1/6aca1/windowsxpremake-profile.jpg&quot; srcset=&quot;/static/64ae0c471d8600f960e3688bfefce1c1/d2f63/windowsxpremake-profile.jpg 163w,
/static/64ae0c471d8600f960e3688bfefce1c1/c989d/windowsxpremake-profile.jpg 325w,
/static/64ae0c471d8600f960e3688bfefce1c1/6aca1/windowsxpremake-profile.jpg 650w,
/static/64ae0c471d8600f960e3688bfefce1c1/7c09c/windowsxpremake-profile.jpg 975w,
/static/64ae0c471d8600f960e3688bfefce1c1/e5166/windowsxpremake-profile.jpg 1200w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h2&gt;Key Features&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;🖥 Authentic Windows XP components: taskbar, Start menu, desktop windows, and draggable UI&lt;/li&gt;
&lt;li&gt;🔁 Window system with working minimize, maximize, and close functions&lt;/li&gt;
&lt;li&gt;⚛️ Built on a React + TypeScript foundation for performance and scalability&lt;/li&gt;
&lt;li&gt;🎨 Tailwind CSS for detailed, pixel-level control over styling&lt;/li&gt;
&lt;li&gt;💡 All code generated through guided prompt engineering using Lovable.Dev&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 62.576687116564415%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAUBA//EABYBAQEBAAAAAAAAAAAAAAAAAAMAAf/aAAwDAQACEAMQAAAB6J+oVVJbf//EABoQAAICAwAAAAAAAAAAAAAAAAABAhEQEiP/2gAIAQEAAQUCZWx0Rci3j//EABURAQEAAAAAAAAAAAAAAAAAABAh/9oACAEDAQE/AYf/xAAZEQACAwEAAAAAAAAAAAAAAAAAEgIDUVL/2gAIAQIBAT8BezBpcn//xAAZEAACAwEAAAAAAAAAAAAAAAAAMgEQMeH/2gAIAQEABj8CYeBja4f/xAAcEAABBAMBAAAAAAAAAAAAAAAAAREhYTFBcZH/2gAIAQEAAT8hTL59HKSBtpk0T4XSxPCaH//aAAwDAQACAAMAAAAQ6B//xAAXEQADAQAAAAAAAAAAAAAAAAAAEVEh/9oACAEDAQE/EFRlP//EABgRAAIDAAAAAAAAAAAAAAAAAAABUWGh/9oACAECAQE/EFFKGH//xAAcEAEAAgMAAwAAAAAAAAAAAAABABEhMXFRgZH/2gAIAQEAAT8Qqo0bwmJ+Q6gQ1DAoLPZAGruxfadLM838p//Z&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;windowsxpremake thumbnail&quot; title=&quot;windowsxpremake thumbnail&quot; src=&quot;/static/1a3123c59766f4cc4a299d1138441d35/6aca1/windowsxpremake-thumbnail.jpg&quot; srcset=&quot;/static/1a3123c59766f4cc4a299d1138441d35/d2f63/windowsxpremake-thumbnail.jpg 163w,
/static/1a3123c59766f4cc4a299d1138441d35/c989d/windowsxpremake-thumbnail.jpg 325w,
/static/1a3123c59766f4cc4a299d1138441d35/6aca1/windowsxpremake-thumbnail.jpg 650w,
/static/1a3123c59766f4cc4a299d1138441d35/7c09c/windowsxpremake-thumbnail.jpg 975w,
/static/1a3123c59766f4cc4a299d1138441d35/e5166/windowsxpremake-thumbnail.jpg 1200w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h2&gt;Prompt Engineering&lt;/h2&gt;
&lt;p&gt;Rather than writing each component by hand, I used Lovable.Dev to generate functional UI pieces by iterating on carefully structured prompts. I guided the AI through:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;• Component-level design (e.g. “Create a draggable window with classic XP styling”)&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;• Behavior patterns (e.g. “Add taskbar logic to track open/minimized windows”)&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;• Styling fidelity (e.g. “Style this button like a Windows XP minimize button”)&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 62.576687116564415%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQCBQb/xAAWAQEBAQAAAAAAAAAAAAAAAAACAQP/2gAMAwEAAhADEAAAAXZJKPO+M+G//8QAGxAAAwACAwAAAAAAAAAAAAAAAAECAxITFCH/2gAIAQEAAQUC4WxYkzU7lDuqfp//xAAXEQEAAwAAAAAAAAAAAAAAAAAAAREi/9oACAEDAQE/Acrh/8QAFxEBAAMAAAAAAAAAAAAAAAAAAAMRIv/aAAgBAgEBPwG5G3//xAAcEAABBAMBAAAAAAAAAAAAAAAAAREhMgIQElH/2gAIAQEABj8CfonJY8LKVQd9f//EABwQAQACAQUAAAAAAAAAAAAAAAEAITERUXGR8P/aAAgBAQABPyEsGPEUbizSVoj52PFlNd51P//aAAwDAQACAAMAAAAQHD//xAAVEQEBAAAAAAAAAAAAAAAAAAAQIf/aAAgBAwEBPxCA/8QAGREAAgMBAAAAAAAAAAAAAAAAAAERMbFR/9oACAECAQE/EG6lhHOH/8QAHRABAAMAAgMBAAAAAAAAAAAAAQARIWHRQVFxsf/aAAgBAQABPxAcRz6/YCJzIPTzzFAoArU6mnp57Swmq9LriXbJ/9k=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;windowsxpremake opentabs&quot; title=&quot;windowsxpremake opentabs&quot; src=&quot;/static/e4928b0502ea73fdc575b257d7e87d60/6aca1/windowsxpremake-opentabs.jpg&quot; srcset=&quot;/static/e4928b0502ea73fdc575b257d7e87d60/d2f63/windowsxpremake-opentabs.jpg 163w,
/static/e4928b0502ea73fdc575b257d7e87d60/c989d/windowsxpremake-opentabs.jpg 325w,
/static/e4928b0502ea73fdc575b257d7e87d60/6aca1/windowsxpremake-opentabs.jpg 650w,
/static/e4928b0502ea73fdc575b257d7e87d60/7c09c/windowsxpremake-opentabs.jpg 975w,
/static/e4928b0502ea73fdc575b257d7e87d60/e5166/windowsxpremake-opentabs.jpg 1200w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h2&gt;Reflection&lt;/h2&gt;
&lt;p&gt;This project showcases what’s possible when you combine strong product vision with AI-powered tools. Rather than just revisiting Windows XP, I reimagined it — not as a developer writing line-by-line, but as a designer and engineer prompting code into existence. It’s a nostalgic passion project that doubles as a case study in prompt-driven development.&lt;/p&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 62.576687116564415%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQCBQb/xAAWAQEBAQAAAAAAAAAAAAAAAAACAQP/2gAMAwEAAhADEAAAAXJpKPO+M+G//8QAGhAAAwEAAwAAAAAAAAAAAAAAAAECExIUIf/aAAgBAQABBQLFsyTOJ3KHdU/T/8QAFxEBAAMAAAAAAAAAAAAAAAAAAAERIv/aAAgBAwEBPwHK4f/EABcRAQADAAAAAAAAAAAAAAAAAAADESL/2gAIAQIBAT8BuRt//8QAHBAAAgEFAQAAAAAAAAAAAAAAAAERAhASITKB/9oACAEBAAY/ApyZup+HTOUTNv/EAB0QAAICAQUAAAAAAAAAAAAAAAABITERQVFxkfD/2gAIAQEAAT8hsFPgWsipwIwh8bHxrGd66P/aAAwDAQACAAMAAAAQ3D//xAAVEQEBAAAAAAAAAAAAAAAAAAAQIf/aAAgBAwEBPxCA/8QAGREAAgMBAAAAAAAAAAAAAAAAAAERMbFR/9oACAECAQE/EG6lhHOH/8QAHhABAAICAQUAAAAAAAAAAAAAAQARIWHRMUFRcbH/2gAIAQEAAT8QBDEe32OU57QPp33FAoArKcTL4d8pYTVeS61Lsyf/2Q==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;windowsxpremake closeall&quot; title=&quot;windowsxpremake closeall&quot; src=&quot;/static/38d079f12464516c13e9b8f728e38a85/6aca1/windowsxpremake-closeall.jpg&quot; srcset=&quot;/static/38d079f12464516c13e9b8f728e38a85/d2f63/windowsxpremake-closeall.jpg 163w,
/static/38d079f12464516c13e9b8f728e38a85/c989d/windowsxpremake-closeall.jpg 325w,
/static/38d079f12464516c13e9b8f728e38a85/6aca1/windowsxpremake-closeall.jpg 650w,
/static/38d079f12464516c13e9b8f728e38a85/7c09c/windowsxpremake-closeall.jpg 975w,
/static/38d079f12464516c13e9b8f728e38a85/e5166/windowsxpremake-closeall.jpg 1200w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h2&gt;Skills&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Lovable.Dev&lt;/li&gt;
&lt;li&gt;Apple Intelligence&lt;/li&gt;
&lt;li&gt;Tailwind CSS&lt;/li&gt;
&lt;li&gt;Canva&lt;/li&gt;
&lt;li&gt;Netlify&lt;/li&gt;
&lt;/ul&gt;
&lt;style class=&quot;grvsc-styles&quot;&gt;
  .grvsc-container {
    overflow: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
    padding-top: 1rem;
    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));
    padding-bottom: 1rem;
    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));
    border-radius: 8px;
    border-radius: var(--grvsc-border-radius, 8px);
    font-feature-settings: normal;
    line-height: 1.4;
  }
  
  .grvsc-code {
    display: table;
  }
  
  .grvsc-line {
    display: table-row;
    box-sizing: border-box;
    width: 100%;
    position: relative;
  }
  
  .grvsc-line &gt; * {
    position: relative;
  }
  
  .grvsc-gutter-pad {
    display: table-cell;
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  .grvsc-gutter {
    display: table-cell;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter::before {
    content: attr(data-content);
  }
  
  .grvsc-source {
    display: table-cell;
    padding-left: 1.5rem;
    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));
    padding-right: 1.5rem;
    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
  }
  
  .grvsc-source:empty::after {
    content: &apos; &apos;;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter + .grvsc-source {
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  /* Line transformer styles */
  
  .grvsc-has-line-highlighting &gt; .grvsc-code &gt; .grvsc-line::before {
    content: &apos; &apos;;
    position: absolute;
    width: 100%;
  }
  
  .grvsc-line-diff-add::before {
    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));
  }
  
  .grvsc-line-diff-del::before {
    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));
  }
  
  .grvsc-line-number {
    padding: 0 2px;
    text-align: right;
    opacity: 0.7;
  }
  
&lt;/style&gt;</content:encoded></item><item><title><![CDATA[Tongue Twista – A Retro-Inspired Web Game Built in Hours]]></title><description><![CDATA[View the live project: tonguetwista.netlify.app Summary Tongue Twista is a fast-paced web game I built in just a few hours using Lovable.Dev…]]></description><link>https://taishiwalden.com/blog/tonguetwister/</link><guid isPermaLink="false">https://taishiwalden.com/blog/tonguetwister/</guid><pubDate>Thu, 15 Feb 2024 03:00:00 GMT</pubDate><content:encoded>&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 62.576687116564415%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAQFAQP/xAAWAQEBAQAAAAAAAAAAAAAAAAADAgT/2gAMAwEAAhADEAAAAVqs9867mGV//8QAGhABAAIDAQAAAAAAAAAAAAAAAgEhAAMRMf/aAAgBAQABBQIvsabifUSUKef/xAAXEQEAAwAAAAAAAAAAAAAAAAAAAQIx/9oACAEDAQE/Aa6h/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAECETH/2gAIAQIBAT8Bk1Q9P//EABwQAAEDBQAAAAAAAAAAAAAAAAEAECECESIxcf/aAAgBAQAGPwLZ4phsBYqpv//EABoQAAMBAAMAAAAAAAAAAAAAAAABESFBYXH/2gAIAQEAAT8hmJP3eTFtHkSQiq7a0tlPcG29Z//aAAwDAQACAAMAAAAQ3+//xAAYEQEBAAMAAAAAAAAAAAAAAAABABEhMf/aAAgBAwEBPxAPFkG7/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQARMf/aAAgBAgEBPxAmmYpOX//EABsQAQEAAgMBAAAAAAAAAAAAAAERACFBUWFx/9oACAEBAAE/EODJLuGIhwqVpJ5hMlO8gszGij9dYp4RuHmI0r3n/9k=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Image of Tongue Twista, the web app which allows users to try different tongue twisters.&quot; title=&quot;Image of Tongue Twista, the web app which allows users to try different tongue twisters.&quot; src=&quot;/static/939e07d4d97175cac11f7185b4cce3b9/6aca1/tongue-twister-card-game-thumbnail.jpg&quot; srcset=&quot;/static/939e07d4d97175cac11f7185b4cce3b9/d2f63/tongue-twister-card-game-thumbnail.jpg 163w,
/static/939e07d4d97175cac11f7185b4cce3b9/c989d/tongue-twister-card-game-thumbnail.jpg 325w,
/static/939e07d4d97175cac11f7185b4cce3b9/6aca1/tongue-twister-card-game-thumbnail.jpg 650w,
/static/939e07d4d97175cac11f7185b4cce3b9/7c09c/tongue-twister-card-game-thumbnail.jpg 975w,
/static/939e07d4d97175cac11f7185b4cce3b9/01ab0/tongue-twister-card-game-thumbnail.jpg 1300w,
/static/939e07d4d97175cac11f7185b4cce3b9/0f98f/tongue-twister-card-game-thumbnail.jpg 1920w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h3&gt;View the live project: &lt;a href=&quot;https://tonguetwista.netlify.app/&quot;&gt;tonguetwista.netlify.app&lt;/a&gt;&lt;/h3&gt;
&lt;h2&gt;Summary&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://tonguetwista.netlify.app/&quot;&gt;Tongue Twista&lt;/a&gt; is a fast-paced web game I built in just a few hours using Lovable.Dev — a platform for rapidly building small creative projects with minimal code overhead. The game is a randomized deck of 30 cards, each featuring a different tongue twister. Users swipe right (or tap the green button) if they pronounce the phrase correctly, or swipe left (red button) if they stumble over the words — keeping score as they go.&lt;/p&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 62.576687116564415%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAgABBf/EABYBAQEBAAAAAAAAAAAAAAAAAAQAAv/aAAwDAQACEAMQAAAB6KCGgW2b/8QAGRAAAgMBAAAAAAAAAAAAAAAAAAEQESEx/9oACAEBAAEFAlo1RYsOx//EABYRAQEBAAAAAAAAAAAAAAAAAAAhEf/aAAgBAwEBPwG6r//EABYRAQEBAAAAAAAAAAAAAAAAABEBEP/aAAgBAgEBPwFhn//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABoQAAICAwAAAAAAAAAAAAAAAAABETEQIVH/2gAIAQEAAT8h3CqYcBt2ckH/2gAMAwEAAgADAAAAEG//AP/EABcRAQEBAQAAAAAAAAAAAAAAAAEAETH/2gAIAQMBAT8QTBOWT//EABcRAAMBAAAAAAAAAAAAAAAAAAABESH/2gAIAQIBAT8QVamlR//EABkQAQEBAQEBAAAAAAAAAAAAAAERACExQf/aAAgBAQABPxBhF4s9ul3RvxxRzChXfR0a0YBv/9k=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Image showing the features of the tongue twister card game.&quot; title=&quot;Image showing the features of the tongue twister card game.&quot; src=&quot;/static/d8376f7b6dae636f716a6a4941acca36/6aca1/tongue-twister-card-game-thumbnail-ux.jpg&quot; srcset=&quot;/static/d8376f7b6dae636f716a6a4941acca36/d2f63/tongue-twister-card-game-thumbnail-ux.jpg 163w,
/static/d8376f7b6dae636f716a6a4941acca36/c989d/tongue-twister-card-game-thumbnail-ux.jpg 325w,
/static/d8376f7b6dae636f716a6a4941acca36/6aca1/tongue-twister-card-game-thumbnail-ux.jpg 650w,
/static/d8376f7b6dae636f716a6a4941acca36/7c09c/tongue-twister-card-game-thumbnail-ux.jpg 975w,
/static/d8376f7b6dae636f716a6a4941acca36/01ab0/tongue-twister-card-game-thumbnail-ux.jpg 1300w,
/static/d8376f7b6dae636f716a6a4941acca36/0f98f/tongue-twister-card-game-thumbnail-ux.jpg 1920w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h2&gt;Key Features&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;🎴 Randomized deck of 30 tongue twister cards&lt;/li&gt;
&lt;li&gt;👆 Swipe-based or button-based input (mobile- and desktop-friendly)&lt;/li&gt;
&lt;li&gt;📼 Retro-inspired interface for a nostalgic vibe&lt;/li&gt;
&lt;li&gt;📊 Live score tracking (Correct vs. Tongue Twisted)&lt;/li&gt;
&lt;li&gt;📤 Shareable results screen to encourage friendly competition&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;Why I Built It&lt;/h2&gt;
&lt;p&gt;This project was an experiment in &quot;vibe coding&quot; — building something fun, fast, and functional without overengineering. I wanted to show how accessible and satisfying it can be to bring a playful concept to life quickly using modern tools.&lt;/p&gt;
&lt;h2&gt;What I Learned&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;• Leveraged Lovable.Dev for rapid prototyping and design&lt;/li&gt;
&lt;li&gt;• Focused on UX through swipe gestures and visual feedback&lt;/li&gt;
&lt;li&gt;• Explored social mechanics through shareable scores&lt;/li&gt;
&lt;li&gt;• Even simple web games can delight users and inspire competition&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 62.576687116564415%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAMBBAX/xAAVAQEBAAAAAAAAAAAAAAAAAAADBP/aAAwDAQACEAMQAAAB2q7kTqsgOj//xAAZEAADAQEBAAAAAAAAAAAAAAAAAREhAjH/2gAIAQEAAQUCyJU69pYPX//EABgRAAIDAAAAAAAAAAAAAAAAAAABAhEx/9oACAEDAQE/AYp0LD//xAAXEQEAAwAAAAAAAAAAAAAAAAABAhAR/9oACAECAQE/AZJpX//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABoQAQEBAQADAAAAAAAAAAAAAAEAESExUYH/2gAIAQEAAT8hTT3kSdjmSePkLwZ9G//aAAwDAQACAAMAAAAQ58//xAAWEQEBAQAAAAAAAAAAAAAAAAABEQD/2gAIAQMBAT8QsBrBd//EABgRAQEAAwAAAAAAAAAAAAAAAAEAESFB/9oACAECAQE/EM+5KLq//8QAGhABAAMBAQEAAAAAAAAAAAAAAQARITFR0f/aAAgBAQABPxDlDyqGjoCE/A5HuW1is+SwuFzI6pa9n//Z&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Image showing the difference in User Interfaces after a few prompts.&quot; title=&quot;Image showing the difference in User Interfaces after a few prompts.&quot; src=&quot;/static/ecb1a21ff6a1a57a7f68c5c5dc2d4fd1/6aca1/tongue-twister-card-game-details.jpg&quot; srcset=&quot;/static/ecb1a21ff6a1a57a7f68c5c5dc2d4fd1/d2f63/tongue-twister-card-game-details.jpg 163w,
/static/ecb1a21ff6a1a57a7f68c5c5dc2d4fd1/c989d/tongue-twister-card-game-details.jpg 325w,
/static/ecb1a21ff6a1a57a7f68c5c5dc2d4fd1/6aca1/tongue-twister-card-game-details.jpg 650w,
/static/ecb1a21ff6a1a57a7f68c5c5dc2d4fd1/7c09c/tongue-twister-card-game-details.jpg 975w,
/static/ecb1a21ff6a1a57a7f68c5c5dc2d4fd1/01ab0/tongue-twister-card-game-details.jpg 1300w,
/static/ecb1a21ff6a1a57a7f68c5c5dc2d4fd1/0f98f/tongue-twister-card-game-details.jpg 1920w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h2&gt;Skills&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Lovable.Dev&lt;/li&gt;
&lt;li&gt;Netlify&lt;/li&gt;
&lt;/ul&gt;
&lt;style class=&quot;grvsc-styles&quot;&gt;
  .grvsc-container {
    overflow: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
    padding-top: 1rem;
    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));
    padding-bottom: 1rem;
    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));
    border-radius: 8px;
    border-radius: var(--grvsc-border-radius, 8px);
    font-feature-settings: normal;
    line-height: 1.4;
  }
  
  .grvsc-code {
    display: table;
  }
  
  .grvsc-line {
    display: table-row;
    box-sizing: border-box;
    width: 100%;
    position: relative;
  }
  
  .grvsc-line &gt; * {
    position: relative;
  }
  
  .grvsc-gutter-pad {
    display: table-cell;
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  .grvsc-gutter {
    display: table-cell;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter::before {
    content: attr(data-content);
  }
  
  .grvsc-source {
    display: table-cell;
    padding-left: 1.5rem;
    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));
    padding-right: 1.5rem;
    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
  }
  
  .grvsc-source:empty::after {
    content: &apos; &apos;;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter + .grvsc-source {
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  /* Line transformer styles */
  
  .grvsc-has-line-highlighting &gt; .grvsc-code &gt; .grvsc-line::before {
    content: &apos; &apos;;
    position: absolute;
    width: 100%;
  }
  
  .grvsc-line-diff-add::before {
    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));
  }
  
  .grvsc-line-diff-del::before {
    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));
  }
  
  .grvsc-line-number {
    padding: 0 2px;
    text-align: right;
    opacity: 0.7;
  }
  
&lt;/style&gt;</content:encoded></item><item><title><![CDATA[Visneto Nightlife App Design]]></title><description><![CDATA[Summary I designed a startup (with a team of 4) with the idea of simplifying nightlife. After conducting market research on the competitive…]]></description><link>https://taishiwalden.com/blog/visneto-app/</link><guid isPermaLink="false">https://taishiwalden.com/blog/visneto-app/</guid><pubDate>Wed, 17 May 2023 03:00:00 GMT</pubDate><content:encoded>&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 74.84662576687117%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMEAf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHXrqWUvE//xAAZEAADAAMAAAAAAAAAAAAAAAABAgMEEhP/2gAIAQEAAQUCOMdOzpakO7YtWMqF0SFd5//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABYRAAMAAAAAAAAAAAAAAAAAABARQf/aAAgBAgEBPwFwf//EAB0QAAICAgMBAAAAAAAAAAAAAAECABESISIyQWH/2gAIAQEABj8CHO/dQKV4zPBlir9q4z9iPJZG5//EABgQAQADAQAAAAAAAAAAAAAAAAEAETEh/9oACAEBAAE/ISqcGlLjQ0jTWNqhVcmIa6O82OWsi4BFMRhqf//aAAwDAQACAAMAAAAQAA//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAEDAQE/EEppT//EABYRAQEBAAAAAAAAAAAAAAAAAAARIf/aAAgBAgEBPxDRH//EAB4QAQEAAgICAwAAAAAAAAAAAAERACExQVFxkaHw/9oACAEBAAE/EHbo0SBnE53HrvCShKDdJ063m8YCTTO2v6ZoZQQgHteKfGQdgQliam3nvDuFR4U8fWf/2Q==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Image of a nightlife app mockup on Adobe XD software&quot; title=&quot;Image of a nightlife app mockup on Adobe XD software&quot; src=&quot;/static/71340620cef569a388f29c100eed5563/6aca1/visneto-app-project.jpg&quot; srcset=&quot;/static/71340620cef569a388f29c100eed5563/d2f63/visneto-app-project.jpg 163w,
/static/71340620cef569a388f29c100eed5563/c989d/visneto-app-project.jpg 325w,
/static/71340620cef569a388f29c100eed5563/6aca1/visneto-app-project.jpg 650w,
/static/71340620cef569a388f29c100eed5563/6a068/visneto-app-project.jpg 960w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h2&gt;Summary&lt;/h2&gt;
&lt;p&gt;I designed a startup (with a team of 4) with the idea of simplifying nightlife. After conducting market research on the competitive landscape, we determined there was an opportunity for market entry. Click to &lt;a href=&quot;https://docs.google.com/document/d/13YnPX6wSgrjIdE4Fig8tTYTOWOQOVVJAI6RuyzcWJNI/edit?usp=sharing&quot;&gt;view the competitive research document&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 65.6441717791411%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAECBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHWtyoMT//EABoQAAICAwAAAAAAAAAAAAAAAAIRABIBMUH/2gAIAQEAAQUCzadBqVZhr//EABURAQEAAAAAAAAAAAAAAAAAAAAB/9oACAEDAQE/AYr/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAcEAADAAEFAAAAAAAAAAAAAAAAAREQISIxUWH/2gAIAQEABj8CcS8Zwbpi9Grp/8QAGxAAAgIDAQAAAAAAAAAAAAAAAREAITFBcVH/2gAIAQEAAT8hvFdBnvIaCi5NOz1BgkVCAbsI24c//9oADAMBAAIAAwAAABBD3//EABcRAQEBAQAAAAAAAAAAAAAAAAEAEUH/2gAIAQMBAT8QB2Wu3//EABYRAQEBAAAAAAAAAAAAAAAAAAEAUf/aAAgBAgEBPxBci//EABwQAQACAwEBAQAAAAAAAAAAAAEAESExQYFhkf/aAAgBAQABPxAE56rdsiOEFIV7bWfkJWzVXFclEG2r3EkioA4fPZ9UM1XZ/9k=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Image of competitve analysis matrix on Visneto App competitors: Yelp, Zagat, Food52, Thrillist, DateNite, TryCobble.&quot; title=&quot;Image of competitve analysis matrix on Visneto App competitors: Yelp, Zagat, Food52, Thrillist, DateNite, TryCobble.&quot; src=&quot;/static/2f4e123756896aeefefe78e75b6565a0/6aca1/Visneto-App-BCG-Matrix.jpg&quot; srcset=&quot;/static/2f4e123756896aeefefe78e75b6565a0/d2f63/Visneto-App-BCG-Matrix.jpg 163w,
/static/2f4e123756896aeefefe78e75b6565a0/c989d/Visneto-App-BCG-Matrix.jpg 325w,
/static/2f4e123756896aeefefe78e75b6565a0/6aca1/Visneto-App-BCG-Matrix.jpg 650w,
/static/2f4e123756896aeefefe78e75b6565a0/6a068/Visneto-App-BCG-Matrix.jpg 960w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Nightlife made simple. Discover scenes in your area and connect with friends.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Once identifying the leaders, challengers, niche players, and visionaries in the industry, I began compiling data on strengths, weaknesses, and features to help direct the product design.&lt;/p&gt;
&lt;h3&gt;User Welcome&lt;/h3&gt;
&lt;blockquote&gt;
&lt;p&gt;&quot;Visneto&quot; means &quot;Venues&quot; in Latin.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;The welcome screens encapsulate the idea behind the startup-connecting young people with live music, bars, late-night eateries, and other vibrant scenes. Due to the social nature of the app, we decided it would be best to allow log in integration with popular social media and &lt;a href=&quot;https://developers.google.com/identity/gsi/web/guides/overview&quot;&gt;Google One Tap&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 66.87116564417178%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAwAEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAFcHeASSs//xAAYEAEBAQEBAAAAAAAAAAAAAAADAQIAEP/aAAgBAQABBQJ9tNmz3jtuLOMcn5//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAeEAABBAEFAAAAAAAAAAAAAAABAAIQESESMUFxgf/aAAgBAQAGPwKmDHSwb8QLt4OnmP/EABoQAAIDAQEAAAAAAAAAAAAAAAABESExQWH/2gAIAQEAAT8hasXbDVzx8MR5Dq6JCiI6sw//2gAMAwEAAgADAAAAEEgP/8QAFhEAAwAAAAAAAAAAAAAAAAAAARAR/9oACAEDAQE/EKF//8QAFREBAQAAAAAAAAAAAAAAAAAAECH/2gAIAQIBAT8Qp//EABsQAQEAAgMBAAAAAAAAAAAAAAERACExQVFh/9oACAEBAAE/ENWKWbWb3muRCkh8fM4aQdI3zBL0pLi+miabOO8AECGf/9k=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Image of 4 mockup welcome screens for visneto app users&quot; title=&quot;Image of 4 mockup welcome screens for visneto app users&quot; src=&quot;/static/e078f46f8ea6734a31ba5226d8c7a306/6aca1/welcome.jpg&quot; srcset=&quot;/static/e078f46f8ea6734a31ba5226d8c7a306/d2f63/welcome.jpg 163w,
/static/e078f46f8ea6734a31ba5226d8c7a306/c989d/welcome.jpg 325w,
/static/e078f46f8ea6734a31ba5226d8c7a306/6aca1/welcome.jpg 650w,
/static/e078f46f8ea6734a31ba5226d8c7a306/6a068/welcome.jpg 960w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h3&gt;User Onboarding&lt;/h3&gt;
&lt;blockquote&gt;
&lt;p&gt;Discover the places your friends already love.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;The onboarding mockup demonstrates what is achievable with the new nightlife application. You can create an account, get notified about local events, special discounts, join community chats, and find venues your friends swear by.&lt;/p&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 66.87116564417178%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIDAQT/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAHud8Ilw//EABsQAAICAwEAAAAAAAAAAAAAAAACAREDEBIx/9oACAEBAAEFAsksoqUdSXR5r//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EAB4QAAIBAwUAAAAAAAAAAAAAAAAhEgECEBExMkGh/9oACAEBAAY/AqQskmcte2beiFj/xAAcEAACAgIDAAAAAAAAAAAAAAABEQAhMXFBUWH/2gAIAQEAAT8hXL7McQ2jojwCFfcZUFiM8V+QAT//2gAMAwEAAgADAAAAEAvv/8QAFxEBAAMAAAAAAAAAAAAAAAAAAAERIf/aAAgBAwEBPxDFw//EABcRAQADAAAAAAAAAAAAAAAAAAABESH/2gAIAQIBAT8Q1Uv/xAAbEAEBAAMBAQEAAAAAAAAAAAABEQAhMZFBgf/aAAgBAQABPxBJj5Jr9xNAJKg6uiYQfC7x8msV0EtmIeURuAEh5n//2Q==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Showcase of the onboarding process for visneto app users&quot; title=&quot;Showcase of the onboarding process for visneto app users&quot; src=&quot;/static/8e18ef98cd817a52b78ea5c12dc46795/6aca1/onboard.jpg&quot; srcset=&quot;/static/8e18ef98cd817a52b78ea5c12dc46795/d2f63/onboard.jpg 163w,
/static/8e18ef98cd817a52b78ea5c12dc46795/c989d/onboard.jpg 325w,
/static/8e18ef98cd817a52b78ea5c12dc46795/6aca1/onboard.jpg 650w,
/static/8e18ef98cd817a52b78ea5c12dc46795/6a068/onboard.jpg 960w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h3&gt;User Stories&lt;/h3&gt;
&lt;blockquote&gt;
&lt;p&gt;Discover new venues. Explore what&apos;s popular. Find community.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;The three core features of the Visneto app were inspired by &lt;strong&gt;Yelp&lt;/strong&gt;, &lt;strong&gt;Snapchat&lt;/strong&gt;, &lt;strong&gt;Thrillist&lt;/strong&gt;, and &lt;strong&gt;Strava&lt;/strong&gt;. You can view venue profiles and learn about the menu, prices, location, and atmosphere with additional information provided by other users. If you&apos;re out-on-the-town, you can view the heatmap of popular venues in &quot;real-time&quot;. Lastly, the key feature is the ability to create community chats revolving on specific events and meetups.&lt;/p&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 66.87116564417178%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAEDAgT/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABq+7FiKB//8QAGxAAAQQDAAAAAAAAAAAAAAAAAgABAxEQEhT/2gAIAQEAAQUCFpeiLehtUmFhx//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABsQAAICAwEAAAAAAAAAAAAAAAEhABACERJC/9oACAEBAAY/AtvhzrIkk+Y1Sr//xAAbEAEAAgMBAQAAAAAAAAAAAAABACERMXFBUf/aAAgBAQABPyESdzxD44sqNyhAW0OZ1qawHCY+3P/aAAwDAQACAAMAAAAQd9//xAAWEQEBAQAAAAAAAAAAAAAAAAAAASH/2gAIAQMBAT8QxX//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAECAQE/ENkEf//EABsQAQEAAwEBAQAAAAAAAAAAAAERACFBMVGB/9oACAEBAAE/EKIpyrxon5nT8NIQDrzGWaQLMh1yFKkqHzDE8Hl5vJVUp65//9k=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Iphone mockup of visneto&apos;s nightlife app that allows users to explore venues, discover what is popular on a heat map, and to join communities.&quot; title=&quot;Iphone mockup of visneto&apos;s nightlife app that allows users to explore venues, discover what is popular on a heat map, and to join communities.&quot; src=&quot;/static/3f30d707b7e5901b4ea83706b7bffc70/6aca1/user-stories.jpg&quot; srcset=&quot;/static/3f30d707b7e5901b4ea83706b7bffc70/d2f63/user-stories.jpg 163w,
/static/3f30d707b7e5901b4ea83706b7bffc70/c989d/user-stories.jpg 325w,
/static/3f30d707b7e5901b4ea83706b7bffc70/6aca1/user-stories.jpg 650w,
/static/3f30d707b7e5901b4ea83706b7bffc70/6a068/user-stories.jpg 960w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h2&gt;Skills&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Figma&lt;/li&gt;
&lt;li&gt;Adobe XD&lt;/li&gt;
&lt;li&gt;Adobe Illustrator&lt;/li&gt;
&lt;/ul&gt;
&lt;style class=&quot;grvsc-styles&quot;&gt;
  .grvsc-container {
    overflow: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
    padding-top: 1rem;
    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));
    padding-bottom: 1rem;
    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));
    border-radius: 8px;
    border-radius: var(--grvsc-border-radius, 8px);
    font-feature-settings: normal;
    line-height: 1.4;
  }
  
  .grvsc-code {
    display: table;
  }
  
  .grvsc-line {
    display: table-row;
    box-sizing: border-box;
    width: 100%;
    position: relative;
  }
  
  .grvsc-line &gt; * {
    position: relative;
  }
  
  .grvsc-gutter-pad {
    display: table-cell;
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  .grvsc-gutter {
    display: table-cell;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter::before {
    content: attr(data-content);
  }
  
  .grvsc-source {
    display: table-cell;
    padding-left: 1.5rem;
    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));
    padding-right: 1.5rem;
    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
  }
  
  .grvsc-source:empty::after {
    content: &apos; &apos;;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter + .grvsc-source {
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  /* Line transformer styles */
  
  .grvsc-has-line-highlighting &gt; .grvsc-code &gt; .grvsc-line::before {
    content: &apos; &apos;;
    position: absolute;
    width: 100%;
  }
  
  .grvsc-line-diff-add::before {
    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));
  }
  
  .grvsc-line-diff-del::before {
    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));
  }
  
  .grvsc-line-number {
    padding: 0 2px;
    text-align: right;
    opacity: 0.7;
  }
  
&lt;/style&gt;</content:encoded></item><item><title><![CDATA[Data Migration and Redesign]]></title><description><![CDATA[View the live project: Visneto | Web Design & Development Summary My web design agency's website was initially build using WordPress…]]></description><link>https://taishiwalden.com/blog/visneto/</link><guid isPermaLink="false">https://taishiwalden.com/blog/visneto/</guid><pubDate>Wed, 10 May 2023 03:00:00 GMT</pubDate><content:encoded>&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 57.05521472392638%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIGBP/EABYBAQEBAAAAAAAAAAAAAAAAAAEAAv/aAAwDAQACEAMQAAABxNSo5mCrJ//EABkQAAIDAQAAAAAAAAAAAAAAAAADARIUMf/aAAgBAQABBQLO4zMrmcSR0//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAEDAQE/AVf/xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAgEBPwFH/8QAGRAAAgMBAAAAAAAAAAAAAAAAADMBAhEg/9oACAEBAAY/AlC7aLnj/8QAGxABAAICAwAAAAAAAAAAAAAAAQAREDFhgZH/2gAIAQEAAT8hAAu9QsX56x+k5HH/2gAMAwEAAgADAAAAEI8P/8QAFhEBAQEAAAAAAAAAAAAAAAAAARAR/9oACAEDAQE/EF2P/8QAFhEBAQEAAAAAAAAAAAAAAAAAARAR/9oACAECAQE/EAyP/8QAHxAAAgECBwAAAAAAAAAAAAAAAREAIdExQVGBkaHw/9oACAEBAAE/EG8WbC8EeTaCR257ReY9TsY5B8hjOs//2Q==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Screenshot of the homepage of a website design agency.&quot; title=&quot;Screenshot of the homepage of a website design agency.&quot; src=&quot;/static/899a53d2ff65d23fcb83205e6b524df7/6aca1/visneto-site.jpg&quot; srcset=&quot;/static/899a53d2ff65d23fcb83205e6b524df7/d2f63/visneto-site.jpg 163w,
/static/899a53d2ff65d23fcb83205e6b524df7/c989d/visneto-site.jpg 325w,
/static/899a53d2ff65d23fcb83205e6b524df7/6aca1/visneto-site.jpg 650w,
/static/899a53d2ff65d23fcb83205e6b524df7/6a068/visneto-site.jpg 960w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h3&gt;View the live project: &lt;a href=&quot;https://visneto.webflow.io/&quot;&gt;Visneto | Web Design &amp;#x26; Development&lt;/a&gt;&lt;/h3&gt;
&lt;h2&gt;Summary&lt;/h2&gt;
&lt;p&gt;My web design agency&apos;s website was initially build using WordPress, however after learning about various CMS development platforms, I was intrigued by one in particular called &lt;a href=&quot;https://webflow.com/&quot;&gt;Webflow&lt;/a&gt;. WordPress&apos;s extensive need for plugins and maintenance time pushed me to explore different options with more design freedom.&lt;/p&gt;
&lt;p&gt;I used this opportunity to migrate my web design&apos;s company website to a webflow - which also boasts powerful CMS and hosting features that WordPress has. Hosting our website on Webflow removed the requirement for monthly maintenance retainers that were associated with our old Wordpress site. In addition, it has more native SEO tools to make adjustments on pages/images/assets which makes it really convenient.&lt;/p&gt;
&lt;p&gt;Not to mention, the old website lacked an aesthetic design and semantic layout necessary for a proper landing page. While it adhered to traditional website structure, it was time for a revamp.&lt;/p&gt;
&lt;h3&gt;Screenshot of the old site&lt;/h3&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 63.190184049079754%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAEGBf/EABYBAQEBAAAAAAAAAAAAAAAAAAECA//aAAwDAQACEAMQAAABzXTPaZ0qgf/EABsQAQACAgMAAAAAAAAAAAAAAAEAAgMRExQh/9oACAEBAAEFAtEqVnWyM4sZbzYAf//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAEDAQE/AUf/xAAZEQACAwEAAAAAAAAAAAAAAAAAAQIDERP/2gAIAQIBAT8BlYsOrP/EABoQAAIDAQEAAAAAAAAAAAAAAAAhAQIRIjH/2gAIAQEABj8C9HpzXYFSCUI//8QAGxABAAIDAQEAAAAAAAAAAAAAAQARITFRYXH/2gAIAQEAAT8h7KKsVnAmoZadiZIL8lEK+43AAAOE/9oADAMBAAIAAwAAABDPD//EABYRAQEBAAAAAAAAAAAAAAAAAAEAEf/aAAgBAwEBPxAMbF//xAAXEQEBAQEAAAAAAAAAAAAAAAABABEx/9oACAECAQE/EEYBgDhf/8QAHRABAAMAAgMBAAAAAAAAAAAAAQARITFBYXGBkf/aAAgBAQABPxBcHhdk03WJTy3C26qGAf1mWGchmgp0RXtkJuzAoPk//9k=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Screenshot of the homepage of the previous website built on wordpress, lacking an aesthetic homepage.&quot; title=&quot;Screenshot of the homepage of the previous website built on wordpress, lacking an aesthetic homepage.&quot; src=&quot;/static/7d871758078578ec954007476b7522bf/6aca1/old-visneto-media-site.jpg&quot; srcset=&quot;/static/7d871758078578ec954007476b7522bf/d2f63/old-visneto-media-site.jpg 163w,
/static/7d871758078578ec954007476b7522bf/c989d/old-visneto-media-site.jpg 325w,
/static/7d871758078578ec954007476b7522bf/6aca1/old-visneto-media-site.jpg 650w,
/static/7d871758078578ec954007476b7522bf/6a068/old-visneto-media-site.jpg 960w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h2&gt;Task&lt;/h2&gt;
&lt;p&gt;Rebuilding a company website is no easy task, especially if you want to modify your brand messaging and create new digital assets. To start, we exported all of the appropriate text onto a document and began compiling our edits on the copy text. After defining the requirements for the new site&apos;s landing page and content, I created a basic layout of the website and redesigned it according to the &lt;a href=&quot;https://coolors.co/000814-2d00f7-0056e0-fafaff&quot;&gt;company colors&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;Skills&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Project Management&lt;/li&gt;
&lt;li&gt;Web Development&lt;/li&gt;
&lt;li&gt;WordPress&lt;/li&gt;
&lt;li&gt;Webflow&lt;/li&gt;
&lt;li&gt;Adobe Illustrator&lt;/li&gt;
&lt;li&gt;Adobe Photoshop&lt;/li&gt;
&lt;/ul&gt;
&lt;style class=&quot;grvsc-styles&quot;&gt;
  .grvsc-container {
    overflow: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
    padding-top: 1rem;
    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));
    padding-bottom: 1rem;
    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));
    border-radius: 8px;
    border-radius: var(--grvsc-border-radius, 8px);
    font-feature-settings: normal;
    line-height: 1.4;
  }
  
  .grvsc-code {
    display: table;
  }
  
  .grvsc-line {
    display: table-row;
    box-sizing: border-box;
    width: 100%;
    position: relative;
  }
  
  .grvsc-line &gt; * {
    position: relative;
  }
  
  .grvsc-gutter-pad {
    display: table-cell;
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  .grvsc-gutter {
    display: table-cell;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter::before {
    content: attr(data-content);
  }
  
  .grvsc-source {
    display: table-cell;
    padding-left: 1.5rem;
    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));
    padding-right: 1.5rem;
    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
  }
  
  .grvsc-source:empty::after {
    content: &apos; &apos;;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter + .grvsc-source {
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  /* Line transformer styles */
  
  .grvsc-has-line-highlighting &gt; .grvsc-code &gt; .grvsc-line::before {
    content: &apos; &apos;;
    position: absolute;
    width: 100%;
  }
  
  .grvsc-line-diff-add::before {
    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));
  }
  
  .grvsc-line-diff-del::before {
    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));
  }
  
  .grvsc-line-number {
    padding: 0 2px;
    text-align: right;
    opacity: 0.7;
  }
  
&lt;/style&gt;</content:encoded></item><item><title><![CDATA[Creative Marketing Werx Redesign]]></title><description><![CDATA[View the live project: creativemarketingwerx.com Summary Creative Marketing Werx is a woman-owned agency that specializes in providing…]]></description><link>https://taishiwalden.com/blog/cmw-site/</link><guid isPermaLink="false">https://taishiwalden.com/blog/cmw-site/</guid><pubDate>Wed, 15 Mar 2023 03:00:00 GMT</pubDate><content:encoded>&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 74.84662576687117%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAABAACA//EABYBAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAAB6NPkfDs3/8QAGxAAAgIDAQAAAAAAAAAAAAAAAQIAEQMSIhP/2gAIAQEAAQUCORq25S1DdjxECsJ//8QAFREBAQAAAAAAAAAAAAAAAAAAACH/2gAIAQMBAT8BR//EABURAQEAAAAAAAAAAAAAAAAAAAAh/9oACAECAQE/AVf/xAAcEAACAQUBAAAAAAAAAAAAAAAAATECEBEiUSH/2gAIAQEABj8Cg9eO21nrN6myT//EABsQAQEBAAIDAAAAAAAAAAAAAAERACExQVFh/9oACAEBAAE/IQUOe3g1hAQdHzroo1pXBm0DgXvfmoAZeON//9oADAMBAAIAAwAAABBkL//EABcRAAMBAAAAAAAAAAAAAAAAAAABEVH/2gAIAQMBAT8QbJo//8QAFxEAAwEAAAAAAAAAAAAAAAAAAAERUf/aAAgBAgEBPxCDeD//xAAeEAEBAAICAgMAAAAAAAAAAAABEQAhMUFRYYGRof/aAAgBAQABPxA6cmBy+XnNPCelw5m9buRBUkUHc5e794pG0pabvmcYwRnRn64RsVCVD295/9k=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Layout Mockup of the custom merchandising business&apos;s website.&quot; title=&quot;Layout Mockup of the custom merchandising business&apos;s website.&quot; src=&quot;/static/d264ca2be26f8b442081471f20203840/6aca1/CMW-Graphic-1.jpg&quot; srcset=&quot;/static/d264ca2be26f8b442081471f20203840/d2f63/CMW-Graphic-1.jpg 163w,
/static/d264ca2be26f8b442081471f20203840/c989d/CMW-Graphic-1.jpg 325w,
/static/d264ca2be26f8b442081471f20203840/6aca1/CMW-Graphic-1.jpg 650w,
/static/d264ca2be26f8b442081471f20203840/7c09c/CMW-Graphic-1.jpg 975w,
/static/d264ca2be26f8b442081471f20203840/01ab0/CMW-Graphic-1.jpg 1300w,
/static/d264ca2be26f8b442081471f20203840/3acf0/CMW-Graphic-1.jpg 2000w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h3&gt;View the live project: &lt;a href=&quot;https://www.creativemarketingwerx.com/&quot;&gt;creativemarketingwerx.com&lt;/a&gt;&lt;/h3&gt;
&lt;h2&gt;Summary&lt;/h2&gt;
&lt;p&gt;Creative Marketing Werx is a woman-owned agency that specializes in providing branded merchandise solutions to help their customers&apos; brands shine. With over 20 years of experience, the agency prides itself on delivering exceptional customer service. To enhance their online presence and showcase their expertise, the agency embarked on a website redesign project. This case study highlights the process and outcomes of the website redesign, which was developed using WordPress and a drag-and-drop editor.&lt;/p&gt;
&lt;h3&gt;Objective:&lt;/h3&gt;
&lt;p&gt;The primary objective of the website redesign was to create a modern and user-friendly online platform that effectively communicated Creative Marketing Werx&apos;s brand identity and showcased their range of branded merchandise solutions. The secondary objective was to provide the client with an easy-to-use website management system for future updates and additions.&lt;/p&gt;
&lt;h3&gt;Design and Development Process:&lt;/h3&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 185.2760736196319%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAlABQDASIAAhEBAxEB/8QAGgABAAIDAQAAAAAAAAAAAAAAAAIDAQQFBv/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHrT5d8bzQV040jZUDz2SyIP//EABsQAAIDAQEBAAAAAAAAAAAAAAADAQITIBES/9oACAEBAAEFAt6EMqaUMXe/DIIq7iXLNVmy+P/EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQMBAT8BX//EABURAQEAAAAAAAAAAAAAAAAAAAEg/9oACAECAQE/AWv/xAAdEAACAgIDAQAAAAAAAAAAAAAAATEyICESUZGx/9oACAEBAAY/ApJLLQnxWuyPCPmF16XRdYf/xAAfEAACAgEEAwAAAAAAAAAAAAABEQAhMRBRYcFBcfH/2gAIAQEAAT8hIU1e4hBx3geReSNyqWvK/UDzDEp2LOYMJyutEKLxF3dPuwGE8af/2gAMAwEAAgADAAAAEJjPMAQf/8QAFhEAAwAAAAAAAAAAAAAAAAAAASBh/9oACAEDAQE/EBW//8QAFhEAAwAAAAAAAAAAAAAAAAAAICEx/9oACAECAQE/EEhf/8QAHxABAQACAQQDAAAAAAAAAAAAAREAIVEQQWGRMaGx/9oACAEBAAE/EGTSVKGjnjNKiAntHzih6gTp4+8LDlKRDtg1L3cvl6AAj7wFVlSUvrHDxPnWJGXVNPRUXAZAFydCjdTPzo6DXZxcGQhe9cc//9k=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;A full wireframe mockup of the website layout&quot; title=&quot;A full wireframe mockup of the website layout&quot; src=&quot;/static/579710875a268ac49d6af0611b83a7df/6aca1/CMW%20Project.jpg&quot; srcset=&quot;/static/579710875a268ac49d6af0611b83a7df/d2f63/CMW%20Project.jpg 163w,
/static/579710875a268ac49d6af0611b83a7df/c989d/CMW%20Project.jpg 325w,
/static/579710875a268ac49d6af0611b83a7df/6aca1/CMW%20Project.jpg 650w,
/static/579710875a268ac49d6af0611b83a7df/7c09c/CMW%20Project.jpg 975w,
/static/579710875a268ac49d6af0611b83a7df/47311/CMW%20Project.jpg 1080w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Discovery and Planning:&lt;/li&gt;
&lt;/ol&gt;
&lt;ul&gt;
&lt;li&gt;Conducted thorough discussions with Creative Marketing Werx to understand their goals, target audience, and design preferences.&lt;/li&gt;
&lt;li&gt;Created a comprehensive project plan, outlining the scope of work, milestones, and deliverables.&lt;/li&gt;
&lt;li&gt;Developed an onboarding guide to gather all the necessary assets and information from the client.&lt;/li&gt;
&lt;/ul&gt;
&lt;ol start=&quot;2&quot;&gt;
&lt;li&gt;Wireframing and Prototyping:&lt;/li&gt;
&lt;/ol&gt;
&lt;ul&gt;
&lt;li&gt;Created wireframes and interactive prototypes to visualize the website&apos;s structure and user flow.&lt;/li&gt;
&lt;li&gt;Collaborated with the client to gather feedback and make necessary adjustments to the design and layout.&lt;/li&gt;
&lt;/ul&gt;
&lt;ol start=&quot;3&quot;&gt;
&lt;li&gt;Design and Customization:&lt;/li&gt;
&lt;/ol&gt;
&lt;ul&gt;
&lt;li&gt;Utilized Photoshop and Illustrator to create custom digital assets, including high-quality images and graphics that aligned with the agency&apos;s brand identity.&lt;/li&gt;
&lt;li&gt;Designed a visually appealing and responsive website layout using the drag-and-drop editor in WordPress.&lt;/li&gt;
&lt;li&gt;Incorporated Creative Marketing Werx&apos;s branding elements, such as their logo, color palette, and typography, to ensure consistency across the website.&lt;/li&gt;
&lt;/ul&gt;
&lt;ol start=&quot;4&quot;&gt;
&lt;li&gt;Content Integration and Optimization:&lt;/li&gt;
&lt;/ol&gt;
&lt;ul&gt;
&lt;li&gt;Collaborated with the client to curate and optimize the website&apos;s content, ensuring it effectively communicated the agency&apos;s services, expertise, and unique value proposition.&lt;/li&gt;
&lt;li&gt;Implemented search engine optimization (SEO) techniques to enhance the website&apos;s visibility and organic search rankings.&lt;/li&gt;
&lt;/ul&gt;
&lt;ol start=&quot;5&quot;&gt;
&lt;li&gt;User Testing and Quality Assurance:&lt;/li&gt;
&lt;/ol&gt;
&lt;ul&gt;
&lt;li&gt;Conducted thorough testing across multiple devices and browsers to ensure a seamless user experience and proper functionality of the website.&lt;/li&gt;
&lt;li&gt;Addressed any issues or bugs identified during testing, making necessary adjustments and refinements.&lt;/li&gt;
&lt;/ul&gt;
&lt;ol start=&quot;6&quot;&gt;
&lt;li&gt;Training and Handover:&lt;/li&gt;
&lt;/ol&gt;
&lt;ul&gt;
&lt;li&gt;Provided comprehensive training to the client on how to manage and update the website using the intuitive drag-and-drop editor in WordPress.&lt;/li&gt;
&lt;li&gt;Delivered all project assets, including source files, documentation, and the onboarding guide, to the client for future reference.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;Outcomes and Results:&lt;/h3&gt;
&lt;p&gt;The website redesign for Creative Marketing Werx successfully achieved the following outcomes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Enhanced User Experience: The intuitive and user-friendly design allows visitors to easily navigate through the website, explore the agency&apos;s services, and engage with their content.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Improved Brand Perception: The modern and visually appealing design reflects Creative Marketing Werx&apos;s professionalism, expertise, and commitment to customer service, elevating their brand image.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Increased Conversion Opportunities: The strategically placed call-to-action buttons and optimized content encourage visitors to take desired actions, resulting in improved lead generation and conversion rates.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Empowered Website Management: The drag-and-drop editor in WordPress enables the client to easily update and expand the website&apos;s content without requiring extensive technical knowledge or external assistance.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;Skills&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;WordPress&lt;/li&gt;
&lt;li&gt;Elementor&lt;/li&gt;
&lt;li&gt;SiteGround&lt;/li&gt;
&lt;li&gt;GoDaddy Domain Redirect&lt;/li&gt;
&lt;/ul&gt;
&lt;style class=&quot;grvsc-styles&quot;&gt;
  .grvsc-container {
    overflow: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
    padding-top: 1rem;
    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));
    padding-bottom: 1rem;
    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));
    border-radius: 8px;
    border-radius: var(--grvsc-border-radius, 8px);
    font-feature-settings: normal;
    line-height: 1.4;
  }
  
  .grvsc-code {
    display: table;
  }
  
  .grvsc-line {
    display: table-row;
    box-sizing: border-box;
    width: 100%;
    position: relative;
  }
  
  .grvsc-line &gt; * {
    position: relative;
  }
  
  .grvsc-gutter-pad {
    display: table-cell;
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  .grvsc-gutter {
    display: table-cell;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter::before {
    content: attr(data-content);
  }
  
  .grvsc-source {
    display: table-cell;
    padding-left: 1.5rem;
    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));
    padding-right: 1.5rem;
    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
  }
  
  .grvsc-source:empty::after {
    content: &apos; &apos;;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter + .grvsc-source {
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  /* Line transformer styles */
  
  .grvsc-has-line-highlighting &gt; .grvsc-code &gt; .grvsc-line::before {
    content: &apos; &apos;;
    position: absolute;
    width: 100%;
  }
  
  .grvsc-line-diff-add::before {
    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));
  }
  
  .grvsc-line-diff-del::before {
    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));
  }
  
  .grvsc-line-number {
    padding: 0 2px;
    text-align: right;
    opacity: 0.7;
  }
  
&lt;/style&gt;</content:encoded></item><item><title><![CDATA[Seattle Pressure Washing Website]]></title><description><![CDATA[View the live project: seattleoutdoorservices.com Summary Seattle Outdoor Services is an affordable provider of power washing, landscaping…]]></description><link>https://taishiwalden.com/blog/sos-website/</link><guid isPermaLink="false">https://taishiwalden.com/blog/sos-website/</guid><pubDate>Tue, 15 Feb 2022 03:00:00 GMT</pubDate><content:encoded>&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 60.122699386503065%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAMEAQL/xAAVAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAABrXRlQs7E/8QAFxABAQEBAAAAAAAAAAAAAAAAABEBAv/aAAgBAQABBQJnV1ER/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGhAAAgIDAAAAAAAAAAAAAAAAATEAAiBxgf/aAAgBAQAGPwJHkVxsY//EABoQAQACAwEAAAAAAAAAAAAAAAEAERAhUWH/2gAIAQEAAT8hRRpdXAIaheCvWV9les//2gAMAwEAAgADAAAAEFvP/8QAFxEAAwEAAAAAAAAAAAAAAAAAARARUf/aAAgBAwEBPxCjF//EABYRAAMAAAAAAAAAAAAAAAAAAAEQEf/aAAgBAgEBPxCFf//EAB8QAAEDAwUAAAAAAAAAAAAAAAEAETEhUWFBgZGh8f/aAAgBAQABPxAfslQBGHMowTHFPaZRbNbhlpdiN7kvYX//2Q==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Image of a outdoor services website design on a desktop screen.&quot; title=&quot;Image of a outdoor services website design on a desktop screen.&quot; src=&quot;/static/2315b2e8c4e98868787f8e26c0d420c2/6aca1/seattle-outdoor-services-project.jpg&quot; srcset=&quot;/static/2315b2e8c4e98868787f8e26c0d420c2/d2f63/seattle-outdoor-services-project.jpg 163w,
/static/2315b2e8c4e98868787f8e26c0d420c2/c989d/seattle-outdoor-services-project.jpg 325w,
/static/2315b2e8c4e98868787f8e26c0d420c2/6aca1/seattle-outdoor-services-project.jpg 650w,
/static/2315b2e8c4e98868787f8e26c0d420c2/6a068/seattle-outdoor-services-project.jpg 960w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h3&gt;View the live project: &lt;a href=&quot;https://www.seattleoutdoorservices.com/&quot;&gt;seattleoutdoorservices.com&lt;/a&gt;&lt;/h3&gt;
&lt;h2&gt;Summary&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://www.seattleoutdoorservices.com/&quot;&gt;Seattle Outdoor Services&lt;/a&gt; is an affordable provider of power washing, landscaping, and home improvement services and serves the local Seattle area. I worked directly with the owner, &lt;a href=&quot;https://www.linkedin.com/in/kyleandrewgray/&quot;&gt;Kyle Gray&lt;/a&gt;, to design and develop a site that best represented their brand, mission, and business.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Whatever you seek to enhance, repair, or redesign, let us help.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;After discussing his goals for Seattle Outdoor Services&apos;s online presence, I determined the best solution for creating the website would be to code the website in HTML, CSS, and JS, and host it on &lt;a href=&quot;https://www.netlify.com/&quot;&gt;Netlify&lt;/a&gt; to minimize costs - it has a generous free tier. Additionally, I designed branded &quot;before-and-after&quot; images using Canva to illustrate the value of their previous work to prospective customers.&lt;/p&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 62.576687116564415%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAMBAv/EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAHraxAouP/EABkQAAIDAQAAAAAAAAAAAAAAAAABAhESIf/aAAgBAQABBQJbO3FZEhwMn//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAEDAQE/Aar/xAAWEQEBAQAAAAAAAAAAAAAAAAAAEQH/2gAIAQIBAT8Bmo//xAAaEAACAgMAAAAAAAAAAAAAAAAAMQEQERJh/9oACAEBAAY/AmmRwxtTr//EABsQAAIDAQEBAAAAAAAAAAAAAAERACExQVFx/9oACAEBAAE/IRoU+ksd+U9lqy9Jgk+zuE7k2S9n/9oADAMBAAIAAwAAABAw3//EABYRAQEBAAAAAAAAAAAAAAAAAAEQEf/aAAgBAwEBPxBGx//EABYRAQEBAAAAAAAAAAAAAAAAAAEAIf/aAAgBAgEBPxDCEX//xAAdEAEBAAICAwEAAAAAAAAAAAABEQAhMUFRYbHw/9oACAEBAAE/EC6CNHpNXJodRDv9eTFFpHKlMFTcpU/XDr0oDQdHzAVNXeONcZ//2Q==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Images of the before and after of the business&apos;s projects.&quot; title=&quot;Images of the before and after of the business&apos;s projects.&quot; src=&quot;/static/8d166b847ea7267522b0fcc0b99d4695/6aca1/before-after-graphics-seattle-outdoor-services.jpg&quot; srcset=&quot;/static/8d166b847ea7267522b0fcc0b99d4695/d2f63/before-after-graphics-seattle-outdoor-services.jpg 163w,
/static/8d166b847ea7267522b0fcc0b99d4695/c989d/before-after-graphics-seattle-outdoor-services.jpg 325w,
/static/8d166b847ea7267522b0fcc0b99d4695/6aca1/before-after-graphics-seattle-outdoor-services.jpg 650w,
/static/8d166b847ea7267522b0fcc0b99d4695/7c09c/before-after-graphics-seattle-outdoor-services.jpg 975w,
/static/8d166b847ea7267522b0fcc0b99d4695/eea4a/before-after-graphics-seattle-outdoor-services.jpg 1280w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;I built a 5-page marketing website consisting of a home, about, services, blog, and contact page and connected the &lt;a href=&quot;https://github.com/taishiwalden/seattle-outdoor-services&quot;&gt;github repository&lt;/a&gt; to Netlify for continuous deployment. I implemented Google Analytics tracking code and built a Data Studio Dashboard to interpret website performance in a simple way.&lt;/p&gt;
&lt;p&gt;For streamlining online customer communications, I integrated the contact form with Seattle Outdoor Services&apos; Slack workspace, so the team receives mobile push notifications and enables them to respond quicker. The Netlify form is set up to send messages to the business&apos;s email, further consolidating the way they can respond to customer inquiries.&lt;/p&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 62.576687116564415%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAABAABAv/EABYBAQEBAAAAAAAAAAAAAAAAAAIAAf/aAAwDAQACEAMQAAABWsS7MuJH/8QAGhABAAIDAQAAAAAAAAAAAAAAAgABAxEhIv/aAAgBAQABBQJFmsdeWe7hcfb/AP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABsQAAIBBQAAAAAAAAAAAAAAAAABIRARQYGR/9oACAEBAAY/Apb0K5Bntf/EABoQAQEBAQEBAQAAAAAAAAAAAAERACFBcYH/2gAIAQEAAT8hMNv70JBfaYe/WRX75efog6Kyb//aAAwDAQACAAMAAAAQYC//xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQMBAT8QUnNv/8QAFREBAQAAAAAAAAAAAAAAAAAAAQD/2gAIAQIBAT8QBi//xAAbEAEBAQEAAwEAAAAAAAAAAAABEQAhQVGBwf/aAAgBAQABPxC5CUC/xgEWIgq5TgHUpzEYSeAjEQQCe/rn39HS7//Z&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Image of a outdoor services website home page with the notification badges from email from customer contacts.&quot; title=&quot;Image of a outdoor services website home page with the notification badges from email from customer contacts.&quot; src=&quot;/static/fa2a4457b011822609546847a580aa60/6aca1/streamlined-email-notifications.jpg&quot; srcset=&quot;/static/fa2a4457b011822609546847a580aa60/d2f63/streamlined-email-notifications.jpg 163w,
/static/fa2a4457b011822609546847a580aa60/c989d/streamlined-email-notifications.jpg 325w,
/static/fa2a4457b011822609546847a580aa60/6aca1/streamlined-email-notifications.jpg 650w,
/static/fa2a4457b011822609546847a580aa60/7c09c/streamlined-email-notifications.jpg 975w,
/static/fa2a4457b011822609546847a580aa60/eea4a/streamlined-email-notifications.jpg 1280w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h2&gt;Skills&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;HTML&lt;/li&gt;
&lt;li&gt;CSS (Bootstrap)&lt;/li&gt;
&lt;li&gt;JavaScript&lt;/li&gt;
&lt;li&gt;Netlify&lt;/li&gt;
&lt;li&gt;Google Analytics&lt;/li&gt;
&lt;li&gt;Google Data Studio&lt;/li&gt;
&lt;/ul&gt;
&lt;style class=&quot;grvsc-styles&quot;&gt;
  .grvsc-container {
    overflow: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
    padding-top: 1rem;
    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));
    padding-bottom: 1rem;
    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));
    border-radius: 8px;
    border-radius: var(--grvsc-border-radius, 8px);
    font-feature-settings: normal;
    line-height: 1.4;
  }
  
  .grvsc-code {
    display: table;
  }
  
  .grvsc-line {
    display: table-row;
    box-sizing: border-box;
    width: 100%;
    position: relative;
  }
  
  .grvsc-line &gt; * {
    position: relative;
  }
  
  .grvsc-gutter-pad {
    display: table-cell;
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  .grvsc-gutter {
    display: table-cell;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter::before {
    content: attr(data-content);
  }
  
  .grvsc-source {
    display: table-cell;
    padding-left: 1.5rem;
    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));
    padding-right: 1.5rem;
    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
  }
  
  .grvsc-source:empty::after {
    content: &apos; &apos;;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter + .grvsc-source {
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  /* Line transformer styles */
  
  .grvsc-has-line-highlighting &gt; .grvsc-code &gt; .grvsc-line::before {
    content: &apos; &apos;;
    position: absolute;
    width: 100%;
  }
  
  .grvsc-line-diff-add::before {
    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));
  }
  
  .grvsc-line-diff-del::before {
    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));
  }
  
  .grvsc-line-number {
    padding: 0 2px;
    text-align: right;
    opacity: 0.7;
  }
  
&lt;/style&gt;</content:encoded></item><item><title><![CDATA[Good Neighbor Café Website]]></title><description><![CDATA[Summary A local cafe needed a way to reach more customers and easily allow for people to order online. More than just coffee. I was proud to…]]></description><link>https://taishiwalden.com/blog/gnc-site/</link><guid isPermaLink="false">https://taishiwalden.com/blog/gnc-site/</guid><pubDate>Mon, 14 Feb 2022 03:00:00 GMT</pubDate><content:encoded>&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 66.87116564417178%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAQDBv/EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAGtNWOjn01//8QAGhAAAwADAQAAAAAAAAAAAAAAAQIDABIhIv/aAAgBAQABBQIV69tMAVxWYARAZN5b/8QAFxEBAAMAAAAAAAAAAAAAAAAAAAESYf/aAAgBAwEBPwHVYf/EABcRAQADAAAAAAAAAAAAAAAAAAABEWH/2gAIAQIBAT8Bxcv/xAAZEAEBAQEBAQAAAAAAAAAAAAABABEhMlH/2gAIAQEABj8C8mxpagwH272Qb//EABwQAQACAgMBAAAAAAAAAAAAAAEAEUFhITFRsf/aAAgBAQABPyE7OgsQWKc+z7bUZFL7wHmOdxqEFz//2gAMAwEAAgADAAAAECDP/8QAGREAAgMBAAAAAAAAAAAAAAAAAAERITFh/9oACAEDAQE/EEqlh0P/xAAYEQACAwAAAAAAAAAAAAAAAAAAAREhYf/aAAgBAgEBPxBu4GR//8QAHhABAQACAgIDAAAAAAAAAAAAAREAQSExUWGh4fH/2gAIAQEAAT8QEc6iLD3frCzYIYNI/uD2zwLIPFcbIsNXgL1hk1IJ0NfGBYqgvWf/2Q==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Screenshot of the homepage of the Good Neighbor Cafe website.&quot; title=&quot;Screenshot of the homepage of the Good Neighbor Cafe website.&quot; src=&quot;/static/46b0b5324117eab45e5d91dcdcdac230/6aca1/gnc-site.jpg&quot; srcset=&quot;/static/46b0b5324117eab45e5d91dcdcdac230/d2f63/gnc-site.jpg 163w,
/static/46b0b5324117eab45e5d91dcdcdac230/c989d/gnc-site.jpg 325w,
/static/46b0b5324117eab45e5d91dcdcdac230/6aca1/gnc-site.jpg 650w,
/static/46b0b5324117eab45e5d91dcdcdac230/6a068/gnc-site.jpg 960w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h2&gt;Summary&lt;/h2&gt;
&lt;p&gt;A local cafe needed a way to reach more customers and easily allow for people to order online.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;More than just coffee.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;I was proud to manage the project with Good Neighbor Cafe on the development of their digital storefront. I was excited to take on this project for a woman-owned small business that operates a cafe in the Capitol Hill neighborhood. Following the initial consultation with the client, I proposed a WordPress website that integrated the existing Point-of-Sale system &lt;a href=&quot;https://www.clover.com/&quot;&gt;Clover&lt;/a&gt; with an online ordering capability.&lt;/p&gt;
&lt;p&gt;The team also created custom content (digital assets), as well as a Google My Business (GMB) integration to increase site exposure. I continue to work with Good Neighbor Cafe as their primary web and digital consultant.&lt;/p&gt;
&lt;h3&gt;The site is no longer live.&lt;/h3&gt;
&lt;p&gt;I added Google Analytics to the site and connected the data to Google Data Studio, where I build a custom performance report so the cafe owner could easily track the business&apos;s online conversions and web traffic. It enables them to quickly understand how effective their digital marketing ads are working on a bi-weekly and monthly basis.&lt;/p&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 74.84662576687117%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAECBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHtzUCI/8QAGBAAAwEBAAAAAAAAAAAAAAAAAAERECH/2gAIAQEAAQUCg+bERH//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAUEAEAAAAAAAAAAAAAAAAAAAAg/9oACAEBAAY/Al//xAAaEAADAQADAAAAAAAAAAAAAAAAAREhQWGh/9oACAEBAAE/IZZAWrH4Z0UbqHwH/9oADAMBAAIAAwAAABAwL//EABURAQEAAAAAAAAAAAAAAAAAAAAh/9oACAEDAQE/EKr/xAAXEQADAQAAAAAAAAAAAAAAAAAAARFB/9oACAECAQE/EItIj//EAB8QAQACAQMFAAAAAAAAAAAAAAEAETEhQVFhcYGRsf/aAAgBAQABPxBdaN94NVaMC87fYGwU6Wg0xAuB9wFUryz/2Q==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;A google data studio dashboard with Good Neighbor Cafe&apos;s digital marketing information&quot; title=&quot;A google data studio dashboard with Good Neighbor Cafe&apos;s digital marketing information&quot; src=&quot;/static/ae09ebfcc9ef30984464943906d847db/6aca1/gnc-analytics.jpg&quot; srcset=&quot;/static/ae09ebfcc9ef30984464943906d847db/d2f63/gnc-analytics.jpg 163w,
/static/ae09ebfcc9ef30984464943906d847db/c989d/gnc-analytics.jpg 325w,
/static/ae09ebfcc9ef30984464943906d847db/6aca1/gnc-analytics.jpg 650w,
/static/ae09ebfcc9ef30984464943906d847db/6a068/gnc-analytics.jpg 960w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h2&gt;Skills&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;WordPress&lt;/li&gt;
&lt;li&gt;Elementor&lt;/li&gt;
&lt;li&gt;SiteGround&lt;/li&gt;
&lt;li&gt;Google Analytics (Pay-Per-Click)&lt;/li&gt;
&lt;li&gt;Google Search Console (Search Engine Performance)&lt;/li&gt;
&lt;li&gt;Google Data Studio&lt;/li&gt;
&lt;li&gt;Google Business Manager&lt;/li&gt;
&lt;/ul&gt;
&lt;style class=&quot;grvsc-styles&quot;&gt;
  .grvsc-container {
    overflow: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
    padding-top: 1rem;
    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));
    padding-bottom: 1rem;
    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));
    border-radius: 8px;
    border-radius: var(--grvsc-border-radius, 8px);
    font-feature-settings: normal;
    line-height: 1.4;
  }
  
  .grvsc-code {
    display: table;
  }
  
  .grvsc-line {
    display: table-row;
    box-sizing: border-box;
    width: 100%;
    position: relative;
  }
  
  .grvsc-line &gt; * {
    position: relative;
  }
  
  .grvsc-gutter-pad {
    display: table-cell;
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  .grvsc-gutter {
    display: table-cell;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter::before {
    content: attr(data-content);
  }
  
  .grvsc-source {
    display: table-cell;
    padding-left: 1.5rem;
    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));
    padding-right: 1.5rem;
    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
  }
  
  .grvsc-source:empty::after {
    content: &apos; &apos;;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter + .grvsc-source {
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  /* Line transformer styles */
  
  .grvsc-has-line-highlighting &gt; .grvsc-code &gt; .grvsc-line::before {
    content: &apos; &apos;;
    position: absolute;
    width: 100%;
  }
  
  .grvsc-line-diff-add::before {
    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));
  }
  
  .grvsc-line-diff-del::before {
    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));
  }
  
  .grvsc-line-number {
    padding: 0 2px;
    text-align: right;
    opacity: 0.7;
  }
  
&lt;/style&gt;</content:encoded></item><item><title><![CDATA[Interactive Digital Marketing PDF]]></title><description><![CDATA[View the PDF here: Click to download the PDF Summary After becoming certified in: Google Digital Marketing & SEO, Hubspot Inbound Marketing…]]></description><link>https://taishiwalden.com/blog/marketing-pdf/</link><guid isPermaLink="false">https://taishiwalden.com/blog/marketing-pdf/</guid><pubDate>Sat, 25 Sep 2021 03:00:00 GMT</pubDate><content:encoded>&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 74.84662576687117%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAECBf/EABQBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAeNc1IB//8QAGBAAAgMAAAAAAAAAAAAAAAAAEBEAASH/2gAIAQEAAQUCTis6P//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABURAQEAAAAAAAAAAAAAAAAAABAh/9oACAECAQE/AYf/xAAXEAEAAwAAAAAAAAAAAAAAAAAQADFB/9oACAEBAAY/ApjZ/8QAGRABAAMBAQAAAAAAAAAAAAAAAQARIRBx/9oACAEBAAE/IRKhD2JDuObeNReH/9oADAMBAAIAAwAAABCvz//EABURAQEAAAAAAAAAAAAAAAAAABAh/9oACAEDAQE/EKf/xAAWEQEBAQAAAAAAAAAAAAAAAAAhARD/2gAIAQIBAT8Qgc//xAAcEAACAgIDAAAAAAAAAAAAAAABIQAREEFRcZH/2gAIAQEAAT8QUgC4Mh9j6wliFWoUGXGP/9k=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;Image showing the first page of the digital marketing pdf created by Taishi Walden for Visneto Media.&quot; title=&quot;Image showing the first page of the digital marketing pdf created by Taishi Walden for Visneto Media.&quot; src=&quot;/static/9b9602f6deeb2f53352988d2c16e3a7d/6aca1/digital-marketing-pdf.jpg&quot; srcset=&quot;/static/9b9602f6deeb2f53352988d2c16e3a7d/d2f63/digital-marketing-pdf.jpg 163w,
/static/9b9602f6deeb2f53352988d2c16e3a7d/c989d/digital-marketing-pdf.jpg 325w,
/static/9b9602f6deeb2f53352988d2c16e3a7d/6aca1/digital-marketing-pdf.jpg 650w,
/static/9b9602f6deeb2f53352988d2c16e3a7d/6a068/digital-marketing-pdf.jpg 960w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h2&gt;View the PDF here: &lt;a href=&quot;/d92412cce016caf2191d6e385bbf88a8/Visneto_Marketing_Guide_2021.pdf&quot;&gt;Click to download the PDF&lt;/a&gt;&lt;/h2&gt;
&lt;h2&gt;Summary&lt;/h2&gt;
&lt;p&gt;After becoming certified in: Google Digital Marketing &amp;#x26; SEO, Hubspot Inbound Marketing, Advanced Google Analytics, and Facebook Social Media Ads, I compiled my digital marketing knowledge into an &quot;easily digestable&quot; format. This marketing asset was used in the inbound marketing campaign for &lt;a href=&quot;https://visneto.webflow.io&quot;&gt;Visneto&lt;/a&gt;, allowing people to utilize the resource by providing their email.&lt;/p&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 56.44171779141104%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAECBAX/xAAWAQEBAQAAAAAAAAAAAAAAAAAAAQL/2gAMAwEAAhADEAAAAcmVZ6iAP//EABsQAAIBBQAAAAAAAAAAAAAAAAECABAREyEx/9oACAEBAAEFAk0Mj3PaGf/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABsQAAIBBQAAAAAAAAAAAAAAAAECEAAhM4GR/9oACAEBAAY/ArORusjdgT//xAAZEAEBAQEBAQAAAAAAAAAAAAABABExYSH/2gAIAQEAAT8hT3PoYkM39FkM9WGl8N//2gAMAwEAAgADAAAAEKAP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQIBAT8QJ//EABsQAQADAQADAAAAAAAAAAAAAAEAESFBMVGR/9oACAEBAAE/EAHYhWZR1aWIvP2MslzVesMwaNiQViwFB6n/2Q==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;A page in the marketing pdf that demonstrates what you will learn and how to navigate the interactivity.&quot; title=&quot;A page in the marketing pdf that demonstrates what you will learn and how to navigate the interactivity.&quot; src=&quot;/static/f966e049eecb89b9caa3c0c7c4f6cbd3/6aca1/marketing-pdf-1.jpg&quot; srcset=&quot;/static/f966e049eecb89b9caa3c0c7c4f6cbd3/d2f63/marketing-pdf-1.jpg 163w,
/static/f966e049eecb89b9caa3c0c7c4f6cbd3/c989d/marketing-pdf-1.jpg 325w,
/static/f966e049eecb89b9caa3c0c7c4f6cbd3/6aca1/marketing-pdf-1.jpg 650w,
/static/f966e049eecb89b9caa3c0c7c4f6cbd3/6a068/marketing-pdf-1.jpg 960w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;The interactive PDF includes the following topics:&lt;/p&gt;
&lt;h3&gt;Inbound Marketing &amp;#x26; Building an Audience&lt;/h3&gt;
&lt;blockquote&gt;
&lt;p&gt;When it comes to long-term business development strategies, inbound marketing is an investment that will boost your brand awareness, consumer preference, and revenue. Sounds great doesn&apos;t it? Well, although inbound marketing seems like a no-brainer to incorporate in your business strategy, it must be expressed that it takes time.
In simple terms, inbound marketing is the process in which customers find your business organically. It&apos;s attractive to customers because they don&apos;t feel like their being sold to and the content provided by inbound marketing can be educational, entertaining, and overall helpful to customers.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 56.44171779141104%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAMCBAX/xAAVAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAAByX0y5YRE/8QAGRABAAMBAQAAAAAAAAAAAAAAAQACAxES/9oACAEBAAEFAi3kz0uupy09JF7P/8QAFREBAQAAAAAAAAAAAAAAAAAAAAH/2gAIAQMBAT8BqP/EABgRAQADAQAAAAAAAAAAAAAAAAEAAhEh/9oACAECAQE/AauPYps//8QAHBAAAQMFAAAAAAAAAAAAAAAAAAEhIgIQEYGR/9oACAEBAAY/Ao5TYsqu3Yc//8QAGRAAAwEBAQAAAAAAAAAAAAAAAAERITFh/9oACAEBAAE/IXITU7ILNh7EYqYXhTqDnrU//9oADAMBAAIAAwAAABC7H//EABcRAQEBAQAAAAAAAAAAAAAAAAEAESH/2gAIAQMBAT8QKmEEO3//xAAXEQEBAQEAAAAAAAAAAAAAAAABACEx/9oACAECAQE/ECB4mJDL/8QAGhABAQEBAQEBAAAAAAAAAAAAAREAIUFhUf/aAAgBAQABPxBegRrpnzWZwQX9+aM6KevWv7q79AnMVrkjDUoUl3//2Q==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;A page in the marketing pdf that shows useful marketing tips and acronyms for Search Engine Optimization.&quot; title=&quot;A page in the marketing pdf that shows useful marketing tips and acronyms for Search Engine Optimization.&quot; src=&quot;/static/7d1398544df6c9069fc7c012d93296c7/6aca1/marketing-pdf-2.jpg&quot; srcset=&quot;/static/7d1398544df6c9069fc7c012d93296c7/d2f63/marketing-pdf-2.jpg 163w,
/static/7d1398544df6c9069fc7c012d93296c7/c989d/marketing-pdf-2.jpg 325w,
/static/7d1398544df6c9069fc7c012d93296c7/6aca1/marketing-pdf-2.jpg 650w,
/static/7d1398544df6c9069fc7c012d93296c7/6a068/marketing-pdf-2.jpg 960w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h3&gt;Automate your Online Presence &amp;#x26; SEO Best Practices&lt;/h3&gt;
&lt;blockquote&gt;
&lt;p&gt;Local SEO is search optimization in a specific region–think of the city or district your brand operates in. This is important when people are looking for services or products they need nearby. For example, if I google ‘Pho restaurant’, I’m expecting to see results for Vietnamese restaurants that are geographically close to me, not
a random restaurant in New York City, considering I live in the Pacific Northwest. That’s why local SEO is key for brick and mortar businesses that want to be visible to potential customers–and it’s precisely what you need if you own a bar or a restaurant.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 55.828220858895705%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAUB/8QAFQEBAQAAAAAAAAAAAAAAAAAAAQD/2gAMAwEAAhADEAAAAZVSLiGm/8QAGhAAAQUBAAAAAAAAAAAAAAAAAQACAxIxE//aAAgBAQABBQIEgSTxc3bYqzlq/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGxAAAQQDAAAAAAAAAAAAAAAAEgABEDECIkH/2gAIAQEABj8C1JlkBlyLVx//xAAbEAACAwADAAAAAAAAAAAAAAAAIQERMUFRYf/aAAgBAQABPyHnY6miXBXVmjXRY9pLXLP/2gAMAwEAAgADAAAAEEjP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAHBABAQACAgMAAAAAAAAAAAAAAREAITFhQVHx/9oACAEBAAE/EIZLC2C97ylC2prXeKp5N2RwOBAEz7GcxV7XP//Z&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;How to use tools like Google Search Console to measure your online presence and how people can find your business online.&quot; title=&quot;How to use tools like Google Search Console to measure your online presence and how people can find your business online.&quot; src=&quot;/static/39f1344468d886d78d66d3d4c4661f72/6aca1/marketing-pdf-3.jpg&quot; srcset=&quot;/static/39f1344468d886d78d66d3d4c4661f72/d2f63/marketing-pdf-3.jpg 163w,
/static/39f1344468d886d78d66d3d4c4661f72/c989d/marketing-pdf-3.jpg 325w,
/static/39f1344468d886d78d66d3d4c4661f72/6aca1/marketing-pdf-3.jpg 650w,
/static/39f1344468d886d78d66d3d4c4661f72/6a068/marketing-pdf-3.jpg 960w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h3&gt;Outreach and Creating Community with your Brand&lt;/h3&gt;
&lt;blockquote&gt;
&lt;p&gt;Outreach doesn&apos;t always pertain to finding new clients and customers. Outreach programs often vary between different organizations, but they all involve the opportunity to add significant value to your brand.
Depending on your business&apos; goals, strategy can be attending local events, networking events, business expos, etc.
The goal is to start making yourself and your business a known part of the local business community. Get to know your fellow business owners and potential clients.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 55.828220858895705%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBAwX/xAAXAQADAQAAAAAAAAAAAAAAAAAAAQID/9oADAMBAAIQAxAAAAHJqWdUoEH/xAAYEAACAwAAAAAAAAAAAAAAAAAAAQISQf/aAAgBAQABBQKChVpWM0//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAXEQADAQAAAAAAAAAAAAAAAAABAhEQ/9oACAECAQE/AS1Emf/EABgQAAIDAAAAAAAAAAAAAAAAAAAgIjFh/9oACAEBAAY/ApWYv//EABoQAAMBAAMAAAAAAAAAAAAAAAABITERQZH/2gAIAQEAAT8hZp6JCD2HU4gen//aAAwDAQACAAMAAAAQcM//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAXEQEAAwAAAAAAAAAAAAAAAAABEBFh/9oACAECAQE/EBGo2P/EABkQAQEBAQEBAAAAAAAAAAAAAAERACExQf/aAAgBAQABPxAggU8UcxfD8I+miup8uQtO33IjOJjIN//Z&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;The last page congratulating readers on their new skills and a page of references on additional resources.&quot; title=&quot;The last page congratulating readers on their new skills and a page of references on additional resources.&quot; src=&quot;/static/2f0950a3dae71b5f5fb6483e5cfb19db/6aca1/marketing-pdf-congrats.jpg&quot; srcset=&quot;/static/2f0950a3dae71b5f5fb6483e5cfb19db/d2f63/marketing-pdf-congrats.jpg 163w,
/static/2f0950a3dae71b5f5fb6483e5cfb19db/c989d/marketing-pdf-congrats.jpg 325w,
/static/2f0950a3dae71b5f5fb6483e5cfb19db/6aca1/marketing-pdf-congrats.jpg 650w,
/static/2f0950a3dae71b5f5fb6483e5cfb19db/6a068/marketing-pdf-congrats.jpg 960w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h3&gt;Affiliate Links&lt;/h3&gt;
&lt;p&gt;As part of the inbound campaign, the team applied to &lt;strong&gt;affiliate partnerships&lt;/strong&gt; with the Saas (Software as a Service) companies mentioned and created a slide within the PDF with the affiliate links to earn commission on readers that signed up using our digital asset as a funnel.&lt;/p&gt;
&lt;p&gt;&lt;span class=&quot;gatsby-resp-image-wrapper&quot; style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; &quot;&gt;
      &lt;span class=&quot;gatsby-resp-image-background-image&quot; style=&quot;padding-bottom: 56.44171779141104%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAMBBP/EABUBAQEAAAAAAAAAAAAAAAAAAAMC/9oADAMBAAIQAxAAAAHrlPVMmSf/xAAZEAEAAwEBAAAAAAAAAAAAAAABAAIREyH/2gAIAQEAAQUC5eJilYWtFmz/xAAXEQEBAQEAAAAAAAAAAAAAAAABAhAx/9oACAEDAQE/ASpOmf/EABcRAQADAAAAAAAAAAAAAAAAAAIBEFH/2gAIAQIBAT8Bkra//8QAGRAAAQUAAAAAAAAAAAAAAAAAAAEQETHh/9oACAEBAAY/AiFNLf8A/8QAGxAAAgMAAwAAAAAAAAAAAAAAAREAITFRYZH/2gAIAQEAAT8hFSC7bgKg3yoRgXqLbhNdwkTs/9oADAMBAAIAAwAAABB73//EABYRAQEBAAAAAAAAAAAAAAAAAAEhEP/aAAgBAwEBPxBppM//xAAWEQEBAQAAAAAAAAAAAAAAAAARAAH/2gAIAQIBAT8Q0BC//8QAGhABAAMBAQEAAAAAAAAAAAAAAQARITFRYf/aAAgBAQABPxDWRoJ0ZdV7LboEelULkWFMafT0iANJzZbtb09m8j//2Q==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&quot;gatsby-resp-image-image&quot; alt=&quot;A page containing affiliate links to Canva Pro, Toast, Tailwind, and Aweber.&quot; title=&quot;A page containing affiliate links to Canva Pro, Toast, Tailwind, and Aweber.&quot; src=&quot;/static/8a4f87b14edf795e31afdbe84a6750ce/6aca1/affiliate.jpg&quot; srcset=&quot;/static/8a4f87b14edf795e31afdbe84a6750ce/d2f63/affiliate.jpg 163w,
/static/8a4f87b14edf795e31afdbe84a6750ce/c989d/affiliate.jpg 325w,
/static/8a4f87b14edf795e31afdbe84a6750ce/6aca1/affiliate.jpg 650w,
/static/8a4f87b14edf795e31afdbe84a6750ce/7c09c/affiliate.jpg 975w,
/static/8a4f87b14edf795e31afdbe84a6750ce/01ab0/affiliate.jpg 1300w,
/static/8a4f87b14edf795e31afdbe84a6750ce/0a997/affiliate.jpg 2424w&quot; sizes=&quot;(max-width: 650px) 100vw, 650px&quot; style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h2&gt;Skills&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Adobe Indesign&lt;/li&gt;
&lt;li&gt;Adobe Illustrator&lt;/li&gt;
&lt;li&gt;Adobe Photoshop&lt;/li&gt;
&lt;li&gt;Digital Marketing&lt;/li&gt;
&lt;li&gt;Social Media Marketing&lt;/li&gt;
&lt;/ul&gt;
&lt;style class=&quot;grvsc-styles&quot;&gt;
  .grvsc-container {
    overflow: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
    padding-top: 1rem;
    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));
    padding-bottom: 1rem;
    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));
    border-radius: 8px;
    border-radius: var(--grvsc-border-radius, 8px);
    font-feature-settings: normal;
    line-height: 1.4;
  }
  
  .grvsc-code {
    display: table;
  }
  
  .grvsc-line {
    display: table-row;
    box-sizing: border-box;
    width: 100%;
    position: relative;
  }
  
  .grvsc-line &gt; * {
    position: relative;
  }
  
  .grvsc-gutter-pad {
    display: table-cell;
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  .grvsc-gutter {
    display: table-cell;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter::before {
    content: attr(data-content);
  }
  
  .grvsc-source {
    display: table-cell;
    padding-left: 1.5rem;
    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));
    padding-right: 1.5rem;
    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
  }
  
  .grvsc-source:empty::after {
    content: &apos; &apos;;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter + .grvsc-source {
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  /* Line transformer styles */
  
  .grvsc-has-line-highlighting &gt; .grvsc-code &gt; .grvsc-line::before {
    content: &apos; &apos;;
    position: absolute;
    width: 100%;
  }
  
  .grvsc-line-diff-add::before {
    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));
  }
  
  .grvsc-line-diff-del::before {
    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));
  }
  
  .grvsc-line-number {
    padding: 0 2px;
    text-align: right;
    opacity: 0.7;
  }
  
&lt;/style&gt;</content:encoded></item></channel></rss>