In production: vikinggamingsite-clone.vercel.app
Working as a freelance web designer, I developed a wordpress website for the e-sports organization Viking Gaming (the vikinggaming.gg). With NextJS, for study purposes, I decided to recreate the entire static website and add new features and layout behaviors to make it more beautiful, safe, performative, optimized and responsive. The project was hosted in Vercel and are available in the url: "vikinggamingclone.vercel.app"
As its an institutional site for an e-sports organization, it is a completely static site with a lot of focus on HTML and CSS (created with Sass). The "Home" and "About" pages are pure content pages that explain and captivate a visitor by introducing the team;
The "Line-Ups" page has the objective of showing the different lineups and modalities that the org works, being a more dynamic page that changes the players in the session from the modality chosen in a selector by the user. Player rendering uses a base component and is done by consuming static data provided by a .json file;
The "Contact" page is a form and social media page and has functionality to send emails with user responses in the form by calling the nextjs api endpoints and consuming a rest api from the EmailJS sending email service;
To get a local copy up and running follow these simple steps.
This is an example of how to list things you need to use the software and how to install them.
- npm
npm install npm@latest -g
- Clone the repo
git clone https://github.com/github_username/repo_name.git
- Install NPM packages
npm install
yarn
First of all, for the email sending functionality to run correctly, you will need to create a .env.local file and set the environment variables:
To your own keys and tokens and understand better the use of this variables, checkout the "src/pages/api/form.js" file and the EmailJs docs: https://www.emailjs.com/docs/rest-api/send/
npm run dev
yarn dev
Distributed under the Creative Commons Legal Code. See LICENSE
for more information.
Pedro Almeida - pedroalmeid@ignos.com.br