My Motivation

I always found myself switching portfolios, tried tons of templates but nothing suited my style. Some lack theming options and others were just too hard to keep updated.

So as a frontend developer, why not solve it the way that fits better with what I am good at?

Getting Started

1. npm install
2. npm start

Easy Theming

Steps to modify theme

1. Head over to src\utils\color-constants.ts

const mainColors = {
  primary: '#EA2E49',
  selection: '#FFDCED',
  gray: '#808080',
  light: '#FFFFFF',
};

2. Changing these colors 👆🏼 will take effect in the entire application.

Steps to Configure Dark Mode

The application is now dark mode enabled. The colors can be set using the following steps:

1. Head over to src\utils\color-constants.ts

const lightThemeColors = {
  particles: mainColors.primary,
  'selection-color': generatedColors.dark,
  'body-color': generatedColors.dark,
  'body-background-color': mainColors.light,
};
const darkThemeColors = {
  particles: mainColors.primary,
  'selection-color': generatedColors.dark,
  'body-color': mainColors.light,
  'body-background-color': generatedColors.dark,
};

2. Changing these colors 👆🏼 will reflect in the appropriate mode selected in the application.

Steps to Modify Information

1. Head over to src\data\data.ts

export interface IProfile{
  name: string;
  intro: string;
  skills?: ISkill;
  phone: string;
  email: string;
  socials: ISocial[];
  bio: string[];
  students?: IStudent[];
  experiences?: IExperience[];
  certifications?: ICertification[];
  projects?: IProject[];
  goodByeText: string;
}

2. The data being populated in the entire portfolio comes from this file. This file exports a JS Object which contains all the information required to populate each component. The object follows this structure. 👆🏼