It is a Portfolio website and blog developed with MUI and NextJS in TypeScript. All data are editable without changing any code file.
You need to put all image files in the public folder. You can then edit the data/data.json file to configure the home page.
It supports markdown, .md format for blogs. Blog content should be in the blog folder.
The base structure of data.json is as like below:
{
name: string; // your name
siteName: string; // site name
profileImage: string; // relative path of profile image
siteUrl: string; // site url
contact: string; // [Optional] Email to contact
footer: string; // Footer text
facebook: string; // [Optional] Facebook url
instagram: string; // [Optional] Instagram url
twitter: string; // [Optional] Twitter url
github: string; // [Optional] Github url
linkedin: string; // [Optional] LinkedIn url
stackoverflow: string; // [Optional] Stackoverflow url
devto: string; // [Optional] dev.to url
medium: string; // [Optional] Medium url
dribble: string; // [Optional] Dribble url
youtube: string; // [Optional] YouTube url
description: Description[]; // detail is mentioned below
steps: Steps[]; // detail is mentioned below
}
An array of Description objects. Each object is used to render the description boxes. In the demo website, these are About, Mobile Development and Web Development.
Each object in this array looks as like below:
{
title: string; // title string
description: string[]; // An array of string. Each string is used for a new line.
tags?: string[]; // [Optional] Used to show the tags
}
It is an array of Step objects. Each Step object is used to draw a timeline. You can add multiple timelines.
Each Step object looks as like below:
{
title: string; // title of the timeline
description: string; // description of the timeline
data: StepData[]; // An array of content to show in the timeline
}
Each StepData object looks as like below:
{
details: boolean; // boolean value.
time: string; // timeline or anything that you want as step title
label?: string; // [Optional] title to show for the timeline
description?: string; // [Optional] description to show for the timeline
tech?: string[]; // [Optional] An array of strings to show the tech stack/tools used
images?: string[]; // [Optional] An array of relative paths of demo images
links?: string[]; // [Optional] This array should hold only two values, first one is the name of the link and second one is the link
}
Color configuration is in utils/Colors.ts file.
export enum Colors {
ACCENT = 'orange', // accent color
HIGHLIGHT = 'red', // highlight color used in animation
PARTICLES_DARK = '#ffa726', // particle color in dark mode
PARTICLES_LIGHT = '#e0e0e0', // particle color in light mode
}
You need to run npm install or yarn to install all dependencies before
You can use the below command to run the project in debug mode:
npm run dev
or,
yarn dev
To create a production build, you need to first build the project:
npm run build
or,
yarn build
Once the build is completed, you can use the below command to run it:
npm run start
or,
yarn start
To check for lint errors, use the below command:
npm run lint
or,
yarn lint
Similarly, to format with prettier,
npm run format
or,
yarn format
- Clone the project
- Login to Vercel and click New Project on the dashboard
- Select the project from Github project lists and configure it.
- Add a project name
- Select framework preset as Next.js
- Keep others same and click on Deploy.