The Importance of Having a Personal Website as a Software Engineer

Why did I build this site?

I built this website to showcase my personal brand and share my experiences, projects, and thoughts through a custom blog platform. The process of building and rebuilding it from scratch has been a rewarding journey.

Creating a personal brand is a unique journey of discovery and self-expression. For a developer, building your own platform is also an incredible opportunity to blend your creativity with technical expertise.

With your own platform:

• You have full control over the design and presentation, which becomes a personalized representation of your brand.
• The process of building provides an opportunity to expand your technical abilities and knowledge in the area you wish to grow.
• As a developer, you have the flexibility to shape your platform to meet your evolving needs with customizable functionality.
• Writing regularly will enhance your writing skills and support your professional development.

The journey so far

Initially, I started with a simple static HTML and CSS website and hosted it on GitHub Pages. This allowed me to get a basic understanding of the technologies involved in building a website. However, motivated by curiosity and a desire to broaden my professional capability, I soon realized that I wanted to expand my skills and try out new technologies.

So, I transitioned the website to Eleventy, discovering the benefits of static site generators. The experience improved my JavaScript skills and introduced me to a new workflow, including setting up a custom build system and utilizing Netlify as a Content Delivery Network (CDN).

Next, I overhauled my website with Gatsby, which gave me exposure to GraphQL. This opened up a whole new way to handle data, and Gatsby allowed me to build even more dynamic and interactive pages. At the same time, working extensively with components was an enjoyable experience that made me fall in love with React.

After that, I converted this same project to TypeScript, which allowed me to write cleaner and more maintainable code. Additionally, learning TypeScript was pivotal in my job search, given its widespread acceptance nowadays as a required front-end skill.

I then rebuilt my website with Next.js and gained experience with server-side rendering, in particular, first with the Pages Router and then with React Server Components and the App Router. This move gave me a deeper understanding of how websites are built and delivered to users and how server-side rendering can expand the capabilities and enhance the user experience of a website.

Presently, I have rebuilt this website with Remix, which I've found to be amazing. Remix excels at leveraging web fundamentals, server-side rendering, and progressive enhancement for, in my opinion, the best possible user experience today. Working with Remix has deepened my understanding of these core web development concepts and best practices.

Every transition and evolution in this process isn't just about adopting the latest technology. It's about growth and pushing my boundaries. I've found the process of starting over repeatedly develops flexibility and confidence to work with any technology.

Frameworks and tools come and go, but design patterns and the fundamentals always remain. When faced with a new technology, I focus on what I can learn from its underlying principles. You're not chasing a trend; you're future-proofing your skills by learning core concepts.

Why build a blog?

Blogging regularly has been a factor in getting noticed by potential employers and landing my first full-time role as a developer. It has provided a platform to demonstrate my skills and passion for the field. This blog became a topic of discussion during job interviews, and I had the valuable opportunity to explain my thought process in building the site and my experience with different technologies.

In essence, I believe that building your own platform is a powerful way to showcase your skills and advance your career in software engineering. By identifying in-demand technical skills and applying them through real-world projects, you can demonstrate your expertise and potentially make a strong impression on employers.

Additionally, writing is an essential skill in software engineering, and writing regularly can improve your writing skills and help you grow professionally.

But what will you write about? There is no limit to what you can write, but if you're facing writer's block, a great starting point is to document the journey of building your website and projects. This can include your experiences, thoughts, and challenges, and it can also allow you to articulate your understanding of the technologies involved.

Finally, having a documented record of your journey can serve as your own personal reference, providing valuable insights and recall of the steps you took in the future. Also, I often find that writing about my journey consolidates my learning and clarifies my thinking on these complex topics.

So, where do I start?

Registering a domain is a straightforward process and is an actionable step you can take right now. While I personally use Name.com for my registrations, you have numerous options here. Many platforms like Namecheap, GoDaddy, and Cloudflare offer domain registration services, and I don't believe it's worth sweating the difference between them. Just pick one.

I recommend opting for extensions like .com, .dev, or .me. A domain in the format of FirstNameLastName.com, in my opinion, is the most professional and instantly signals to visitors that it's a personal website. Choosing a domain that clearly represents you ensures that people can easily recognize and remember it as your personal online space.

Following your domain registration, it's a good idea to set up a professional email address to match. Ideally, you'd want an address like you@yourdomain.com or similar. While self-hosting your email service with projects like Mail-in-a-Box is an option, I'd advise some caution here due to ongoing maintenance, security, and deliverability concerns. Personally, I've opted for Fastmail, which I've been super happy with over the years. That said, even using Gmail can work, provided you ensure it's integrated with your custom domain, i.e., avoid @gmail.com.

Now you have a personal domain and professional email to anchor your brand. I've found this combination not only provides a sense of professionalism but also adds credibility when you're reaching out to potential employers, collaborators, or clients.

