bastien-snk/portfolio

My personal portfolio developed using React.

Reactfolio

Stack

• React.js - React allows you to create stand-alone components that maintain their own state, then assemble them to create complex user interfaces.
• TailwindCSS - A utility-first CSS framework packed with classes that can be composed to build any design, directly in your HTML code.

Project structure

$PROJECT_ROOT
│
├──┬── src 
│  ├──── components # React components
│  ├──── img # Images
│  └──── pages # React page components
│ 
└── public # Static files

Installation

1. Clone repository with Git:

  git clone https://github.com/rootxls/portfolio-react
  cd portfolio-react

2. Run the dev server

    npm start

Instructions

Step 1 - Home presentation

Go to /src/pages/home/Home.jsx and replace written strings by your informations:

const presentation = {
    iam: "Je suis",
    name: "Bastien",
    text: [
        "DÉVELOPPEUR",
        "FRONT-END",
        "BACK-END",
    ]
};

const ideInformations = {
    jobClassName: "Developer", // class Name
    birthdate: new Date(2001, Month.SEPTEMBER, 20), // birth date
    location: "“📍 Perpignan, France”", // location
    degree: true, // have a degree
    custom: [
        {
            name: "",
            value: true,
        }
    ], // custom variables,
};

Custom IDE variables:

If you want to add custom variable to IDE, you just have to add objects like this to ideInformations.custom:

{
    name: "", // variable name
    value: true, // variable value
}

Step 2 - About Section

Go to /src/pages/home/sections/Apropos.jsx and go to HTML div with id "text", then replace text by yours.

Step 3 - Experience Section

Go to /src/pages/experience/Experience.jsx and replace written strings by your professional experiences:

Object structure:

Date:

const Month = {
    JANUARY: 0,
    FEBRUARY: 1,
    MARCH: 2,
    APRIL: 3,
    MAY: 4,
    JUNE: 5,
    JULY: 6,
    AUGUST: 7,
    SEPTEMBER: 8,
    OCTOBER: 9,
    NOVEMBER: 10,
    DECEMBER: 11,
};

const year = 2021;

// replace Month.DECEMBER with the month of the date
new Date(year, Month.DECEMBER);

Experience:

{
    // You can remove from & to or set value to null if experience is in progress
    from: new Date(2021, Month.JANUARY), // experience start date
    to: new Date(2021, Month.JANUARY), // experience end date
    displayName: "Freelancing", // Name displayed in experience selection list
    job: "Développeur", // Job exercised
    company: "Indépendant", // Company
    description: [
        "A", 
        "B",
        "C"
    ], // Description of what you've done with this company
},

const experiences = [
    {
        displayName: "Freelancing",
        job: "Développeur",
        company: "Indépendant",
        description: [
            "A",
            "B",
            "C"
        ],
    },
    {
        from: new Date(2021, Month.JANUARY),
        to: new Date(2021, Month.FEBRUARY),
        job: "Développeur",
        company: "Ludiconcept",
        description: [
            "A",
            "B",
            "C"
        ],
    },
];

Step 4 - Services Section

Go to /src/pages/services/Service.jsx and replace written objects by your informations:

// You need to import the image like this
import siteweb from "../../img/services/site-web.png";

const services = [
    {
        name: 'Sites Web', // Service name
        summary: 'Lorem ipsum dolor sit amet. Aut aliquam voluptas in odio nobis non placeat ipsa aut \n' +
            'Quis tenetur aut amet eius et expedita iste. Non voluptas nihil in deleniti dolorem eum quaerat aperiam sed sapiente nemo et enim rerum vel eaque eligendi? Qui saepe quia sed dolor natus cum nemo natus ab provident quae sit illo doloremque ut veniam dolorem sed inventore iste. Id maxime natus qui porro quia est maiores beatae quo cumque debitis.',
            // Service description
        href: "", // Service link
        img: siteweb, // Service image
    },
];

Step 5 - Portfolio Section

Go to /src/pages/portfolio/Portfolio.jsx and replace written objects by your informations:

Project types:

You can replace project name with what you want, and add more project types.

const projectTypes = {
    PERSONNAL: {
        name: 'Projet personnel',
    },
    OPEN_SOURCE: {
        name: 'Projet open-source',
    },
    PROFESSIONNAL: {
        STAGE: {
            name: 'Stage',
        },
        FREELANCE: {
            name: 'Mission Freelance',
        },
    },
};

// You need to import the image like this
import lyra from "../../img/projects/card.png";

const projects = [
    {
        id: 1, // id for project details, just put increasing integer (1,2,3...)
        name: 'LyraMC', // Project name
        type: projectTypes.PERSONNAL, // Project type 
        desc: '...', // Project description
        repo: 'https://github.com/LyraMC', // Project repo, if none remove line or set value to null
        img: lyra,
    },
];