ameira.me is the personal website for Ameira Yanni, an aspiring copywriter and actor. Ameira's website acts as a platform to promote herself as a freelancer and collates all her work into a portfolio accessible to potential clients. The website design is simple and is powered by Netlify CMS so that Ameira is able to edit and add to her portfolio guaranteeing that it always contains her most recently completed works. Framer Motion is used to create the animations that ameira.me to life.
Task
Ameira required a website that provided a great user experience so prospective clients are able to find out more about her and her work. She further explained that the majority of her website should be her portfolio and she needed to be able to modify that section herself. Ameira and I designed the website closely to ensure these requirements were fulfilled and that the site reflects her. Once the design was agreed upon, I built the website and surprised Ameira by adding subtle animations around the website to add a little flair to an otherwise simple website.
Technical Details
Like many of my website projects, ameira.me is built using Next.js. Their dynamic routes are used to create the portfolio by creating pages based on the corresponding markdown files which store the content. To style the website I used Tailwind CSS and Framer Motion to add all the animations that bring the website to life. It is hosted on GitHub Pages.
Additional details:
- Remark and the Remark-html converter are used to convert the content from markdown to HTML, while Gray-Matter parses any YAML front-matter that exists in the markdown content.
- Netlify CMS creates and modifies markdown files and uses the GitHub workflow to commit any changes back into the repository.
- Travis is used as a CI/CD pipeline to rebuild whenever a new GitHub commit is pushed. When Ameira modifies a markdown file through Netlify CMS, Travis rebuilds and deploys the updated website onto GitHub Pages.
- Jest and the React Testing Library are used to maintain confidence that each new build of the website is good. Its test coverage currently sits at 99% and is reported to Codecov.
