My Portfolio

My portfolio was designed and implemented by me. You can visit the live version here.


· Report Bug · Request Feature

About The Project

I made my portfolio to show what projects I have already worked on and get my hands dirty on the React.js concept. There is the front-end and the back-end. I used React.js with React-Bootstrap and Axios to get my projects through the Rest API I made for the front-end part. Also, I used Firebase storage to save screenshots of my projects and EmailJS to complete the contact form. Additionally, I used YUP resolver to validate any fields, AOS for animating elements, Styled-Components, data React Data Table Component for showing users, and finally UUID to generate an ID before pushing the image to Firebase storage.

The back-end, wich comprises the REST API, you can find it here.

Except of the main homepage, an Admin dashboard has been made, which can do CRUD (Create, Remove, Update, Delete) operations for my projects and users.

(back to top)

Built With

• React.js
• React Bootstrap
• Firebase
• Axios
• EmailJS
• YUP
• AOS
• Styled-Components
• React Data Table Component
• UUID

(back to top)

Screenshots

Main admin panel

All skills

Users datatable

(back to top)

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

You will need npm.

• npm

  npm install npm@latest -g

Installation

1. Clone the repo

   git clone https://github.com/eliac7/portfolio-in-react.git

2. Install NPM packages

   npm install

3. Enter API tokens in .env

    REACT_APP_USER_ID = FROM_EMAILJS
    REACT_APP_TEMPLATE_ID = FROM_EMAILJS
    REACT_APP_FIREBASE_API_KEY = GET_IT_FROM_FIREBASE
    REACT_APP_FIREBASE_AUTH_DOMAIN = GET_IT_FROM_FIREBASE
    REACT_APP_FIREBASE_PROJECT_ID = GET_IT_FROM_FIREBASE
    REACT_APP_FIREBASE_STORAGE_BUCKET = GET_IT_FROM_FIREBASE
    REACT_APP_FIREBASE_MESSAGING_SENDER_ID = GET_IT_FROM_FIREBASE
    REACT_APP_FIREBASE_APP_ID = GET_IT_FROM_FIREBASE
    REACT_APP_FIREBASE_MEASUREMENT_ID = GET_IT_FROM_FIREBASE
    REACT_APP_RECAPTCHA_SITE_KEY = GET_IT_FROM_GOOGLE_RECAPTCHA
    REACT_APP_RECAPTCHA_SECRET_KEY = GET_IT_FROM_GOOGLE_RECAPTCHA
   

(back to top)

License

Distributed under the GNU General Public License v3.0. See LICENSE.txt for more information.

(back to top)

Contact

Ilias Thalassochoritis - @ilias_thal - elias_thal[at]hotmail.com

Project Link: https://github.com/eliac7/portfolio-in-react

(back to top)