Portfolio Generator

The Portfolio Generator is a tool that allows you to create a website using JSON data. This documentation explains how to use the JSON data format to generate a website.

Personal Information

The personal property contains personal information about the individual. It includes the following properties:

• name: The individual's name.(required)
• title: The individual's job title.(required)
• email: The individual's email address.(optional)
• phone: The individual's phone number.(optional)
• shortBio: A short bio of the individual.(optional)
• location: The individual's location.(optional)
• profiles: An array of profiles on various social media platforms.(optional)

Work History

The work property contains an array of work history objects. Each work history object has the following properties:

• employer: The name of the employer(required).
• location: The location of the employer.(optional)
• title: The job title(required).
• website: The website of the employer.(optional)
• dates: The dates of employment.(optional)
• highlights: An array of highlights of the work experience.(optional)

Education History

The education property contains an array of education history objects. Each education history object has the following properties:

• institution: The name of the institution(required).
• major: The major or field of study(required).
• degree: The degree earned.(optional)
• graduationDate: The date of graduation.(optional)
• gpa: The grade point average (optional).

Project Sections

The projectSections property contains an array of project section objects. Each project section object has the following properties:

• title: The title of the project section.(optional)
• projects: An array of project objects. Each project - - object has the following properties:(required)
  • title: The title of the project.(required)
  • link: The link to the project (optional).
  • thumbnail: The thumbnail image for the project.(optional)
  • description: A description of the project.(optional)
  • gallery: An array of image URLs for a project gallery (optional).

Example JSON Data

{
  "displayOrder": [
    "shortBio",
    "projects",
    "work",
    "education"
  ],
  "personal": {
    "name": "John Doe",
    "title": "Software Developer",
    "email": "johndoe@email.com",
    "phone": "123-456-7890",
    "websites": [
      {
        "network": "linkedin",
        "label": "johndoe",
        "url": "https://www.linkedin.com/in/johndoe"
      },
      {
        "network": "github",
        "label": "johndoe",
        "url": "https://github.com/johndoe"
      }
    ],
    "shortBio": "Hello! I am John Doe. I make stuff. Here's some of it.",
    "location": "Delaware",
    "profiles": [
      {
        "network": "Twitter",
        "url": "http://twitter.com/johndoe"
      },
      {
        "network": "github",
        "url": "http://github.com/johndoe"
      },
      {
        "network": "linkedin",
        "url": "https://www.linkedin.com/in/johndoe"
      }
    ]
  },
  "work": [
    {
      "employer": "ABC Company",
      "location": "Newark, DE",
      "title": "Software Engineer",
      "website": "http://google.com",
      "dates": "July 2014 - Present",
      "highlights": []
    },
    {
      "employer": "DEF Company",
      "location": "Newark, DE",
      "title": "Software Developer",
      "website": "",
      "dates": "January 2012 - June 2014",
      "highlights": [
        "Implemented new APIs",
        "Integrated and tested existing C++ libraries with the Google Testing Framework",
        "Improved functionality in the backend as well as the frontend of the system",
        "Technologies used: C++, SQL, PHP, ExtJS, Unix"
      ]
    },
    {
      "employer": "University of Delaware",
      "location": "Newark, DE",
      "title": "Research Assistant",
      "website": "http://google.com",
      "dates": "September 2010 - December 2011",
      "highlights": [
        "Worked on Model and Simulation of DRAM-PCM Dual Architecture with Dr. Chengmo Yang",
        "Developed simulators for various parts of the architecture",
        "Integrated different algorithms",
        "Tested the algorithms and analyzed the results",
        "Presented research findings at research seminar"
      ]
    }
  ],
  "education": [
    {
      "institution": "University of Delaware",
      "major": "Computer Engineering",
      "degree": "Master of Science",
      "graduationDate": "Fall 2020"
    }
  ],
  "projectSections": [
    {
      "title": "Backend",
      "projects": [
        {
          "title": "Project with long paragraph description",
          "link": "https://github.com/johndoe/rep.git",
          "thumbnail": "https://raw.githubusercontent.com/johndoe/portfolio-generator/master/screenshot.PNG",
          "description": "This was a project to develop a backend API for a weather application. It involved creating endpoints for the different weather data to be returned to the application frontend, using technologies like Node.js and Express. I also implemented various features like caching and authentication to improve performance and security. This was a challenging project that allowed me to gain a lot of experience with backend development."
        },
        {
          "title": "Project with no thumbnail",
          "link": "https://github.com/johndoe",
          "description": "This project is about doing something awesome! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo, neque non vestibulum consequat, elit elit feugiat elit, vel rhoncus ante purus at sapien. Ut bibendum urna vitae erat pharetra, in porttitor dolor ultrices. Sed quis massa a arcu bibendum suscipit vitae at odio."
        },
        {
          "title": "Project with no link",
          "thumbnail": "https://raw.githubusercontent.com/johndoe/portfolio-generator/master/screenshot.PNG",
          "description": "This was another interesting project I worked on. It involved creating a backend for a messaging application that allowed users to send messages to each other in real-time. The backend was built using technologies like Node.js, Express, and Socket.io, and it required a lot of coordination between the frontend and backend teams to ensure everything worked seamlessly. It was a great experience that taught me a lot about teamwork and communication."
        }
      ]
    }
  ],
  "settings": {
    "enableDownload": true
  }
}

To use this JSON data with a portfolio generator tool, you can save the data in a JSON file and provide the file path as an input to the tool or you can fetch data from a URL. you can find it in functions/utils.js

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:3000
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally, before deploying
npm run astro ...	Run CLI commands like astro add, astro check
npm run astro --help	Get help using the Astro CLI

Why Astro ?

Because Astro is a modern static site builder that offers many features such as a flexible and powerful component system, built-in support for popular frameworks like React and Vue.js, fast and reliable builds with incremental compilation, and a customizable build process.