A clean, beautiful, responsive and 100% customizable portfolio template for Data Scientists!

Related tags

Boilerplate reactjs
Overview

A clean, beautiful, responsive and 100% customizable portfolio
template for Data Scientists!

NodeJS NPM Made With React code style: prettier
Netlify Status Build Status Maintenance Website License Price

Sections 📚

✔️ Home
✔️ Experience & Education
✔️ Projects
✔️ Contact

To view a live example, click here

Clone And Use 📋

  • The website is completely built on react-js library of javascript and that's why we need nodejs and npm installed.
  • While installing nodejs and npm, try to install versions which are equal or greater than the versions mentioned in badges above.
  • In case you want to help developing it or simply saving it, you can fork the repository just by clicking the button on the top-right corner of this page.
  • After the successful installation of nodejs and npm, clone the repository into your local system using below command:
    •  git clone https://github.com/rohankokkula/datasciencefolio.git
    • This will clone the whole repository in your system.
  • To download required dependencies to your system, navigate to the directory where the cloned repository resides and execute following command:
    • npm install
  • Now, the project is ready to use.
  • You can check it using npm start, it will open the website locally on your browser.

Customize it to make your own portfolio ✏️

In this project, there are basically 4 things that you need to change to customize this to anyone else's portfolio: src/portfolio.js, src/assets,src/assets/logo and Google Analytics Tracking ID.

Personal Information

You will find src/portfolio.js file which contains the complete information about the user. The file looks something like below:

// Home Page
const greeting = {
    ...
}

// Social Media
const socialMediaLinks = {
    ...
}

...

You can change the personal information, experience, education, social media, certifications, contact information etc. in src/portfolio.js to directly reflect them in portfolio website.

If you want to play around with alignment or CSS, the specific component's css is present in the same folder.

Assets

