Demo: vextra.vercel.app
Vextra is a portfolio template, packed with animations with a satisfying flow to page navigation.
You can customize the website for yourself by going to /data/
directory where you can find all the data files you need to edit
things. You can also put your images and videos under /public/ directory.
There's a frontend CMS solution developed for this website, named RichContent. It allows you to create beautiful and animated pages very fast and nearly anybody can make pages with it easily by editing a javascript Object. You can also setup your CMS backend to make things even easier. To see some examples of it, please visit the Portfolio tab.
Vextra is written using a combination of NextJS, TypeScript, and Emotion, the latter provided by MaterialUI package.
First you need to get your own access to FontAwesome fonts.
- Head over to fontawesome.com/kits and get your kit which is a link.
- Paste that link in
/data/local/_dataGeneral.tsin front offontAwesomeKitAddress
If you'd like to have Firebase/Google Analytics in your website,
you can set it up by providing your firebaseConfig object.
- Head over to console.firebase.google.com
and create a new project.
- Make sure Google Analytics is enabled.
- Create a Web app from inside the project dashboard.
- Find
firebaseConfigin Project Settings. - Copy it's data and paste it in
/data/local/_dataGeneral.tsin front offirebaseConfig
You need to have Node and Yarn installed on your machine.
In the project directory, run these:
# install all the required packages listed in package.json
$ yarn install
# run the website in development environment
$ yarn devAfter that open localhost:3000 in your browser.
The easiest way to get this website running on web is to use Vercel's (creator of NextJS) deployment tool.
- Push the code to a private GitHub or Gitlab repository.
- Go to Vercel.com and create an account, then import the repository.
- A few minutes later you'll be presented with the links to your website.
If you want to deploy it on your own server, visit this link for more information.
Landing starts by a big logo image taking all the screen, and then getting smaller while other elements start appearing. After you click on a Tab button and open it, the image will turn into a small logo image and moves to the center of the header. Below is the data it needs for this, however this data is also used in other places.
/data/local/_dataGeneral.ts
interface GeneralDataModel {
logoBig: string;
logoSmall: string;
applyColorToLogo: boolean;
fontAwesomeKitAddress: string;
fonts: string;
defaultFont: string;
startupImageCacheQueue: string[],
firebaseConfig?: {};
}applyColorToLogo : You can choose to have colors applied to your logo when you navigate the site, which you can disable by setting this to false.
fonts : Website is set up to
use Google Fonts.
startupImageCacheQueue : You can put a list of image links here that should appear as soon as user navigates to a page,
and they will be downloaded and cached as soon as the website
loads, ready to be displayed quickly.
Data in this page consists of two parts. One holds image, name, and two long strings. And the other one is a list of History objects that you can fill with anything that demonstrates your abilities and the things you've done.
/data/local/dataAboutMePage.ts
interface AboutMeData {
image?: string;
name?: string;
textTop?: string;
textBottom?: string;
}
interface History {
groupTitle: string;
icon: string;
items: Item[];
}
interface Item {
title: string;
date?: string;
description?: string;
}When viewing the website on a large screen, Contact Me will have its own tab, and will be displayed in it. However, on mobile the tab will hide and the content will be displayed in About Me tab.
/data/local/dataContactPage.ts
interface ContactGroup {
socialHandle: string;
links: Links[];
}
interface Links {
icon: string;
href: string;
showInHome?: boolean;
}To make new Portfolio items in this tab, you should make a list of
Portfolio Objects.
/data/local/dataPortfoliosPage.ts
interface Portfolio {
linkId: string;
name: string;
isBig?: boolean;
image: string;
awardImage?: string;
awardIsTransparent?: boolean;
isBackgroundDark?: boolean;
pageRichContent: RichChunkModel[];
headerItemsColor?: string;
backgroundColor?: string;
textColor?: string;
}isBig : By default the first item in http.../portfolio page is sized big
and the rest will be placed in a row of two elements.
Setting this value on items that would be small, will cause them to be
big as well.
awardImage: You can give an award image to a portfolio item
and when you enter the home page, it'll show up after a little
while, and then will become small and sits in bottom left corner.
However, Award images are made to work with square images, and
things may look funky otherwise.
To fix this, you'll need to open
/components/PagePortfolio/PortfolioItem.tsx and go to line 87.
There's more information there.
awardIsTransparent: If your award image has transparent background,
set this to true. Otherwise, a shadow will be cast behind the award.
isBackgroundDark : awardImage uses this in http.../portfolio page
to decide if the shadow behind it should be white or black.
There's a special package developed for this website, named RichContent. It allows you to create beautiful and animated pages very fast and nearly anybody can make pages with it easily by editing a javascript Object.
To make it work, you need to give a list of RichChunkModel to the
pageRichContent property. To see some examples of it running, please
go to vextra.vercel.app/portfolio.
To learn how you can create your own pages, visit https://vextra.vercel.app/portfolio/rich-content-handbook. It is a page entirely built using Rich Content, and it explains how you can make your own.