pholisa-fatyela/circle-packing-personal-homepage

Minimal personal homepage 🏠 with aesthetic circle-packing design ⚪ https://tonystark-website.netlify.app

A Customizable Personal-Website Template, Ready to Deploy in 10 mins!

View Demo · Report Bug · Request Feature

Table of Contents

• About the Project
• Getting Started
  • Prerequisites
  • Installation
• Features
• Roadmap
• Contributing
• License
• Contact
• Acknowledgements

About The Project

Want to have strong online presence without spending months coding up a website?

This project is a FREE, EASY and CUSTOMIZABLE webpage template, made to deploy within 10 minutes with NO CODING REQUIRED!

Built With

• Gatsby
• P5.js
• Dimension

Getting Started

A webinar with walkthrough of this project is available here. The whole tutorial is available in video format here :

If you just want to use the template, no need to clone/download this repo. The following steps show how to launch your own website :

1. Click the following button 👇 (Make sure you have a Github account before starting)

2. After clicking that button, you’ll authenticate with GitHub and choose a repository name. Netlify will then automatically create a repository in your GitHub account with a copy of the files from the template. Next, it will build and deploy the new site on Netlify, bringing you to the site dashboard when the build is complete.

3. The site should now be live at the URL shown to you by Netlify. Let's now change the content of the site to make it YOURS :) Firstly, upload all the photos you want to use in your website to imgur. Take a look at the demo to decide what photos you would like to use.

4. Now, open your github account and navigate to the cloned repository (a clone of this project) that Netlify made for you. Then go to

src > content > mycontent.json

5. Press the Edit butoon on top-right of the file window.

6. Edit the data present there according to your choice. You should be familiar with the JSON file format. If you're not, no big deal. Take a quick tutorial here.

• On imgur, right click on your photo and select Copy Image Location. Paste these links in the fields which require URL of photos in mycontent.json
• Array elements are rendered as seperate paragraphs for Description and *Content fields. The links are also to be input as Array of JS objects. Explaination on this can be found here

7. When done with editing, check the Commit directly to the master branch radio box, add a relevant commit message and click on Commit Changes

8. All done! wait for 5 minutes, and visit the URL given to you by Netlify again to confirm changes.

9. Share this repo with people you think can benefit from this project 🙂

Note : Change the BackgroundURL value in mycontent.json to add a custom background (use imgur to host the background image). Leave it to "" to use the default circle-packing background. Explaination on this can be found here

Possible Errors during Deploying

• Your JSON syntax for mycontent.json might be faulty. Validate it using this tool (Simply copy-paste the contents of mycontent.json on the website).

If you're stuck at some point, feel free to raise an issue or reach out to me over any channel.

For Developers

If you want to contribute to the project or just compile it locally in development mode, follow these steps :

Prerequisites

• npm
• Gatsby

Installation

1. Clone the repo

git clone https://github.com/adityaketkar/circle-packing-personal-homepage.git

3. Launch dev build using Gatsby

cd circle-packing-personal-homepage
npm install
gatsby develop

Features

Responsive Homepage

Compatible with widescreens as well as mobile devices

Aesthetic!

Roadmap

See the open issues and Github Kanban for a list of proposed features and known issues.

Contributing

Contributions are what makes the open source community an amazing platform to learn, inspire, and create. Any contributions you can 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

Of course, no software is perfect. Let me know your suggestions and feature requests here. You may also suggest changes by forking this repo and creating a pull request or opening an issue :)

License

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

Contact

Aditya Ketkar - @adityaketkar - [email protected]

Project Link: https://github.com/adityaketkar/circle-packing-personal-homepage

Acknowledgements

• Best-README
• Open Source Licence