Elemento (Customizable_Portfolio)

Table of Contents

• About the Project
  • Tech Stack
• Project Structure
• Getting Started
  • Installation
• Usage
• Contributing
• Design
• Future Plans
• Contact
• License

About The Project ❤️

Customizable Portfolio is a website that aims to help people make a fully functional static website in a short amount of time without relying on web developers and that too with very little prior programming experience.

This project is part of PSoC (Program Summer of Code) organized by UIET Chandigarh. It is a 2 month long open source competition to help people get started with open source with the help of experienced mentors.

Tech Stack ⭐

• React Js
• Node Js
• Materia-UI
• Mongo-DB

Project Structure 📘

.
├── client                  # All Dev files
|      └── src              # Source files                
└── ...

Src Structure

.
├── ...
├── src
│   ├── ...
│   ├── components             # Code for the website
|   |         └── element
|   |         └── layout
|   |                └── Navbar.js     # Website Navbar
|   |                └── Footer.js     # Website Footer
|   |                └── ...
|   |         └── pages      
|   |                └── Element.js
|   |                └── Home.js
|   |                └── Team.js
|   |         └── ...
|   ├── App.js            # starting point
│   └── ...
└── ...

Getting Started ⚡

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

Installation

1. Clone the repo

git clone https://github.com/github_username/Elemento.git

2. Install NPM packages

npm install

3. Setup ENV variables
   (i) Make a .env file in the root directory.
   (ii) Create the following environment variables: MONGO_URI, GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET.
   (iii) Generate the environment variables by going to the respective websites.
4. Start the development server.

npm run dev

Usage

How to search for elements according to properties?

1. Click on Elements in Navbar
2. Click on search bar.
3. Enter the properties.

How to view and download code for elements?

1. Click on Elements in Navbar .
2. Select the element .
3. Click on View Code / Download Code .

• On clicking View code you will be provided with HTML, CSS and JS code.
• On clicking download , the files will be downloaded.

How to know/connect to the Team members?

1. Click on Elements in Navbar .
2. Click on the image.
3. Click on Social media links .

Contributing 🎉

Being a project of an open source competition, we believe in the power of PRs as that's what makes any project awesome and inspires us to create and learn. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Design 🎭

Refer to this Adobe XD high fidelity prototype for the UI.

• Home Page : XD-design

Future Plans

1. Add a website preview mode.
2. Dynamically feature the latest element contributor on the teams page.
3. Add like feature for elements.
4. Show most liked elements on home page.

Contact 📧

For any query or build issues feel free to reach out the maintainers:
Aastha at [email protected]
Sarthak at [email protected]

License

Distributed under the MIT License. See LICENSE for more information.