Welcome to Heather's Blog
008 | NEXT.JS website & Career Goals

008 | NEXT.JS website & Career Goals

Hello All!

If you're just joining my journey, be sure to check out Blog Post # 001 for a general introduction, and Blog Post #005, #006, and #007 to witness the initiation of my website endeavor.

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.

To kick off this ambitious project, I chose to leverage the power of Next.js. Currently, my website is up and running locally on my machine, and I'm eager to share the process with you.

In the spirit of transparency and to track my progress, I'll be documenting the time invested in each blog entry. It'll be fascinating to observe how my efficiency evolves throughout this journey.

Creating Sections

As I embark on this exciting web development venture, one of my primary focuses is ensuring that my codebase is organized and efficient. Starting with a clean slate, I've chosen a mobile-first design approach, keeping in mind the ever-growing prevalence of mobile users.

Code Organization:

To lay a solid foundation, I'm trying to meticulously organize my design, my thoughts, and my code. Proper structuring not only enhances readability but also paves the way for smoother collaboration and future maintenance. With the help of best practices and coding standards, I aim to create a codebase that's not just functional but elegant.

Mobile-First Design:

In a world where smartphones are attached to us at all times, embracing a mobile-first design philosophy is my strategic choice. The Next.js starter project serves as the canvas for my creative process...

 and I'm thrilled to share some sneak peeks of my mobile design with you.

And before we begin coding, here are my main sections for the landing page

  1. Navigation
  2. Header: Who am I and What I do
  3. Testimonies
  4. Main Portfolio
  5. Resume: My Career Story
  6. Contracting: Services, Process, and Values
  7. Artistic Portfolios
  8. Footer

Each section serves a unique purpose, collectively narrating my story and showcasing my skills. Now that you’re caught up on what has been completed thus far, let’s delve into some geeky Code.

Crafting the Head Tag - Laying the Foundation for Meta Magic

Ah, the <head> tag — a mini-hero of our web development. While you cannot see it, the <head> tag’s role is crucial in communicating metadata that shapes the page's behavior and appearance. This tag will play a pivotal role in optimizing it for search engines. Each page will boast unique metadata, tailored to enhance its discoverability and appeal. But, let's not get ahead of ourselves; today's focus is on laying the groundwork for these future SEO endeavors.

In just five minutes, I've laid the foundation for the <head> section, establishing the rudimentary elements that will evolve into a symphony of metadata. These initial steps may seem small, but they pave the way for a more nuanced exploration in the days to come.

The head basics only took 5 min.

Migrating my Figma Design into Code

Time Block: 1 hour (So, 2hrs 5 min total)

As I progress, it's time to bring some content into my digital canvas by transplanting the text from my Figma design into the source of my website — the JavaScript file. Picture this: raw, unstyled, yet full of potential :)

My mission today is to migrate all the curated content, each component and letter meticulously designed in Figma, into my JavaScript file. To keep things tidy and future-proof, I'll encapsulate each section within an <article> tag. Within these articles, you'll find headings, paragraphs, and even the prelude to styling — the class names that will soon bring vibrancy to my content.

A Sneak Peek: Code Snippet:

Now, let's take a moment to glimpse at the semi-unadorned beauty (or lack thereof) when my content sits within the confines of the Next.js starter project. With less than 15 minutes of styling, I will show you the result. I personally cannot picture my site when it looks just like the next JS starter project. It is simply bones, and I don’t need perfection but I want to see progress. Therefore, I simply added my typography hierarchy and adjusted the margins while also importing two placeholder images

Now as I compare this with the Figma design from earlier in this post, I have a long way to go before I can launch this website out into the world. But, after 2 hours and 20 minutes of coding, this is not a bad start for a non-programmer like myself.

Let’s Make Some Styling Headway

Time Block: 1.5 hours (So, 3hrs 35 min total)

I would like to start from the top to the bottom and attack small bite-sized projects during this time block I’ve set aside to work on my website.

Social Bar

At the beginning of my session, my code just displays one letter in an <A> link tag for each social media platform I would like to display. I would like to use fontAwesome for the icons in this section. First I will install the dependencies (“is a relationship between software components where one component relies on the other to work properly.”) to the code project(my website files) by following this quick tutorial I found on dev.io.

And like magic, I have a small iconic cup of coffee on my browser!

Instead of coffee though, I will add the four icons for Facebook, Behance, Instagram, and Dribbble. And since a user must click these with a finger I will follow some best practices and make each icon at least 42 pixels tall.

Other SEO items here: I added aria labels for automated and disabled usage and made each link open in a new tab via rel="noopener noreferrer."  These updates took me 20 minutes in total.

Testimonials

This is the next easy section to update as far as styles go. It is mostly just the alignment of text and I would love to implement the sideways scroll so the user feels less overwhelmed with the sheer amount of content my page contains.

First I am going to add a <div> tag around my content and make a new style called scrollingWrapper. Within this <div>, each testimony will fall into a <section> with a <quote> or testimony, <cite> or author, and an optional <h4> if the author has a title that needs to be included.

Then I can move over to the CSS file to make any style changes. The really cool thing here is that as I style this section, I am paving the way for the portfolios at the bottom of my landing page that will need to scroll left and right as well. I can choose to create this style with flex-box or by making each section inline and then adding overflow controls/parameters to the outside container. I prefer Flex-box, so my code will look something like this:

Now, according to my Figma preview, I want to add a subtitle and align the font. Pagination can wait until later.

Portfolios

Mostly, I need to add in my real images and link these to my Behance page with a “noopener” (this opens each link in a new tab.)

Technology

Digital Scribing

This is a live illustration done during an event to help with engagement and learning retention.

What Comes Later

