009 | NEXT.JS Website: Building out my Blog, Components, and More

Hello All!

Over the last three weeks of blogs, I have spent 7 hours beginning my GitHub project and serving it up as a Vercel web app.

As mentioned previously, I'm a UI/UX designer with a journey that extends back to 2012. While I've dipped my toes into coding with JS, HTML, JSON, CSS, and SaSS, I've never undertaken the challenge of creating a complex website from the ground up. Fortunately, in moments of uncertainty, I have a secret weapon – my husband, a seasoned Sr. Developer, is always there to offer guidance when Googling or YouTubing doesn't quite cut it.

What is Complete so Far

I organized my code as much as I could from the beginning, prioritized mobile-first design, and created my head tag with the beginnings of the needed SEO.

After migrating the majority of my content from Figma to my React Project, I added images, icons, and links accordingly.

Then I made style changes for tablet and desktop that would ease the user's flow through sections with a lot of content like my testimonials.

Then, I added an initial blog page that links these posts to a list of posts automatically served via Google Docs. This integration was made by DIJS.

During the first 7 hours of work, I learned that 1. component development would make my life SO MUCH easier. 2. Mobile development first isn’t that hard when you plan for it. And, I learned that inserting 3. Custom SVG code is fast, rewarding, and doable for a novice engineer.

 What is on My To-Do List

In a perfect world, this is the list of tasks I would like to complete this week. But we are also still budgeting meal planning, parenting, and running a household so we shall see what gets done.

1. Restyle the button in portfolio sections to be wider and have an outline ✔
2. Add a career story section
3. Add development consultation services, process, and values section
4. Add load more button and functionality for long portfolio sections and content
5. Add artistic portfolio heading and following sections

1. Murals
2. Acrylic paintings
3. Digital illustrations
4. Original watercolor art
5. Packaging and labels
6. Layout
7. Travel photography
8. Fine art photography
9. Svg and vector graphics
10. Fabric and pattern design

