How to Create a Front-End Engineer's Portfolio Website

Overview

This website is integrated with "Google Search Console," and I've noticed that recently many people have been visiting it after searching for terms like "front-end engineer portfolio creation." In this article, I'd like to summarize what I was thinking and the creative aspects I implemented when I created this portfolio website as a front-end engineer. I hope it can be a reference for those who are interested in creating their own websites.

Identify Your Target Audience

When creating the site, I first decided who I wanted to target. The motivation for creating this site was to have something publicly available to showcase my skills during job hunting. Additionally, as I am currently working as a freelancer, I wanted to create a platform where I could showcase my achievements to potential clients. Based on these considerations, I identified the following target audience for this site:

• Corporate recruiters
• Directors
• Managers
• Freelancers looking for potential work opportunities

Determine the Content

After identifying the target audience, I then thought about what kind of content I needed to provide to cater to their needs. For this, I conducted research by looking at other portfolio websites to see what kind of content is typically included.

For corporate recruiters and potential clients, I included the following content:

• Introduction
• Resume
• Qualifications
• Blog
• Contact Information

Highlight Your Strengths

Next, I decided what aspects I wanted to highlight about myself. This was based on my interests, strengths, and what I wanted to pursue in the future. Here are some of the things I wanted to highlight:

• Proficiency in front-end technologies, including HTML, CSS, JavaScript
• Ability to implement API integrations
• Design skills using Adobe XD
• Interest in exploring and working in areas beyond front-end development

Implementation

Once I had a clear plan, I started implementing the website. I worked on creating the content and used the necessary technologies to achieve my goals. For example, I used Adobe XD to design, Nuxt.js for front-end development, and implemented API integrations.

Other

I would like to roughly summarize the things I was conscious of and the ideas I came up with while working on this last task.

Don't Aim for Perfection from the Start

I didn't aim for perfection right from the start. My first portfolio website was created around 2017, and at that time, I had limited experience with JavaScript frameworks like React. I started with a simple static site using HTML, CSS, and jQuery. Over time, I improved and updated the site as I gained more skills and experiences, including using WordPress and Nuxt.js. I believe it's important not to overwhelm yourself and start with the basics, gradually improving your site over time.

Keep Operating Costs Manageable

When you publish a website, there will be ongoing operating costs, such as server hosting. It's essential to consider your budget and choose hosting services that are within your financial means. Many affordable hosting options are available, and you can even use free hosting services like Netlify or Vercel. Select services that allow you to run your project efficiently and cost-effectively.

Incorporate What Interests You

I incorporated various technologies and services into my portfolio site, including Strapi for content management, AWS for hosting, GraphQL for API communication, and more. While some of these technologies may not be directly related to my core skills as a front-end engineer, I was personally interested in them, and I wanted to explore and learn more. If you're passionate about certain aspects, don't hesitate to incorporate them into your site. On the flip side, if you have no interest in the backend, you can opt for simpler solutions like microCMS. Embracing what interests you can make the website creation process more enjoyable.