If you're just starting out on this journey, I'd advise you to start with the basics: HTML, CSS, and JavaScript. Setting aside frameworks and other tools at the onset allows you to establish a solid understanding of the building blocks of web development. GitHub Pages provides a convenient and free service that readily supports the integration of your newly registered domain.

Program your future

In front-end development, hiring decisions frequently center on proficiency in specific tech stacks. And you'll want to choose technology that is optimized for your employability. What I love about this process is you are the one steering the canoe. You chart a path and effectively program your own future.

One way to identify in-demand skills is to look at current job postings and the technologies they require. Keep in mind that the technology industry is constantly evolving, so it's important to stay informed and continue to learn new skills as they emerge. For frontend roles, for instance, you might look at a resource like the Frontend Developer Roadmap to get a lay of the land.

But with so much ground to cover, that might still leave you wondering what to prioritize.

I highly recommend speaking to individuals in senior positions at the companies you hope to work for. They will provide valuable insights into the technologies they use and the skills they look for in candidates. Aim to have at least several conversations with different people to get a better understanding of the industry.

After consulting with my mentor and having these discussions early on, I chose to concentrate on React. By pairing it with a full stack framework such as Next.js, Remix, or Astro, you can unlock a broad range of capabilities.

A Checklist of Requirements

When building your personal website, here is a checklist of what I consider baseline requirements:

1. A visually appealing design that aligns with your personal style
2. Responsive and works on a variety of screen sizes
3. High performance with top-notch Lighthouse metrics
4. Built with accessibility in mind
5. Deployed with your custom domain

With that established going forward, you can decide on functionality, which will depend on your current needs and priorities. If you're seeking a starting point, I recommend integrating the following elements:

1. A blog to share your experiences and thoughts
2. A dedicated space to showcase your personal projects
3. A contact form for collaborators and potential employers to reach out
4. Integration with at least two external APIs

Now, let's dive deeper into these suggestions.

Build a blog system

While a content management system (CMS) like WordPress is a popular choice for non-technical users, I suggest you consider alternative options as a developer seeking to demonstrate your talent and technical ability. In other words, I recommend you build your own system.

You could use markdown to author your content, which can be checked into your version control system (e.g. git repository). This approach reduces overhead and resource requirements compared to a CMS and allows you to keep track of changes to your content.

MDX is another interesting option, which combines the simplicity of markdown with the ability to include React components. This offers more flexibility and interactivity compared to traditional markdown while still maintaining its ease of use.

However, if you're considering server-side rendering (SSR), which offers arguably a better separation of concerns and more efficient use of resources, it becomes advantageous to store your markdown or MDX content in a database. Storing content in a database also simplifies content management, particularly as your collection of articles expands.

Display your project work

I recommend you prioritize a few high-quality projects over many mediocre ones, including your personal website. Ensure that all projects meet the previously mentioned checklist, and go the extra mile by including:

• Documentation
• Unit testing
• End-to-end testing
• Continuous integration

Also, make sure the project is deployed and accessible to the public. By showcasing your projects through pinned repositories on GitHub and integrating with APIs to display them on your website, you can make your portfolio stand out.

Build a contact form

Having a clear and accessible contact form is an essential part of your personal website. The contact form allows potential employers or other interested parties to reach out to you directly and easily. Here are a few things to keep in mind when setting up your contact form:

• Make it easy to find: Place the form in a prominent location on your website, for example, put it on the front page and on a "Contact" page
• Keep it simple: Only ask for the information that is necessary, such as name, email, and message.
• Validate inputs: Use form validation to ensure the information submitted is complete and in the correct format.
• Provide feedback: Let the user know that their submission was successful or if there was an error.
• Follow up: Respond to submissions in a timely manner and continue the conversation as needed.

By following these guidelines, you can create an effective and user-friendly contact form that helps you connect with potential employers and others. There are several options for setting up a contact form, including using a service like Sendgrid, Mailgun, Formspree, and Getform.

Integrate with external APIs

I suggest that you incorporate at least two external APIs on your website. This not only shows your proficiency in working with external data sources, but also adds dynamic and interactive elements to your website, making it more engaging. As an example, on my own website, I use the Spotify API to display my ten most recently played tracks on the "About" page.

Utilizing external APIs can also showcase your technical skills and knowledge in working with API integrations. It shows that you are capable of bringing data from multiple sources and integrating it seamlessly into your website.

Conclusion

I hope this guide has provided you with some inspiration and ideas for building your own personal website. I encourage you to take the first step and start building your website today. You can start with a simple static website and add more features as you go. The important thing is to get started and keep building.

You are welcome to take inspiration or use code from my website. The source code is available on GitHub with updated documentation to make it easier for you to start. If you have any questions or feedback, don't hesitate to reach me on Twitter.