It is most important for me to get my website up and live to gain and keep clients in 2024, so I have prototyped and need to add the following sections later, but for now, I want my homepage and blog up ASAP.

Footer

My main goal here is to make navigation and next steps super east, so this will contain the Call-to-action, social icons, and internal links only. Here is the prototype:

Now, based on my code, you can see my organization. Nothing from the <nav> has links, and all of my call-to-actions are dead ends right now. Also, I have not styled the footer, so once the content is added, this is how it looks.  It is not horrible, but we should center it all up and use a flex-box for the internal navigation links so they make a pretty little list.

Also, since I use this in my code three times... I made it into a component before linking my social media accounts so I don’t do three times the work every time I make a change.

Mobile Styling

Time Block: .75 hour (So, 4hrs 20 min total)

Or in our case, larger sizes! So The layout I designed is optimized for 300-700 pixels wide and covers most small to medium phones. Then as we scale up to larger phones (600-800 pixels wide) I will focus on adding margin. Finally, for tablets and desktops, I will style to design to look more like this desktop prototype. 

I made these SVG curves in Illustrator and then copied the path only to display them in between sections. This SVG will not affect loading speed and was so fun to learn to create and insert into the code. Here is the article I used to learn from.

Setting up my Blog

Time Block: 1.6 hours (So, we are at about 7hrs now total)

Ooh, this is scary and daunting. I am integrating with a Google Document Service Created by DIJS. My lovely spouse is emotionally supporting me through this process. My role is to publish my website up to Vercel, a Frontend Cloud service that will let me build my website with security and speed. And as a hobby user, I will run this site for free! Which is great for my budget goals too. Here are the steps I took.

  1. In my project, I created a blog folder/directory with 2 files, one for the blog landing page and one for the post itself.
  2. My husband set up the integration to pull in my Google Documents that host and serve all this lovely blog content.
  3. I styled the initial blog home page with the list of posts
  4. I styled the blog itself: here is a before and after of my first blog, because it was oh so bad!

The Wrap-Up for The Site

After 7 hours of building my site, let’s call this a week and come back to this in the next blog. First off, thank you again for joining me in this learning-focused experiment. My goal is to be a better project manager and UI/UX designer once I have been through the entire front-end and back-end development of a website and blog. This week I started by web project with GitHub and served it up to Vercel. I added my mobile first initial design or about 60% of my home page content and then added stying for tablet and desktop. We also walked through this blog’s initial development so it can be read by you on any device with ease.

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.

Chat about Career Goals

After debating about being a stay-at-home mom, working freelance, returning to the workforce, and financial independence... My husband and I did a huge Google sheet of our budget and realized that if I stayed home and worked as a designer for hire...my possible reduction in salary only add 2 to 3 years to our Financial Independence goal. With that, I would love to use those 2-3 years to focus on improving my skills and building my contract/freelance business so that when I return I am ready to dive back into a challenging role. I miss the coworkers, daily challenges, and even the stress of a traditional corporate design job.

So with that background, I want to chat about setting career goals. I feel like when we take a step back and begin to focus on self-improvement and advancing our careers, we typically prioritize several key areas or aspects:

  1. Skill Development: Enhancing existing skills and acquiring new ones relevant to our field or industry like technical skills, soft skills (such as communication or leadership), or specialized knowledge.        
  1. For me, I could use skillshare, join business groups, or delve into leadership skills for the specific roles I may want to apply for in 2 years.
  1. Education and Training: Pursuing formal education, attending workshops, and seminars, or obtaining certifications can contribute to career advancement and personal growth.
  1. I have not picked the exact roles for my future, but certificates have been on my radar for a while now.
  2. The more design challenges I do this year, the more I will hone and maintain my skills.
  1. Networking: Building professional relationships, expanding networks, and seeking mentorship or guidance from experienced professionals can provide valuable insights and opportunities.
  1. Relationships: Attend conferences and local groups
  2. Expand network someone recommended to ask for props on LinkedIn with their built-in feature
  1. Goal Setting: Setting clear, achievable goals helps individuals stay focused and motivated. These goals may include short-term objectives (e.g., completing a project) and long-term aspirations (e.g., achieving a certain position).
  1. I think I will need to do much more research on my career role goal before I set steps to reach this.
  1. Personal Branding: Developing a strong personal brand by showcasing our skills, accomplishments, and unique value proposition through platforms like portfolios, social media, or personal websites.
  1. The website is halfway done
  2. I would love to be more present on Social media with these areas in mind
  1. Time Management and Productivity: Improving time management skills, prioritizing tasks effectively, and adopting productivity tools or techniques can enhance efficiency and performance.
  1. If you have been reading along, this has been an area I have been improving. So far, this week I will beagle to work 3-4 hours during naps and 4 more hours with childcare. The rest of my work is done nights and weekends when others can help parents.
  1. Feedback and Reflection: Seeking feedback from peers, mentors, or supervisors, and reflecting on past experiences helps individuals identify areas for improvement and refine their strategies.
  1. Scary but wonderful. This goal may be somewhere we spend some more time in the coming months.
  1. Adaptability and Resilience: Cultivating adaptability, resilience, and a growth mindset enables individuals to navigate challenges, embrace change, and seize opportunities for learning and development.
  2. Wellness and Work-Life Balance: Prioritizing self-care, maintaining a healthy work-life balance, and managing stress are essential for sustained career success and overall well-being.
  3. Continuous Learning and Innovation: Embracing a mindset of continuous learning, staying updated with industry trends, and fostering a culture of innovation is crucial for staying competitive and relevant in today's dynamic job market.

By focusing on these areas, we can all enhance our skills, expand our opportunities, and achieve small or large career goals while fostering personal growth and fulfillment. Thank you for following along in my journey and I can’t wait to write to you again next week.

Heather