chetanverma16 / react-portfolio-template

Modern React Portfolio Template (FREE)

A software engineer who loves building products.

LinkedIn | Portfolio | Behance | Dribbble | Twitter |

react-portfolio-template's Issues

i have issue in running the site

Change Title to `Come Back` when not on focus

Github Portfolio Visualised

• Awesome Visualisation of GitHub portfolio

Overall responsiveness

This just sprang up in my mind but changing tailwind CSS's config for mob to 0px would make most things automatically responsive. The current settings cause things to break below 360px. Also we could remove the mob: prefix altogether from everywhere including the config file.

Image hosting for image url

Hi may i know is there any free hosting server which can generate image url instead of using static image?

Create Transition Animations Between Blog Routes

List of major ui problems in the template

1. While scrolling the page The "Edit Data" button, the button gets hided behind the WorkCard component.
   

2. The Dashboard component inside /edit is getting mixed up / hiding the labels and inputs.
   

I will try and resolve this issues.

Unable to install dependencies?

Have followed instructions on installing dependencies following clone using yarn however keep coming across errors.

Could this be due to breaking updated dependencies that haven't been updated in package.json?

Here's my stack trace:

yarn install v1.22.18
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "gatsby > @typescript-eslint/eslint-plugin > [email protected]" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
warning "gatsby > eslint-plugin-graphql > graphql-config > @endemolshinegroup/cosmiconfig-typescript-loader > [email protected]" has unmet peer dependency "typescript@>=2.7".
warning "gatsby-plugin-sass > [email protected]" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0".
[4/4] 🔨  Building fresh packages...
[-/15] ⡀ waiting...
[9/15] ⡀ sharp
[12/15] ⡀ mozjpeg
[10/15] ⡀ node-sass
error /Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments:
Directory: /Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/node-sass
Output:
Building: /opt/homebrew/Cellar/node/16.3.0/bin/node /Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli   '/opt/homebrew/Cellar/node/16.3.0/bin/node',
gyp verb cli   '/Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/node-gyp/bin/node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library='
gyp verb cli ]
gyp info using [email protected]
gyp info using [email protected] | darwin | arm64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` failed Error: not found: python2
gyp verb `which` failed     at getNotFoundError (/Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/which/which.js:13:12)
gyp verb `which` failed     at F (/Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/which/which.js:68:19)
gyp verb `which` failed     at E (/Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/which/which.js:80:29)
gyp verb `which` failed     at /Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/which/which.js:89:16
gyp verb `which` failed     at /Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/isexe/index.js:42:5
gyp verb `which` failed     at /Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/isexe/mode.js:8:5
gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:195:21)
gyp verb `which` failed  python2 Error: not found: python2
gyp verb `which` failed     at getNotFoundError (/Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/which/which.js:13:12)
gyp verb `which` failed     at F (/Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/which/which.js:68:19)
gyp verb `which` failed     at E (/Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/which/which.js:80:29)
gyp verb `which` failed     at /Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/which/which.js:89:16
gyp verb `which` failed     at /Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/isexe/index.js:42:5
gyp verb `which` failed     at /Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/isexe/mode.js:8:5
gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:195:21) {
gyp verb `which` failed   code: 'ENOENT'
gyp verb `which` failed }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb `which` failed Error: not found: python
gyp verb `which` failed     at getNotFoundError (/Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/which/which.js:13:12)
gyp verb `which` failed     at F (/Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/which/which.js:68:19)
gyp verb `which` failed     at E (/Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/which/which.js:80:29)
gyp verb `which` failed     at /Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/which/which.js:89:16
gyp verb `which` failed     at /Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/isexe/index.js:42:5
gyp verb `which` failed     at /Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/isexe/mode.js:8:5
gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:195:21)
gyp verb `which` failed  python Error: not found: python
gyp verb `which` failed     at getNotFoundError (/Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/which/which.js:13:12)
gyp verb `which` failed     at F (/Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/which/which.js:68:19)
gyp verb `which` failed     at E (/Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/which/which.js:80:29)
gyp verb `which` failed     at /Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/which/which.js:89:16
gyp verb `which` failed     at /Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/isexe/index.js:42:5
gyp verb `which` failed     at /Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/isexe/mode.js:8:5
gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:195:21) {
gyp verb `which` failed   code: 'ENOENT'
gyp verb `which` failed }
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack     at PythonFinder.failNoPython (/Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/node-gyp/lib/configure.js:484:19)
gyp ERR! stack     at PythonFinder.<anonymous> (/Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/node-gyp/lib/configure.js:406:16)
gyp ERR! stack     at F (/Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/which/which.js:68:16)
gyp ERR! stack     at E (/Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/which/which.js:80:29)
gyp ERR! stack     at /Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/which/which.js:89:16
gyp ERR! stack     at /Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/isexe/index.js:42:5
gyp ERR! stack     at /Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/isexe/mode.js:8:5
gyp ERR! stack     at FSReqCallback.oncomplete (node:fs:195:21)
gyp ERR! System Darwin 21.5.0
gyp ERR! command "/opt/homebrew/Cellar/node/16.3.0/bin/node" "/Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /Users/anthonysetiadi/Documents/antz.dev/react-templates/react-portfolio-template/node_modules/node-sass
gyp ERR! node -v v16.3.0
gyp ERR! node-gyp -v v3.8.0

Reordering Projects and Services is shit

Ability To Show / Hide Dark Mode Button From `edit.js`

Layout broken

I was looking at the preview but it looks like this.

Browser: mozilla firefox

Improve Footer Section

Add Smooth Scrolling - Locomotive

Add Clone and Deploy Popup on the corner

Make Blog Responsive

• Responsive Blog

Blog index page responsive

Hi Chetan!

I want to make a pull request that addresses a responsiveness issue on the blogs index page. The fixed size of the entries meant that they overlapped on each other if the screen was small. I think using a flexbox would address this issue effectively unless you have other design considerations for using grids.

Before:

I really loved the design of your portfolio(the previous version) and forked so I could use it for myself.

Blog showing when typing in the url

Hi nice job! Just a question, if someone were to put in /blog after the URL, wouldn't the route still exist? We are only removing the button here. Maybe we can work on this enhancement later. A very minor issue tbh, great work on the commit 😄

Originally posted by @Aryan3212 in #50 (comment)

Mobile View Resume Button Link takes to email

1. change to /resume in header component
2. also add a achievement section in resume
3. Download button for resume

Create Digital Resume With Editor

• Create Digital Resume With Editor

Resume in dark theme is not readable.

Steps to reproduce this issue.

1. have the default system theme as dark.
2. visit the website.
3. click on Resume from the top navbar.
4. The user is unable to read any data.

System Details
System: Macbook Pro M2
OS. Version: Ventura 13.1

See the shared video for more details.

Screen.Recording.2023-01-27.at.7.05.50.AM.mov

Ability To Hide Blog From Navigation from yourData.js

Ability To Hide Blog from Navigation from yourData.js

• Add a New Variable to yourData.js such as hideBlog
• Then Go To The Header Component (Header/index.js) And Conditionally Render the Blog based on the hideBlog Value

Add Github Contribution Graph

Not sure where shall we put this

any recommendations are most welcome

Add Markdown Blog

• Add Markdown Blog
• add blog view
• with Next/Head SEO

Not able to read when hover over services tabs.

Not able to read when hover over services tabs.

GUI To Edit Blogs

• GUI to Edit Blog Content similar to Data

Add Subscribe to My Blog Component

[Feature Implementation] Add navbar sticky top to portfolio page

addition of a sticky top navbar for user experience

ReferenceError: service is not defined when changing social link values.

Add Code Highlighting For The Blog `Code`

Add Some SEO Stuff

• Some SEO Improvements to the pages!!

Change The Favicon with the Custom Icon

• I think it's a good idea to have a custom logo for this theme.

no build folder created after npm run build

when i run npm run build it executes successfully but no build folder created

the screenshot for executing npm run deploy command.

i want to deploy the portfolio to git hub pages but that what happen (no build folder generated )
link for the compressed code [code] (https://www.mediafire.com/file/qzl4rb68tj53qa6/react-portfolio-template-master.rar/file)

New Design Updates

Blog link redirects to author's actual blog, not the one in the demo.

Hi. Great template!
I'd like to have the blog link redirect to the md files in the project as it does in the demo but not sure how to do that.
Any suggestions?

not responsive

definitely rerenders when rezising but its not displayed nicely.

Update Readme

Adding Standalone Pages for Projects

• Good idea to work on this issue is after finishing up the dashboard for editing content.

Removing custom cursor

Hey, I was just wondering how should I get rid of the custom cursor. It makes the website feel sluggish and slow. I tried removing certain conditions and statements but it just created more errors. Is there a way to remove the cursor with minimal lines changed?

Add a very simple navbar to the mobile view

I was hoping to create a navbar as done on my fork of the project but which is larger making it more accessible.

Something like the image below, but with better demarcations and accessibility. We aren't using any icon pack and the one on the image was made using a raw SVG path. Maybe we can just have a button instead of the "hamburger+menu".

Adding Typescript

Questions that I have in mind

• This template is targeted more towards new developers not sure if adding TypeScript makes it more difficult for the new developer trying to customise this template.
• Will not take that much amount of time not sure if this is the priority

React Portfolio Template With Documentation for How To setup and do the changes (Docusaurus)

Add Tweet Board For your Most Liked Tweet

horizontal overflow

Possible ways to edit the content with NICE GUI instead of a JS file!! (Suggestions)

Possible ways to edit the content with NICE GUI instead of a file!! (Suggestions)

• I am thinking of adding a git-based CMS.

Possible solutions -

• https://www.netlifycms.org/ (we are already using netlify for deployment)
• https://tina.io/
• https://getpublii.com/ (I Like this)
• https://forestry.io/
• Create our own Dashboard (/edit) with our schema for content and save that to a local JS File or something and disable that in production.

@Aryan3212,
If you have any other better approach to tackle this.
would love to hear from you.

Add Custom Cursor

Add Dark Mode