A highly customizable platform ready to be a portfolio website, and become a lot more with some of your own components

Overview

github-logo

Vextra

Elegant and animated portfolio website.

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 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. You can also setup your CMS 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.

Installation

Setting up Font Awesome

First you need to get your own access to FontAwesome fonts.

  1. Head over to fontawesome.com/kits and get your kit which is a link.
  2. Paste that link in /data/local/_dataGeneral.ts in front of fontAwesomeKitAddress

Setting up Firebase Analytics (Optional)

If you'd like to have Firebase/Google Analytics in your website, you can set it up by providing your firebaseConfig object.

  1. Head over to console.firebase.google.com and create a new project.
    • Make sure Google Analytics is enabled.
  2. Create a Web app from inside the project dashboard.
  3. Find firebaseConfig in Project Settings.
  4. Copy it's data and paste it in /data/local/_dataGeneral.ts in front of firebaseConfig

Running Locally

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 dev

After that open localhost:3000 in your browser.

Deploying to Web

The easiest way to get this website running on web is to use Vercel's (creator of NextJS) deployment tool.

  1. Push the code to a private GitHub or Gitlab repository.
  2. Go to Vercel.com and create an account, then import the repository.
  3. 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 Page

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.

Edit this in:

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

About Me

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.

Edit this in:

/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;
}

Contact Me

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.

Edit this in:

/data/local/dataContactPage.ts

interface ContactGroup {
  socialHandle: string;
  links: Links[];
}

interface Links {
  icon: string;
  href: string;
  showInHome?: boolean;
}

Portfolio

To make new Portfolio items in this tab, you should make a list of Portfolio Objects.

Edit this in:

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

Portfolio Pages

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.

Licence

Weedware. If you want to use this commercially, you have to buy me a joint.

Bitcoin Address:
Bitcoin
bc1qar2ukc0llsctga6rcgc58kuek5f89dwxpvc5ud

Ethereum Address:
Ethereum
0xb43f418bc5355c45331b6838f559d86f7de0410a

You might also like...

Type Identity - a powerful and highly customizable authentication and authrozation and access-control framework

Type Identity is a powerful and highly customizable authentication and authrozation and access-control framework. It is the de-facto standard for securing Type Script api beta release

Jan 1, 2023

A port of bitcoin-core that will (over time) become TS friendly.

bitcoin-core A modern Bitcoin Core REST and RPC client to execute administrative tasks, multiwallet operations and queries about network and the block

Nov 22, 2022

A little animation for a big menu where the letters of a word shuffle to become the first letter of each menu item.

A little animation for a big menu where the letters of a word shuffle to become the first letter of each menu item.

Letter Shuffle Animation for a Menu A little animation for a big menu where the letters of a word shuffle to become the first letter of each menu item

Dec 4, 2022

A simple lightweight file dropzone component based on jQuery. You can easily make any existing element become a dropzone that holds files.

file-dropzone A simple lightweight file dropzone component based on jQuery. You can easily make any existing element become a dropzone that holds file

May 31, 2021

Highly customizable checkboxes and radio buttons (jQuery & Zepto)

iCheck plugin 1.0.3 Highly customizable checkboxes and radio buttons for jQuery and Zepto. Refer to the iCheck website for examples. Note: iCheck v2.0

Dec 25, 2022

This simple library allows you to create awesome responsive and highly customizable popups importing just one JavaScript file.

Creativa - Popup This is a simple library that allows you to create awesome popups importing just one JavaScript file. Getting started You can import

Mar 29, 2022

🛡️ Dead-simple, yet highly customizable security middleware for Apollo GraphQL servers and Envelop 🛡️

🛡️ Dead-simple, yet highly customizable security middleware for Apollo GraphQL servers and Envelop 🛡️

GraphQL Armor 🛡️ GraphQL Armor is a dead-simple yet highly customizable security middleware for various GraphQL server engines. Contents Contents Sup

Jan 9, 2023

Highly customizable checkboxes and radio buttons (jQuery & Zepto)

iCheck plugin 1.0.3 Highly customizable checkboxes and radio buttons for jQuery and Zepto. Refer to the iCheck website for examples. Note: iCheck v2.0

Aug 24, 2022

A highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations.

A highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations.

Features Web Bookmarks Service Bookmarks Docker Integration Status light + CPU, Memory & Network Reporting (click on the status light) Service Integra

Dec 30, 2022
Owner
null
portfolio-project is a npm package to automatically update your projects section in your portfolio website. It will fetch the selected repositories directly from your GitHub account.

portfolio-project Those days of manually updating portfolio website after every new project made are gone ⚡ Yesss . . . you read that right. ?? portfo

Gaurav Gulati 15 Aug 3, 2021
MUI Core is a collection of React UI libraries for shipping new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.

MUI Core MUI Core contains foundational React UI component libraries for shipping new features faster. Material UI is a comprehensive library of compo

MUI 83.6k Dec 30, 2022
There can be more than Notion and Miro. Affine is a next-gen knowledge base that brings planning, sorting and creating all together. Privacy first, open-source, customizable and ready to use.

AFFiNE.PRO The Next-Gen Knowledge Base to Replace Notion & Miro. Planning, Sorting and Creating all Together. Open-source, Privacy-First, and Free to

Toeverything 12.1k Jan 9, 2023
`raaghu-mfe` is an opensource micro front end framework built on top of `raaghu-elements`, Bootstrap 5 and Storybook offering highly customizable UI components and built-in pages

`raaghu-mfe` is an opensource micro front end framework built on top of `raaghu-elements`, Bootstrap 5 and Storybook offering highly customizable UI components and built-in pages. Raaghu mfe can be used as a base to build complex components and UI layouts whilst maintaining a high level of reusability,flexibility with ease of maintenance.

Wai Technologies 160 Dec 30, 2022
🔨 A more engineered, highly customizable, standard output format commitizen adapter.

cz-git Github | Installation | Website | 简体中文文档 Introduction A more engineered, highly customizable, standard output format commitizen adapter. What i

zhengqbbb 402 Dec 31, 2022
This is a boilerplate for creating your own languages for various use cases. You can even create your own programming language from scratch!

Bootstrap compiler This is a bootstrap compiler that can be used to compile to compiler written in the target language. You can write a compiler in th

Kaan 3 Nov 14, 2022
A highly opinionated and complete starter for Next.js projects ready to production

The aim for this starter is to give you a starting point with everything ready to work and launch to production. Web Vitals with 100% by default. Folder structure ready. Tooling ready. SEO ready. SSR ready.

Fukuro Studio 28 Nov 27, 2022
My-portfolio - 🪶 My portfolio built with Remix, ChakraUI...

Welcome to Remix! Remix Docs Deployment After having run the create-remix command and selected "Vercel" as a deployment target, you only need to impor

jotyy 5 Oct 31, 2022
URL Shortener API in NodeJS supporting pagination, sort params and lot more

node-url-shortener Built with ❤️ in NodeJS A simple URL Shortner REST API that uses shortid npm package to generate short endpoints for your long URL.

Dhairya Ostwal 3 Sep 22, 2022