Bob Liu Thoughts on UX Design & Strategy 2024-03-18T20:47:53Z https://liu.design/ Bob Liu bob@liu.design Welcome to liu.design 2024-02-26T00:00:00Z https://liu.design/blog/welcome/ <figure class=""> <source type="image/webp" srcset="https://liu.design/blog/welcome/new-site-1440w.webp 1440w, https://liu.design/blog/welcome/new-site-2400w.webp 2400w" sizes="100vw" /> <source type="image/jpeg" srcset="https://liu.design/blog/welcome/new-site-1440w.jpeg 1440w, https://liu.design/blog/welcome/new-site-2400w.jpeg 2400w" sizes="100vw" /><img src="https://liu.design/blog/welcome/new-site-1440w.jpeg" width="1440" height="960" alt="Illustration of an index card with text: “new site hello again world”" loading="lazy" decoding="async" /> </figure> <p>Hi there, and welcome to liu.design! Building a new website was one of my New Year’s resolutions. I’m glad to have completed it by March when 2024 can still be called the “new year.”</p> <p>This post marks the end of my previous portfolio website: bobliu.<nolink>io, which went live exactly four years ago on March 1, 2020. Here are some changes I made on the new website and things I learned while building it.</nolink></p> <h2>New Domain</h2> <p>I launched this website on <a href="https://liu.design/">liu.design</a>. I wanted to stop using bobliu.<nolink>io mainly because the .io domains became a part of the UK government’s modern-day colonialism<sup class="footnote-ref"><a href="https://liu.design/blog/welcome/#fn1" id="fnref1">[1]</a></sup>. I had been eyeing this domain for a while and was lucky no one grabbed it before I did.</nolink></p> <p>bobliu<nolink>.io now redirects to this site. I plan to keep the previous domain for a little longer and wait for the search engines to catch up.</nolink></p> <h2>Design More, Write More</h2> <p>I rewrote about my past projects when moving them to this site. It’s always fun to look back at my almost-binary mindset and think about how differently I approach things now. I hope you’ll have fun reading them too.</p> <p>My previous design portfolio didn’t have a structure to capture my random thoughts that are yet to be full-blown projects. So, as you read this post, I have also committed myself to write a blog. I hope to write about design strategies I experimented with, whether they worked or didn’t, and occasionally share life updates.</p> <h2>Eleventy</h2> <p>If you’re a designer, you probably are no stranger to portfolios sites forever under construction. To me, this wasn’t the first time I went from writing about a new project to rebuilding the entire website.</p> <p>I like static site generators and have used several of them to build my portfolio since 2017. bobliu.<nolink>io was built with a Vue-based static site generator called Gridsome. I liked the framework a lot but had to move away from it because the project’s development quietly ended in 2020.</nolink></p> <div> <div class="gallery undefined" id="gallery-previous-site"> <figure class=""> <source type="image/webp" srcset="https://liu.design/blog/welcome/previous-site-1440w.webp 1440w, https://liu.design/blog/welcome/previous-site-2400w.webp 2400w" sizes="100vw" /> <source type="image/jpeg" srcset="https://liu.design/blog/welcome/previous-site-1440w.jpeg 1440w, https://liu.design/blog/welcome/previous-site-2400w.jpeg 2400w" sizes="100vw" /> <a href="https://liu.design/blog/welcome/previous-site-2400w.jpeg" data-pswp-width="2400" data-pswp-height="2706" data-cropped="true" target="_blank"> <img src="https://liu.design/blog/welcome/previous-site-1440w.jpeg" width="1440" height="1623" alt="Screenshot of my previous site" loading="lazy" decoding="async" /> </a> <figcaption>Last screenshot of bobliu.io before it went offline</figcaption> </figure> </div> <script type="module"> import PhotoSwipeLightbox from '/assets/js/photoswipe-lightbox.esm.min.js'; import PhotoSwipe from '/assets/js/photoswipe.esm.min.js'; const lightbox = new PhotoSwipeLightbox({ gallery: '#gallery-previous-site', children: 'a', imageClickAction: 'close', tapAction: 'close', showHideAnimationType: 'fade', arrowPrev: false, arrowNext: false, zoom: false, close: false, counter: false, pswpModule: PhotoSwipe, preload: [1, 1] }); lightbox.init(); </script> </div> <p>This site was built from scratch with <a href="https://www.11ty.dev/" target="_blank" rel="noopener noreferrer">Eleventy</a>. I like that Eleventy:</p> <ul> <li>has an intuitive file structure</li> <li>supports any template language</li> <li>builds in no time for a site of this size</li> </ul> <p>My biggest pet peeve with static site generators is having to fiddle with file paths, and Eleventy was no exception to that. To customize the images displayed on this website, I had to create <em>shortcodes</em> and define where images live in the project folder. Figuring out the following line alone took my whole Saturday morning:</p> <pre class="language-js"><code class="language-js"><span class="token keyword">let</span> imageSrc <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>path<span class="token punctuation">.</span><span class="token function">dirname</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>page<span class="token punctuation">.</span>inputPath<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>src<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span></code></pre> <p>(Looks like Eleventy is working on an “almost-zero-configuration” image plugin<sup class="footnote-ref"><a href="https://liu.design/blog/welcome/#fn2" id="fnref2">[2]</a></sup> with the upcoming 3.0 release.)</p> <p>Other than that, Eleventy mostly felt flexible and forgiving, and it didn’t get in the way too much. I do wish Eleventy’s documentation was more detailed and included examples, though I found answers to most of my questions from the amazing blog articles others wrote.</p> <h2>Get in Touch</h2> <p>Together with the new domain, I also made myself a new email: <a href="mailto:bob@liu.design">bob@liu.design</a>. Drop me a line! You can also find me on social media linked from the bottom of this page. Thanks again for stopping by.</p> <hr class="footnotes-sep" /> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p><a href="https://www.wired.com/story/the-digital-colonialism-behind-tv-and-ly/" target="_blank" rel="noopener noreferrer">The Digital Colonialism Behind .tv and .ly</a> <a href="https://liu.design/blog/welcome/#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p><a href="https://fosstodon.org/@eleventy/111904085623744762" target="_blank" rel="noopener noreferrer">Eleventy on Mastodon</a> <a href="https://liu.design/blog/welcome/#fnref2" class="footnote-backref">↩︎</a></p> </li> </ol> </section>