6. Align/style footer for desktop to be full width ✔
7. Make blog landing page with photo and title (I accidentally deleted this over the weekend ✔
8. Style list of blog links and add photo, date, and TLDR snippet placeholders ✔
9. Connect photo, date, and TLDR pull from the Google Docs Metadata ✔
10. Style actual blog post ✔
11. Do mobile/tablet/desktop styling for blog and post ✔
12. Complete initial SEO for landing, blog, and post pages
13. Push to Vercel and run a lighthouse test.
14. Later - get my shop online: This will be a migration using Square.

Blog: Progress and Tips/Tricks

The to-do list above is in no specific order, but now that I have a moment to work I have my water and some Oreos (YEAH!!) so I can make some progress on my blog. I did this once and then lost my progress, but at least I have an idea in my head. Here is where we are starting (both the blog landing and the post/slug):

After the initial stab at my blog landing page, I added a pace for more details on each post, a typography hierarchy, navigation and footer, and the intro/title section. This took me 1.5 hours, which means I’ve spent a full day working on this website so far in coding alone. Thankfully, I’ve learned a lot along the way as well. Here is stage two for the mobile and desktop blog landing pages.

It isn’t perfect or even snazzy, but for a flex-box react project with no help and 1.5 hours... it “ain’t too shabby” either.

Next, for each slug or post, I need to make this easy to read on mobile, tablet, and desktop. I also want to give it a header and footer while adding a little gradient in the background to show progress as you read the full length of the article. Here is the initial design for this as well. This section took me 45 minutes, and I am not up to 9 hours and 15 min.

1. Flexbox is awesome and you can learn about it here: My tip is to apply your size stylings via text box. For example, on small screens, make the flex-direction a column instead of a row!
2. Dribble is a wonderful website for inspiration.
3. Making your blog readable is more important than stylish. Here are a few tips from usibilitygeek.com and okwrite.com

1. Have margins and white space for easier reading.
2. Simplicity is key, you want the reader to read the post without being stressed or overwhelmed/distracted.
3. Test your site, most readers will be on their phones. So, take a look at your blog on your phone.

Code: Components

To help keep a maintainable website, I am going to sacrifice some time to separate items I use often into components. Here are the items I will take out:

1. The footer section appears on all three pages.
2. The social bar
3. The Nav (the list of pages; Blog Testimony, Portfolio, etc.)

Now I am up to 9 hours and 15 minutes total.

New Sections: I am Adding and Styling the Sections from my List Above.

First, My career so far. This section is mostly text and serves as a bio and resume. Here is how it looks after 45 min - so 10 hours total.

Styles: Let’s use this time wisely

My favorite thing about styling is that each task takes 5-10 min! So while I have a cup of coffee I can make a small 1% progress. Here are examples of how long each took:  

1. Restyle the button in my portfolio sections to be wider and have an outline (2 min) ✔
2. Align/style footer for desktop to be full width (3min) ✔
3. Check blog styles on Desktop, iPad/tablet, and phone (both large and small.) (15 min)✔
4. Fix clipping on images for portfolio: I used object-fit: contain/cover. (5 min) ✔

At 10 and a half hours I am feeling great and making tons of progress on my website.

I Spent All Weekend on Crazy Improvements!

First of all yay! I am so excited I got so far, and I would love to run through my improvements and show you some imagery of how far I have come. Then I will wrap up this week what some key takeaways, tips, and learnings.

1. Added our business consultation services section (1 hour)
2. Upload all of the small portfolios at the bottom of the home page (1 1/2 hours)
3. Added watercolor and Social Media to these portfolios (35 min)
4. Fixed Grammar and spelling with Grammarly (30 min)
5. Styled blog and entire website for large monitors wider than 1500 px (10 min)
6. Ran a lighthouse score and got everything above 90% (30 min)
7. Set up the Blog SEO metadata (10 min)
8. Added a navigation link to my current shop page (currently run with Printify and Square) (10 min)
9. I removed the mobile menu and just styled the current menu for smaller devices (10 min)
10. Added my social bar to the career section and made a resume component (30 min)
11. Added a button that returns a true or false for read more on my resume: Coming soon. (2 hours)

So after 18 hours and 45 minutes of work, not all of which was efficient since I am new to some of the more complicated back end and javascript tasks I gave myself, this is how the website looks.

Take Aways

So, I mentioned takeaways, tips, and learnings.

1. Organization and Prioritization: Just like when I set January goals. Breaking downsomething large into tasks that are now manageable chunks is important. Then you still may need to focus on prioritizing them based on importance and feasibility helps in effective project management. Some tasks may even be dependant on something elsse, and therefore you can move them further down your list. For example, I needed content and sections in my website before I could style them.
2. Utilizing Resources: I leveraged the expertise of my spouse and bloggers so that I could be hands on and learning while making progress, especially in unfamiliar territories.
3. Component Development: I do not always make components, but your projects can become very overwhelming when we avoid the efficiency and benefits of component-based development in streamlining the coding process and maintaining a maintainable website structure. For example, I received feedback that my website order should change. This will be horribly hard to do as is, and I will make sections into components so I can easily play with their order.
4. Mobile-First Design: Embracing the mobile-first approach simplifies the design process and ensures compatibility across various devices, leading to a better user experience.
5. Continuous Learning and Adaptation: Embracing a mindset of continuous learning, experimenting with new techniques, and adapting to challenges encountered along the way are essential for growth and improvement. As we chatted a bit last week, I ended with a section on career improvement, and this is an area I am really trying to embrace.
6. Attention to Detail: Paying attention to details such as readability, usability, and visual aesthetics contributes to creating a more engaging and user-friendly website. This can take time. I am four weeks into this design and I still have a lot of detail oriented fixes to make.
7. Incremental Progress: Celebrating small victories and making consistent progress, even if it's incremental, leads to significant accomplishments over time. All progress takes time, and the time is what makes the dopamine hit worth it as we enjoy the journey not just the achievement.
8. Efficiency and Time Management: Allocating time wisely, focusing on high-impact tasks, and optimizing processes contribute to productivity and project efficiency. But, with this... take a step back and strive to set manageable goals.
9. Testing and Optimization: Regularly testing the website's performance, (like a Google Lighthouse Score) conducting SEO optimizations, and ensuring compatibility across different devices and browsers are crucial for delivering a polished final product.
10. Reflection and Iteration: Reflecting on past experiences, identifying areas for improvement, and iterating on designs and functionalities based on feedback contribute to ongoing refinement and enhancement of the website. This week I only got feedback from one person. After I make these changes, I will get even more input and then this loop is repeated.

Heather