Global Info

Hero Section

Social Section

Skills Section

Instruction Message

Techs Navigation Bar

Projects Section

Contact Section

Styles / Colors

Styles / Fonts

Deployment

The basic info to fill this portfolio is stored in src/site/_data/metadata.json

It includes:

• title: the title of your portfolio, used in the <meta> tag;
• description: the description of your portfolio, used in the <meta> tag;
• hero: your personal info, some of the items will be explained in details in the Hero and Contact Section;
• hero/name: your name, used in the <meta> tag, as the author;

Info about you, the hero / heroin! All items are optional. As mentioned above, the items are in src/site/_data/metadata.json.

It includes:

• avatar: your profile picture. If used, you need to replace the file avatar.png in the folder src/site/assets/;
• greeting: a greeting message;
• description: a short dev description;

Your social networks are stored as objects in src/site/_data/social.json.

It includes:

• name: the social network;
• icon: icons by Font Awesome;
• url: the url to be used in the anchor tag;

Your skills. It can be edited in src/site/_data/techs.json.

It includes:

• label: the tech itself. It is also used to display the tech in the techs navigation bar;
• link: used as a class to display and style the Techs Navigation Bar;
• icons: array of icons by Font Awesome. You can add as many icons as you want;

Delete the code and the file listed below to get rid of the Instruction Message:

• code: {% include 'components/info.njk' %} in src/site/_includes/layouts/base.njk
• file: src/site/_includes/components/info.njk

A navigation bar with your skills.

'All' renders all your projects in the index page. The other tabs are generated according to the file techs.json.

Info about your projects. It can be edited in src/site/_data/projects.json.

Edited items are:

• tech: must have the same name (without the prefix 'to') as one of the links in the file techs.json;
• E.g.: techs.json "link": towebdev / projects.json "tech": webdev
• name: the name of the project;
• image: an image of the project. If you have a demo page for the project, the image will have an anchor tag to the live demo;
• description: a description of the project;
• code: optional url to a code repository;
• demo: optional url to a live demo;

The form is configured to be used with Netlify Forms.

If you are going to deploy it in GitHub Pages I recommend you to use some static form provider, as staticforms.xyz.

Here is a list of other form providers: https://css-tricks.com/a-comparison-of-static-form-providers/.

There is also a button to open an email app with the email provided in the metadata.json file.

You can customize any component you want directly in the components files.

Or, to make it easier, all principal colors are brought together in tailwind.config.js file.

• herocard: the background color of the hero card;
• buttonbg: the background color of the buttons;
• buttonhover: the background color of the buttons when hovered;
• buttontext: the text color of the buttons;
• footerbg: the background color of the footer;

Fonts can be edited directly in the same way as the colors.

• sans: the default font of all the content;
• header: the font used in the header and the footer;

You need to import any new font in the file src/site/_includes/css/main.css.

The deployment instructions are detailed in the Github Repository.