My Portfolio
shotach.com is @shotastage’s portfolio site. I have decided to revamp this site using Next.js.
This article will detail the technologies used on this website and our approach.
Backgrounds
Many software engineers have their own websites for portfolios to showcase their activities and technical capabilities. I also created my portfolio site when I was a freshman in university. However, due to a busy schedule, my current portfolio site has remained un-updated. Therefore, I intend to renew the design and revise it to incorporate the latest technologies in line with current trends. In making this portfolio site, there are important points listed below.
- Create a fast-loading and low-cost website
- Minimize the workload involved in creating, building, and deploying websites
- The unconstrained representation of the portfolio and the ability to implement functions flexibly
Firstly, the ‘ability to maintain low fixed costs’ is of utmost importance. While a portfolio site can act as a trigger to monetize such businesses, it is not capable of monetizing itself. In addition, such a portfolio website should be designed for long-term publication, rather than short-term.
Moreover, if the website’s download speed is too slow, it can degrade the quality of the viewer’s experience.
Therefore, there’s a need for a server that, despite the low cost, can display content quickly.
Secondly, to realize ‘minimize the procedures from creation to deployment’ needs automation.
In this website, I will actively adopt an automatic build pipeline.
Used Technologies
To realize the website as described above, I have done technology selection. To build a portfolio site, advanced technology is not necessary, however, using too primitive technology can make tasks such as operating and optimizing complicated DOMs difficult.
This time, I decided to use Next.js as a Web UI library and Vercel as a CI and hosting server. Following are the details of each one.
Next.js
Next.js is a JavaScript framework based on React and is fundamentally similar to React. In addition to basic React features, it supports multiple functions such as server-side rendering and pre-rendering or pre-generation. Furthermore, it can be described as “React for Vercel”, which makes it easy to target building and deploying to Vercel.
Vercel
Vercel is one of the web cloud platforms that allows for the unified management of constructing an automatic build pipeline and hosting a website. It also supports edge computing and self-hosted API constructing feature, we can compose
Architecture
This figure shows the architectural relationships of each actor. As shown in the figure above, when I push website code to Github, the building and deployment process will automatically start on Vercel. During the building process, pre-rendering or pre-generation will be conducted, and data will also be automatically fetched from MicroCMS.
These automatic procedure workflow let me
Conclusion
Headless and automatic content generation website let us more workless for creating and updating contents. Comparison to previous