Skip to content

Portfolio360 allows potential clients or employers to view your work in a more interactive and engaging way. - free to use by giving credit to it's developers.

License

Notifications You must be signed in to change notification settings

faradeen-ja/portfolio360

Repository files navigation

Next js Reack js Tailwind CSS

ᑭ𝗢ᖇ𝗧ᖴ𝗢ᒪ𝗜𝗢360 Version 4Version 4
portfolio360-react-next-v4 license GitHub Contributors portfolio360 Issues GitHub pull requests join discord community


Many thanks to Chetan Verma for his dedication building previous versions & letting me use it for my personal portfolio and here I am giving it back an immersive new look to all of you who are interested to use this repo and make desired changes to your needs, In my personal portfolio360 I developed & modernized not just a template but a 360 visual, functionality & accessibility, some immersive improvements such as internal search indexing keywords used to quickly and efficiently retrieve portfolio data on a search query basis. add to calendar, skills360, collabs360, dynamic select work and few more designs & developments.
In the context of a portfolio, a 360-degree visual allows potential clients or employers to view your work in a more interactive and engaging way. This multi feature design provides a more comprehensive view of your work and can help you make a lasting impression. With Portfolio360, you can showcase your work and identity in a more dynamic and visually appealing way


❒︎❒︎

🔧 Built with React, Next.js, and Tailwind CSS.
⇄ This Version: Portfolio360. Live FJ
Previouse Versions: V1-3 Chetan Verma
❒︎❒︎

DEMO

Netlify Status

Build settings

Runtime Build Commands Publish Dir
Next.js npm run build Next
Using the Repository as a Portfolio Site? If you would like to use this repository as your personal portfolio site, follow these steps to make changes and modifications that suit your needs.

Version 4 1. Fork + Clone

  1. Fork the repository
  2. Clone or download the zip file and import your forked repository into your preferred integrated development environment (IDE), such as VS Code.
  3. Run yarn install or npm install or npm install --force for dependencies.
  4. Run npm run dev for development
  5. Start coding and modifying according to your needs.
  6. Create a new branch git branch <your branch name>
  7. Add your modifications using the git add . command.
  8. Commit your changes using git commit -m message.
  9. Push your changes using git push your <branch name> main.
  10. Use VS Code's source control GUI or command line interface (CLI) to perform all of the above.
  11. build Deploy your changes to Netlify.

Note:

When using for personnal portfolio, there is no need to create new branches if committing/pushing in your copy of repository because netlify deploy will use your own URL to deploy your personnal site.

Version 4 2. Deploy via Button

  1. Click the Deploy to Netlify button.
Show me

Deploy To Netlify

This will create a repository copy NOT fork! for you under the copied repositories on your GitHub and a subdomain site name on Netlify. you can then import your own copy repo into VSCode to commit and push your changes for your personnal portfolio site, Not contributions!


Version 4 3. Deploy via CLI

1. Install netlify CLI

In vscode cloned repo directory run

  npm install -g netlify-cli

2. Run the app in development mode

Install dependencies

 npm install

If faced peer deps and deps conflict during npm install run npm install --force this will force the deps installation but with all conflicts, since we are using yarn.lock to fix this you may try running yarn install as well to update yarn.lock file or try installing any existing deps conflict indiviually.

3. Start the App

 npm run dev or netlify dev

4. Connect to your netlify

Everything looks good? Shutdown dev mode with Ctrl+C

  netlify login

Logs in to your netlify account

  netlify sites:create

It's important to create site name on netlify otherwise deployment wont proceed.

  netlify init

Initializes your new Netlify site in the current directory.

5. Build / Deploy

 netlify build--prod

Builds your site for production

 netlify open:site

Opens your site on the browser

congrats

✅Great job, you developed, built & deployed your personal portfolio site!

Using the Repository for Contributions?

If you have any pull requests in mind to enhance this repository further or have found any issues, please follow these steps:

  1. Fork this repository.
  2. Clone the repository or download the zip file and import it into your preferred IDE.
  3. Run yarn install or npm install or npm install --force for dependencies.
  4. Run npm run dev for development
  5. Start coding, debugging, and enhancing.

Note:

▶️Your IDE should automatically find the remote GitHub repository in source control. If it does not, check the top left corner on your VS Code explorer panel, open git repository clicking the button.
  1. ✅If not already, connect the remote repository using the explorer panel or CLI add remote, copy the forked repository link and paste it into the command palette.
Show me

ADD-REMOTE-DEMO

🆑Using CLI

 git add remote origin <URL of repo>.
  1. ⚠️Before committing and pushing, create a new branch using the GUI or CLI.

    git branch <my new branch name>
    
  2. ✅You can now make changes to your code and commit them to the new branch using standard Git commands such as git add, git commit, and git push. For example, use git push yourBranchName main to push new changes to your own forked repository.

congrats

🎉Congratulations, you are close to your first PR!

  1. ▶️Next, go to the original repository and open a pull request PR. Choose your branch name against head/main to compare changes, double-check everything, and click "Create pull request".

In summary, you should open a pull request on the original repository when you want to contribute changes made in your forked repository back to the original repository. If you are using the repository as your own portfolio site, a PR is not necessary. Thank you!

Tutorials

COMING SOON!


About

Portfolio360 allows potential clients or employers to view your work in a more interactive and engaging way. - free to use by giving credit to it's developers.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages