Need help with adding website link in resume

[1amrishi]

Hello guys, am a noob in editing code, but tried and successfully deployed my site on vercel but need help with changing these top icons

I want to add a website icon and a instagram icon and remove the twitter icon but whenever i try deployment fails due to some error, probably not getting the correct .tsx file for those logos

can anyone help

[muditbhargava66]

To update the social icons:

1. Import the icons you want to use from the icon pack in resume-data.tsx. For example:

import { GitHubIcon, LinkedInIcon, InstagramIcon, PersonIcon } from '@/components/icons';

2. Then update the social array in contact with the new icons:

contact: {
  social: [
    {
      name: "GitHub",
      url: "https://github.com/username",
      icon: GitHubIcon 
    },
    {
      name: "LinkedIn",
      url: "https://linkedin.com/in/username",
      icon: LinkedInIcon
    },
    {  
      name: "Instagram",
      url: "https://instagram.com/username",
      icon: InstagramIcon
    },
    {
      name: "Website", 
      url: "https://website.com",
      icon: PersonStandingIcon
    }
  ]
}

Let me know if that helps! I'm happy to clarify anything that's still unclear.

Hope this helps!

[1amrishi]

what kind of file do i put in @/components/icons to import, which file format and from where to get them, i need instagaram icon and website icon

[1amrishi]

To update the social icons:

1. Import the icons you want to use from the icon pack in resume-data.tsx. For example:

import { GitHubIcon, LinkedInIcon, InstagramIcon, PersonIcon } from '@/components/icons';

2. Then update the social array in contact with the new icons:

contact: {
  social: [
    {
      name: "GitHub",
      url: "https://github.com/username",
      icon: GitHubIcon 
    },
    {
      name: "LinkedIn",
      url: "https://linkedin.com/in/username",
      icon: LinkedInIcon
    },
    {  
      name: "Instagram",
      url: "https://instagram.com/username",
      icon: InstagramIcon
    },
    {
      name: "Website", 
      url: "https://website.com",
      icon: PersonStandingIcon
    }
  ]
}

Let me know if that helps! I'm happy to clarify anything that's still unclear.

Hope this helps!

what kind of file do i put in @/components/icons to import, which file format and from where to get them, i need instagaram icon and website icon

[Zekamashii]

You need to create your own InstagramIcon.tsx.

export const InstagramIcon = (props: React.SVGProps<SVGSVGElement>) => {
    return (
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
        <title>Instagram</title>
        <path
          fill="currentColor"
          "M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913a5.885 5.885 0 0 0 1.384 2.126A5.868 5.868 0 0 0 4.14 23.37c.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558a5.898 5.898 0 0 0 2.126-1.384 5.86 5.86 0 0 0 1.384-2.126c.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913a5.89 5.89 0 0 0-1.384-2.126A5.847 5.847 0 0 0 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227a3.81 3.81 0 0 1-.899 1.382 3.744 3.744 0 0 1-1.38.896c-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421a3.716 3.716 0 0 1-1.379-.899 3.644 3.644 0 0 1-.9-1.38c-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 1 0 0-12.324zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405a1.441 1.441 0 0 1-2.88 0 1.44 1.44 0 0 1 2.88 0z"
        />
      </svg>
    );
  };

Then, you need to update index.ts as well.

import { GitHubIcon } from "./GitHubIcon";
import { LinkedInIcon } from "./LinkedInIcon";
import { XIcon } from "./XIcon";
import { InstagramIcon } from "./InstagramIcon"

export { GitHubIcon, LinkedInIcon, XIcon, InstagramIcon };