react-dev-portfolio-builder

A simple portfolio or cv page aimed at developers, built with React, Bootstrap and Font Awesome.

Example: https://darylbuckle.github.io/react-dev-portfolio-builder

Install

npm install --save react-dev-portfolio-builder

Bootstrap is required as a peer dependency.

npm install --save bootstrap@4.5.2
npm install --save react-bootstrap@1.6.1

Usage

import React, { Component } from 'react'

import { PortfolioPage } from 'react-dev-portfolio-builder'
import 'react-dev-portfolio-builder/dist/index.css'
import 'bootstrap/dist/css/bootstrap.css'

class Example extends Component {
  render() {
    return (
      <PortfolioPage
        user={{
          firstname: 'Brian',
          lastname: 'Smith',
          headline: 'Web Developer',
          projects: [
            {
              name: 'My Website',
              owner: 'Brian Smith',
              startdate: new Date(2020, 6, 1),
              current: true,
              skills: [
                { name: 'React', group: 'Front End' },
                { name: 'Bootstrap', group: 'Front End' },
              ],
            },
          ],
          roles: [
            {
              title: 'Web Software Developer',
              company: 'ABC Solutions',
              location: 'Anytown, Your County, United Kingdom',
              startdate: new Date(2018, 2, 1),
              current: true,
            }
          ],
          qualifications: [
            {
              name: 'Bachelor of Science in Computer Science',
              location: 'Your University',
              grade: 'First Class Honours',
              startdate: new Date (2013, 8, 1),
              enddate: new Date (2016, 7, 1),
            },
          ],
          skills: [
            { name: 'React', group: 'Technologies', level: 60 },
            { name: 'Bootstrap', group: 'Technologies', level: 80 },
          ],
        }}
        page={{
          textColour: '#F44E3B',
          bgColour: 'grey',
          sections: [
            {
              identifier: 'Projects',
              title: 'Projects',
              subTitle: 'These are my own public and private projects.\r\n\r\nSelect a Project for more information.',
              systemUse: 'projects',
            },
            {
              identifier: 'Experience',
              title: 'Experience',
              subTitle: 'My professional experience.',
              bgColour: '#f6f6f6',
              systemUse: 'experience'
            },
            {
              identifier: 'Qualifications',
              title: 'Qualifications',
              subTitle: 'My academic qualifications.',
              systemUse: 'qualifications'
            },
            {
              identifier: 'Skills',
              title: 'Skills',
              subTitle: 'My key skills and technologies.\r\n\r\nClick on a technology to show projects that use it.',
              bgColour: '#f6f6f6',
              systemUse: 'skills'
            },
            {
              identifier: 'About',
              title: 'About',
              content: (
                <div>
                  <p>About me goes here.</p>
                </div>
              )
            },
          ],
        }} 
      />
    )
  }
}

It is recommended to also import bootstrap js in your html.

<!-- Bootstrap core JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>

Props

Property	Type	Mandatory	Description
page	Page	true	A Page object.
user	User	true	A User object.
projectClick	(project: Project) => void	false	Callback for selecting a project. If implemented the project modal will not be shown.
qualificationClick	(qualification: Qualification) => void	false	Callback for selecting a qualification. If implemented the qualification modal will not be shown.

Page props

Property	Type	Mandatory	Description
textColour	string	false	Primary text colour for headings. HTML hex expected.
bgColour	string	false	Background colour for the profile and footer sections. HTML hex expected.
coverUrl	string	false	Url of an image to as the background for the header.
logoUrl	string	false	Url of an image to use as the page name.
sections	Sections[]	true	An array of the Section object. A section is a part of the page which contains information.
externalLinks	Link[]	false	Additional links to show in the nav-bar which link to external pages.
hideFooter	boolean	false	A flag to hide the page footer. Defaults to false.
footerLContent	JSX	false	Override the left part of the footer content.
footerCContent	JSX	false	Override the centre part of the footer content.
footerRContent	JSX	false	Override the right part of the footer content.
footerEnd	JSX	false	Additional info to add onto the end of the footer.

Section props

All sections render a link in the nav bar if identifier is set and linkedIdentifier is not set.

