Salena Xu: Portfolio Site
Calista Lee
Challenge
Salena Xu is a UI/UX designer who needed to bring her portfolio website design from Figma to life. In the end of the project, I transformed her Figma design to a live website as well as adding a Content Management System (CMS) for her to add and update content in her website.
Visit her website: salenaxu.com
I had the pleasure of working with Calista on my website, and I highly recommend her. Calista is a talented web developer who brilliantly brought my vision to life. I am delighted with the results and would gladly work with her again.
My Contribution
Development . Deployment . Maintence
Development
Initially, Salena only wants to have her portfolio website design in Figma brought to live as a single website. But after thinking through about the use cases that she might need in the future, I proposed to add Strapi CMS that she can use to add and update contents in her website, especially the portfolio part. By having CMS up and running, she won't need to tinker with the website source code and focus on editing content of her website through the CMS interface. This brings efficiency on her side as well as avoids technical errors that might happen due to changing the website's source code.
One page of her website design is a contact page. To make it easier to implement emailing system, I decided to use EmailJS API. The great thing about using EmailJS is automating replies and saving contacts. These contacts can then be used by Salena to track leads.
Technologies used
ReactJS . EmailJS . Strapi (CMS)
Deployment
Before hosting her website, I suggested her to buy a domain name for her site in NameCheap. They usually offers the best prices for domain names and they have a dashboard to manage all domain names users have bought in NameCheap as well.
The most affordable hosting option with the best flexibility is Linode. The most affordable tier was under $6/mo and it's more than enough to host 2 projects. Since Linode gives SSH access to their server, I figured it would be best to setup Docker Compose for both the website project as well as Strapi project. Docker Compose makes it easier to deploy and run projects with a consistent environment. After running both Docker containers in the Linode server, her website is now live alongside with CMS dashboard.
Technologies used
Docker Compose . Linode . NameCheap
Like this project
Posted Oct 22, 2023
Transforming Figma design to live website with Content Management System for seamless content editing.
Likes
0
Views
32
