Portfolio.js

Raw Code

This is the raw code which will be downloaded at time of building the portfolio.

info

Portfolio Generator will ask you for data which can replace the variables. If you don't enter correct data, then you can change variables manually also.

Data/Portfolio.js

// Filters
[[filterVariables]];

const filters = [[filterList]];

const generateFilterString = (...fils) => {
  return Array.from(fils).join(" ");
};

// URL Types
[[urlVariables]];

// Category Types
const cat_types = [[catTypes]];

// Projects
const projects = [[projectList]];

// Get Details
const getDetails = (id) => {
  if (!id || id < 0 || id >= projects.length) return projects[0];

  const pr = projects[id];
  let fils_ = pr.filter.split(" ");
  let cats_ = [];
  fils_.forEach((el) => {
    cats_ = [...cats_, cat_types[el]];
  });
  let cat = cats_.join(", ");
  pr["category"] = cat;

  return pr;
};

export default { filters, projects, getDetails };

Variables

caution

You can refer this table if you have any kind of confusion regarding adding data into variables. Remember variables are very sensitive respect to their types and data format. Data should be added in the instructed format only.

Variable	Description	Type	Details
filterVariables*	Generated code for filter variables	Code	View
filterList*	Generated list of all filters	List Code	View
urlVariables*	Generated code for url variables	Code	View
catTypes*	Generated json for category types	Object Code	View
projectList*	Generated list of all projects	List Code	View
image*	Image associated to project	Image file	View

info

Data which will be asked by portfolio-generator for variable marked as * will be in different format.

Data Asked by portfolio-generator for variable filterVariables

Variable	Description	Type	Constraint	Example
Count*	Number of filters	Integer	Value 3 to 8
Variable Name	Name of variable	Text	Max length 30	game_filter
Filter Name	Name of filter	Text	Max length 10	game

tip

• Count will be asked only once.
• Then all variables will be asked Count times i.e. once for each filter.

Data Asked by portfolio-generator for variable filterList

info

• No additional data will be asked for filterList variable.
• It will be automatically generated by data of filterVariables only.

Data Asked by portfolio-generator for variable urlVariables

Variable	Description	Type	Constraint	Example
Count*	Number of URLs	Integer
Variable Name	Name of variable	Text	Max length 30	git
URL Name	Name of URL	Text	Max length 10	Github

tip

• Count will be asked only once.
• Then all variables will be asked Count times i.e. once for each URL.

Data Asked by portfolio-generator for variable catTypes

Variable	Description	Type	Constraint	Example
Category	Name of Category for given filter	Text	Max length 10	Game

tip

• Category name will be asked corresponding to each filter.

Data Asked by portfolio-generator for variable projectList

Variable	Description	Type	Constraint
Count*	Number of Projects	Integer
Project Name	Name of project	Text	Max length 20
Available Filters	All filters applied to the project	Multi-Select
Folder Name	Name of folder where to store images related to project	Text	Max length 20
Description count	Number of statements describing the project	List
Description statements	Enter all descriptions one by one	Text
URLs count	Number of urls associated with the project	List
URL Type	Type of url (Enter for each URL)	Select
URL	URL value (Enter for each URL)	URL	Must be a valid URL

tip

• Count will be asked only once.
• Then all variables will be asked Count times i.e. once for each project.

Data Asked by portfolio-generator for variable image

Variable	Description	Type	Constraint	Details
Confirmation	Consent to add a image	Confirm	Yes/No	If no then auto-generated error image will be shown in website for that project.
Image Path	Complete path to a webp image	Path	Must be valid webp image	An image of size 800x600 will provide better results in website.

tip

Above details will be asked for each project seperately.

Final Code Example

After adding the data, the code will look like:

Data/Portfolio.js

// Filters
const game_filter = "filter-game";
const web_filter = "filter-web";
const desktop_filter = "filter-desktop";
const ai_filter = "filter-ai";
const android_filter = "filter-android";
const blockchain_filter = "filter-blockchain";

const filters = [
  game_filter,
  web_filter,
  desktop_filter,
  ai_filter,
  android_filter,
  blockchain_filter,
];

const generateFilterString = (...fils) => {
  return Array.from(fils).join(" ");
};

// URL Types
const git = "Github";
const playstore = "Playstore";
const setup = "Setup";
const web = "Website";

// Category Types
const cat_types = {
  [game_filter]: "Game",
  [web_filter]: "Website",
  [desktop_filter]: "Desktop App",
  [ai_filter]: "Artificial Intelligence",
  [android_filter]: "Android App",
  [blockchain_filter]: "Blockchain",
};

// Projects
const projects = [
  {
    name: "Face Detector",
    filter: generateFilterString(ai_filter, desktop_filter),
    img: "face_detector",
    desc: [
      "It is an AI project to detect your face & eyes either by live webcam, uploaded photo or video.",
      "Made in python using OpenCV.",
    ],
    urls: [
      [[git], "https://github.com/cybersaksham/Face-Detector"],
      [
        [setup],
        "https://github.com/cybersaksham/Face-Detector/raw/master/setup_face_detector.exe",
      ],
    ],
  },
  {
    name: "INC",
    filter: generateFilterString(web_filter, blockchain_filter),
    img: "inc",
    desc: [
      "INC(Indian National Coin) is a demo crypto-currency made in motoko.",
      "You can view, transfer & receive INC coins on this website",
    ],
    urls: [[[git], "https://github.com/cybersaksham/INC"]],
  },
];

// Get Details
const getDetails = (id) => {
  if (!id || id < 0 || id >= projects.length) return projects[0];

  const pr = projects[id];
  let fils_ = pr.filter.split(" ");
  let cats_ = [];
  fils_.forEach((el) => {
    cats_ = [...cats_, cat_types[el]];
  });
  let cat = cats_.join(", ");
  pr["category"] = cat;

  return pr;
};

export default { filters, projects, getDetails };

danger

• Above data is dummy data which will be produced when you run portfolio-project with --dummy option.
• This data is the personal data of Saksham Bindal
• This data is only for testing purpose. You are not allowed to misuse the data.
• You are not allowed to distribute or publish this data.