This is the repository of Bruno Arizio portfolio. We decided to be transparent and take a step forward in making this entire project open source so people can learn how to make the things we created. The website was awarded at Awwwards with Site of The Day and Developer Award in November 25, 2019.
After that, you need to setup an account at Prismic and create your fields with the same names used by this application, in the end of this README file you're able to find all the instructions related with it.
We're using a
.env file to retrieve our credentials used by Prismic and also the Google Analytics ID. So you need to create a
.env file in the root of this application like this:
GOOGLE_ANALYTICS=YOUR_GOOGLE_ANALYTICS PRISMIC_ACCESS_TOKEN=YOUR_ACCESS_TOKEN PRISMIC_CLIENT_ID=YOUR_CLIENT_ID PRISMIC_CLIENT_SECRET=YOUR_CLIENT_SECRET PRISMIC_ENDPOINT=YOUR_ENDPOINT
After creating your
.env file and setting up your Prismic account, you're able to run your project without any problems by running the commands below in your terminal.
# Clone the project. git clone https://github.com/lhbzr/bruno-arizio.git # Install npm depedencies. npm install # Configure .env variables and run the website. npm start
I think this might be the trickiest part of running this project locally, you need to understand how Prismic works, then create your fields there and then finally populate the content. To make your life easier, I'm providing all JSON structures inside the
prismic folder of this repository. Don't forget to match the names used in the JSON files with the ID of your Custom Type of Prismic.
You'll also notice a
images folder inside the
prismic folder. By the time I've developed this portfolio, I wasn't aware of
three-bmfont-text approach. You can see how it works in this very nice article by Mario Carrillo available at Codrops. So I have used Canvas API to generate these images and then I was loading them as textures for the text of the website. (
Stroke, you just need to include the respective ones from this folder.
That's all folks! I hope this repository might be useful for your learnings. When I was starting my career, I've learned a lot from Bruno Imbrizi, Giulian Drimba and Silvio Paganini public repositories, among many others public repositories made by incredible people. So I'm doing it too as a way to contribute with the growth of the community as well.