Property	Type	Mandatory	Description
identifier	string	true	An unique id for the section. Used in the id of elements.
linkedIdentifier	string	false	Set this to an identifier of another element to link to that element. This will not show an additional link in the nav bar and will highlight the linkedIdentifier when in that Section. Use to make a link span multiple sections.
title	string	false	The header of the section.
subTitle	string	false	The sub-header of the section.
textColour	string	false	Text colour. HTML hex expected.
bgColour	string	false	Background colour of the section. HTML hex expected.
systemUse	string	false	Set to "projects" to render the My Projects tiles (projects in the User Projects list), "experience" to render your role timeline, "qualifications" to render your Qualifications tiles, "skills" to render your skills list. Any other value then the "content" prop will be rendered.
content	JSX	false	JSX content to render in the section.
className	string	false	A css class name for the container of the section.
tileClassName	string	false	A css class name for the tiles (projects, experience and qualifications only).

Link props

Additional links to external sites.

Property	Type	Mandatory	Description
title	string	true	A name for the link.
identifier	string	true	The url of the link.

User props

Property	Type	Mandatory	Description
firstname	string	true	Your first name.
lasname	string	true	Your last name.
headline	string	false	A headline or your job title.
title	string	false	Your current job title.
imageUrl	string	false	Url of an image to use in your avatar.
location	string	false	Your current location.
projects	Project[]	false	A list of your own projects.
roles	Role[]	false	A list of companies that you have been employed at.
qualifications	Qualification[]	false	A list of your qualifications.
skills	Skill[]	false	A list of skills and/or technologies that you have worked with.
linkedin	string	false	Your LinkedIn user name. If set this will show in the footer.
twitter	string	false	Your Twitter user name. If set this will show in the footer.
facebook	string	false	Your Facebook user name. If set this will show in the footer.
instagram	string	false	Your Instagram user name. If set this will show in the footer.
github	string	false	Your GitHub profile user name. If set this will show in the footer.
stackoverflow	string	false	Your Stack Overflow profile user id. If set this will show in the footer.
mailto	string	false	Email Address where the contact button will send to.

Project props

Property	Type	Mandatory	Description
name	string	false	The name/title of the project.
owner	string	true	The person or company who owns the project
role	string	false	Enter the name of the company used in the 'company' property of the 'role' model if applicable.
icon	object	false	A icon to show for this qualification.
thumbnail	string	false	The url of an image to show instead of an icon. This can be the url of a public image or the path of a local asset.
thumbnailStyle	Style	false	If image is set you can use this to apply custom styles to the image.
images	string[]	false	This will show multiple images in a carousel on the modal screen instead of 'image'.
url	string	false	A link to more information about the project. Will show on the modal screen.
private	boolean	false	Whether the source code is public or private.
startdate	Date	false	When you started working on the project. Must have either 'enddate' set or 'current' === true.
enddate	Date	false	When you finished working on the project. If 'startdate' is not set only the enddate will show.
current	boolean	false	Whether you are still working on this project.
skills	Skill[]	false	A list of skills/technologies relating to the project. The project will then show in the skills section.
info	string	false	Additional details. Shows on modal screen only. Accepts html.

Role props

Property	Type	Mandatory	Description
title	string	true	Your job title.
company	string	true	The name of the company.
location	string	false	Your place of work.
url	string	false	A link to the companies website. The companies name on the timeline becomes a link if set.
startdate	Date	false	When you started employment. Must have either 'enddate' set or 'current' === true.
enddate	Date	false	When you finished employment.
current	boolean	false	Whether you are still employed.
positions	Role[]	false	A list of positions held at the company included start and end dates.
projects	Project[]	false	A list of projects worked on at the company.
info	string	false	Additional details. Accepts html.

Qualification props

Property	Type	Mandatory	Description
name	string	true	The name/title of the qualifcation.
location	string	false	The place of study.
grade	string	false	Grade obtained.
icon	object	false	A font awesome icon to show for this qualification.
image	string	false	The url of an image to show instead of an icon. This can be the url of a public image or the path of a local asset.
imagestyle	object	false	If image is set you can use this to apply custom styles to the image.
startdate	Date	false	When you started studying. Must have either 'enddate' set or 'current' === true.
enddate	Date	false	When you finished/gained the qualifcation. If 'startdate' is not set only the enddate will show.
current	boolean	false	Whether you are still studying for this qualification.
info	string	false	Additional details. Shows on modal screen only. Accepts html.

Skill props

Property	Type	Mandatory	Description
name	string	true	Name of the skill.
group	string	true	What group to show the skill under. If empty string no group header will be shown.
level	number	false	A number ranging from 0-100 to determine your skill level.

License

MIT © DarylBuckle