harikanani / harikanani.github.io

🔥 The Complete Customizable Software Developer Portfolio Template which lets you showcase your work and provides each and every detail about you as Software Developer.

PortfolioV2

A clean portfolio template. (Readme will be updated soon)

Sections

• Home
• Education and Certificates
• Experience
• Projects
• Contact and Resume

How To Use

• Clone this repository (or fork, then clone your fork :) )
• Run npm i
• Check it out using npm start

How Do I Customize

• Replace homepage in package.json to your domain name or https://<username>.github.io
• In src/portfolio.js you can add your personal portfolio details.
• In src/theme.js you can change the theme colors. You can change between Light and Dark theme with the theme switch on the header.

How to Deploy

• Once you are done with your setup and have successfully completed all steps above, you need to put your website online!
• I highly recommend using Github Pages to achieve this the EASIEST WAY.
• To deploy your website, you have two options. First you need to create a github repository with the name <your-github-username>.github.io. Please don't give it any other name.
• Now, you need to generate a production build and deploy the website.

Option 1:

• Run npm run build to generate the production build folder.
• Enter the build folder, git init and push the generated code to the master branch of your new repository. That's it. Done. You may need to git init and force push at every new build.

Option 2 (will not work with user pages):

• Run npm run deploy to build and create a branch called gh-pages. It will push the build files to that branch.
• The last step in deploying is to enable Github Pages in settings of the repository and select gh-pages branch.

Now, your website is successfully deployed and you can visit it at <your-github-username>.github.io.

Technologies used 🛠️

• React
• graphql
• apollo-boost
• baseui
• react-reveal
• styled-components

illustrations 🍥

• UnDraw

References

Based on https://github.com/ashutosh1919/masterPortfolio/ and https://github.com/saadpasta/developerFolio Illustrations: https://undraw.co/

harikanani.github.io's Issues

Social Icons Still Exist Even If Url Doesn't

Social Icons still render even If you don't fill the config file.

Routing stops working on changing the theme

Hey!
Thanks for creating this portfolio. This is some good stuff. I've noticed a bug though-
After switching the theme, the routing stops working and this warning is seen on the console:
Warning: You cannot change <Router history>
Are you aware of this? Any ideas?

Update:
So, I think the issue was being caused by the router re-rendering. I made it to work by creating history in index.js and then passing it to Main.js

Horizontal Scroll during on going animation

How to Reproduce the Issue ?

Just go to the website and scroll you will notice there is some horizontal scroll ongoing for split second and I believe it is due to animation !!

Skills Icon Disappeared

The Skills Icon we used to see suddenly disappeared

Path Routing Issues on Fork

Update

I was able to track the problem down to the src={require(../../assets/images/${ContactData["profile_image_path"]})}, if you remove the require() the website will become functional online, but the images will no longer load. Will continue working this and see if I can resolve the issue and provide an update

Describe the bug

On my personal fork of your repository (great job by the way!) I'm unable to use the Navbar to navigate to the contact page.
I'm able to use the Navbar and select different pages (Home, Education, Experience, Projects) but once I select "Contact" the page loads an unresponsive blank page

To Reproduce

Check out my website and try the NavBar to get to Contact https://dancard32.github.io/website/#/home

More information

• I've changed the homepage setting in the package.json to reflect my own website repository.
• This works on a local deployment (localhost:3000 for me), but it doesn't work on github-pages deployment
• Changing the path="/contact" in src/Main.js and src/componensts/header/Header.js has no effect

Note that this works for all other links/pages BUT the contact page

Your Google Analytics Tracking Id is Public! Add a comment so that people will change it

Improving Responsive Design

In large screen ( 27 inch ) when you pass by the second element it shows u the details of the previous one ==> screen capture