So basically I demonstrated 2 types of visual graphics.

  • Animated graphics(lottiefiles)

    • In order to use your own animated graphics,
      • go to lottiefiles
      • search your favourite lottie(animation)
      • Download the JSON version of animated file
      • Now you can import this into any of the desired container/component using
      • { lottie.loadAnimation({ container: container.current, renderer: 'svg', loop: true, autoplay: true, animationData: require('./banner.json')})}, []) return (
        );} ">
        import lottie from 'lottie-web';
        import React, {useRef,useEffect } from "react";
        export default function BannerImg(){
        const container = useRef(null)
        useEffect(() => {
          lottie.loadAnimation({
            container: container.current,
            renderer: 'svg',
            loop: true,
            autoplay: true,
            animationData: require('./banner.json')})}, [])
          return (
            
        );}
      • here, banner.json is your downloaded animated file
  • Static pngs/svgs/jpeg

    • you need to add the desired pngs to the same folder of any-component.js
    • U need to uncomment the following code and remove the above animated lottie's code
    • );} } export default BannerImg; ">
      class BannerImg extends Component {
      render() {
        return (
          
      );} } export default BannerImg;
  • to save up your time and get you out of confusion, I've created both the versions(animated & static svgs) and commented it out.

  • So if you don't like to use animated svgs, just delete that code and uncomment the function for static svgs

  • Splash Logo

    Note here that if you click my portfolio, you can see the logo at the beginning.

    • You can open src/portfolio.js file and at the top of this file you will see settings component as below:
    • // Website related settings
      const settings = {
        isSplash: true,
      };
    • Change isSplash from true to false.
    • Now, if you see your website using npm start, it will directly open home rather than logo splash screen.
    • You can change it from src/assets/logo and replace with your own signature logo

    Google Analytics Tracking ID

    • First, you need to set up your Google Analytics Account.
    • Follow these resources for seamless setup
    • You'll be needing a Trackin-ID for your website which normally looks like UA-199564465-1
    • Do not get confused between Tracking-ID & Measurement ID. Both are Different.
    • Once you get the tracking ID, go to src/App.js and replace your tracking ID Note: Do not use Firefox Browser for testing the ID. Use Chrome instead.

    Deployment 📦

    • Once you are done with your setup and have successfully completed all steps above, you need to put your website online!
    • I highly recommend using Netlify to achieve this the EASIEST WAY.
    • To deploy your website, you need to follow 2 steps.
      • First you need to create a github repository and push all the files excluding node_modules(automatically ignored by .gitignore)
      • setup account at netlify & complete the login/signup process
      • Now, click on New site from Git and connect it with your github account
      • You will find the entire list of your repositories, select your portfolio repo.
      • Click on Deploy site
      • Tadaa! Your site is live!

    Technologies used 🛠️

    Animations 🍥

    License 📄

    This project is licensed under the MIT License - see the LICENSE.md file for details.

    References 👏🏻

    You might also like...
    A simple, delicate and modern template for who anyone need portfolio

    A simple, delicate and modern template for who anyone need portfolio

    ⚛️A free and beautiful React admin dashboard template pack.
    ⚛️A free and beautiful React admin dashboard template pack.

    Shards Dashboard React A free React admin dashboard template pack featuring a modern design system and lots of custom templates and components. ✨ Note

    Light Bootstrap Dashboard React is an admin dashboard template designed to be beautiful and simple.
    Light Bootstrap Dashboard React is an admin dashboard template designed to be beautiful and simple.

    Light Bootstrap Dashboard React Light Bootstrap Dashboard React is an admin dashboard template designed to be beautiful and simple. It is built on top

    A clean, extensible react + redux boilerplate with universal/isomorphic rendering, testing and more

    Universal Redux Template A boilerplate doing universal/isomorphic rendering with Redux + React-router + Express, based on Redux-Realword-Example Philo

    ReservoirKit is a react package that makes it easy to add buying NFTs into your dApp. It's intuitive, responsive and customizable.

    ReservoirKit is a react package that makes it easy to add buying NFTs into your dApp. It's intuitive, responsive and customizable.

    Modern React Portfolio Template (FREE)
    Modern React Portfolio Template (FREE)

    A clean, beautiful, minimal and responsive portfolio template for Developers! To view a live example, click here. Just change src/yourdata.js to get y

    🚀 my portfolio thingy which also happens to be a template
    🚀 my portfolio thingy which also happens to be a template

    Welcome to my Portfolio Note: This is a portfolio template, feel free to use it. And star it if you liked :P ✨ Live Demo Using the template To use thi

    Developer Portfolio built with the help of a react template
    Developer Portfolio built with the help of a react template

    Developer Portfolio Want to create a professional portfolio but cannot figure out how to? Use Developer Portfolio and create your own personalised por

    A simple portfolio site, built in Next.js, Tailwind CSS - using this great blogging starter template.
    A simple portfolio site, built in Next.js, Tailwind CSS - using this great blogging starter template.

    A simple portfolio site, built in Next.js, Tailwind CSS - using this great blogging starter template.

    Comments
    • Bump node-fetch from 2.6.1 to 2.6.7

      Bump node-fetch from 2.6.1 to 2.6.7

      Bumps node-fetch from 2.6.1 to 2.6.7.

      Release notes

      Sourced from node-fetch's releases.

      v2.6.7

      Security patch release

      Recommended to upgrade, to not leak sensitive cookie and authentication header information to 3th party host while a redirect occurred

      What's Changed

      Full Changelog: https://github.com/node-fetch/node-fetch/compare/v2.6.6...v2.6.7

      v2.6.6

      What's Changed

      Full Changelog: https://github.com/node-fetch/node-fetch/compare/v2.6.5...v2.6.6

      v2.6.2

      fixed main path in package.json

      Commits
      • 1ef4b56 backport of #1449 (#1453)
      • 8fe5c4e 2.x: Specify encoding as an optional peer dependency in package.json (#1310)
      • f56b0c6 fix(URL): prefer built in URL version when available and fallback to whatwg (...
      • b5417ae fix: import whatwg-url in a way compatible with ESM Node (#1303)
      • 18193c5 fix v2.6.3 that did not sending query params (#1301)
      • ace7536 fix: properly encode url with unicode characters (#1291)
      • 152214c Fix(package.json): Corrected main file path in package.json (#1274)
      • See full diff in compare view
      Maintainer changes

      This version was pushed to npm by endless, a new releaser for node-fetch since your current version.


      Dependabot compatibility score

      Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


      Dependabot commands and options

      You can trigger Dependabot actions by commenting on this PR:

      • @dependabot rebase will rebase this PR
      • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
      • @dependabot merge will merge this PR after your CI passes on it
      • @dependabot squash and merge will squash and merge this PR after your CI passes on it
      • @dependabot cancel merge will cancel a previously requested merge and block automerging
      • @dependabot reopen will reopen this PR if it is closed
      • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
      • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
      • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
      • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
      • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
      • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
      • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
      • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

      You can disable automated security fix PRs for this repo from the Security Alerts page.

      dependencies 
      opened by dependabot[bot] 0
    • Bump follow-redirects from 1.14.1 to 1.14.7

      Bump follow-redirects from 1.14.1 to 1.14.7

      Bumps follow-redirects from 1.14.1 to 1.14.7.

      Commits
      • 2ede36d Release version 1.14.7 of the npm package.
      • 8b347cb Drop Cookie header across domains.
      • 6f5029a Release version 1.14.6 of the npm package.
      • af706be Ignore null headers.
      • d01ab7a Release version 1.14.5 of the npm package.
      • 40052ea Make compatible with Node 17.
      • 86f7572 Fix: clear internal timer on request abort to avoid leakage
      • 2e1eaf0 Keep Authorization header on subdomain redirects.
      • 2ad9e82 Carry over Host header on relative redirects (#172)
      • 77e2a58 Release version 1.14.4 of the npm package.
      • Additional commits viewable in compare view

      Dependabot compatibility score

      Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


      Dependabot commands and options

      You can trigger Dependabot actions by commenting on this PR:

      • @dependabot rebase will rebase this PR
      • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
      • @dependabot merge will merge this PR after your CI passes on it
      • @dependabot squash and merge will squash and merge this PR after your CI passes on it
      • @dependabot cancel merge will cancel a previously requested merge and block automerging
      • @dependabot reopen will reopen this PR if it is closed
      • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
      • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
      • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
      • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
      • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
      • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
      • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
      • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

      You can disable automated security fix PRs for this repo from the Security Alerts page.

      dependencies 
      opened by dependabot[bot] 0
    • Bump async from 2.6.3 to 2.6.4

      Bump async from 2.6.3 to 2.6.4

      Bumps async from 2.6.3 to 2.6.4.

      Changelog

      Sourced from async's changelog.

      v2.6.4

      • Fix potential prototype pollution exploit (#1828)
      Commits
      Maintainer changes

      This version was pushed to npm by hargasinski, a new releaser for async since your current version.


      Dependabot compatibility score

      Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


      Dependabot commands and options

      You can trigger Dependabot actions by commenting on this PR:

      • @dependabot rebase will rebase this PR
      • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
      • @dependabot merge will merge this PR after your CI passes on it
      • @dependabot squash and merge will squash and merge this PR after your CI passes on it
      • @dependabot cancel merge will cancel a previously requested merge and block automerging
      • @dependabot reopen will reopen this PR if it is closed
      • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
      • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
      • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
      • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
      • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
      • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
      • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
      • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

      You can disable automated security fix PRs for this repo from the Security Alerts page.

      dependencies 
      opened by dependabot[bot] 0
    Owner
    Rohan Kokkula
    Data Scientist | Web Developer | UI/UX Designer
    Rohan Kokkula
    Minimal-one-page-template - Clean and Minimalistic One Page Template Built With React.js

    Minimal One Page Clean and Minimalistic One Page Template. Be sure to send your

    Marcos Andre 3 Mar 7, 2022
    Responsive Portfolio Template Made With Reactjs

    Portfolio Live Preview - Click Here ?? Installation and Setup Instructions Clone down this repository. You will need node.js and git installed globall

    Guru Pawar 60 Sep 17, 2022
    React template app with clean architecture approach (light version for small projects)

    React app with clean architecture approach (light version for small projects) app App directory contains the State Management (in models folder) and C

    Viktoriya 1 Feb 7, 2022
    Portfolio - A Simple Portfolio page Built with next.js

    Portfolio Início Essas instruções fornecerão uma cópia do projeto instalado e fu

    null 36 Sep 17, 2022
    Software Developer Portfolio Template built with react.js and material Ui with dark and light mode that helps you showcase your work and skills as a software developer.

    Software Developer Portfolio Template built with react.js and material Ui with dark and light mode that helps you showcase your work and skills as a software developer.

    ABU SAID 30 Sep 21, 2022
    This is a react portfolio template build using react, typescript and tailwind css. It help developers and designers to showcase their work

    React Portfolio Using Tailwind UI This project include a portfolio template which is built using React and Tailwind CSS. It help developer and designe

    Umer Yasin 0 Oct 30, 2021
    👨‍🎨 An open-source portfolio template built with React and Tailwind.

    ??‍?? An open-source portfolio template built with React and Tailwind.

    Brayden W 118 Sep 19, 2022
    🚀 Software Developer Portfolio Template that helps you showcase your work and skills as a software developer.

    Software Developer Folio ⚡️ A clean, beautiful and responsive portfolio template for Developers! Just change src/portfolio.js to get your personal por

    Saad Pasta 3.5k Sep 29, 2022
    Obsidian - Elegant portfolio template built on NextJS and Tailwind CSS

    Obsidian ✨ Obsidian is a minimal and lightweight portfolio template built on Nex

    Brayden 24 Sep 9, 2022
    A template for all of you to create and deploy an Awesome Portfolio for free without writing code

    A template for all of you to create and deploy an Awesome Portfolio for free without writing code

    Jameson Blake 9 Aug 14, 2022