ameira.me
Tags: showdev, netlify, nextjs, react
Published: 2021-02-16 22:32:14

---
description: "ameira.me is the personal website for Ameira Yanni, an aspiring copywriter and actor. It is built using Next.js, Tailwind CSS and uses Framer Motion for animations."
---

[ameira.me](https://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](https://www.netlifycms.org) so that Ameira is able to edit and add to her portfolio guaranteeing that it always contains her most recently completed works. [Framer Motion](https://www.framer.com/motion) is used to create the animations that [ameira.me](https://ameira.me) to life.

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/5q0d3sitw46308o7z2jx.png">
  <figcaption>The homepage</figcaption>
</figure>

##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. 

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/7wpfylq0j87msadir4ws.png">
  <figcaption>The portfolio page</figcaption>
</figure>

##Technical Details
Like many of my website projects, [ameira.me](https://ameira.me) is built using [Next.js](https://nextjs.org). 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](https://tailwindcss.com) and [Framer Motion](https://www.framer.com/motion/) to add all the animations that bring the website to life. It is hosted on GitHub Pages.

Additional details:
* [Remark](https://github.com/remarkjs/remark) and the [Remark-html converter](https://github.com/remarkjs/remark-html) are used to convert the content from markdown to HTML, while [Gray-Matter](https://github.com/jonschlinkert/gray-matter) parses any YAML front-matter that exists in the markdown content. 
* [Netlify CMS](https://www.netlifycms.org) creates and modifies markdown files and uses the GitHub workflow to commit any changes back into the repository. 
* [Travis](https://travis-ci.org/) 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](https://jestjs.io) and the [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) 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](http://codecov.io).

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/itvyize4ho9yowj3gwyz.gif">
  <figcaption>Scrolling down the homepage</figcaption>
</figure>

[The source code for ameira.me is available on GitHub.](https://github.com/james-wallis/ameira.me)

[Visit ameira.me](https://ameira.me)