Cookie cutter react portfolio suited perfectly for Github Pages

Related tags

react-portfolio
Overview

πŸš€ React-Portfolio πŸš€

Cookie cutter react portfolio suited perfectly for Github Pages, get up and running in less then 5 minutes, just edit the data.json file and off you go!

Watch in action: Click here.

Fueled by Chakra-UI.

Table of Contents

Installation

Install in 5 easy steps

  1. Fork this repo
  2. Edit data.json and config.ts to fit your needs
  3. Change package.json homepage property to {your-github-username}.github.io/react-portfolio
  4. Run yarn from your favourite CLI
  5. Run yarn deploy and watch the magic happens

Your react portfolio is waiting for you at {your-github-username}.github.io/react-portfolio}
*Please note that you have to enable github pages in your new forked branch, and point it to "gh-pages" branch after deploying it (step 5).

Customization

React-Portfolio is built on modules, each in its own sub-folder inside the modules main folder Each module has its own properties defined by it's TypeScript interface, all modules extend the IModuleBase interface.

In order to add a module or change a module in your portfolio, simply edit data.json with the required properties.

Let's say we want to add another About section, simply add it in your data.json at the wanted position.

[...
  {
      "type": "about",
      "data": {
          "about": "This is another About module",
          "education": {
              "title": "Education",
              "data": [
              {
                  "title": "BSc Information Systems",
                  "institute": "University of Haifa",
                  "startingYear": "2014",
                  "endingYear": "2018"
              },
              {
                  "title": "BA Psychology",
                  "institute": "The Open University",
                  "startingYear": "2020",
                  "endingYear": "2022"
              }]
          }
      },
      "title": "About"
  }
]

Themes

React-portfolio comes bundled with 5 out-of-the-box themes. Those include Desert, Aurora, Abstract, Hightech and Mellow.

Adding themes is super-easy! Here's how it's done:

  • Open a new sub-folder under the themes folder.
  • Name it whatever you want (no spaces).
  • Add 3 images, named bg.jpg, 1.jpg and 2.jpg (keep those under 100kb each).
  • Add your theme inside the config.ts file, like so:
enum Theme {
    ...
    MY_THEME = "my_theme"
}

export const themeConfig = {
    ...
    [Theme.MY_THEME]: {
        color: "red",
        main: theme.colors.red[600],
        darker: theme.colors.red[800],
    }
}

export const config = {
    theme: Theme.MY_THEME
}

And that's it! Is your theme awesome? Share it with the world, open a PR for it.

Support

Please open an issue for support.

Contributing

Fixing bugs and adding modules is always welcome. Create a branch, add commits, and open a pull request.

Issues
🌊🐷 Utility for generalized composition of React components

???? Utility for generalized composition of React components

Enki 279 Oct 4, 2021
Declarative hotkey and focus area management for React

React HotKeys A declarative library for handling hotkeys and focus areas in React applications. Upgrading from 1.*.* ? See the upgrade notes. Looking

Aleck Greenham 1.9k Oct 3, 2021
HTML to React parser that works on both the server (Node.js) and the client (browser):

HTML to React parser that works on both the server (Node.js) and the client (browser):

Mark 1k Oct 19, 2021
A lightweight react library that converts raw HTML to a React DOM structure.

A lightweight react library that converts raw HTML to a React DOM structure.

Arve Knudsen 652 Oct 17, 2021
Extended utils for βš›οΈ React.Children data structure that adds recursive filter, map and more methods to iterate nested children.

React Children Utilities Recursive and extended utils for React children opaque data structure. Installation Available as a package and can be added t

Fernando Pasik 183 Oct 5, 2021
CSS media queries for React

react-media react-media is a CSS media query component for React. A <Media> component listens for matches to a CSS media query and renders stuff based

React Training 2.4k Oct 15, 2021
The next generation state management library for React

The next generation state management library for React

Bytedance Inc. 150 Sep 18, 2021
React Refresh Token with JWT and Axios Interceptors example

Buid React JWT Refresh Token example with Axios Interceptors - Refresh Token in React.js, Axios silent refresh JWT token example

null 18 Sep 30, 2021
πŸ€– React Native Android widgets bridged to JS, a proof of concept

React Native Android Widget Proof Of Concept ?? Using React Native and having Android widgets is possible. Create buttons in Java / Android XML to tri

Netbeast 186 Sep 21, 2021
iOS Today Widget in React Native

React Native Today Widget Experimental library investigating limits of implementation iOS App Extensions using React Native. Sample result from Comple

MatΔ›j KΕ™Γ­ΕΎ 343 Oct 3, 2021
A component for React that utilizes the Counterpart module to provide multi-lingual/localized text content.

React Translate Component Translate is a component for React that utilizes the Counterpart module and the Interpolate component to provide multi-lingu

Martin Andert 325 Apr 14, 2021
Easily create presentation board using React

React Speaker Board Easily create presentation board using React. Quick Usage It install react-speaker-board running this comand. $ yarn add react-spe

nappa 6 Oct 14, 2021
A Fetch Library Support React New Suspense SSR

use-suspense-fetch A data fetching library for React Suspense. inspired by use-asset Feature use LRU Cache support create custom cache support React 1

Snake 6 Jul 12, 2021
A simple Facebook Chat Head like bubble for react native

react-native-floating-bubble A simple Facebook Chat Head like bubble for react native. Special thanks to bubble-for-android because this is just react

null 109 Oct 14, 2021
Utility Components for determining whether elements are in the center of the screen.

@n1ru4l/react-in-center-of-screen Utility Components for determining whether elements are in the center of the screen. Codesandbox Quick Demo: https:/

Laurin Quast 12 May 29, 2021
React-Native library for the WidgetKit framework. Integrate a Widget into your App πŸπŸ“±

react-native-widgetkit React-Native Library for the iOS ?? WidgetKit framework Table of Contents ?? Introduction ??‍?? Installation ??‍ Usage ????‍??

Fasky 82 Oct 13, 2021
redis like key-value state management solution for React

jedisdb redis like key-value state management solution for React Reactive. Redux alternative. Simple and powerful global state management system, acce

Hassan 10 Oct 16, 2021
πŸ”Œ "Plug and play" for RxJS Observables in React Apps!

"Plug and play" for RxJS Observables in React Apps! npm install @ngneat/react-rxjs useObservable Ever had an Observable holding data that you need to

ngneat 12 Oct 11, 2021
A React wrapper for signature pad

react-signature-pad-wrapper A React wrapper for signature pad. Installation This package is available through npm: npm install --save react-signature-

Michael Dzjaparidze 64 Oct 14, 2021