No Code Portfolio

Portfolio build now made easy! Want to make a portfolio but don't know how to code? This is for you!

Whether you're an artist, writer, or something else entirely, a strong portfolio is often a bare minimum requirement. And you can create something top notch without writing a line of code!

Live demo.

Features

Easy setup
Real-time database (making it easy to edit anytime, anywhere).
No coding skill is required.
No installation is required.
Screen responsiveness for multiple devices.

Tech Stack

Client: HTML, CSS, SCSS, JavaScript

Server: Firebase

Libraries

Email JS, Animate on scroll (AOS), Toastify JS.

Setup guide

Getting started

Beginners guide
Advanced Guide
- Note
Additional Features

Getting Started

If you already have a github account you can directly jump to the Beginners guide

Once signed in, proceed to the Beginners guide .

Beginners Guide

Project setup

Step 1 - Click on the template button and create a new repository.

Step 1.1 - Add a name to your repository --> select the option for private --> check the "Include all branches" box (as shown in the below image) and click on "Create repository".

Step 1.2 - Download portfolio.json from the main branch.

Setting up your Firebase account

Step 2 - Go to Google's Firebase website and create your account or Simply sign in if you already have one.

Step 2.1 - Now Create a new project.

Step 2.1.1 - Enter a name for your project.
Step 2.1.2 - Click on "Continue".

Step 2.2 - Disable Google Analytics and Create a Project

Step 2.3 - Go to Build --> Realtime Database.

Step 2.4 - Create a Database.

2.4.2 - Select the test mode.
2.4.3 - Click enable

Step 2.5 - Once your database is created, click on the three dots (as shown in below image), and from the menu select "import JSON" and import portfolio.json which we downloaded from github.

Step 2.6 - Now copy the database URL.

2.6.1 - Go to the project repository we created in step 1.
2.6.2 - Switch the branch to minified and open the "firebaseInit.js" file.
2.6.3 - Edit the file and paste the database URL we copied.
2.6.4 - Save by clicking on "Commit" (at the bottom of the page).

Hoisiting (Netlify)

Untitled.design.2.mp4

Tip - You can also set your custom domain.

Untitled.design.7.mp4

Editing

Step 3 - Go back to Firebase, where we left.

Step 3.1 - Add the deployed url to the web url blank (firebase).

Step 3.2 - Edit all the fields accordingly.

3.2.1 Once you've finished editing, change the development mode to off/false, make sure to change the write rules to false and true once you want to edit again.

Untitled.design.6.mp4

Advanced Guide

Step 1 - Download the code in the minified branch and unzip it.

Step 2 - Setup your Firebase account with a real-time database.

(See Setting up your firebase account for details).

Step 3 - Copy the database URL and paste it in the firebaseInit.js file present in the unzipped folder.

Step 4 - Deploy the folder on your preferred hosting platform.

Note

There are multiple ways to run and deploy the project, but I personally felt the above steps were a bit easier to understand.
For storing your images you can use Cloudinary or Firebase storage.

Additional Features

Wrap the text with "**" to make the input text bold.

Add "//" to go to a new line.

Turning development mode on/true would change data dynamically, providing meaningful feedback. While in off/false, the page needs to be refreshed to get updated data.

Keep your deployed portfolio running in parallel, so that when you add a card in either the education, projects, or experience section, a dummy template will be generated automatically for you.

You can also add Firebase Analytics to check your portfolio's performance. View Docs

For mailing services, you have to get your key and other credentionals by signing onto EmailJS. For setup guide refer Docs.
- Once done, make sure to copy this and paste it in your EmailJS template.

License

MIT

sohum24 / portfolio-website Goto Github PK

portfolio-website's Introduction