react-portfolio
A sleek portfolio design created in React.
This project is open-source but is not meant for public use. Public use cases will not be considered.
Build
npm run build
Install
npm install react-portfolio
oryarn add react-portfolio
Use
Client-Side Rendering
import React from 'react';import ReactDOM from 'react-dom';import ReactPortfolio from 'react-portfolio';ReactDOM.render( <ReactPortfolio copyright={2008} footer={[]} primary={0} resume="https://yoursite.com/resume.pdf" routes={[]} secondary={0} social={{}} title="My React Portfolio" />, document.getElementById('root'),);
Props
copyright: number
The initial year of copyright for the portfolio.
Will be displayed as (c) ${props.year} - ${CURRENT_YEAR}
.
footer: AnchorProps[]
An array of <a>
props to include in the footer.
lightness: number
A number from 0 to 1, representing the lightness of your portfolio's accent color.
0
represents black, 1/2
represents color, 1
represents white.
primary: number
A number from 0 to 1, representing the hue of your portfolio's primary color.
0
represents red, 1/3
represents green, 2/3
represents blue.
resume: string
A URL pointing to a downloadable copy of your resume.
routes: Route[]
An array of Route objects to use with react-router
.
A Route object is structure as { component: ..., path: ... }
.
saturation: number
A number from 0 to 1, representing the saturation of your portfolio's accent color.
0
represents black and white, 1
represents full-color.
secondary: number
A number from 0 to 1, representing the hue of your portfolio's secondary color.
0
represents red, 1/3
represents green, 2/3
represents blue.
social: Social
A Social object of networking accounts to display in the header.
A Social object has the properties github
, linkedIn
, npmjs
, reddit
,
stackOverflow
, twitter
, and youtube
.
theme: Partial
A partial object that will be deep merged with the default Material UI theme.
title: string
The title of the portfolio, displayed in the header.