Welcome to the Artist Portfolio Template! This React-based web app offers a modern, responsive template for artists to beautifully display their work ✨
You can view a live preview of the portfolio here https://portfolio-template-for-artists.vercel.app/.
- Responsive Design: This website is fully responsive across all devices.
- Dynamic Content: Artists can enter their data and upload portfolio items to receive a ZIP file of the source code with their content.
Note
The Source Code for this portfolio can be found in the Portfolio folder in the repository.
Important
Frontend is deployed in Vercel
where as Backend is deployed in Render
, since both are of free tier
sometimes there will be an error
or delay of 50 seconds
for response from the backend. It is recommended to retry in case of an error!
- If you're an artist, photographer, or anyone wanting a portfolio to showcase your work, visit this website https://portfolio-template-for-artists.vercel.app/upload
- Here enter your all
data
that you need in portfolio and upload all theportfolio items (jpeg/jpg/png/gif)
that you want to display in portfolio to get thezip file of the source code
with your data & portfolio items. - Extract the downloaded zip file.
- Go to GitHub and create your account.
- Follow the steps given in this YouTube Video to upload the folder of the source code you previously downloaded.
- Now go to Vercel and create your account using GitHub.
- Follow the steps given in this YouTube Video to host the portfolio for free using vercel.
- Note: In vercel under
Configure Project
section forRoot Directory
, click onEdit
button and type the name of theportfolio folder
and click onDeploy
button.
-
Clone the repository
git clone https://github.com/rakshixh/Portfolio-Template-For-Artists.git
- Open this folder in any
code editor
& open theterminal
.
- Open this folder in any
-
Entire Frontend (with upload page)
// To start the development server npm start // To build the entire frontend npm run build
- Open your browser and navigate to
http://localhost:3000
- Open your browser and navigate to
-
To start the Backend server (upload and download zip api)
// Make sure to run the backend in new terminal npm run server
- Open your browser and navigate to
http://localhost:3001
- Open your browser and navigate to
-
Only Portfolio (Frontend)
// To start the development server npm run portfolio //To build the portfolio npm run build-portfolio
- Find the folder named
Public
. - Delete the
favicon.ico
,logo192.png
&logo512.png
- If you have an image in PNG, JPG, or JPEG format that you want to use as a favicon, simply rename it to
favicon.ico
.
For example, if your image is namedmylogo.jpg
, change its name and extension tofavicon.ico
.
- Now, place this image inside the
public
folder. Additionally, make two more copies of the same image, rename them tologo192.png
andlogo512.png
, and place these copies in thepublic
folder as well.
- Images used in this project are from Unsplash
- The YouTube links above aren't collaborations or ads; I found them useful for hosting your portfolio.
This project is licensed under the MIT License - see the LICENSE file for details.