├── test.html
├── test2.html
├── .eslintrc.json
├── postcss.config.js
├── public
    ├── img.jpeg
    ├── favicon.ico
    ├── github.ico
    ├── loading.png
    ├── homepage.png
    ├── vercel.svg
    ├── thirteen.svg
    └── next.svg
├── pages
    ├── api
    │   └── hello.ts
    ├── _app.tsx
    ├── _document.tsx
    └── index.js
├── next.config.js
├── .gitignore
├── Components
    ├── Title.js
    ├── Message.js
    ├── skillsCard.js
    ├── SocialInfo.js
    ├── Works.js
    ├── MoreInfo.js
    ├── Implementation.js
    ├── DevCard.js
    ├── AddOns.js
    ├── Preview.js
    ├── SideOption.js
    └── Generate.js
├── tailwind.config.js
├── tsconfig.json
├── styles
    ├── globals.css
    └── Home.module.css
├── package.json
├── .github
    └── workflows
    │   └── nextjs.yml
├── README.md
└── helper
    └── static.js


/test.html:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/test2.html:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/img.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Technicalranjitofficial/github-profile-readme-generator/HEAD/public/img.jpeg


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Technicalranjitofficial/github-profile-readme-generator/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/github.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Technicalranjitofficial/github-profile-readme-generator/HEAD/public/github.ico


--------------------------------------------------------------------------------
/public/loading.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Technicalranjitofficial/github-profile-readme-generator/HEAD/public/loading.png


--------------------------------------------------------------------------------
/public/homepage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Technicalranjitofficial/github-profile-readme-generator/HEAD/public/homepage.png


--------------------------------------------------------------------------------
/pages/api/hello.ts:
--------------------------------------------------------------------------------
 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 2 | import type { NextApiRequest, NextApiResponse } from 'next'
 3 | 
 4 | type Data = {
 5 |   name: string
 6 | }
 7 | 
 8 | export default function handler(
 9 |   req: NextApiRequest,
10 |   res: NextApiResponse<Data>
11 | ) {
12 |   res.status(200).json({ name: 'John Doe' })
13 | }
14 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   reactStrictMode: true,
 4 |   images:{
 5 |     domains:['github-readme-stats.vercel.app','github-readme-streak-stats.herokuapp.com','github-profile-trophy.vercel.app','user-images.githubusercontent.com','raw.githubusercontent.com']
 6 |   },
 7 |   env:{
 8 |     GOOGLE_ANALYTICS: process.env.GOOGLE_ANALYTICS,
 9 |     
10 |     
11 |   }
12 | }
13 | 
14 | module.exports = nextConfig
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 | 
28 | # local env files
29 | .env 
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/Components/Title.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const Title = ({label,title,setTitle}) => {
 4 |   return (
 5 |     <div className='pt-6 flex flex-col md:w-3/4 gap-1'>
 6 |         <label htmlFor="name" className='font-Alegreya text-lg text-cyan-500 font-bold' id="floating_filled">{label}</label>
 7 |         <input value={title} onChange={(e)=>setTitle(e.target.value)} className='py-2 outline-none text-slate-400 font-Alegreya font-semibold text-sm bg-slate-900 border-2 border-slate-800  rounded-md pl-2' type="text" id='name' placeholder='Enter your title..' />
 8 |     </div>
 9 |   )
10 | }
11 | 
12 | export default Title
13 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     "./app/**/*.{js,ts,jsx,tsx}",
 5 |     "./pages/**/*.{js,ts,jsx,tsx}",
 6 |     "./Components/**/*.{js,ts,jsx,tsx}",
 7 | 
 8 |     // Or if using `src` directory:
 9 |     "./src/**/*.{js,ts,jsx,tsx}",
10 |   ],
11 |   theme: {
12 |     extend: {
13 |       fontFamily: {
14 |         Alegreya: "Alegreya Sans",
15 |         Montserrat: "Montserrat",
16 |         OpenSans: "Open Sans",
17 |         Lato: "Lato",
18 |         Roboto: "Roboto",
19 |         RobotoSlab: "Roboto Slab",
20 |       },
21 |     },
22 |   },
23 |   plugins: [],
24 | };
25 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "incremental": true,
17 |     "baseUrl": ".",
18 |     "paths": {
19 |       "@/*": ["./*"]
20 |     }
21 |   },
22 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "pages/index.js"],
23 |   "exclude": ["node_modules"]
24 | }
25 | 


--------------------------------------------------------------------------------
/Components/Message.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const Message = ({msg,success,setMessage}) => {
 4 | 
 5 |     
 6 |   return (
 7 |     <div className={`fixed md:w-screen h-20 px-6 ${msg.length>0?"top-3":"-top-96"} duration-300 ease-linear z-50`}>
 8 |         <div className={`max-w-screen-sm  rounded-md ${msg.length>0 && success===null?"bg-yellow-800":success===true?"bg-green-800":"bg-red-800" }  relative h-full justify-center flex items-center mx-auto px-12`}>
 9 |             <button className='absolute top-3 text-slate-300 right-5' onClick={()=>setMessage({message:"",success:null})}>X</button>
10 |         <span className='text-slate-200 text-xs font-Alegreya font-semibold'>{msg}</span>
11 |         </div>
12 |     </div>
13 |   )
14 | }
15 | 
16 | export default Message


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');
 5 | @import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@900&family=Lato:wght@900&family=Montserrat:wght@900&family=Open+Sans&family=Roboto:wght@400;900&display=swap');
 6 | 
 7 |  /* width */
 8 | 
 9 | 
10 | ::-webkit-scrollbar {
11 |   width: 1px;
12 |   
13 | }
14 | 
15 | 
16 | 
17 | /* Track */
18 | ::-webkit-scrollbar-track {
19 |   box-shadow: inset 0 0 5px gray;
20 |   border-radius: 10px;
21 | }
22 | 
23 | /* Handle */
24 | ::-webkit-scrollbar-thumb {
25 |   background: rgb(9, 185, 185);
26 |   border-radius: 10px;
27 | }
28 | 
29 | /* Handle on hover */
30 | ::-webkit-scrollbar-thumb:hover {
31 |   background: transparent;
32 | }


--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
 1 | import '@/styles/globals.css'
 2 | import SEO from '@bradgarropy/next-seo'
 3 | import type { AppProps } from 'next/app'
 4 | 
 5 | export default function App({ Component, pageProps }: AppProps) {
 6 |   return <>
 7 |    <SEO title="Github Profile Readme Generator" description="Prettify your github profile using this amazing readme generator."
 8 |     keywords={['generator','github','readme-generator','github readme generator','github-profile','github-readme']} icon="/github.ico" twitter={{
 9 |       image: "/homepage.png",
10 |       site: "@technicalranjit",
11 |       card: "summary",
12 |   }}
13 |   facebook={{
14 |     image:"./homepage.png",
15 |     type:"website",
16 |     url:"https://github.com/Technicalranjitofficial/github-profile-readme-generator"
17 |   }}
18 | 
19 |   />
20 |   <Component {...pageProps} />
21 |   </>
22 | }
23 | 


--------------------------------------------------------------------------------
/Components/skillsCard.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | // import { skills } from '../helper/static'
 3 | 
 4 | const SkillsCard = ({skill,onChange,skills,icons}) => {
 5 |   return (
 6 |     <div onClick={()=>onChange(skill)} className='flex flex-row border-2 bg-slate-800  border-slate-700 rounded-md h-28 items-center relative'>
 7 |         <input type="checkbox" className='z-50 absolute top-2 left-2'  id={skill} onChange={()=>onChange(skill)} checked={skills[skill]} />
 8 |       <div className='relative h-full w-full items-center flex justify-center flex-row'>
 9 |       <span className='text-slate-300 text-xs absolute top-1.5 flex-wrap left-6 font-bold font-serif'>{skill.charAt(0).toUpperCase()+skill.slice(1)}</span>
10 |         <img className=' h-20 w-20 md:w-16 md:h-16  object-cover object-center' src={icons} alt="img" />
11 |       </div>
12 |     </div>
13 |   )
14 | }
15 | 
16 | export default SkillsCard


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "readmegenerator",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@bradgarropy/next-seo": "^1.2.0",
13 |     "@next/font": "13.1.6",
14 |     "@primer/octicons-react": "^17.11.1",
15 |     "@ramonak/react-progress-bar": "^5.0.3",
16 |     "@types/node": "18.11.18",
17 |     "@types/react": "18.0.27",
18 |     "@types/react-dom": "18.0.10",
19 |     "axios": "^1.3.2",
20 |     "eslint": "8.33.0",
21 |     "eslint-config-next": "13.1.6",
22 |     "gsap": "^3.11.4",
23 |     "next": "13.1.6",
24 |     "react": "18.2.0",
25 |     "react-dom": "18.2.0",
26 |     "react-icons": "^4.7.1",
27 |     "react-syntax-highlighter": "^15.5.0",
28 |     "typescript": "4.9.5"
29 |   },
30 |   "devDependencies": {
31 |     "autoprefixer": "^10.4.13",
32 |     "postcss": "^8.4.21",
33 |     "tailwindcss": "^3.2.4"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/pages/_document.tsx:
--------------------------------------------------------------------------------
 1 | import { Html, Head, Main, NextScript } from "next/document";
 2 | import Script from "next/script";
 3 | 
 4 | export default function Document() {
 5 |   return (
 6 |     <Html lang="en">
 7 |       <Head>
 8 |         <Script
 9 |           strategy="lazyOnload"
10 |           src={`https://www.googletagmanager.com/gtag/js?id=G-0NRNKS9N4D`}
11 |         />
12 | 
13 |         <Script id="ga-script" strategy="lazyOnload">
14 |           {`
15 |     window.dataLayer = window.dataLayer || [];
16 |     function gtag(){dataLayer.push(arguments);}
17 |     gtag('js', new Date());
18 |     gtag('config', 'G-0NRNKS9N4D', {
19 |       page_path: window.location.pathname,
20 |     });
21 |         `}
22 |         </Script>
23 | 
24 |         <Script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9835038903847401"
25 |           crossOrigin="anonymous"></Script>
26 | 
27 | 
28 |       </Head>
29 |       <body>
30 |         <Main />
31 |         <NextScript />
32 |       </body>
33 |     </Html>
34 |   );
35 | }
36 | 


--------------------------------------------------------------------------------
/Components/SocialInfo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Image from 'next/image'
 3 | 
 4 | const SocialInfo = ({value,onSetSoical,icons,placeholder,setMsg}) => {
 5 |  
 6 |   return (
 7 |     <div className='flex flex-row w-full border-2  rounded-md gap-3  border-slate-700'>
 8 |      
 9 |        {value.length>0 ? <Image width={50}   height={50} className={` `}  src={icons} alt="social" />:
10 |        
11 |        <Image width={50}   height={50} className={` `}  src={icons} alt="social" />
12 |        }
13 |         <input value={value}   onChange={(e)=>onSetSoical(`${placeholder}`,e)} type="text" className={`w-full bg-slate-900 outline-none   font-semibold ${placeholder==="github" &&"animate-pulse"} text-slate-300 placeholder:text-slate-500 placeholder:text-sm placeholder:font-OpenSans placeholder:${placeholder==="github"?"animate-pulse":"animate-none"} placeholder:${placeholder==="github"?"text-red-500":" text-slate-300"}`} placeholder={`${placeholder.charAt(0).toUpperCase()}${placeholder.slice(1)} username`} />
14 |     </div>
15 |   )
16 | }
17 | 
18 | export default SocialInfo


--------------------------------------------------------------------------------
/public/thirteen.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="40" height="31" fill="none"><g opacity=".9"><path fill="url(#a)" d="M13 .4v29.3H7V6.3h-.2L0 10.5V5L7.2.4H13Z"/><path fill="url(#b)" d="M28.8 30.1c-2.2 0-4-.3-5.7-1-1.7-.8-3-1.8-4-3.1a7.7 7.7 0 0 1-1.4-4.6h6.2c0 .8.3 1.4.7 2 .4.5 1 .9 1.7 1.2.7.3 1.6.4 2.5.4 1 0 1.7-.2 2.5-.5.7-.3 1.3-.8 1.7-1.4.4-.6.6-1.2.6-2s-.2-1.5-.7-2.1c-.4-.6-1-1-1.8-1.4-.8-.4-1.8-.5-2.9-.5h-2.7v-4.6h2.7a6 6 0 0 0 2.5-.5 4 4 0 0 0 1.7-1.3c.4-.6.6-1.3.6-2a3.5 3.5 0 0 0-2-3.3 5.6 5.6 0 0 0-4.5 0 4 4 0 0 0-1.7 1.2c-.4.6-.6 1.2-.6 2h-6c0-1.7.6-3.2 1.5-4.5 1-1.3 2.2-2.3 3.8-3C25 .4 26.8 0 28.8 0s3.8.4 5.3 1.1c1.5.7 2.7 1.7 3.6 3a7.2 7.2 0 0 1 1.2 4.2c0 1.6-.5 3-1.5 4a7 7 0 0 1-4 2.2v.2c2.2.3 3.8 1 5 2.2a6.4 6.4 0 0 1 1.6 4.6c0 1.7-.5 3.1-1.4 4.4a9.7 9.7 0 0 1-4 3.1c-1.7.8-3.7 1.1-5.8 1.1Z"/></g><defs><linearGradient id="a" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient><linearGradient id="b" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient></defs></svg>


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/Components/Works.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const Works = ({index,handleOnRemove, onChange,val}) => {
 4 |   return (
 5 |     <div className="w-full mt-5  flex flex-col md:flex-col justify-between">
 6 |         <span className="text-slate-300 font-Montserrat font-semibold text-md">Project-{index+1}</span>
 7 |       <div className="flex justify-between flex-col gap-1 md:flex-row mt-2">
 8 |       <div className=" w-full flex flex-col mt-2">
 9 |         <label htmlFor="Workname" className="mb-1  text-slate-400 text-md font-Montserrat">Prefix</label>
10 |         <input onChange={(e)=>onChange(e,index)} name="workingFor"  value={val.workingFor} className="bg-slate-900 border-2 text-slate-400 text-sm  rounded-md  font-OpenSans outline-none border-slate-800 py-2  px-2" type="text" />
11 |         
12 |       </div>{" "}
13 |       <div className=" w-full flex flex-col mt-2">
14 |         <label htmlFor="Workname" className="mb-1  text-slate-400 text-md font-Montserrat">Project Name</label>
15 |         <input onChange={(e)=>onChange(e,index)} value={val.pName} name="pName" className="bg-slate-900 border-2 text-slate-400 text-sm font-OpenSans   rounded-md outline-none border-slate-800 py-2  px-2" type="text" />
16 |       </div>{" "}
17 |       <div className=" w-full flex flex-col mt-2">
18 |         <label htmlFor="Workname" className="mb-1  text-slate-400 text-md font-Montserrat">Project Link</label>
19 |         <input onChange={(e)=>onChange(e,index)} value={val.pLink} name="pLink" className="bg-slate-900 border-2 text-slate-400 text-sm font-OpenSans  rounded-md  outline-none border-slate-800 py-2  px-2" type="text" />
20 |       </div>
21 |       </div>
22 |       <button onClick={(i)=>handleOnRemove(i)} className=" bg-red-900 rounded-md py-2 mt-3 hover:bg-red-800 text-slate-400 font-bold font-Alegreya ">Delete</button>
23 |     </div>
24 |   );
25 | };
26 | 
27 | export default Works;
28 | 


--------------------------------------------------------------------------------
/Components/MoreInfo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const MoreInfo = ({val,onChange}) => {
 4 |   return (
 5 |     <div className='w-full mt-1 flex flex-col md:flex-col justify-between'>
 6 |         <div className='w-full flex flex-col mt-2'>
 7 |             <label htmlFor='currently ' className='mb-1  text-slate-300 text-md font-Alegreya font-semibold'>👩🏽‍💻 Currently Learning</label>
 8 |             <input className="bg-slate-900 border-2 rounded-md text-slate-300 text-sm px-2  font-OpenSans outline-none border-slate-800 py-2" type="text" name="currentLearning" id="currently" value={val.currentLearning}  onChange={(e)=>onChange(e)}  />
 9 |         </div> <div className='w-full flex flex-col mt-2'>
10 |             <label htmlFor='currently ' className='mb-1  text-slate-300 text-md font-Alegreya font-semibold'>💬 Ask me about</label>
11 |             <input className="bg-slate-900 border-2 rounded-md text-slate-300 text-sm px-2  font-OpenSans outline-none border-slate-800 py-2" type="text" name="askme" id="currently"  value={val.askme}  onChange={(e)=>onChange(e)} />
12 |         </div> <div className='w-full flex flex-col mt-2'>
13 |             <label htmlFor='currently ' className='mb-1  text-slate-300 text-md font-Alegreya font-semibold'>📫 How to reach me</label>
14 |             <input className="bg-slate-900 border-2 rounded-md text-slate-300 text-sm px-2  font-OpenSans outline-none border-slate-800 py-2" type="text" name="reachme" id="currently"  value={val.reachme}  onChange={(e)=>onChange(e)} />
15 |         </div><div className='w-full flex flex-col mt-2'>
16 |             <label htmlFor='currently ' className='mb-1  text-slate-300 text-md font-Alegreya font-semibold'>⚡ Fun fact</label>
17 |             <input className="bg-slate-900 border-2 rounded-md text-slate-300 text-sm px-2  font-OpenSans outline-none border-slate-800 py-2" type="text" name="funfact" id="currently"  value={val.funfact}  onChange={(e)=>onChange(e)} />
18 |         </div>
19 |     </div>
20 |   )
21 | }
22 | 
23 | export default MoreInfo


--------------------------------------------------------------------------------
/Components/Implementation.js:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | import React from "react";
 3 | 
 4 | const Implementation = () => {
 5 |   return (
 6 |     <div>
 7 |       <div className="text-slate-300">
 8 |         <br />
 9 |         <h1 className="text-center animate-pulse font-Alegreya text-lg md:text-2xl  font-bold text-teal-500">
10 |           Docs For Implementation
11 |         </h1>
12 |         <br />
13 |         <h1 className="text-slate-300 font-Alegreya text-md font-bold">#STEP-1:</h1>
14 |         <p className="text-slate-400 ml-3 text-sm mt-2 font-bold font-Alegreya">
15 |           Create a Repository : <span className="text-pink-500">name</span> must
16 |           be same as your <span className="text-pink-500">github username</span>{" "}
17 |         </p>
18 |         <div className="w-full justify-center flex flex-wrap">
19 |           <Image
20 |             width={500}
21 |             className="w-full object-cover mt-5 rounded-md md:px-4"
22 |             height={300}
23 |             src="https://user-images.githubusercontent.com/87274287/216817137-325b3623-e838-4526-939f-824de97035fc.png"
24 |             alt="profile-radme-generator"
25 |           />
26 |         </div>
27 |         <br />
28 |         <h1 className="text-slate-300 font-Alegreya text-md font-bold">#STEP-2</h1>
29 |           <p className="text-slate-400 ml-3 text-sm mt-2 font-bold font-Alegreya">Make Sure Check the <span className="text-pink-500 font-bold">readme.md</span> </p>
30 |           <div className="w-full justify-center flex flex-wrap">
31 |           <Image
32 |             width={500}
33 |             className="w-full object-cover mt-5 rounded-md md:px-4"
34 |             height={300}
35 |             src="https://user-images.githubusercontent.com/87274287/216817142-43654aaa-993f-407e-947c-bfb0c78da7cb.png"
36 |             alt="profile-radme-generator"
37 |           />
38 |         </div>
39 |         <br />
40 |         <h1 className="text-slate-300 font-Alegreya text-md font-bold">#STEP-3</h1>
41 |           <p className="text-slate-400 ml-3 text-sm mt-2 font-bold font-Alegreya">Edit the <span className="text-pink-500 font-bold">readme.md</span> files which is present in the created repository. </p>
42 |           <div className="w-full justify-center flex flex-wrap">
43 |           <Image
44 |             width={500}
45 |             className="w-full object-cover mt-5 rounded-md md:px-4"
46 |             height={300}
47 |             src="https://user-images.githubusercontent.com/87274287/216817156-15f28207-a8c7-4832-9cb7-bc9c0072fabb.png"
48 |             alt="profile-radme-generator"
49 |           />
50 | 
51 |         </div>
52 | 
53 | 
54 |         <h1 className="text-slate-300 font-Alegreya text-md font-bold">#STEP-4</h1>
55 |           <p className="text-slate-400 ml-3 text-sm mt-2 font-bold font-Alegreya">Copy the  <span className="text-pink-500 font-bold">#Code</span> given below. </p>        
56 |       </div>
57 |     </div>
58 |   );
59 | };
60 | 
61 | export default Implementation;
62 | 


--------------------------------------------------------------------------------
/Components/DevCard.js:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | import React, { useEffect, useLayoutEffect, useState } from "react";
 3 | import { StarIcon, RepoForkedIcon } from "@primer/octicons-react";
 4 | import gsap from "gsap";
 5 | import { devSocial, devSocialTitle } from "@/helper/static";
 6 | import Image from "next/image";
 7 | const DevCard = () => {
 8 |   const [forksCount, setForksCount] = useState("");
 9 | 
10 |   // const getData = async () => {
11 |    
12 |   //     axios
13 |   //       .get(
14 |   //         "https://api.github.com/repos/Technicalranjitofficial/nothing/forks"
15 |   //       )
16 |   //       .then((res) => {
17 |   //         setForksCount(res.data[0].forks_count);
18 |   //       })
19 |   //       .catch((err) => {
20 |   //         console.log(err);
21 |   //       });
22 |      
23 |   // };
24 | 
25 |   useEffect(()=>{
26 |     // getData();
27 |     // setInterval(getData, 60000);
28 | 
29 |       console.log("clicked")
30 |       gsap.set(".star, .fork", {
31 |         transformOrigin: "center",
32 |       });
33 |       gsap.to(".star, .fork", {
34 |         rotateZ: "360",
35 |         duration: 2,
36 |         ease: "elastic.inOut",
37 |         repeat: -1,
38 |         yoyo: true,
39 |       });
40 |    
41 |   
42 |   },[])
43 |   return (
44 |     <div className="w-full flex rounded-lg flex-col relative items-center justify-center animate-pulse border-dotted border-2  border-cyan-500 h-52 bg-slate-900">
45 |       <span className="absolute top-5 text-md md:text-xl text-sm font-Alegreya font-bold text-slate-300">Github Profile Readme Generator</span>
46 |       <div className="flex flex-row gap-6">
47 |         <a href="https://github.com/Technicalranjitofficial/github-profile-readme-generator">
48 |         <div className="flex items-center font-Alegreya text-slate-400 border-2 border-slate-500 rounded-md border-dotted py-2 px-1 md:px-4 gap-2 flex-col md:flex-row ">
49 |           <StarIcon className="star" />
50 |           <p className="text-xs md:text-sm">Star this repo</p>
51 |         </div>
52 |         </a>
53 |         <a href="https://github.com/Technicalranjitofficial/github-profile-readme-generator">
54 |         <div className="flex flex-col md:flex-row text-slate-400 gap-2 font-Alegreya  border-2 border-slate-500  rounded-md border-dotted py-2 px-1 md:px-4 justify-between items-center">
55 |           <RepoForkedIcon className="fork justify-between" />
56 |           <p className="text-xs md:text-sm">Fork this repo {forksCount}</p>
57 |         </div>
58 |         </a>
59 |       </div>
60 |       <div className="absolute bottom-5 flex gap-2 flex-row text-xs md:text-md font-bold font-Alegreya text-green-500">
61 |         {devSocialTitle.map((val,index)=>{
62 |           return <a key={index} href={devSocial[val].url}><Image  className={`border-2 border-slate-600 rounded-lg hover:border-slate-500 hover:translate-y-1`} src={devSocial[val].img} alt="" width={40} height={40}/></a>
63 |         })}
64 |       </div>
65 |     </div>
66 |   );
67 | };
68 | 
69 | export default DevCard;
70 | 


--------------------------------------------------------------------------------
/.github/workflows/nextjs.yml:
--------------------------------------------------------------------------------
 1 | # Sample workflow for building and deploying a Next.js site to GitHub Pages
 2 | #
 3 | # To get started with Next.js see: https://nextjs.org/docs/getting-started
 4 | #
 5 | name: Deploy Next.js site to Pages
 6 | 
 7 | on:
 8 |   # Runs on pushes targeting the default branch
 9 |   push:
10 |     branches: ["main"]
11 | 
12 |   # Allows you to run this workflow manually from the Actions tab
13 |   workflow_dispatch:
14 | 
15 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
16 | permissions:
17 |   contents: read
18 |   pages: write
19 |   id-token: write
20 | 
21 | # Allow one concurrent deployment
22 | concurrency:
23 |   group: "pages"
24 |   cancel-in-progress: true
25 | 
26 | jobs:
27 |   # Build job
28 |   build:
29 |     runs-on: ubuntu-latest
30 |     steps:
31 |       - name: Checkout
32 |         uses: actions/checkout@v3
33 |       - name: Detect package manager
34 |         id: detect-package-manager
35 |         run: |
36 |           if [ -f "${{ github.workspace }}/yarn.lock" ]; then
37 |             echo "manager=yarn" >> $GITHUB_OUTPUT
38 |             echo "command=install" >> $GITHUB_OUTPUT
39 |             echo "runner=yarn" >> $GITHUB_OUTPUT
40 |             exit 0
41 |           elif [ -f "${{ github.workspace }}/package.json" ]; then
42 |             echo "manager=npm" >> $GITHUB_OUTPUT
43 |             echo "command=ci" >> $GITHUB_OUTPUT
44 |             echo "runner=npx --no-install" >> $GITHUB_OUTPUT
45 |             exit 0
46 |           else
47 |             echo "Unable to determine packager manager"
48 |             exit 1
49 |           fi
50 |       - name: Setup Node
51 |         uses: actions/setup-node@v3
52 |         with:
53 |           node-version: "16"
54 |           cache: ${{ steps.detect-package-manager.outputs.manager }}
55 |       - name: Setup Pages
56 |         uses: actions/configure-pages@v3
57 |         with:
58 |           # Automatically inject basePath in your Next.js configuration file and disable
59 |           # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
60 |           #
61 |           # You may remove this line if you want to manage the configuration yourself.
62 |           static_site_generator: next
63 |       - name: Restore cache
64 |         uses: actions/cache@v3
65 |         with:
66 |           path: |
67 |             .next/cache
68 |           # Generate a new cache whenever packages or source files change.
69 |           key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
70 |           # If source files changed but packages didn't, rebuild from a prior cache.
71 |           restore-keys: |
72 |             ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
73 |       - name: Install dependencies
74 |         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
75 |       - name: Build with Next.js
76 |         run: ${{ steps.detect-package-manager.outputs.runner }} next build
77 |       - name: Static HTML export with Next.js
78 |         run: ${{ steps.detect-package-manager.outputs.runner }} next export
79 |       - name: Upload artifact
80 |         uses: actions/upload-pages-artifact@v1
81 |         with:
82 |           path: ./out
83 | 
84 |   # Deployment job
85 |   deploy:
86 |     environment:
87 |       name: github-pages
88 |       url: ${{ steps.deployment.outputs.page_url }}
89 |     runs-on: ubuntu-latest
90 |     needs: build
91 |     steps:
92 |       - name: Deploy to GitHub Pages
93 |         id: deployment
94 |         uses: actions/deploy-pages@v1
95 | 


--------------------------------------------------------------------------------
/Components/AddOns.js:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | import React from "react";
 3 | 
 4 | const AddOns = ({addOns,onCheckAddons}) => {
 5 |   return (
 6 |     <div className="mt-2 text-slate-300 flex flex-col gap-2">
 7 |       <div onClick={()=>onCheckAddons('visitorBadge')} className="w-full border-2 rounded-md border-slate-800 flex flex-row gap-1 py-3 hover:bg-slate-700 cursor-pointer">
 8 |         <input onChange={(e)=>onCheckAddons('visitorBadge')} type="checkbox" checked={addOns.visitorBadge} className="w-10 h-auto accent-green-600 bg-red-400 " name="" id="" />
 9 |         <span className="font-Alegreya text-sm">Display Visitors Count Badge</span>
10 |       </div>
11 |       <div onClick={()=>onCheckAddons('twiterBadge')} className="w-full border-2 rounded-md  border-slate-800 flex flex-row gap-1 py-3 hover:bg-slate-700 cursor-pointer">
12 |         <input onChange={(e)=>onCheckAddons('twiterBadge')} type="checkbox" checked={addOns.twiterBadge} className="w-10 h-auto accent-green-600 " name="" id="" />
13 |         <span className="font-Alegreya text-sm">Display Twiter Badge</span>
14 |       </div> 
15 |       <div onClick={()=>onCheckAddons('trophy')}  className="w-full border-2 border-slate-800 rounded-md flex flex-row gap-1 py-3 hover:bg-slate-700 cursor-pointer">
16 |         <input onChange={(e)=>onCheckAddons('trophy')} type="checkbox" checked={addOns.trophy} className="w-10 h-auto accent-green-600 " name="" id="" />
17 |         <span className="font-Alegreya text-sm">Display Trophy  </span>
18 |       </div>
19 |       {/* <div onClick={()=>onCheckAddons('topSkills')} className="w-full border-2 border-slate-800 flex flex-row gap-1 py-3 hover:bg-slate-700 cursor-pointer">
20 |         <input onChange={(e)=>onCheckAddons('topSkills')} type="checkbox" checked={addOns.topSkills} className="w-10 h-auto accent-green-600 " name="" id="" />
21 |         <span>Display Top Skills</span>
22 |       </div> */}
23 |       <div onClick={()=>onCheckAddons('githubProfileStats')} className="w-full rounded-md border-2 border-slate-800 flex flex-row gap-1 py-3 hover:bg-slate-700 cursor-pointer">
24 |         <input onChange={(e)=>onCheckAddons('githubProfileStats')} type="checkbox" checked={addOns.githubProfileStats} className="w-10  h-auto accent-green-600 " name="" id="" />
25 |         <span className="font-Alegreya text-sm">Display Profile Stats  </span>
26 |       </div>
27 |       <div onClick={()=>onCheckAddons('showMemes')} className="w-full border-2 border-slate-800 rounded-md flex flex-row gap-1 py-3 hover:bg-slate-700 cursor-pointer">
28 |         <input onChange={(e)=>onCheckAddons('showMemes')} type="checkbox" checked={addOns.showMemes} className="w-10 h-auto accent-green-600 " name="" id="" />
29 |         <span className="font-Alegreya text-sm">Display Memes</span>
30 |       </div>
31 |       <div onClick={()=>onCheckAddons('showStreakStats')} className="w-full border-2 border-slate-800 rounded-md flex flex-row gap-1 py-3 hover:bg-slate-700 cursor-pointer">
32 |         <input onChange={(e)=>onCheckAddons('showStreakStats')} type="checkbox" checked={addOns.showStreakStats} className="w-10 h-auto accent-green-600 " name="" id="" />
33 |         <span className="font-Alegreya text-sm">Show Streak Stats</span>
34 |       </div> 
35 |       <div onClick={()=>onCheckAddons('showMostLanguageUsed')} className="w-full border-2 border-slate-800 rounded-md flex flex-row gap-1 py-3 hover:bg-slate-700 cursor-pointer">
36 |         <input onChange={(e)=>onCheckAddons('showMostLanguageUsed')} type="checkbox" checked={addOns.showMostLanguageUsed} className="w-10 h-auto accent-green-600 " name="" id="" />
37 |         <span className="font-Alegreya text-sm">Show Top Language  </span>
38 |       </div>
39 |      
40 |     </div>
41 |   );
42 | };
43 | 
44 | export default AddOns;
45 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 |  ![Untitled-64](https://user-images.githubusercontent.com/87274287/217418734-f4cee283-771a-4497-a0a4-a36c7918a795.gif)
  4 | 
  5 | 
  6 | 
  7 | <h1 align="center">
  8 |   
  9 | 
 10 |   GitHub Profile README Generator
 11 | </h1>
 12 | 
 13 | <p align="center">
 14 | 
 15 | <a href="https://github.com/technicalranjitofficial/github-profile-readme-generator/fork" target="blank">
 16 | <img src="https://img.shields.io/github/forks/technicalranjitofficial/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator forks"/>
 17 | </a>
 18 | <a href="https://github.com/technicalranjitofficial/github-profile-readme-generator/stargazers" target="blank">
 19 | <img src="https://img.shields.io/github/stars/technicalranjitofficial/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator stars"/>
 20 | </a>
 21 | <a href="https://github.com/technicalranjitofficial/github-profile-readme-generator/issues" target="blank">
 22 | <img src="https://img.shields.io/github/issues/technicalranjitofficial/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator issues"/>
 23 | </a>
 24 | <a href="https://github.com/technicalranjitofficial/github-profile-readme-generator/pulls" target="blank">
 25 | <img src="https://img.shields.io/github/issues-pr/technicalranjitofficial/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator pull-requests"/>
 26 |  
 27 | 
 28 | </a>
 29 | 
 30 | </p>
 31 | 
 32 | <p align="center"><img src="./src/images/github-profile-readme-generator.gif" alt="github-profile-readme-generator gif" /></p>
 33 | 
 34 | <p align="center">
 35 |     <a href="https://technicalranjitofficial.github.io/github-profile-readme-generator/" target="blank">View Demo</a>
 36 |     ·
 37 |     <a href="https://github.com/technicalranjitofficial/github-profile-readme-generator/issues/new/choose">Report Bug</a>
 38 |     ·
 39 |     <a href="https://github.com/technicalranjitofficial/github-profile-readme-generator/issues/new/choose">Request Feature</a>
 40 | </p>
 41 | 
 42 | <p align="center">
 43 | <i>😍 Loved the tool? Please don't forget to fork and star the repos </i>
 44 | </p>
 45 | 
 46 | 
 47 | 
 48 | #### Tired of editing GitHub Profile README with new features?
 49 | 
 50 | This tool provides an easy way to create a GitHub profile readme with the latest add-ons such as `visitors count`, `github stats`, etc.
 51 | 
 52 | ## 🚀 Demo
 53 | 
 54 | <a href="https://technicalranjitofficial.github.io/github-profile-readme-generator" target="blank">
 55 | <img src="https://img.shields.io/website?url=https%3A%2F%2Ftechnicalranjitofficial.github.io%2Fgithub-profile-readme-generator&logo=github&style=flat-square" />
 56 | </a>
 57 | 
 58 | Try the tool: [GitHub Profile README Generator](https://technicalranjitofficial.github.io/github-profile-readme-generator)
 59 | 
 60 | ## 🧐 Features
 61 | 
 62 | Just fill in the details such as `Name`, `Tagline`, `Dev Platforms Username`, `Current Work`, `Portfolio`, etc. with a minimal UI.
 63 | - **SVG BANNER**
 64 | - **Uniform Dev Icons**
 65 | 
 66 | - **Uniform Social Icons**
 67 | 
 68 | - **Visitors Counter Badge**
 69 | 
 70 | - **GitHub Profile Stats Card**
 71 | 
 72 | - **GitHub Top Skills**
 73 | 
 74 | - **GitHub Streak Stats**
 75 | 
 76 | 
 77 | Click on `Generate README` to get your README in `markdown`.
 78 | You can preview the README too.
 79 | 
 80 | ## 🛠️ Installation Steps
 81 | 
 82 | 1. Clone the repository
 83 | 
 84 | ```bash
 85 | git clone https://github.com/technicalranjitofficial/github-profile-readme-generator.git
 86 | ```
 87 | 
 88 | 2. Change the working directory
 89 | 
 90 | ```bash
 91 | cd github-profile-readme-generator
 92 | ```
 93 | 
 94 | 3. Install dependencies
 95 | 
 96 | ```bash
 97 | yarn 
 98 | ```
 99 | 
100 | 4. Run the app
101 | 
102 | ```bash
103 | yarn dev
104 | ```
105 | 
106 | 🌟 You are all set!
107 | 
108 | ## 🍰 Contributing
109 | 
110 | Please contribute using [GitHub Flow](https://guides.github.com/introduction/flow). Create a branch, add commits, and [open a pull request](https://github.com/technicalranjitofficial/github-profile-readme-generator/compare).
111 | 
112 | 
113 | ## 💻 Built with
114 | 
115 | - [Nextjs](https://www.nextjs.com/)
116 | - [Tailwind CSS](https://tailwindcss.com/): for styling
117 | 
118 | ## 🙇 Special Thanks
119 | 
120 | - [Anurag Hazra](https://github.com/anuraghazra) for amazing [github-readme-stats](https://github.com/anuraghazra/github-readme-stats)
121 | - [Anton Komarev](https://github.com/antonkomarev) for super cool [github-profile-views-counter](https://github.com/antonkomarev/github-profile-views-
122 | - [Jonah Lawrence](https://github.com/DenverCoder1) for the incredible [github-readme-streak-stats](https://github.com/DenverCoder1/github-readme-streak-stats)
123 | - [Akshay090](https://github.com/Akshay090/) for the incredible [SVG BANNER](https://github.com/Akshay090/svg-banners)
124 | 
125 | 
126 | 
127 | 
128 | 


--------------------------------------------------------------------------------
/styles/Home.module.css:
--------------------------------------------------------------------------------
  1 | .main {
  2 |   display: flex;
  3 |   flex-direction: column;
  4 |   justify-content: space-between;
  5 |   align-items: center;
  6 |   padding: 6rem;
  7 |   min-height: 100vh;
  8 | }
  9 | 
 10 | .description {
 11 |   display: inherit;
 12 |   justify-content: inherit;
 13 |   align-items: inherit;
 14 |   font-size: 0.85rem;
 15 |   max-width: var(--max-width);
 16 |   width: 100%;
 17 |   z-index: 2;
 18 |   font-family: var(--font-mono);
 19 | }
 20 | 
 21 | .description a {
 22 |   display: flex;
 23 |   justify-content: center;
 24 |   align-items: center;
 25 |   gap: 0.5rem;
 26 | }
 27 | 
 28 | .description p {
 29 |   position: relative;
 30 |   margin: 0;
 31 |   padding: 1rem;
 32 |   background-color: rgba(var(--callout-rgb), 0.5);
 33 |   border: 1px solid rgba(var(--callout-border-rgb), 0.3);
 34 |   border-radius: var(--border-radius);
 35 | }
 36 | 
 37 | .code {
 38 |   font-weight: 700;
 39 |   font-family: var(--font-mono);
 40 | }
 41 | 
 42 | .grid {
 43 |   display: grid;
 44 |   grid-template-columns: repeat(4, minmax(25%, auto));
 45 |   width: var(--max-width);
 46 |   max-width: 100%;
 47 | }
 48 | 
 49 | .card {
 50 |   padding: 1rem 1.2rem;
 51 |   border-radius: var(--border-radius);
 52 |   background: rgba(var(--card-rgb), 0);
 53 |   border: 1px solid rgba(var(--card-border-rgb), 0);
 54 |   transition: background 200ms, border 200ms;
 55 | }
 56 | 
 57 | .card span {
 58 |   display: inline-block;
 59 |   transition: transform 200ms;
 60 | }
 61 | 
 62 | .card h2 {
 63 |   font-weight: 600;
 64 |   margin-bottom: 0.7rem;
 65 | }
 66 | 
 67 | .card p {
 68 |   margin: 0;
 69 |   opacity: 0.6;
 70 |   font-size: 0.9rem;
 71 |   line-height: 1.5;
 72 |   max-width: 30ch;
 73 | }
 74 | 
 75 | .center {
 76 |   display: flex;
 77 |   justify-content: center;
 78 |   align-items: center;
 79 |   position: relative;
 80 |   padding: 4rem 0;
 81 | }
 82 | 
 83 | .center::before {
 84 |   background: var(--secondary-glow);
 85 |   border-radius: 50%;
 86 |   width: 480px;
 87 |   height: 360px;
 88 |   margin-left: -400px;
 89 | }
 90 | 
 91 | .center::after {
 92 |   background: var(--primary-glow);
 93 |   width: 240px;
 94 |   height: 180px;
 95 |   z-index: -1;
 96 | }
 97 | 
 98 | .center::before,
 99 | .center::after {
100 |   content: '';
101 |   left: 50%;
102 |   position: absolute;
103 |   filter: blur(45px);
104 |   transform: translateZ(0);
105 | }
106 | 
107 | .logo,
108 | .thirteen {
109 |   position: relative;
110 | }
111 | 
112 | .thirteen {
113 |   display: flex;
114 |   justify-content: center;
115 |   align-items: center;
116 |   width: 75px;
117 |   height: 75px;
118 |   padding: 25px 10px;
119 |   margin-left: 16px;
120 |   transform: translateZ(0);
121 |   border-radius: var(--border-radius);
122 |   overflow: hidden;
123 |   box-shadow: 0px 2px 8px -1px #0000001a;
124 | }
125 | 
126 | .thirteen::before,
127 | .thirteen::after {
128 |   content: '';
129 |   position: absolute;
130 |   z-index: -1;
131 | }
132 | 
133 | /* Conic Gradient Animation */
134 | .thirteen::before {
135 |   animation: 6s rotate linear infinite;
136 |   width: 200%;
137 |   height: 200%;
138 |   background: var(--tile-border);
139 | }
140 | 
141 | /* Inner Square */
142 | .thirteen::after {
143 |   inset: 0;
144 |   padding: 1px;
145 |   border-radius: var(--border-radius);
146 |   background: linear-gradient(
147 |     to bottom right,
148 |     rgba(var(--tile-start-rgb), 1),
149 |     rgba(var(--tile-end-rgb), 1)
150 |   );
151 |   background-clip: content-box;
152 | }
153 | 
154 | /* Enable hover only on non-touch devices */
155 | @media (hover: hover) and (pointer: fine) {
156 |   .card:hover {
157 |     background: rgba(var(--card-rgb), 0.1);
158 |     border: 1px solid rgba(var(--card-border-rgb), 0.15);
159 |   }
160 | 
161 |   .card:hover span {
162 |     transform: translateX(4px);
163 |   }
164 | }
165 | 
166 | @media (prefers-reduced-motion) {
167 |   .thirteen::before {
168 |     animation: none;
169 |   }
170 | 
171 |   .card:hover span {
172 |     transform: none;
173 |   }
174 | }
175 | 
176 | /* Mobile */
177 | @media (max-width: 700px) {
178 |   .content {
179 |     padding: 4rem;
180 |   }
181 | 
182 |   .grid {
183 |     grid-template-columns: 1fr;
184 |     margin-bottom: 120px;
185 |     max-width: 320px;
186 |     text-align: center;
187 |   }
188 | 
189 |   .card {
190 |     padding: 1rem 2.5rem;
191 |   }
192 | 
193 |   .card h2 {
194 |     margin-bottom: 0.5rem;
195 |   }
196 | 
197 |   .center {
198 |     padding: 8rem 0 6rem;
199 |   }
200 | 
201 |   .center::before {
202 |     transform: none;
203 |     height: 300px;
204 |   }
205 | 
206 |   .description {
207 |     font-size: 0.8rem;
208 |   }
209 | 
210 |   .description a {
211 |     padding: 1rem;
212 |   }
213 | 
214 |   .description p,
215 |   .description div {
216 |     display: flex;
217 |     justify-content: center;
218 |     position: fixed;
219 |     width: 100%;
220 |   }
221 | 
222 |   .description p {
223 |     align-items: center;
224 |     inset: 0 0 auto;
225 |     padding: 2rem 1rem 1.4rem;
226 |     border-radius: 0;
227 |     border: none;
228 |     border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
229 |     background: linear-gradient(
230 |       to bottom,
231 |       rgba(var(--background-start-rgb), 1),
232 |       rgba(var(--callout-rgb), 0.5)
233 |     );
234 |     background-clip: padding-box;
235 |     backdrop-filter: blur(24px);
236 |   }
237 | 
238 |   .description div {
239 |     align-items: flex-end;
240 |     pointer-events: none;
241 |     inset: auto 0 0;
242 |     padding: 2rem;
243 |     height: 200px;
244 |     background: linear-gradient(
245 |       to bottom,
246 |       transparent 0%,
247 |       rgb(var(--background-end-rgb)) 40%
248 |     );
249 |     z-index: 1;
250 |   }
251 | }
252 | 
253 | /* Tablet and Smaller Desktop */
254 | @media (min-width: 701px) and (max-width: 1120px) {
255 |   .grid {
256 |     grid-template-columns: repeat(2, 50%);
257 |   }
258 | }
259 | 
260 | @media (prefers-color-scheme: dark) {
261 |   .vercelLogo {
262 |     filter: invert(1);
263 |   }
264 | 
265 |   .logo,
266 |   .thirteen img {
267 |     filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
268 |   }
269 | }
270 | 
271 | @keyframes rotate {
272 |   from {
273 |     transform: rotate(360deg);
274 |   }
275 |   to {
276 |     transform: rotate(0deg);
277 |   }
278 | }
279 | 


--------------------------------------------------------------------------------
/Components/Preview.js:
--------------------------------------------------------------------------------
  1 | import {
  2 |   ConstGitStatsThemes,
  3 |   icons,
  4 |   skills,
  5 |   socialIcons,
  6 |   socialName,
  7 | } from "@/helper/static";
  8 | import React from "react";
  9 | 
 10 | const Preview = ({
 11 |   name,
 12 |   subtitle,
 13 |   theme,
 14 |   onThemeChange,
 15 |   projects,
 16 |   moreInfo,
 17 |   socialConnect,
 18 |   skill,
 19 |   addons,
 20 |   gitstatsThemes,
 21 |   onGitStatsThemesChage,
 22 |   onDisplay,
 23 |   trophyData,
 24 |   StreaksData,
 25 |   StatsData,
 26 |   TopLangStatsData
 27 | }) => {
 28 |   const ab = "h1";
 29 | 
 30 |   return (
 31 |     <div className="md:p-5 p-2 bg-slate-900  border-r-2 border-b-2 border-slate-800  relative text-slate-400">
 32 |       <div className="absolute md:right-9 right-3 top-3 md:top-9">
 33 |         <select
 34 |           className="md:py-2 py-1   px-2 md:px-4 bg-transparent border-2 border-orange-200 text-slate-300 rounded-md font-bold text-sm md:text-xl"
 35 |           value={theme}
 36 |           onChange={(e) => onThemeChange(e)}
 37 |         >
 38 |           <option value="origin">ORIGIN</option>
 39 |           <option value="textBox">TEXTBOX</option>
 40 |           <option value="glitch">GLITCH</option>
 41 |           <option value="luminance">LUMINACE</option>
 42 |           <option value="typeWriter">TYPEWRITER</option>
 43 |           <option value="rainbow">RAINBOW</option>
 44 |         </select>
 45 |       </div>
 46 | 
 47 |       <img
 48 |         src={`https://svg-banners.vercel.app/api?type=${theme}&text1=${name}&text2=${subtitle}&width=800&height=400`}
 49 |       />
 50 |       {/*  */}
 51 |       <br />
 52 |       {theme !== "origin" && subtitle && (
 53 |       
 54 |         <img
 55 |           className="mt-2  font-Alegreya font-bold"
 56 |           src={`https://readme-typing-svg.demolab.com/?lines=${subtitle.replace(
 57 |             " ",
 58 |             "+"
 59 |           )}&duration=3500&size=30`}
 60 |           alt="profile-radme-generator"
 61 |         />
 62 |       )}
 63 |       <br />
 64 |       <ShowVisitorBadge
 65 |         username={socialConnect['github']}
 66 |         visitorBadge={addons["visitorBadge"]}
 67 |       />
 68 |       <br />
 69 |       <div className="flex flex-row justify-center">
 70 |         <ShowMemes memes={addons["showMemes"]} />
 71 |       </div>
 72 |    <br />
 73 |       <div>
 74 |         <ShowTwiterBadge username={socialConnect['twitter']} twitterBadge={addons['twiterBadge']} />
 75 |       </div>
 76 |       <br />
 77 |       <div>
 78 |       <ShowTrophy column={trophyData['column']} theme={trophyData['theme']} noframe={trophyData['no_frames']} transparent={trophyData['background_transparent']} onDisplay={onDisplay} trophy={addons['trophy']}  username={socialConnect['github']}/>
 79 |     
 80 |       </div>
 81 |       <div className="mt-5">
 82 |         <span className="font-Alegreya font-bold text-xl">Projects</span>
 83 |         <br />
 84 |         {projects &&
 85 |           projects.map((val, index) => {
 86 |             return (
 87 |               <ShowProjects
 88 |                 key={index}
 89 |                 prefix={val.workingFor}
 90 |                 title={val.pName}
 91 |               />
 92 |             );
 93 |           })}
 94 |         {moreInfo && (
 95 |           <div>
 96 |             {moreInfo.currentLearning.length > 0 && (
 97 |               <ShowAdditionalInfo
 98 |                 prefix="👩🏽‍💻 Currently Learning"
 99 |                 title={moreInfo.currentLearning}
100 |               />
101 |             )}
102 |             {moreInfo.askme.length > 0 && (
103 |               <ShowAdditionalInfo
104 |                 prefix="💬 Ask me about"
105 |                 title={moreInfo.askme}
106 |               />
107 |             )}
108 |             {moreInfo.reachme.length > 0 && (
109 |               <ShowAdditionalInfo
110 |                 prefix="📫 How to reach me"
111 |                 title={moreInfo.reachme}
112 |               />
113 |             )}
114 |             {moreInfo.funfact.length > 0 && (
115 |               <ShowAdditionalInfo
116 |                 prefix="😂 Fun fact"
117 |                 title={moreInfo.funfact}
118 |               />
119 |             )}
120 |           </div>
121 |         )}
122 |       </div>
123 |       <br />
124 |       <span className="font-Alegreya font-bold text-xl">Skills</span>
125 |       <br />
126 |       <div className="flex gap-3 flex-wrap flex-row ml-3 mt-2">
127 |         {skills.map((val, index) => {
128 |           if (skill[val]) {
129 |             
130 |             return <ShowSkills key={index} img={icons[val]} />;
131 |           }
132 |         })}
133 |       </div>
134 |       <br />
135 |       <span className="font-Alegreya font-bold text-xl">SocialConnect</span>
136 |       <br />
137 |       <div className="flex gap-3 flex-wrap flex-row ml-3 mt-2">
138 |         {socialName.map((val, index) => {
139 |           if (socialConnect[val].length > 0) {
140 |            
141 |             return <ShowSocialConnect key={index} img={socialIcons[val]} />;
142 |           }
143 |         })}
144 |       </div>
145 |       <br />
146 |       <div className="flex flex-row gap-4">
147 |         <ShowGitStats
148 |           onDisplay={onDisplay}
149 |           hide_border={StatsData['hide_border']}
150 |           locale={StatsData['locale'].locale}
151 |           username={socialConnect['github']}
152 |           themes={StatsData['theme']}
153 |           gitstats={addons["githubProfileStats"]}
154 |         />
155 |         {/* <div className="flex flex-col justify-evenly ml-2">
156 |         <select value={gitstatsThemes} onChange={(e)=>onGitStatsThemesChage(e)}>
157 |            {ConstGitStatsThemes.map((val,index)=>{
158 |             return <option key={index} value={val}>{val}</option>
159 |            })}
160 |         </select>
161 |         <button>show</button>
162 |         <button>show</button>
163 |         
164 |     </div> */}
165 |         <ShowStreakStats
166 |         onDisplay={onDisplay}
167 |           username={socialConnect['github']}
168 |           StreaksData ={StreaksData}
169 |           showStreakStats={addons["showStreakStats"]}
170 | 
171 |           hide_border={StreaksData['hide_border']}
172 |           locale={StreaksData['locale']}
173 |           mode={StreaksData['mode']}
174 |           theme={StreaksData['theme']}
175 |         />
176 |       </div>
177 |       <br />
178 |       <ShowMostLanguageUsed
179 |       hide_border={TopLangStatsData['hide_border']}
180 |       theme={TopLangStatsData['theme']}
181 |       onDisplay={onDisplay}
182 |       username={socialConnect['github']}
183 |         showMostLanguageUsed={addons["showMostLanguageUsed"]}
184 |        
185 |       />
186 |     </div>
187 |   );
188 | };
189 | 
190 | export default Preview;
191 | 
192 | const ShowProjects = ({ prefix, title, link }) => {
193 |   return (
194 |     <>
195 |       <br />
196 |       <li className="ml-7">
197 |         {prefix}{" "}
198 |         <a href={link}>
199 |           <span className="text-blue-500">{title}</span>
200 |         </a>
201 |       </li>
202 |     </>
203 |   );
204 | };
205 | 
206 | const ShowAdditionalInfo = ({ prefix, title }) => {
207 |   return (
208 |     <>
209 |       <br />
210 |       <li className="ml-7" typeof="">
211 |         {prefix} <span className="text-white">{title}</span>
212 |       </li>
213 |     </>
214 |   );
215 | };
216 | 
217 | const ShowSocialConnect = ({ img }) => {
218 |   return <img width={50} height={50} src={img} alt="profile-radme-generator" />;
219 | };
220 | 
221 | const ShowSkills = ({ img }) => {
222 |   return <img width={50} height={50} src={img} alt="profile-radme-generator" />;
223 | };
224 | 
225 | const ShowMemes = ({ memes }) => {
226 |   if (memes) {
227 |     return (
228 |       <img
229 |         height="auto"
230 |         width={500}
231 |         src="https://readme-jokes.vercel.app/api?bgColor=%23073b4c&textColor=%2306d6a0&aColor=%2306d6a0&borderColor=%2306d6a0"
232 |         alt="profile-radme-generator"
233 |       />
234 |     );
235 |   }
236 | };
237 | const ShowGitStats = ({ gitstats, username, themes, onDisplay,locale,hide_border, }) => {
238 |   
239 |   if (gitstats && username.length>0) {
240 |     return (
241 |       <button onClick={()=>onDisplay('gitstats')}>
242 |         {" "}
243 |         <img
244 |           height="auto"
245 |           width={300}
246 |           src={`https://github-readme-stats.vercel.app/api?username=${username}&show_icons=true&theme=${themes}&hide_border=${hide_border}&locale=${locale}`}
247 |           alt="profile-radme-generator"
248 |         />
249 |       </button>
250 |     );
251 |   }
252 | };
253 | 
254 | const ShowStreakStats = ({ showStreakStats, username,onDisplay,theme,mode,hide_border,locale }) => {
255 |   if (showStreakStats && username) {
256 |     return (
257 |       <button onClick={()=>onDisplay('streakstats')}>
258 |       <img
259 |         height="auto"
260 |         width={300}
261 |         src={`https://github-readme-streak-stats.herokuapp.com/?user=${username}&theme=${theme}&mode=${mode}&hide_border=${hide_border}&locale=${locale.locale}`}
262 |         alt="profile-radme-generator"
263 |       />
264 |       </button>
265 |     );
266 |   }
267 | };
268 | const ShowMostLanguageUsed = ({ showMostLanguageUsed, username,onDisplay,theme,hide_border }) => {
269 |   if (showMostLanguageUsed && username) {
270 |     return (
271 |       <button onClick={()=>onDisplay('toplanguage')}>
272 |       <img
273 |         height="auto"
274 |         width={300}
275 |         src={`https://github-readme-stats.vercel.app/api/top-langs/?username=${username}&theme=${theme}&hide_border=${hide_border}`}
276 |         alt="profile-radme-generator"
277 |       />
278 |       </button>
279 |     );
280 |   }
281 | };
282 | const ShowVisitorBadge = ({ visitorBadge, username }) => {
283 |   if (visitorBadge && username) {
284 |     return (
285 |       <img
286 |         height="auto"
287 |         src={`https://komarev.com/ghpvc/?username=${username}&label=Profile%20views&color=0e75b6&style=flat`}
288 |         alt="profile-radme-generator"
289 |       />
290 |     );
291 |   }
292 | };
293 | 
294 | const ShowTrophy = ({ username,trophy,onDisplay,theme,column,noframe,transparent }) => {
295 |   if (username.length>0 && trophy) {
296 |     return (
297 |       <button onClick={()=>onDisplay('trophy')}>
298 |       <img
299 |         height="auto"
300 |         src={`https://github-profile-trophy.vercel.app/?username=${username}&theme=${theme}&column=${column}&no-bg=${transparent}&no-frame=${noframe}&margin-w=19&margin-h=19`}
301 |         alt="image"
302 |       />
303 |       </button>
304 |     );
305 |   }
306 | };
307 | 
308 | const ShowTwiterBadge = ({ username, twitterBadge ,themes}) => {
309 |   if (username.length>0 && twitterBadge) {
310 |     return (
311 |     
312 | <p align="left"> <a href={`https://twitter.com/${username}`} target="blank"><img src={`https://img.shields.io/twitter/follow/${username}?logo=twitter&style=for-the-badge`} alt="technicalranjit" /></a> </p>
313 |      
314 |     );
315 |   }
316 | };
317 | 
318 | 


--------------------------------------------------------------------------------
/Components/SideOption.js:
--------------------------------------------------------------------------------
  1 | import { ConstGitStats, ConstStreaksData, locale, locale2 } from "@/helper/static";
  2 | import React, { useState } from "react";
  3 | 
  4 | import {AiOutlineCloseSquare} from "react-icons/ai"
  5 | 
  6 | const SideOption = ({ display, onDisplay, events, template,onDataUpdate ,trophyData,closeSide,StreaksData,StatsData,StatsLoc,streakLoc,TopLangStatsData}) => {
  7 | 
  8 |   const dnone = "w-0 hidden ";
  9 |   const dflex = " md:w-96";
 10 |   return (
 11 |     <div
 12 |       className={`max-h-screen p-2   bg-slate-900 h-screen z-50 absolute overflow-y-auto  right-0 md:border-2 border-dotted border-teal-400   top-0   duration-900 ease-linear  ${
 13 |         display ? dflex : dnone
 14 |       } `}
 15 |     >
 16 |       <span onClick={closeSide}  className="absolute md:top-5 top-6 cursor-pointer right-7 md:left-5 text-red-600 font-bold font-Alegreya text-xl">
 17 | 
 18 |         <AiOutlineCloseSquare className="text-red-600 w-9 h-9"/>
 19 |       </span>
 20 |       {events === "trophy" && (
 21 |         <>
 22 |           <TrophySec trophyData={trophyData} template={template} onDataUpdate={onDataUpdate} />
 23 |         </>
 24 |       )}
 25 |       
 26 |       {events === "streakstats" && (
 27 |         <>
 28 |           <StreakSec streakLoc={streakLoc} StreaksData={StreaksData} template={template} onDataUpdate={onDataUpdate} />
 29 |         </>
 30 |       )}
 31 |       {events === "gitstats" && (
 32 |         <>
 33 |           <GitStats StatsLoc={StatsLoc} StatsData={StatsData} template={template} onDataUpdate={onDataUpdate} />
 34 |         </>
 35 |       )} 
 36 |       {events === "toplanguage" && (
 37 |         <>
 38 |           <TopLanguage  TopLangStatsData={TopLangStatsData} template={template} onDataUpdate={onDataUpdate} />
 39 |         </>
 40 |       )}
 41 | 
 42 | 
 43 | 
 44 |     </div>
 45 |   );
 46 | };
 47 | 
 48 | export default SideOption;
 49 | 
 50 | 
 51 | 
 52 | const TrophySec = ({trophyData,template,onDataUpdate})=>{
 53 |   return <div className="w-full">
 54 |   <div className="flex flex-row justify-center pt-5">
 55 |   <span className="text-center text-slate-300 font-bold font-Alegreya ">Trophy Section</span>
 56 |   </div>
 57 |   <br />
 58 |   <br />
 59 |   <div className=" flex flex-col ">
 60 |     <div className="flex flex-row ml-3 gap-3">
 61 |       <input className="w-5 " type="checkbox" value={trophyData['no_frames']} checked={trophyData['no_frames']} onChange={(e)=>onDataUpdate('no_frames',!trophyData['no_frames'])} />
 62 |       <p className="text-slate-400  font-semibold " >Hide Frames</p>
 63 |     </div>
 64 |     <div className="flex ml-3 flex-row gap-3">
 65 |       <input className="w-5 " checked={trophyData['background_transparent']} onChange={(e)=>onDataUpdate("background_transparent",!trophyData['background_transparent'])} type="checkbox" />
 66 |       <p className="text-slate-400  font-semibold " >Background Transparent</p>
 67 |     
 68 |     </div>
 69 |    
 70 |     <div className="flex flex-col gap-3">
 71 |       <br />
 72 |       <p className="text-slate-300 font-bold ">Column Size</p>
 73 |       <br />
 74 |       <div className="flex justify-around flex-row gap-3">
 75 |       {template.data.column.map((val,index)=>{
 76 |         return <span key={index} onClick={()=>onDataUpdate("column",val)} className={`${trophyData['column']===val?"bg-teal-600":"bg-pink-500"} text-slate-200 font-bold font-Alegreya w-full rounded-lg flex justify-center items-center h-10 md:h-20`}><span>
 77 |           {val}</span></span>
 78 |       })}
 79 |       </div>
 80 |     </div>
 81 |   </div>
 82 |   <br />
 83 |     <span className="font-Alegreya font-bold text-slate-300 ">Themes</span>
 84 |   <div className="mt-5 text-white ">
 85 |     
 86 |     <div className="grid  grid-cols-2 gap-5  z-10 ">
 87 |       {template.data.themes.map((val,index)=>{
 88 |         return <button key={index} onClick={()=>onDataUpdate('theme',val)}>
 89 |         <div className="relative">
 90 |         {trophyData['theme']===val && <div className="bg-slate-700/80 shadow-lg items-center justify-center flex flex-col font-bold font-Alegreya z-50 w-full h-full absolute">
 91 |           
 92 |           <p className="text-slate-300 ease-linear duration-500">Current</p>
 93 |           </div>}
 94 |         <img
 95 |           height="auto"
 96 |           src={`https://github-profile-trophy.vercel.app/?username=technicalranjitofficial&theme=${val}&column=3`}
 97 |           alt="image"
 98 |           loading="lazy"
 99 |         />
100 |        
101 |         </div>
102 |         </button>
103 |       })}
104 |     </div>
105 |   </div>
106 | </div>
107 | }
108 | 
109 | 
110 | 
111 | const StreakSec = ({StreaksData,template,onDataUpdate,streakLoc})=>{
112 |   return <div className="w-full">
113 |   <div className="flex flex-row justify-center pt-5">
114 |   <span className="text-center text-slate-300 font-bold font-Alegreya ">Stats Section</span>
115 |   </div>
116 |   <br />
117 |   <br />
118 |   <div className=" ml-3 flex flex-col ">
119 |     <div className="flex flex-row gap-3">
120 |       <input className="w-5 " type="checkbox" value={StreaksData['hide_border']} checked={StreaksData['hide_border']} onChange={(e)=>onDataUpdate('hide_border',!StreaksData['hide_border'])} />
121 |       <p className="text-slate-400  font-semibold " >Hide Border</p>
122 |     </div>
123 |      <div className="flex flex-row mt-2 gap-3">
124 |       <p className="text-slate-400  font-semibold " >Language Mode</p>
125 |       <select className="py-1 px-2 bg-slate-900 text-slate-300 border-2 border-slate-600 border-dashed rounded-md" value={streakLoc} onChange={(e)=>onDataUpdate("locale",locale[e.target.value],e.target.value)}>
126 |         {ConstStreaksData.locale.map((val,index)=>{
127 |           return <option key={index} value={index}>{val.name}</option>
128 |         })}
129 |       </select>
130 |     </div>
131 |     <div className="flex flex-row mt-2 gap-3">
132 |       <p className="text-slate-400  font-semibold " >Streaks Mode</p>
133 |       <input className="w-5 " checked={StreaksData['mode']==="daily"} onChange={(e)=>onDataUpdate("mode","daily")} name="daily" type="radio" /> <span className="text-slate-400 font-Alegreya">Daily</span>
134 |       <input className="w-5 " checked={StreaksData['mode']==="weekly"} onChange={(e)=>onDataUpdate("mode","weekly")} name="weekly" type="radio" /> <span className="text-slate-400 font-Alegreya">Weekly</span>
135 |     
136 |     </div>
137 |    
138 |    
139 |   </div>
140 |   <br />
141 |     <span className="font-Alegreya font-bold text-slate-300 ">Themes</span>
142 |   <div className="mt-5 text-white ">
143 |     
144 |     <div className="grid  grid-cols-2 gap-5  z-10 ">
145 |       {template.data.themes.map((val,index)=>{
146 |         return <button key={index} onClick={()=>onDataUpdate('theme',val)}>
147 |         <div className="relative">
148 |         {StreaksData['theme']===val && <div className="bg-slate-700/80 shadow-lg items-center justify-center flex flex-col font-bold font-Alegreya z-50 w-full h-full absolute">
149 |           
150 |           <p className="text-slate-300 ease-linear duration-500">Current</p>
151 |           </div>}
152 |         <img
153 |           height="auto"
154 |           src={`https://github-readme-streak-stats.herokuapp.com/?user=technicalranjitofficial&theme=${val}`}
155 |           alt="image"
156 |           loading="lazy"
157 |         />
158 |        
159 |         </div>
160 |         </button>
161 |       })}
162 |     </div>
163 |   </div>
164 | </div>
165 | }
166 | 
167 | 
168 | const GitStats = ({StatsData,template,onDataUpdate,StatsLoc})=>{
169 |   return <div className="w=full">
170 |   <div className="flex flex-row justify-center pt-5">
171 |   <span className="text-center text-slate-300 font-bold font-Alegreya ">Stats Section</span>
172 |   </div>
173 |   <br />
174 |   <br />
175 |   <div className=" ml-3 flex flex-col ">
176 |     <div className="flex flex-row gap-3">
177 |       <input className="w-5 " type="checkbox" value={StatsData['hide_border']} checked={StatsData['hide_border']} onChange={(e)=>onDataUpdate('hide_border',!StatsData['hide_border'])} />
178 |       <p className="text-slate-400  font-semibold " >Hide Border</p>
179 |     </div>
180 |     <div className="flex flex-row mt-2 gap-3">
181 |       <p className="text-slate-400  font-semibold " >Language Mode</p>
182 |       <select className="py-1 px-2 bg-slate-900 text-slate-300 border-2 border-slate-600 border-dashed rounded-md" value={StatsLoc} onChange={(e)=>onDataUpdate("locale",locale2[e.target.value],e.target.value)}>
183 |         {ConstGitStats.locale.map((val,index)=>{
184 |           return <option key={index} value={index}>{val.name}</option>
185 |         })}
186 |       </select>
187 |       
188 |     </div>
189 |    
190 |    
191 |   </div>
192 |   <br />
193 |     <span className="font-Alegreya font-bold text-slate-300 ">Themes</span>
194 |   <div className="mt-5 text-white ">
195 |     
196 |     <div className="grid  grid-cols-2 gap-5  z-10 ">
197 |       {template.data.themes.map((val,index)=>{
198 |         return <button key={index} onClick={()=>onDataUpdate('theme',val)}>
199 |         <div className="relative">
200 |         {StatsData['theme']===val && <div className="bg-slate-700/80 shadow-lg items-center justify-center flex flex-col font-bold font-Alegreya z-50 w-full h-full absolute">
201 |           
202 |           <p className="text-slate-300 ease-linear duration-500">Current</p>
203 |           </div>}
204 |         <img
205 |           height="auto"
206 |           src={`https://github-readme-stats.vercel.app/api?username=technicalranjitofficial&theme=${val}&show_icons`}
207 |           alt="image"
208 |           loading="lazy"
209 |         />
210 |        {/* https://github-readme-stats.vercel.app/api?username=${username}&show_icons=true&theme=${themes}&hide_border=${hide_border}&locale-${locale}} */}
211 |         </div>
212 |         </button>
213 |       })}
214 |     </div>
215 |   </div>
216 | </div>
217 | }
218 | 
219 | const TopLanguage = ({TopLangStatsData,template,onDataUpdate})=>{
220 |   return <div className="w-full">
221 |   <div className="flex flex-row justify-center pt-5">
222 |   <span className="text-center text-slate-300 font-bold font-Alegreya ">Stats Section</span>
223 |   </div>
224 |   <br />
225 |   <br />
226 |   <div className=" flex ml-3 flex-col ">
227 |     <div className="flex flex-row gap-3">
228 |       <input className="w-5 " type="checkbox" value={TopLangStatsData['hide_border']} checked={TopLangStatsData['hide_border']} onChange={(e)=>onDataUpdate('hide_border',!TopLangStatsData['hide_border'])} />
229 |       <p className="text-slate-400  font-semibold " >Hide Border</p>
230 |     </div>
231 |     {/* <div className="flex flex-row mt-2 gap-3">
232 |       <p className="text-slate-400  font-semibold " >Language Mode</p>
233 |       <select className="py-1 px-2 bg-slate-900 text-slate-300 border-2 border-slate-600 border-dashed rounded-md" value={StatsLoc} onChange={(e)=>onDataUpdate("locale",locale2[e.target.value],e.target.value)}>
234 |         {ConstGitStats.locale.map((val,index)=>{
235 |           return <option key={index} value={index}>{val.name}</option>
236 |         })}
237 |       </select>
238 |       
239 |     </div> */}
240 |    
241 |    
242 |   </div>
243 |   <br />
244 |     <span className="font-Alegreya font-bold text-slate-300 ">Themes</span>
245 |   <div className="mt-5 text-white ">
246 |     
247 |     <div className="grid  grid-cols-2 gap-5  z-10 ">
248 |       {template.data.themes.map((val,index)=>{
249 |         return <button key={index} onClick={()=>onDataUpdate('theme',val)}>
250 |         <div className="relative">
251 |         {TopLangStatsData['theme']===val && <div className="bg-slate-700/80 shadow-lg items-center justify-center flex flex-col font-bold font-Alegreya z-50 w-full h-full absolute">
252 |           
253 |           <p className="text-slate-300 ease-linear duration-500">Current</p>
254 |           </div>}
255 |         <img
256 |           height="auto"
257 |           src={`https://github-readme-stats.vercel.app/api/top-langs/?username=technicalranjitofficial&theme=${val}`}
258 |           alt="image"
259 |           loading="lazy"
260 |         />
261 |        {/* https://github-readme-stats.vercel.app/api?username=${username}&show_icons=true&theme=${themes}&hide_border=${hide_border}&locale-${locale}} */}
262 |         </div>
263 |         </button>
264 |       })}
265 |     </div>
266 |   </div>
267 | </div>
268 | }


--------------------------------------------------------------------------------
/Components/Generate.js:
--------------------------------------------------------------------------------
  1 | import {
  2 |   icons,
  3 |   skillWebsites,
  4 |   socialIcons,
  5 |   socialName,
  6 |   socialUrl,
  7 | } from "@/helper/static";
  8 | import React, { useState } from "react";
  9 | import { BiCopy } from "react-icons/bi";
 10 | import { FiCheck } from "react-icons/fi";
 11 | // import Title from './Title';
 12 | // import TitleGenerate from "../Components/GenerateMarkDown"
 13 | 
 14 | const Generate = ({
 15 |   data,
 16 |   trophyData,
 17 |   StreaksData,
 18 |   StatsData,
 19 |   TopLangStatsData,
 20 |   theme,
 21 | }) => {
 22 | 
 23 | 
 24 |   const [copy, setCopy] = useState(false);
 25 |   const handleCopyToClipboard = () => {
 26 |     const range = document.createRange();
 27 |     range.selectNode(document.getElementById("markdown-content"));
 28 |     window.getSelection().removeAllRanges(); // clear current selection
 29 |     window.getSelection().addRange(range); // to select text
 30 |     document.execCommand("copy");
 31 |     window.getSelection().removeAllRanges();
 32 |   };
 33 |   return (
 34 |     <div className="text-slate-300 relative bg-slate-800 mt-5 p-2 rounded-md">
 35 |       <span className="absolute top-3 left-3 font-bold text-green-500 animate-pulse">
 36 |         ##CODE
 37 |       </span>
 38 |       <p
 39 |         className={`border-2 hover:border-slate-500 absolute right-4 cursor-pointer border-slate-700 ${
 40 |           copy && "text-green-500"
 41 |         } p-2 w-10 h-10 flex flex-col items-center rounded-md`}
 42 |       >
 43 |         {copy ? (
 44 |           <FiCheck />
 45 |         ) : (
 46 |           <BiCopy
 47 |             onClick={() => {
 48 |               handleCopyToClipboard();
 49 |               setCopy(true);
 50 |               setTimeout(() => {
 51 |                 setCopy(false);
 52 |               }, 3000);
 53 |             }}
 54 |             className="w-7 h-7  "
 55 |           />
 56 |         )}
 57 |       </p>
 58 |       <br />
 59 | 
 60 |       <div className="text-slate-400" id="markdown-content">
 61 |         <>
 62 |           <GenerateHeader
 63 |             name={data.title}
 64 |             subtitle={data.subtitle}
 65 |             themes={theme}
 66 |           />
 67 |           <br />
 68 |           <br />
 69 |         </>
 70 |         {data.addons["visitorBadge"] && (
 71 |           <>
 72 |             <GenerateVisitorCount
 73 |               username={data.socialConnection["github"]}
 74 |               visitorBadge={data.addons["visitorBadge"]}
 75 |             />
 76 |             <br />
 77 |             <br />
 78 |           </>
 79 |         )}
 80 |         <>
 81 |           {data.addons["showMemes"] && <GenerateMemes showMemes={data.addons['showMemes']} />}
 82 |           <br />
 83 |           <br />
 84 |         </>
 85 |         {data.addons["twiterBadge"] && (
 86 |           <>
 87 |             <GenerateTwiterBadge
 88 |               username={data.socialConnection["twitter"]}
 89 |               twitterBadge={data.addons["twiterBadge"]}
 90 |             />
 91 |             <br />
 92 |             <br />
 93 |           </>
 94 |         )}
 95 | 
 96 |         {data.addons["trophy"] && (
 97 |           <>
 98 |             <GenerateTrophy
 99 |           
100 |               column={trophyData["column"]}
101 |               noframe={trophyData["no_frames"]}
102 |               theme={trophyData["theme"]}
103 |               transparent={trophyData["background_transparent"]}
104 |               username={data.socialConnection["github"]}
105 |               trophy={data.addons["trophy"]}
106 |             />
107 |           </>
108 |         )}
109 | 
110 |         {/* <>
111 |         <SubTitleGenerate subtitle={data.subtitle} />
112 |         <br />
113 |         <br />
114 |       </> */}
115 |         <>
116 |           <br />
117 |           {data.project.length > 0 &&
118 |             data.project.map((val, index) => {
119 |               return <GenerateProjects key={index} projects={val} />;
120 |             })}
121 | 
122 |           <br />
123 | 
124 |           <GenerateAdditionalInfo
125 |             title={data.moreInfo.currentLearning}
126 |             prefix="🌱 I’m currently learning"
127 |           />
128 |           <GenerateAdditionalInfo
129 |             title={data.moreInfo.askme}
130 |             prefix="💬 Ask me about"
131 |           />
132 |           <GenerateAdditionalInfo
133 |             title={data.moreInfo.funfact}
134 |             prefix="😂 Func Fact "
135 |           />
136 |           <GenerateAdditionalInfo
137 |             title={data.moreInfo.reachme}
138 |             prefix="📫 How to reach me "
139 |           />
140 |         </>
141 | 
142 |         <>
143 |           <GenerateSocialConnect socialConnect={data.socialConnection} />
144 |           <br />
145 |           <br />
146 |         </>
147 |         <>
148 |           <GenerateSkills skills={data.skills} />
149 |           <br />
150 |           <br />
151 |         </>
152 | 
153 |         <>
154 |           <GenerateGitStats
155 |           githubProfileStats={data.addons['githubProfileStats']}
156 |             hide_border={StatsData["hide_border"]}
157 |             locale={StatsData["locale"].locale}
158 |             themes={StatsData["theme"]}
159 |             username={data.socialConnection["github"]}
160 |           />
161 |           <br />
162 |           <br />
163 |         </>
164 |         <>
165 |           <GenerateStreaks
166 |         
167 |             StreaksData={StreaksData}
168 |             showStreakStats={data.addons["showStreakStats"]}
169 |             hide_border={StreaksData["hide_border"]}
170 |             locale={StreaksData["locale"]}
171 |             mode={StreaksData["mode"]}
172 |             theme={StreaksData["theme"]}
173 |             username={data.socialConnection["github"]}
174 |           />
175 |           <br />
176 |           <br />
177 |         </>
178 |         <>
179 |           <TopLanguageUsed
180 |           showMostLanguageUsed={data.addons['showMostLanguageUsed']}
181 |             hide_border={TopLangStatsData["hide_border"]}
182 |             theme={TopLangStatsData["theme"]}
183 |             username={data.socialConnection["github"]}
184 |           />
185 |           <br />
186 |           <br />
187 |         </>
188 |       </div>
189 |     </div>
190 |   );
191 | };
192 | 
193 | const TitleGenerate = ({ title }) => {
194 |   if (title.length > 0) {
195 |     return <>{`<h1 align="center">Hi 👋, I'm ${title}</h1>`}</>;
196 |   }
197 | 
198 |   return "";
199 | };
200 | const SubTitleGenerate = ({ subtitle }) => {
201 |   if (subtitle.length > 0) {
202 |     return <>{`<h1 align="center">Hi 👋, I'm ${subtitle}</h1>`}</>;
203 |   }
204 | 
205 |   return "";
206 | };
207 | 
208 | const GenerateProjects = ({ projects }) => {
209 |   return (
210 |     <>
211 |       <br />
212 |       {`- ${projects.workingFor} [${projects.pName}](${projects.pLink})`}
213 |       <br />
214 |     </>
215 |   );
216 | };
217 | 
218 | const GenerateSkills = ({ skills }) => {
219 |   let skl = [];
220 |   skills.map((val, index) => {
221 |     skl.push(
222 |       `<a href=${skillWebsites[val]} target="_blank" rel="noreferrer"> 
223 |       <img src=${icons[val]} alt="android" width="40" height="40"/> 
224 |       </a> `
225 |     );
226 |   });
227 | 
228 |   return skl.length > 0 ? (
229 |     <>{`<h3 align="left">Languages and Tools:</h3>
230 |   <p align="left"> ${skl.join(" ")}</p>`}</>
231 |   ) : (
232 |     <></>
233 |   );
234 | };
235 | 
236 | const GenerateSocialConnect = ({ socialConnect }) => {
237 |   let social = [];
238 |   socialName.map((val) => {
239 |     if (socialConnect[val].length > 0) {
240 |       social.push(`
241 |             <a href="${socialUrl[val]}${socialConnect[val]}" target="blank"><img align="center" src=${socialIcons[val]} alt="profile-radme-generator" height="30" width="40" /></a>
242 |             `);
243 |     }
244 |   });
245 | 
246 |   return social.length > 0 ? (
247 |     <>{`<h3 align="left">Connect with me:</h3>
248 |     <p align="left"> ${social.join(" ")} </p>`}</>
249 |   ) : (
250 |     <></>
251 |   );
252 | };
253 | 
254 | const GenerateAdditionalInfo = ({ prefix, title }) => {
255 |   if (title.length > 0) {
256 |     return (
257 |       <>
258 |         {`- ${prefix} **${title}**`}
259 |         <br />
260 |         <br />
261 |       </>
262 |     );
263 |   }
264 |   return "";
265 | };
266 | 
267 | const GenerateHeader = ({ name, subtitle, themes }) => {
268 |   return (
269 |     <>
270 |       <br />
271 |       <br />
272 |       {`
273 | ![SVG Banners](https://svg-banners.vercel.app/api?type=${themes}&text1=${name.replaceAll(
274 |         " ",
275 |         "%20"
276 |       )}&text2=${subtitle.replaceAll(
277 |         " ",
278 |         "%20"
279 |       )}&width=900&height=400)`}
280 |     </>
281 |   );
282 | };
283 | 
284 | const GenerateVisitorCount = ({ username, visitorBadge }) => {
285 |   if (visitorBadge && username.length > 0) {
286 |     return (
287 |       <>
288 |         <br />
289 | 
290 |         {` 
291 |         <img height="auto" src="https://komarev.com/ghpvc/?username=${username}&label=Profile%20views&color=0e75b6&style=flat" alt="profile-radme-generator" />
292 |         `}
293 |       </>
294 |     );
295 |   }
296 | };
297 | 
298 | const GenerateGitStats = ({githubProfileStats, username, themes, locale, hide_border }) => {
299 |   if(githubProfileStats && username.length>0){
300 |     return (
301 |       <>
302 |         <br />
303 |         <br />
304 |         {`
305 |       <img align="left" height="auto" width={300} src="https://github-readme-stats.vercel.app/api?username=${username}&show_icons=true&theme=${themes}&locale=${locale}&hide_border=${hide_border}" alt="profile-radme-generator" />
306 |       `}
307 |       </>
308 |     );
309 |   }
310 |   
311 | };
312 | const GenerateStreaks = ({showStreakStats, username, theme, mode, hide_border, locale }) => {
313 |   if(showStreakStats){
314 | 
315 |     return (
316 |       <>
317 |       <br />
318 |       <br />
319 |       {`
320 |     <img align="left" height="auto" width={300} src="https://github-readme-streak-stats.herokuapp.com/?user=${username}&theme=${theme}&mode=${mode}&hide_border=${hide_border}&locale=${locale.locale}" alt="profile-radme-generator" />
321 |     `}
322 |     </>
323 |   );
324 | }
325 | };
326 | 
327 | const TopLanguageUsed = ({showMostLanguageUsed, username, theme, hide_border }) => {
328 |   if(showMostLanguageUsed){
329 | 
330 |     return (
331 |       <>
332 |       <br />
333 |       <br />
334 |       {`
335 |    <img align="left" height="auto" width={300} src="https://github-readme-stats.vercel.app/api/top-langs/?username=${username}&theme=${theme}&hide_border=${hide_border}" alt="profile-radme-generator" />
336 |    
337 |    `}
338 |     </>
339 |   );
340 | }
341 | };
342 | 
343 | const GenerateMemes = ({showMemes}) => {
344 |   if(showMemes){
345 | 
346 |     return (
347 |       <>
348 |       <br />
349 |       <br />
350 |       {`
351 |    <p align="left">
352 |    <img width="900" height="110" src="https://readme-jokes.vercel.app/api" alt ="tr"/>
353 |    </p>
354 |    
355 |    `}
356 |     </>
357 |   );
358 | }
359 | };
360 | 
361 | export default Generate;
362 | 
363 | const GenerateTrophy = ({
364 |   username,
365 |   trophy,
366 |   theme,
367 |   column,
368 |   noframe,
369 |   transparent,
370 | }) => {
371 |   if (username.length > 0 && trophy) {
372 |     return (
373 |       <>
374 |         <br />
375 |         <br />
376 |         {`<p align="left">
377 |       <img 
378 |       height="auto"
379 |       src="https://github-profile-trophy.vercel.app/?username=${username}&theme=${theme}&column=${column}&no-frame=${noframe}&no-bg=${transparent}&margin-w=19&margin-h=19"
380 |       alt="image"
381 |     />
382 |       </p>`}
383 |       </>
384 |     );
385 |   }
386 | };
387 | 
388 | const GenerateTwiterBadge = ({ username, twitterBadge, themes }) => {
389 |   if (username.length > 0 && twitterBadge) {
390 |     return (
391 |       <>
392 |         <br />
393 |         <br />
394 |         {`
395 | <p align="left"> <a href="https://twitter.com/${username}" target="blank"><img src="https://img.shields.io/twitter/follow/${username}?logo=twitter&style=for-the-badge" alt="profile-radme-generator" /></a> </p>`}
396 |       </>
397 |     );
398 |   }
399 | };
400 | 
401 | // if (additionalInfo.askme.length > 0) {
402 | //     moreInfo.push(`-  **${additionalInfo.askme}**`);
403 | //   }
404 | //   if (additionalInfo.funfact.length > 0) {
405 | //     moreInfo.push(`**${additionalInfo.funfact}**`);
406 | //   }
407 | //   if (additionalInfo.reachme.length > 0) {
408 | //     moreInfo.push(`-  **${additionalInfo.reachme}**`);
409 | //   }
410 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
  1 | import Head from "next/head";
  2 | import Image from "next/image";
  3 | import { Inter } from "@next/font/google";
  4 | import styles from "@/styles/Home.module.css";
  5 | import { useEffect, useRef, useState } from "react";
  6 | import Title from "../Components/Title";
  7 | import Works from "../Components/Works";
  8 | import MoreInfo from "../Components/MoreInfo";
  9 | import Preview from "../Components/Preview";
 10 | import DevCard from "../Components/DevCard";
 11 | import Message from "../Components/Message";
 12 | 
 13 | import {
 14 |   categories,
 15 |   socialName,
 16 |   socialIcons,
 17 |   categorizedSkills,
 18 |   initialSkillState,
 19 |   skills,
 20 |   icons,
 21 |   socialConst,
 22 |   initialAddon,
 23 |   initialTheme,
 24 |   gitStatsInitialThemes,
 25 |   initialTemplateData,
 26 |   initialTrophyData,
 27 |   initialStreaksData,
 28 |   initialGitStats,
 29 |   initialTopLangStats,
 30 | } from "../helper/static";
 31 | import SkillsCard from "../Components/skillsCard";
 32 | import SocialInfo from "../Components/SocialInfo";
 33 | import AddOns from "../Components/AddOns";
 34 | import Generate from "../Components/Generate";
 35 | import SideOption from "../Components/SideOption";
 36 | 
 37 | import Implementation from "../Components/Implementation";
 38 | 
 39 | import ProgressBar from "@ramonak/react-progress-bar";
 40 | import { BiCopy } from "react-icons/bi";
 41 | import { SlCloudDownload } from "react-icons/sl";
 42 | import { MdArrowBackIos, MdOutlineArrowBackIos } from "react-icons/md";
 43 | import { FiCheck } from "react-icons/fi";
 44 | import { VscLoading } from "react-icons/vsc";
 45 | 
 46 | import {FaRegEdit} from "react-icons/fa"
 47 | 
 48 | // const { docco } = require("react-syntax-highlighter/dist/esm/styles/hljs");
 49 | 
 50 | const inter = Inter({ subsets: ["latin"] });
 51 | 
 52 | export default function Home() {
 53 |  
 54 |   const [works, setWorks] = useState([
 55 |     {
 56 |       workingFor: "💪🏼 Working on",
 57 |       pName: "Github Profile Readme Generator",
 58 |       pLink: "https://github.com/",
 59 |     },
 60 |   ]);
 61 |   const [moreInfo, setMoreInfo] = useState({
 62 |     currentLearning: "Reactjs & Nextjs",
 63 |     askme: "Reactjs",
 64 |     reachme: "technicalranjit@gmail.com",
 65 |     funfact: "Bats are the only mammal that can actually fly.",
 66 |   });
 67 |   const [socialData, setSocialData] = useState(socialConst);
 68 |   const [title, setTitle] = useState("Ranjit Das 🤠");
 69 |   const [subTitle, setSubTitle] = useState(
 70 |     "💖 A Passionate Coder,Developer and Debugger"
 71 |   );
 72 |   const [addOns, setAddOns] = useState(initialAddon);
 73 |   const [genClick, setGenClick] = useState(false);
 74 |   const [gitStatsThemes, setGitStatsThemes] = useState(gitStatsInitialThemes);
 75 |   const [display, setDisplay] = useState(false);
 76 |   const [events, setEvents] = useState("");
 77 |   const [Template, setTemplate] = useState([]);
 78 |   const [statsLoc, setStatsLoc] = useState(0);
 79 |   const [streakLoc, setStreakLoc] = useState(0);
 80 |   const [Msg, setMsg] = useState({ message: "", success: null });
 81 |   const [Gen, setGen] = useState(false);
 82 |   const [onGenerating, setOnGenerating] = useState(false);
 83 |   const [loadingbar, setLoadingBar] = useState(0);
 84 |   const [GenData, setGendata] = useState({
 85 |     title: "",
 86 |     subtitle: "",
 87 |     project: [],
 88 |     additionalInfo: [],
 89 |     skills: [],
 90 |     socialConnection: [],
 91 |     addons: [],
 92 |     moreInfo: [],
 93 |   });
 94 |   const [skill, setSkills] = useState(initialSkillState);
 95 |   const [theme, setTheme] = useState(initialTheme);
 96 | 
 97 |   // for template
 98 | 
 99 |   const [trophyData, setTrophyData] = useState(initialTrophyData);
100 |   const [StreaksData, setStreaksData] = useState(initialStreaksData);
101 |   const [StatsData, setStatsData] = useState(initialGitStats);
102 |   const [TopLangStatsData, setTopLangStatsData] = useState(initialTopLangStats);
103 |   const [viewMode, setViewMode] = useState(false);
104 |   const [copy,setCopy] = useState(false);
105 |   const [download,setDownload] = useState(false);
106 | 
107 |   // useEffect(()=>{
108 |   //   if(socialData.github.length<=0){
109 |   //     setMsg({message:"Github is requied",success:false});
110 |   //   }
111 |   //   setTimeout(() => {
112 | 
113 |   //   }, timeout);
114 |   // },[socialData.github])
115 | 
116 | 
117 | 
118 | 
119 | 
120 |   const handleDownloadMarkdown = () => {
121 |     const markdownContent = document.getElementById('markdown-content');
122 |     const tempElement = document.createElement('a');
123 |     tempElement.setAttribute(
124 |       'href',
125 |       `data:text/markdown;charset=utf-8,${encodeURIComponent(markdownContent.innerText)}`,
126 |     );
127 |     tempElement.setAttribute('download', 'README.md');
128 |     tempElement.style.display = 'none';
129 |     document.body.appendChild(tempElement);
130 |     tempElement.click();
131 |     document.body.removeChild(tempElement);
132 |   };
133 | 
134 |   const handleCopyToClipboard = () => {
135 |     const range = document.createRange();
136 |     range.selectNode(document.getElementById('markdown-content'));
137 |     window.getSelection().removeAllRanges(); // clear current selection
138 |     window.getSelection().addRange(range); // to select text
139 |     document.execCommand('copy');
140 |     window.getSelection().removeAllRanges();
141 | 
142 |   };
143 | 
144 |   const onChange = (e, i) => {
145 |     const newData = [...works];
146 |     works[i][e.target.name] = [e.target.value];
147 |     setWorks(newData);
148 |   };
149 | 
150 |   const handleOnAddMore = () => {
151 |     const addNew = [...works, { workingFor: "", pName: "", pLink: "" }];
152 |     setWorks(addNew);
153 |   };
154 | 
155 |   const handleOnRemove = (i) => {
156 |     const prevData = [...works];
157 |     prevData.splice(i, 1);
158 |     setWorks(prevData);
159 |   };
160 | 
161 |   const handleOnMoreInfoChnage = (e) => {
162 |     setMoreInfo({ ...moreInfo, [e.target.name]: e.target.value });
163 |   };
164 | 
165 |   const handleOnCheck = (sfiled) => {
166 |     const newsk = { ...skill };
167 |     newsk[sfiled] = !newsk[sfiled];
168 |     setSkills(newsk);
169 |   };
170 | 
171 |   const [newsk, setnewsk] = useState([]);
172 |   const [so, setSo] = useState([]);
173 |   const [wt, setWt] = useState([]);
174 |   const handleOnGenerate = () => {
175 |     if(socialData['github'].length<=0){
176 |       return setMsg({message:"Github Username is required!!",success:false});
177 |     }
178 |     setOnGenerating(true);
179 | 
180 |     if (newsk.length > 0) {
181 |       setnewsk([]);
182 |     }
183 |     skills.forEach((val) => {
184 |       if (skill[val]) {
185 |         newsk.push(val);
186 |       }
187 |     });
188 | 
189 |     const newd = { ...GenData };
190 |     if (title.length > 0) {
191 |       newd["title"] = title;
192 |     }
193 |     if (subTitle.length > 0) {
194 |       newd["subtitle"] = subTitle;
195 |     }
196 |     if (newsk.length > 0) {
197 |       newd["skills"] = newsk;
198 |     }
199 |     if (works.length > 0) {
200 |       newd["project"] = works;
201 |     }
202 | 
203 |     newd["socialConnection"] = socialData;
204 |     newd["addons"] = addOns;
205 |     newd["moreInfo"] = moreInfo;
206 | 
207 |     setGendata(newd);
208 | 
209 |     setTimeout(() => {
210 |       setGenClick(true);
211 |       setGen(true);
212 |       setOnGenerating(false);
213 |       setMsg({message:"Generated Sucessfully!!",success:true})
214 |       setTimeout(()=>{
215 |         setMsg({message:"",success:null});
216 |       },2000)
217 |     }, 3000);
218 |   };
219 | 
220 | 
221 |   
222 | 
223 |   const onSetSoical = (field, event) => {
224 |     if (field === "github" && event.target.value.length <= 0) {
225 |       setMsg({ message: "Github Username is required", success: false });
226 |     }
227 | 
228 |     if (field === "github" && event.target.value.length > 0) {
229 |       setMsg({ message: "", success: null });
230 |     }
231 | 
232 |     const newData = { ...socialData };
233 |     newData[field] = event.target.value;
234 |     setSocialData(newData);
235 |   };
236 | 
237 |   
238 |   const onCheckAddons = (fields) => {
239 |     console.log(fields);
240 |     if(fields==="twiterBadge" && socialData['twitter'].length<=0){
241 |      
242 |       setMsg({message:"Enter your twitter username above in social fields!",success:false});
243 |      return setTimeout(() => {
244 |         setMsg({message:"",success:null});
245 |       }, 2000);
246 |      
247 |     }
248 |     const newAddons = { ...addOns };
249 |     newAddons[fields] = !newAddons[fields];
250 |     setAddOns(newAddons);
251 |   };
252 | 
253 |   const onThemeChange = (event) => {
254 |     setTheme(event.target.value);
255 |   };
256 | 
257 |   const onGitStatsThemeChange = (event) => {
258 |     setGitStatsThemes(event.target.value);
259 |   };
260 | 
261 |   const closeSide = () => {
262 |     setDisplay(false);
263 |   };
264 | 
265 |   const onDisplay = (e) => {
266 |     setTemplate(initialTemplateData[e]);
267 |     if (e === events) {
268 |       setDisplay((prev) => !prev);
269 |     } else {
270 |       setEvents(e);
271 |       setDisplay(true);
272 |     }
273 |   };
274 | 
275 | 
276 | 
277 |   const onDataUpdate = (field, val, ind) => {
278 |     if (events === "trophy") {
279 |       const newT = { ...trophyData };
280 |       newT[field] = val;
281 |       setTrophyData(newT);
282 |     }
283 | 
284 |     if (events === "streakstats") {
285 |       const newS = { ...StreaksData };
286 |       newS[field] = val;
287 |       setStreakLoc(ind);
288 |       setStreaksData(newS);
289 |     }
290 |     if (events === "gitstats") {
291 |       const newG = { ...StatsData };
292 |       newG[field] = val;
293 |       setStatsLoc(ind);
294 |       setStatsData(newG);
295 |     }
296 |     if (events === "toplanguage") {
297 |       const newTL = { ...TopLangStatsData };
298 |       newTL[field] = val;
299 |       setTopLangStatsData(newTL);
300 |     }
301 |   };
302 | 
303 |   return (
304 |     
305 |     
306 |     <>
307 |   
308 |       <div className=" min-h-screen relative overflow-hidden bg-slate-900  ">
309 |         <div className="max-w-screen-xl overflow-hidden pb-2   max-h-screen gap-5  mx-auto p-2 md:p-0 grid grid-cols-1  md:grid-cols-2">
310 |           <div className="w-full max-h-screen p-3 md:p-5 rounded-md border-2 border-slate-800   overflow-y-auto overflow-x-hidden">
311 |             <DevCard />
312 |             <br />
313 |             {Gen ? (
314 |               ""
315 |             ) : (
316 |               <div className="">
317 |                 <div className="w-full md:hidden justify-center h-20 flex flex-col relative">
318 |                   <div className="border-2 rounded-md md:h-16 h-12 border-slate-800"></div>
319 |                   <div className="absolute  h-12 md:h-16 w-40 justify-between flex rounded-lg flex-row gap-0 bg-slate-800 right-0">
320 |                     <button
321 |                       onClick={() => setViewMode(false)}
322 |                       className={` ${
323 |                         viewMode ? "bg-slate-800" : "bg-slate-700"
324 |                       } duration-300 ease-linear text-xs hover:bg-slate-800 md:text-sm py-2 w-full text-slate-400  px-3`}
325 |                     >
326 |                       Edit
327 |                     </button>
328 |                     <button
329 |                       onClick={() => setViewMode(true)}
330 |                       className={` ${
331 |                         viewMode ? "bg-slate-700" : "bg-slate-800"
332 |                       } duration-200 text-xs md:text-sm hover:bg-slate-800 ease-linear w-full py-2 rounded-tr-md rounded-br-md  text-slate-400  px-3`}
333 |                     >
334 |                       View
335 |                     </button>
336 |                   </div>
337 |                 </div>
338 | 
339 |                 {viewMode ? (
340 |                   <div className="max-h-screen   md:flex">
341 |                     <aside className=" bg-slate-700 overflow-y-auto max-h-screen">
342 |                       <Preview
343 |                         TopLangStatsData={TopLangStatsData}
344 |                         StatsData={StatsData}
345 |                         trophyData={trophyData}
346 |                         StreaksData={StreaksData}
347 |                         onDisplay={onDisplay}
348 |                         gitstatsThemes={gitStatsThemes}
349 |                         onGitStatsThemesChage={onGitStatsThemeChange}
350 |                         addons={addOns}
351 |                         skill={skill}
352 |                         socialConnect={socialData}
353 |                         projects={works}
354 |                         theme={theme}
355 |                         onThemeChange={onThemeChange}
356 |                         moreInfo={moreInfo}
357 |                         name={title && title}
358 |                         subtitle={subTitle && subTitle}
359 |                       />
360 |                     </aside>
361 |                   </div>
362 |                 ) : (
363 |                   <div className="h-screen px-3  md:overflow-x-hidden overflow-y-auto">
364 |                     
365 |                     <Title label="Name" title={title} setTitle={setTitle} />
366 |                     <Title
367 |                       title={subTitle}
368 |                       label="Subtitle"
369 |                       setTitle={setSubTitle}
370 |                     />
371 |                     <div className="mt-3">
372 |                       <h1 className="text-cyan-500 text-xl font-bold font-Alegreya">
373 |                         Projects
374 |                       </h1>
375 |                       {works.map((val, index) => {
376 |                         return (
377 |                           <Works
378 |                             handleOnRemove={()=>handleOnRemove(index)}
379 |                             index={index}
380 |                             onChange={onChange}
381 |                             val={val}
382 |                             key={index}
383 |                           />
384 |                         );
385 |                       })}
386 |                       <button
387 |                         onClick={handleOnAddMore}
388 |                         className="text-slate-400 rounded-md bg-teal-900 py-2 px-3 mt-3 w-full font-Alegreya font-semibold hover:bg-teal-800 "
389 |                       >
390 |                         Add more
391 |                       </button>
392 |                     </div>
393 |                     <div className="mt-5">
394 |                       <h1 className="text-cyan-500 text-lg font-bold font-Alegreya ">
395 |                         Additional Info
396 |                       </h1>
397 |                       <MoreInfo
398 |                         val={moreInfo}
399 |                         onChange={handleOnMoreInfoChnage}
400 |                       />
401 |                     </div>
402 | 
403 |                     <br />
404 |                     <h1 className="text-cyan-500 text-lg font-bold font-Alegreya ">
405 |                       Skills/Language
406 |                     </h1>
407 |                     <br />
408 |                     <br />
409 | 
410 |                     {Object.keys(categorizedSkills).map((val, index) => {
411 |                       return (
412 |                         <div key={index}>
413 |                           <span
414 |                             key={index}
415 |                             className="text-pink-500 text-md font-bold  font-Alegreya"
416 |                           >
417 |                             {val.charAt(0).toUpperCase()}
418 |                             {val.slice(1)}
419 |                           </span>
420 |                           <div className="grid grid-cols-2 my-5 md:grid-cols-6 gap-2">
421 |                             {categorizedSkills[val].skills.map((val, ind) => {
422 |                               
423 |                               return (
424 |                                 <SkillsCard
425 |                                   skill={val}
426 |                                   icons={icons[val]}
427 |                                   skills={skill}
428 |                                   key={ind}
429 |                                   onChange={handleOnCheck}
430 |                                 />
431 |                               );
432 |                             })}
433 |                           </div>
434 |                         </div>
435 |                       );
436 |                     })}
437 | 
438 |                     <div className=" mt-5">
439 |                       <h1 className="text-slate-300 md:text-xl font-bold font-Alegreya text-sm">
440 |                         Social Connections{" "}
441 |                         <span className="text-red-400 animate-pulse">
442 |                           [Github username is requird]
443 |                         </span>
444 |                       </h1>
445 |                       <div className="grid grid-cols-1 md:grid-cols-2 border-2 border-slate-800 p-2 drop-shadow-lg rounded-md bg-slate-900 gap-2 mt-5">
446 |                         {socialName.map((val, index) => {
447 |                           return (
448 |                             <SocialInfo
449 |                               key={index}
450 |                               onSetSoical={onSetSoical}
451 |                               placeholder={val}
452 |                               value={socialData[val]}
453 |                               icons={socialIcons[val]}
454 |                               setMsg={setMsg}
455 |                             />
456 |                           );
457 |                         })}
458 |                       </div>
459 |                     </div>
460 | 
461 |                     <div>
462 |                       <br />
463 |                       <h1 className="text-slate-300 font-bold font-Alegreya text-md md:text-xl">
464 |                         Addons
465 |                       </h1>
466 |                       <AddOns onCheckAddons={onCheckAddons} addOns={addOns} />
467 |                     </div>
468 |                     <div className=" md:hidden">
469 |   
470 |   {onGenerating && !Gen ? (
471 |            // <button
472 |            //   className="my-5 text-slate-300 bg-teal-600 py-3 px-5"
473 |            //   onClick={handleOnGenerate}
474 |            // >
475 | 
476 |          
477 |            // </button>
478 |            <div className="w-full  md:flex  flex  justify-center items-center h-20">
479 |              {/* <Image
480 |                className="animate-spin"
481 |                src="/loading.png"
482 |                alt="loading.."
483 |                width={40}
484 |                height={40}
485 |              /> */}
486 |              <VscLoading className="md:hidden mt-3 text-white animate-spin" size={40} 
487 |                height={40}/>
488 |            </div>
489 |          ) : !onGenerating && !Gen ? (
490 |            <div className="w-full  justify-center flex-col flex">
491 |              <div>
492 |                <p className=""> <span className="text-yellow-300  font-bold font-Alegreya ">NOTE</span> : <span className="text-slate-300 text-xs font-Alegreya font-bold">[Customizable] (ViewMode) Click on the item to Customize the item.</span> </p>
493 |              </div>
494 |              <br />
495 |              <button
496 |                className="my-5 text-slate-300 rounded-md font-bold font-Alegreya hover:bg-teal-700 bg-teal-800 py-3 px-5"
497 |                onClick={handleOnGenerate}
498 |              >
499 |                GENERATE README
500 |              </button>
501 |            </div>
502 |          ) : (
503 |            <div className="w-full flex flex-row justify-between rounded-t-md items-center bg-slate-700">
504 |              <span className="ml-2 font-Alegreya  font-bold text-slate-400">
505 |                Read Implementations
506 |              </span>
507 |              <div className="  items-center justify-end mr-3 flex flex-row gap-2 ">
508 |                {/* <button
509 |                  className="py-3"
510 |                  onClick={() => {
511 |                    setGen(false);
512 |                    setOnGenerating(false);
513 |                    setGenClick(false);
514 |                  }}
515 |                > */}
516 |                  <p onClick={()=>{
517 |                    setGen(false);
518 |                    setOnGenerating(false);
519 |                    setGenClick(false);
520 |                  }}
521 |                    className={`border-2 hover:border-slate-500 cursor-pointer border-slate-600 
522 |                    } p-2 w-10 h-10 flex flex-row justify-center items-center rounded-md`}
523 |                  >
524 |                    <MdOutlineArrowBackIos className="w-7 h-7 text-slate-400  " />
525 |                  </p>
526 | 
527 |                {/* </button> */}
528 |                <p onClick={()=>{
529 |                  handleCopyToClipboard();
530 |                  setCopy(true);
531 |                  setTimeout(() => {
532 |                    setCopy(false);
533 |                  }, 2000);
534 |                }}
535 |                    className={`border-2 hover:border-slate-500 cursor-pointer border-slate-600 ${
536 |                      copy && "text-green-500"
537 |                    } p-2 w-10 h-10 flex flex-col items-center rounded-md`}
538 |                  >
539 |                   {copy?<FiCheck   />: <BiCopy className="w-7 h-7 text-slate-400  " />}
540 |                  </p>
541 |                <button className="py-3">
542 |                <p onClick={()=>{
543 |                  handleDownloadMarkdown();
544 |                  setDownload(true);
545 |                  setTimeout(() => {
546 |                    setDownload(false);
547 |                  }, 2000);
548 |                }}
549 |                    className={`border-2 hover:border-slate-500 cursor-pointer border-slate-600 ${download && "text-green-500"
550 |                    } p-2 w-10 h-10 flex flex-col items-center rounded-md`}
551 |                  >
552 |                   {download?<FiCheck   />: <SlCloudDownload  className="w-7 h-7 text-slate-400   " />}
553 |                  </p>
554 |                </button>
555 |              </div>
556 |            </div>
557 |          )}
558 | 
559 |          </div>
560 |                   </div>
561 |                 )}
562 | 
563 | 
564 |                 
565 |               </div>
566 |               
567 |             )}
568 | <div className=" md:flex">
569 |   
570 |      {onGenerating && !Gen ? (
571 |               // <button
572 |               //   className="my-5 text-slate-300 bg-teal-600 py-3 px-5"
573 |               //   onClick={handleOnGenerate}
574 |               // >
575 | 
576 |             
577 |               // </button>
578 |               <div className="w-full hidden   md:flex  justify-center items-center h-20">
579 |                 {/* <Image
580 |                   className="animate-spin"
581 |                   src="/loading.png"
582 |                   alt="loading.."
583 |                   width={40}
584 |                   height={40}
585 |                 /> */}
586 |                 <VscLoading className=" hidden md:flex text-white animate-spin" size={40} 
587 |                   height={40}/>
588 |               </div>
589 |             ) : !onGenerating && !Gen ? (
590 |               <div className="w-full justify-center flex-col flex">
591 |                 <div className="hidden md:flex">
592 |                   <p className=""> <span className="text-yellow-300 font-bold font-Alegreya ">NOTE</span> : <span className="text-slate-300 text-xs font-Alegreya font-bold">[Customizable] (ViewMode) Click on the item to Customize the item.</span> </p>
593 |                 </div>
594 |                 <br />
595 |                 <button
596 |                   className="my-5 hidden md:flex text-center justify-center text-slate-300 rounded-md font-bold font-Alegreya hover:bg-teal-700 bg-teal-800 py-3 px-5"
597 |                   onClick={handleOnGenerate}
598 |                 >
599 |                   GENERATE README
600 |                 </button>
601 |               </div>
602 |             ) : (
603 |               <div className="w-full flex flex-row justify-between rounded-t-md items-center bg-slate-700">
604 |                 <span className="ml-2 font-Alegreya  font-bold text-slate-400">
605 |                   Read Implementations
606 |                 </span>
607 |                 <div className="  items-center justify-end mr-3 flex flex-row gap-2 ">
608 |                   {/* <button
609 |                     className="py-3"
610 |                     onClick={() => {
611 |                       setGen(false);
612 |                       setOnGenerating(false);
613 |                       setGenClick(false);
614 |                     }}
615 |                   > */}
616 |                     <p onClick={()=>{
617 |                       setGen(false);
618 |                       setOnGenerating(false);
619 |                       setGenClick(false);
620 |                     }}
621 |                       className={`border-2 hover:border-slate-500 cursor-pointer border-slate-600 
622 |                       } p-2 w-10 h-10 flex flex-row justify-center items-center rounded-md`}
623 |                     >
624 |                       <MdOutlineArrowBackIos className="w-7 h-7 text-slate-400  " />
625 |                     </p>
626 | 
627 |                   {/* </button> */}
628 |                   <p onClick={()=>{
629 |                     handleCopyToClipboard();
630 |                     setCopy(true);
631 |                     setTimeout(() => {
632 |                       setCopy(false);
633 |                     }, 2000);
634 |                   }}
635 |                       className={`border-2 hover:border-slate-500 cursor-pointer border-slate-600 ${
636 |                         copy && "text-green-500"
637 |                       } p-2 w-10 h-10 flex flex-col items-center rounded-md`}
638 |                     >
639 |                      {copy?<FiCheck   />: <BiCopy className="w-7 h-7 text-slate-400  " />}
640 |                     </p>
641 |                   <button className="py-3">
642 |                   <p onClick={()=>{
643 |                     handleDownloadMarkdown();
644 |                     setDownload(true);
645 |                     setTimeout(() => {
646 |                       setDownload(false);
647 |                     }, 2000);
648 |                   }}
649 |                       className={`border-2 hover:border-slate-500 cursor-pointer border-slate-600 ${download && "text-green-500"
650 |                       } p-2 w-10 h-10 flex flex-col items-center rounded-md`}
651 |                     >
652 |                      {download?<FiCheck   />: <SlCloudDownload  className="w-7 h-7 text-slate-400   " />}
653 |                     </p>
654 |                   </button>
655 |                 </div>
656 |               </div>
657 |             )}
658 | 
659 |             </div>
660 |             {genClick ? (
661 |               <div className="border-2 overflow-x-hidden flex-wrap h-screen overflow-y-auto border-slate-800 rounded-md px-1 ">
662 |                 <Implementation />
663 |                 <Generate
664 |                   theme={theme}
665 |                   StatsData={StatsData}
666 |                   StreaksData={StreaksData}
667 |                   TopLangStatsData={TopLangStatsData}
668 |                   trophyData={trophyData}
669 |                   data={GenData}
670 |                 />
671 | 
672 |                 <div className="text-slate-300">
673 |                   <h1 className="text-slate-300 font-Alegreya text-md font-bold">
674 |                     #STEP-5
675 |                   </h1>
676 |                   <p className="text-slate-400 ml-3 text-sm mt-2 font-bold font-Alegreya">
677 |                     Paste the code in the{" "}
678 |                     <span className="text-pink-400 font-bold">readme.md</span>{" "}
679 |                     file and that&apos;s it, you can see the result
680 |                   </p>
681 |                   <div className="w-full rounded-md justify-center flex flex-wrap">
682 |                     <br />
683 | 
684 |                     <Image
685 |                       width={500}
686 |                       className="w-full object-cover mt-5 rounded-md md:px-4"
687 |                       height={300}
688 |                       src="https://user-images.githubusercontent.com/87274287/216817160-6f4829ed-f1b9-4c54-8cd2-df55506accb6.png"
689 |                       alt="profile-radme-generator"
690 |                     />
691 |                     <br />
692 |                   </div>
693 |                   <div>
694 |                     <br />
695 |                     <h1 className="text-slate-300 font-Alegreya text-md font-bold">
696 |                       #STEP-6
697 |                     </h1>
698 | 
699 |                     <p className="text-slate-400 ml-3 text-sm mt-2 font-bold font-Alegreya">
700 |                       Click on the <span className="text-green-500">Commit</span> button
701 |                     </p>
702 |                     <Image
703 |                       width={500}
704 |                       className="w-full   object-cover mt-5 rounded-md md:px-4"
705 |                       height={300}
706 |                       src="https://user-images.githubusercontent.com/87274287/216817182-450c3cf3-2b16-48ce-b1bd-30981132fa98.png"
707 |                       alt="profile-radme-generator"
708 |                     />
709 |                   </div>
710 | 
711 |                   <div>
712 |                     <br />
713 |                     <span>
714 |                       <span className="text-green-600 ml-3 text-xl font-bold font-Alegreya">
715 |                         Congrat&apos;s
716 |                       </span>{" "}
717 |                       You have Successfully Created your Github Readme Profile..
718 |                     </span>
719 |                     <Image
720 |                       width={500}
721 |                       className="w-full   object-cover mt-5 rounded-md md:px-4"
722 |                       height={300}
723 |                       src="https://user-images.githubusercontent.com/87274287/216818040-956e0b41-1d95-4df2-a784-a5d8c157bc88.png"
724 |                       alt="profile-radme-generator"
725 |                     />
726 |                   </div>
727 |                   <br />
728 |                   <div className="flex flex-col md:flex-row  md:items-center md:justify-center gap-2">
729 |                    <span className="font-bold text-md text-xl text-green-600"> Contribute: </span> 
730 |                    <p>Create pull request and Don&apos;t forget to <a className="text-blue-500 no-underline  font-bold" href="https://github.com/Technicalranjitofficial/github-profile-readme-generator">Fork</a> and <a className="text-blue-500 no-underline font-bold" href="https://github.com/Technicalranjitofficial/github-profile-readme-generator">Star</a> this repo.</p>
731 |                   </div>
732 |                 </div>
733 |               </div>
734 |             ) : (
735 |               ""
736 |             )}
737 |           </div>
738 |           <div className="max-h-screen hidden md:flex">
739 |             <aside className=" bg-slate-700 overflow-y-auto max-h-screen">
740 |               <Preview
741 |                 TopLangStatsData={TopLangStatsData}
742 |                 StatsData={StatsData}
743 |                 trophyData={trophyData}
744 |                 StreaksData={StreaksData}
745 |                 onDisplay={onDisplay}
746 |                 gitstatsThemes={gitStatsThemes}
747 |                 onGitStatsThemesChage={onGitStatsThemeChange}
748 |                 addons={addOns}
749 |                 skill={skill}
750 |                 socialConnect={socialData}
751 |                 projects={works}
752 |                 theme={theme}
753 |                 onThemeChange={onThemeChange}
754 |                 moreInfo={moreInfo}
755 |                 name={title && title}
756 |                 subtitle={subTitle && subTitle}
757 |               />
758 |             </aside>
759 |           </div>
760 |         </div>
761 |         <SideOption
762 |           TopLangStatsData={TopLangStatsData}
763 |           streakLoc={streakLoc}
764 |           StatsLoc={statsLoc}
765 |           StatsData={StatsData && events === "gitstats" && StatsData}
766 |           StreaksData={StreaksData && events === "streakstats" && StreaksData}
767 |           closeSide={closeSide}
768 |           trophyData={trophyData && events === "trophy" && trophyData}
769 |           onDataUpdate={onDataUpdate}
770 |           template={Template}
771 |           events={events}
772 |           display={display}
773 |           setDisplay={() => setDisplay((prev) => prev != prev)}
774 |         />
775 |       </div>
776 | 
777 |       <div className="bg-red-300 w-screen flex flex-row justify-center">
778 |         <Message setMessage={setMsg} msg={Msg.message} success={Msg.success} />
779 |       </div>
780 | 
781 |       {/* <p className="text-white">Hello</p> */}
782 |     </>
783 |   );
784 | }
785 | 


--------------------------------------------------------------------------------
/helper/static.js:
--------------------------------------------------------------------------------
   1 | const categorizedSkills = {
   2 |   language: {
   3 |     title: "Programming Languages",
   4 |     skills: [
   5 |       "c",
   6 |       "cplusplus",
   7 |       "csharp",
   8 |       "go",
   9 |       "java",
  10 |       "javascript",
  11 |       "typescript",
  12 |       "php",
  13 |       "perl",
  14 |       "ruby",
  15 |       "scala",
  16 |       "python",
  17 |       "swift",
  18 |       "objectivec",
  19 |       "clojure",
  20 |       "rust",
  21 |       "haskell",
  22 |       "coffeescript",
  23 |       "elixir",
  24 |       "erlang",
  25 |       "nim",
  26 |     ],
  27 |   },
  28 | 
  29 |   frontend_dev: {
  30 |     title: "Frontend Development",
  31 |     skills: [
  32 |       "vuejs",
  33 |       "react",
  34 |       "svelte",
  35 |       "angularjs",
  36 |       "angular",
  37 |       "backbonejs",
  38 |       "bootstrap",
  39 |       "vuetify",
  40 |       "css3",
  41 |       "html5",
  42 |       "pug",
  43 |       "gulp",
  44 |       "sass",
  45 |       "redux",
  46 |       "webpack",
  47 |       "babel",
  48 |       "tailwind",
  49 |       "materialize",
  50 |       "bulma",
  51 |       "gtk",
  52 |       "qt",
  53 |       "wx_widgets",
  54 |       "ember",
  55 |     ],
  56 |   },
  57 | 
  58 |   backend_dev: {
  59 |     title: "Backend Development",
  60 |     skills: [
  61 |       "nodejs",
  62 |       "spring",
  63 |       "express",
  64 |       "graphql",
  65 |       "kafka",
  66 |       "solr",
  67 |       "rabbitMQ",
  68 |       "hadoop",
  69 |       "nginx",
  70 |       "openresty",
  71 |       "nestjs",
  72 |     ],
  73 |   },
  74 | 
  75 |   mobile_dev: {
  76 |     title: "Mobile App Development",
  77 |     skills: [
  78 |       "android",
  79 |       "flutter",
  80 |       "dart",
  81 |       "kotlin",
  82 |       "nativescript",
  83 |       "xamarin",
  84 |       "reactnative",
  85 |       "ionic",
  86 |       "apachecordova",
  87 |     ],
  88 |   },
  89 | 
  90 |   ai: {
  91 |     title: "AI/ML",
  92 |     skills: [
  93 |       "tensorflow",
  94 |       "pytorch",
  95 |       "pandas",
  96 |       "seaborn",
  97 |       "opencv",
  98 |       "scikit_learn",
  99 |     ],
 100 |   },
 101 | 
 102 |   database: {
 103 |     title: "Database",
 104 |     skills: [
 105 |       "mongodb",
 106 |       "mysql",
 107 |       "postgresql",
 108 |       "redis",
 109 |       "oracle",
 110 |       "cassandra",
 111 |       "couchdb",
 112 |       "hive",
 113 |       "realm",
 114 |       "mariadb",
 115 |       "cockroachdb",
 116 |       "elasticsearch",
 117 |       "sqlite",
 118 |       "mssql",
 119 |     ],
 120 |   },
 121 | 
 122 |   data_visualization: {
 123 |     title: "Data Visualization",
 124 |     skills: ["d3js", "chartjs", "canvasjs", "kibana", "grafana"],
 125 |   },
 126 | 
 127 |   devops: {
 128 |     title: "Devops",
 129 |     skills: [
 130 |       "aws",
 131 |       "docker",
 132 |       "jenkins",
 133 |       "gcp",
 134 |       "kubernetes",
 135 |       "bash",
 136 |       "azure",
 137 |       "vagrant",
 138 |       "circleci",
 139 |       "travisci",
 140 |     ],
 141 |   },
 142 | 
 143 |   baas: {
 144 |     title: "Backend as a Service(BaaS)",
 145 |     skills: ["firebase", "appwrite", "amplify", "heroku"],
 146 |   },
 147 | 
 148 |   framework: {
 149 |     title: "Framework",
 150 |     skills: [
 151 |       "django",
 152 |       "dotnet",
 153 |       "electron",
 154 |       "symfony",
 155 |       "laravel",
 156 |       "codeigniter",
 157 |       "rails",
 158 |       "flask",
 159 |       "quasar",
 160 |     ],
 161 |   },
 162 | 
 163 |   testing: {
 164 |     title: "Testing",
 165 |     skills: [
 166 |       "cypress",
 167 |       "selenium",
 168 |       "jest",
 169 |       "mocha",
 170 |       "puppeteer",
 171 |       "karma",
 172 |       "jasmine",
 173 |     ],
 174 |   },
 175 | 
 176 |   software: {
 177 |     title: "Software",
 178 |     skills: [
 179 |       "illustrator",
 180 |       "photoshop",
 181 |       "xd",
 182 |       "figma",
 183 |       "blender",
 184 |       "sketch",
 185 |       "invision",
 186 |       "framer",
 187 |       "matlab",
 188 |       "postman",
 189 |     ],
 190 |   },
 191 | 
 192 |   static_site_generator: {
 193 |     title: "Static Site Generators",
 194 |     skills: [
 195 |       "gatsby",
 196 |       "gridsome",
 197 |       "hugo",
 198 |       "jekyll",
 199 |       "nextjs",
 200 |       "nuxtjs",
 201 |       "11ty",
 202 |       "scully",
 203 |       "sculpin",
 204 |       "sapper",
 205 |       "vuepress",
 206 |       "hexo",
 207 |       "middleman",
 208 |     ],
 209 |   },
 210 | 
 211 |   game_engines: {
 212 |     title: "Game Engines",
 213 |     skills: ["unity", "unreal"],
 214 |   },
 215 | 
 216 |   automation: {
 217 |     title: "Automation",
 218 |     skills: ["zapier", "ifttt"],
 219 |   },
 220 | 
 221 |   other: {
 222 |     title: "Other",
 223 |     skills: ["linux", "git", "arduino"],
 224 |   },
 225 | };
 226 | 
 227 | const icons = {
 228 |   vuejs:
 229 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/vuejs/vuejs-original-wordmark.svg",
 230 |   react:
 231 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original-wordmark.svg",
 232 |   angularjs:
 233 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/angularjs/angularjs-original-wordmark.svg",
 234 |   angular: "https://angular.io/assets/images/logos/angular/angular.svg",
 235 |   aws: "https://raw.githubusercontent.com/devicons/devicon/master/icons/amazonwebservices/amazonwebservices-original-wordmark.svg",
 236 |   android:
 237 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/android/android-original-wordmark.svg",
 238 |   arduino: "https://cdn.worldvectorlogo.com/logos/arduino-1.svg",
 239 |   backbonejs:
 240 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/backbonejs/backbonejs-original-wordmark.svg",
 241 |   bootstrap:
 242 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/bootstrap/bootstrap-plain-wordmark.svg",
 243 |   c: "https://raw.githubusercontent.com/devicons/devicon/master/icons/c/c-original.svg",
 244 |   canvasjs:
 245 |     "https://raw.githubusercontent.com/Hardik0307/Hardik0307/master/assets/canvasjs-charts.svg",
 246 |   coffeescript:
 247 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/coffeescript/coffeescript-original-wordmark.svg",
 248 |   codeigniter: "https://cdn.worldvectorlogo.com/logos/codeigniter.svg",
 249 |   cplusplus:
 250 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/cplusplus/cplusplus-original.svg",
 251 |   css3: "https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg",
 252 |   csharp:
 253 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/csharp/csharp-original.svg",
 254 |   d3js: "https://raw.githubusercontent.com/devicons/devicon/master/icons/d3js/d3js-original.svg",
 255 |   django: "https://cdn.worldvectorlogo.com/logos/django.svg",
 256 |   docker:
 257 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/docker/docker-original-wordmark.svg",
 258 |   dotnet:
 259 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/dot-net/dot-net-original-wordmark.svg",
 260 |   electron:
 261 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/electron/electron-original.svg",
 262 |   express:
 263 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/express/express-original-wordmark.svg",
 264 |   go: "https://raw.githubusercontent.com/devicons/devicon/master/icons/go/go-original.svg",
 265 |   graphql: "https://www.vectorlogo.zone/logos/graphql/graphql-icon.svg",
 266 |   gulp: "https://raw.githubusercontent.com/devicons/devicon/master/icons/gulp/gulp-plain.svg",
 267 |   html5:
 268 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg",
 269 |   hugo: "https://api.iconify.design/logos-hugo.svg",
 270 |   java: "https://raw.githubusercontent.com/devicons/devicon/master/icons/java/java-original.svg",
 271 |   javascript:
 272 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg",
 273 |   ionic: "https://upload.wikimedia.org/wikipedia/commons/d/d1/Ionic_Logo.svg",
 274 |   laravel:
 275 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/laravel/laravel-plain-wordmark.svg",
 276 |   meteor:
 277 |     "https://devicons.github.io/devicon/devicon.git/icons/meteor/meteor-original-wordmark.svg",
 278 |   mongodb:
 279 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/mongodb/mongodb-original-wordmark.svg",
 280 |   mysql:
 281 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/mysql/mysql-original-wordmark.svg",
 282 |   nestjs:
 283 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/nestjs/nestjs-plain.svg",
 284 |   nginx:
 285 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/nginx/nginx-original.svg",
 286 |   nodejs:
 287 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original-wordmark.svg",
 288 |   openresty: "https://openresty.org/images/logo.png",
 289 |   oracle:
 290 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/oracle/oracle-original.svg",
 291 |   photoshop:
 292 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/photoshop/photoshop-line.svg",
 293 |   xd: "https://cdn.worldvectorlogo.com/logos/adobe-xd.svg",
 294 |   php: "https://raw.githubusercontent.com/devicons/devicon/master/icons/php/php-original.svg",
 295 |   perl: "https://api.iconify.design/logos-perl.svg",
 296 |   postgresql:
 297 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/postgresql/postgresql-original-wordmark.svg",
 298 |   python:
 299 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-original.svg",
 300 |   rails:
 301 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/rails/rails-original-wordmark.svg",
 302 |   redis:
 303 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/redis/redis-original-wordmark.svg",
 304 |   ruby: "https://raw.githubusercontent.com/devicons/devicon/master/icons/ruby/ruby-original.svg",
 305 |   rust: "https://raw.githubusercontent.com/devicons/devicon/master/icons/rust/rust-plain.svg",
 306 |   sass: "https://raw.githubusercontent.com/devicons/devicon/master/icons/sass/sass-original.svg",
 307 |   scala:
 308 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/scala/scala-original.svg",
 309 |   solidworks: "https://cdn.worldvectorlogo.com/logos/solidworks.svg",
 310 |   symfony: "https://symfony.com/logos/symfony_black_03.svg",
 311 |   spring: "https://www.vectorlogo.zone/logos/springio/springio-icon.svg",
 312 |   swift:
 313 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/swift/swift-original.svg",
 314 |   typescript:
 315 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/typescript/typescript-original.svg",
 316 |   linux:
 317 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/linux/linux-original.svg",
 318 |   redux:
 319 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/redux/redux-original.svg",
 320 |   webpack:
 321 |     "https://raw.githubusercontent.com/devicons/devicon/d00d0969292a6569d45b06d3f350f463a0107b0d/icons/webpack/webpack-original-wordmark.svg",
 322 |   flutter: "https://www.vectorlogo.zone/logos/flutterio/flutterio-icon.svg",
 323 |   dart: "https://www.vectorlogo.zone/logos/dartlang/dartlang-icon.svg",
 324 |   kotlin: "https://www.vectorlogo.zone/logos/kotlinlang/kotlinlang-icon.svg",
 325 |   tensorflow:
 326 |     "https://www.vectorlogo.zone/logos/tensorflow/tensorflow-icon.svg",
 327 |   chartjs: "https://www.chartjs.org/media/logo-title.svg",
 328 |   jenkins: "https://www.vectorlogo.zone/logos/jenkins/jenkins-icon.svg",
 329 |   gcp: "https://www.vectorlogo.zone/logos/google_cloud/google_cloud-icon.svg",
 330 |   kubernetes:
 331 |     "https://www.vectorlogo.zone/logos/kubernetes/kubernetes-icon.svg",
 332 |   azure:
 333 |     "https://www.vectorlogo.zone/logos/microsoft_azure/microsoft_azure-icon.svg",
 334 |   git: "https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg",
 335 |   kafka: "https://www.vectorlogo.zone/logos/apache_kafka/apache_kafka-icon.svg",
 336 |   solr: "https://www.vectorlogo.zone/logos/apache_solr/apache_solr-icon.svg",
 337 |   cassandra:
 338 |     "https://www.vectorlogo.zone/logos/apache_cassandra/apache_cassandra-icon.svg",
 339 |   rabbitMQ: "https://www.vectorlogo.zone/logos/rabbitmq/rabbitmq-icon.svg",
 340 |   hadoop:
 341 |     "https://www.vectorlogo.zone/logos/apache_hadoop/apache_hadoop-icon.svg",
 342 |   bash: "https://www.vectorlogo.zone/logos/gnu_bash/gnu_bash-icon.svg",
 343 |   pytorch: "https://www.vectorlogo.zone/logos/pytorch/pytorch-icon.svg",
 344 |   pandas:
 345 |     "https://raw.githubusercontent.com/devicons/devicon/2ae2a900d2f041da66e950e4d48052658d850630/icons/pandas/pandas-original.svg",
 346 |   seaborn: "https://seaborn.pydata.org/_images/logo-mark-lightbg.svg",
 347 |   opencv: "https://www.vectorlogo.zone/logos/opencv/opencv-icon.svg",
 348 |   illustrator:
 349 |     "https://www.vectorlogo.zone/logos/adobe_illustrator/adobe_illustrator-icon.svg",
 350 |   figma: "https://www.vectorlogo.zone/logos/figma/figma-icon.svg",
 351 |   blender:
 352 |     "https://download.blender.org/branding/community/blender_community_badge_white.svg",
 353 |   babel: "https://www.vectorlogo.zone/logos/babeljs/babeljs-icon.svg",
 354 |   sketch: "https://www.vectorlogo.zone/logos/sketchapp/sketchapp-icon.svg",
 355 |   flask: "https://www.vectorlogo.zone/logos/pocoo_flask/pocoo_flask-icon.svg",
 356 |   nativescript:
 357 |     "https://raw.githubusercontent.com/detain/svg-logos/780f25886640cef088af994181646db2f6b1a3f8/svg/nativescript.svg",
 358 |   xamarin:
 359 |     "https://raw.githubusercontent.com/detain/svg-logos/780f25886640cef088af994181646db2f6b1a3f8/svg/xamarin.svg",
 360 |   vagrant: "https://www.vectorlogo.zone/logos/vagrantup/vagrantup-icon.svg",
 361 |   tailwind:
 362 |     "https://www.vectorlogo.zone/logos/tailwindcss/tailwindcss-icon.svg",
 363 |   materialize:
 364 |     "https://raw.githubusercontent.com/prplx/svg-logos/5585531d45d294869c4eaab4d7cf2e9c167710a9/svg/materialize.svg",
 365 |   invision:
 366 |     "https://www.vectorlogo.zone/logos/invisionapp/invisionapp-icon.svg",
 367 |   framer: "https://www.vectorlogo.zone/logos/framer/framer-icon.svg",
 368 |   bulma:
 369 |     "https://raw.githubusercontent.com/gilbarbara/logos/804dc257b59e144eaca5bc6ffd16949752c6f789/logos/bulma.svg",
 370 |   couchdb:
 371 |     "https://raw.githubusercontent.com/devicons/devicon/0d6c64dbbf311879f7d563bfc3ccf559f9ed111c/icons/couchdb/couchdb-original.svg",
 372 |   firebase: "https://www.vectorlogo.zone/logos/firebase/firebase-icon.svg",
 373 |   amplify: "https://docs.amplify.aws/assets/logo-dark.svg",
 374 |   hive: "https://www.vectorlogo.zone/logos/apache_hive/apache_hive-icon.svg",
 375 |   realm:
 376 |     "https://raw.githubusercontent.com/bestofjs/bestofjs-webui/8665e8c267a0215f3159df28b33c365198101df5/public/logos/realm.svg",
 377 |   gatsby: "https://www.vectorlogo.zone/logos/gatsbyjs/gatsbyjs-icon.svg",
 378 |   gridsome: "https://www.vectorlogo.zone/logos/gridsome/gridsome-icon.svg",
 379 |   nuxtjs: "https://www.vectorlogo.zone/logos/nuxtjs/nuxtjs-icon.svg",
 380 |   jekyll: "https://www.vectorlogo.zone/logos/jekyllrb/jekyllrb-icon.svg",
 381 |   nextjs: "https://cdn.worldvectorlogo.com/logos/nextjs-2.svg",
 382 |   reactnative: "https://reactnative.dev/img/header_logo.svg",
 383 |   mariadb: "https://www.vectorlogo.zone/logos/mariadb/mariadb-icon.svg",
 384 |   cockroachdb: "https://cdn.worldvectorlogo.com/logos/cockroachdb.svg",
 385 |   objectivec:
 386 |     "https://www.vectorlogo.zone/logos/apple_objectivec/apple_objectivec-icon.svg",
 387 |   clojure:
 388 |     "https://upload.wikimedia.org/wikipedia/commons/5/5d/Clojure_logo.svg",
 389 |   haskell:
 390 |     "https://upload.wikimedia.org/wikipedia/commons/1/1c/Haskell-Logo.svg",
 391 |   svelte: "https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg",
 392 |   vuetify: "https://bestofjs.org/logos/vuetify.svg",
 393 |   pug: "https://cdn.worldvectorlogo.com/logos/pug.svg",
 394 |   mocha: "https://www.vectorlogo.zone/logos/mochajs/mochajs-icon.svg",
 395 |   jest: "https://www.vectorlogo.zone/logos/jestjsio/jestjsio-icon.svg",
 396 |   cypress:
 397 |     "https://raw.githubusercontent.com/simple-icons/simple-icons/6e46ec1fc23b60c8fd0d2f2ff46db82e16dbd75f/icons/cypress.svg",
 398 |   selenium:
 399 |     "https://raw.githubusercontent.com/detain/svg-logos/780f25886640cef088af994181646db2f6b1a3f8/svg/selenium-logo.svg",
 400 |   puppeteer: "https://www.vectorlogo.zone/logos/pptrdev/pptrdev-official.svg",
 401 |   karma:
 402 |     "https://raw.githubusercontent.com/detain/svg-logos/780f25886640cef088af994181646db2f6b1a3f8/svg/karma.svg",
 403 |   jasmine: "https://www.vectorlogo.zone/logos/jasmine/jasmine-icon.svg",
 404 |   gtk: "https://upload.wikimedia.org/wikipedia/commons/7/71/GTK_logo.svg",
 405 |   qt: "https://upload.wikimedia.org/wikipedia/commons/0/0b/Qt_logo_2016.svg",
 406 |   wx_widgets:
 407 |     "https://upload.wikimedia.org/wikipedia/commons/b/bb/WxWidgets.svg",
 408 |   ember:
 409 |     "https://raw.githubusercontent.com/devicons/devicon/master/icons/ember/ember-original-wordmark.svg",
 410 |   scikit_learn:
 411 |     "https://upload.wikimedia.org/wikipedia/commons/0/05/Scikit_learn_logo_small.svg",
 412 |   quasar: "https://cdn.quasar.dev/logo/svg/quasar-logo.svg",
 413 |   kibana:
 414 |     "https://www.vectorlogo.zone/logos/elasticco_kibana/elasticco_kibana-icon.svg",
 415 |   grafana: "https://www.vectorlogo.zone/logos/grafana/grafana-icon.svg",
 416 |   elasticsearch: "https://www.vectorlogo.zone/logos/elastic/elastic-icon.svg",
 417 |   circleci: "https://www.vectorlogo.zone/logos/circleci/circleci-icon.svg",
 418 |   scully:
 419 |     "https://raw.githubusercontent.com/scullyio/scully/main/assets/logos/SVG/scullyio-icon.svg",
 420 |   "11ty":
 421 |     "https://gist.githubusercontent.com/vivek32ta/c7f7bf583c1fb1c58d89301ea40f37fd/raw/f4c85cce5790758286b8f155ef9a177710b995df/11ty.svg",
 422 |   sculpin:
 423 |     "https://gist.githubusercontent.com/vivek32ta/c7f7bf583c1fb1c58d89301ea40f37fd/raw/1782aef8672484698c0dd407f900c4a329ed5bc4/sculpin.svg",
 424 |   sapper:
 425 |     "https://raw.githubusercontent.com/bestofjs/bestofjs-webui/master/public/logos/sapper.svg",
 426 |   vuepress:
 427 |     "https://raw.githubusercontent.com/AliasIO/wappalyzer/master/src/drivers/webextension/images/icons/VuePress.svg",
 428 |   unity: "https://www.vectorlogo.zone/logos/unity3d/unity3d-icon.svg",
 429 |   unreal:
 430 |     "https://raw.githubusercontent.com/kenangundogan/fontisto/036b7eca71aab1bef8e6a0518f7329f13ed62f6b/icons/svg/brand/unreal-engine.svg",
 431 |   elixir: "https://www.vectorlogo.zone/logos/elixir-lang/elixir-lang-icon.svg",
 432 |   heroku: "https://www.vectorlogo.zone/logos/heroku/heroku-icon.svg",
 433 |   appwrite: "https://www.vectorlogo.zone/logos/appwriteio/appwriteio-icon.svg",
 434 |   hexo: "https://www.vectorlogo.zone/logos/hexoio/hexoio-icon.svg",
 435 |   travisci: "https://www.vectorlogo.zone/logos/travis-ci/travis-ci-icon.svg",
 436 |   apachecordova:
 437 |     "https://www.vectorlogo.zone/logos/apache_cordova/apache_cordova-icon.svg",
 438 |   zapier: "https://www.vectorlogo.zone/logos/zapier/zapier-icon.svg",
 439 |   ifttt: "https://www.vectorlogo.zone/logos/ifttt/ifttt-ar21.svg",
 440 |   postman: "https://www.vectorlogo.zone/logos/getpostman/getpostman-icon.svg",
 441 |   erlang: "https://www.vectorlogo.zone/logos/erlang/erlang-official.svg",
 442 |   nim: "https://www.vectorlogo.zone/logos/nim-lang/nim-lang-icon.svg",
 443 |   sqlite: "https://www.vectorlogo.zone/logos/sqlite/sqlite-icon.svg",
 444 |   mssql: "https://www.svgrepo.com/show/303229/microsoft-sql-server-logo.svg",
 445 |   middleman:
 446 |     "https://raw.githubusercontent.com/leungwensen/svg-icon/b84b3f3a3da329b7c1d02346865f8e98beb05413/dist/svg/logos/middleman.svg",
 447 |   matlab: "https://upload.wikimedia.org/wikipedia/commons/2/21/Matlab_Logo.png",
 448 | };
 449 | 
 450 | const skillWebsites = {
 451 |   arduino: "https://www.arduino.cc/",
 452 |   solidworks: "https://www.solidworks.com/",
 453 |   vuejs: "https://vuejs.org/",
 454 |   react: "https://reactjs.org/",
 455 |   angularjs: "https://angular.io",
 456 |   angular: "https://angular.io",
 457 |   aws: "https://aws.amazon.com",
 458 |   android: "https://developer.android.com",
 459 |   backbonejs: "https://backbonejs.org",
 460 |   bootstrap: "https://getbootstrap.com",
 461 |   c: "https://www.cprogramming.com/",
 462 |   canvasjs: "https://canvasjs.com",
 463 |   coffeescript: "https://offeescript.org",
 464 |   codeigniter: "https://codeigniter.com",
 465 |   cplusplus: "https://www.w3schools.com/cpp/",
 466 |   css3: "https://www.w3schools.com/css/",
 467 |   csharp: "https://www.w3schools.com/cs/",
 468 |   d3js: "https://d3js.org/",
 469 |   django: "https://www.djangoproject.com/",
 470 |   docker: "https://www.docker.com/",
 471 |   dotnet: "https://dotnet.microsoft.com/",
 472 |   electron: "https://www.electronjs.org",
 473 |   express: "https://expressjs.com",
 474 |   go: "https://golang.org",
 475 |   graphql: "https://graphql.org",
 476 |   gulp: "https://gulpjs.com",
 477 |   html5: "https://www.w3.org/html/",
 478 |   hugo: "https://gohugo.io/",
 479 |   java: "https://www.java.com",
 480 |   javascript: "https://developer.mozilla.org/en-US/docs/Web/JavaScript",
 481 |   ionic: "https://ionicframework.com",
 482 |   laravel: "https://laravel.com/",
 483 |   matlab: "https://www.mathworks.com/",
 484 |   meteor: "https://www.meteor.com/",
 485 |   mongodb: "https://www.mongodb.com/",
 486 |   mysql: "https://www.mysql.com/",
 487 |   nestjs: "https://nestjs.com/",
 488 |   nginx: "https://www.nginx.com",
 489 |   nodejs: "https://nodejs.org",
 490 |   openresty: "https://openresty.org/",
 491 |   oracle: "https://www.oracle.com/",
 492 |   photoshop: "https://www.photoshop.com/en",
 493 |   xd: "https://www.adobe.com/products/xd.html",
 494 |   php: "https://www.php.net",
 495 |   perl: "https://www.perl.org/",
 496 |   postgresql: "https://www.postgresql.org",
 497 |   python: "https://www.python.org",
 498 |   rails: "https://rubyonrails.org",
 499 |   redis: "https://redis.io",
 500 |   ruby: "https://www.ruby-lang.org/en/",
 501 |   rust: "https://www.rust-lang.org",
 502 |   sass: "https://sass-lang.com",
 503 |   scala: "https://www.scala-lang.org",
 504 |   symfony: "https://symfony.com",
 505 |   spring: "https://spring.io/",
 506 |   swift: "https://developer.apple.com/swift/",
 507 |   typescript: "https://www.typescriptlang.org/",
 508 |   linux: "https://www.linux.org/",
 509 |   redux: "https://redux.js.org",
 510 |   webpack: "https://webpack.js.org",
 511 |   flutter: "https://flutter.dev",
 512 |   dart: "https://dart.dev",
 513 |   kotlin: "https://kotlinlang.org",
 514 |   tensorflow: "https://www.tensorflow.org",
 515 |   chartjs: "https://www.chartjs.org",
 516 |   jenkins: "https://www.jenkins.io",
 517 |   gcp: "https://cloud.google.com",
 518 |   kubernetes: "https://kubernetes.io",
 519 |   azure: "https://azure.microsoft.com/en-in/",
 520 |   git: "https://git-scm.com/",
 521 |   kafka: "https://kafka.apache.org/",
 522 |   solr: "https://lucene.apache.org/solr/",
 523 |   cassandra: "https://cassandra.apache.org/",
 524 |   rabbitMQ: "https://www.rabbitmq.com",
 525 |   hadoop: "https://hadoop.apache.org/",
 526 |   bash: "https://www.gnu.org/software/bash/",
 527 |   pytorch: "https://pytorch.org/",
 528 |   pandas: "https://pandas.pydata.org/",
 529 |   seaborn: "https://seaborn.pydata.org/",
 530 |   opencv: "https://opencv.org/",
 531 |   illustrator: "https://www.adobe.com/in/products/illustrator.html",
 532 |   figma: "https://www.figma.com/",
 533 |   blender: "https://www.blender.org/",
 534 |   babel: "https://babeljs.io/",
 535 |   sketch: "https://www.sketch.com/",
 536 |   flask: "https://flask.palletsprojects.com/",
 537 |   nativescript: "https://nativescript.org/",
 538 |   xamarin: "https://dotnet.microsoft.com/apps/xamarin",
 539 |   vagrant: "https://www.vagrantup.com/",
 540 |   tailwind: "https://tailwindcss.com/",
 541 |   materialize: "https://materializecss.com/",
 542 |   invision: "https://www.invisionapp.com/",
 543 |   framer: "https://www.framer.com/",
 544 |   bulma: "https://bulma.io/",
 545 |   couchdb: "https://couchdb.apache.org/",
 546 |   firebase: "https://firebase.google.com/",
 547 |   amplify: "https://aws.amazon.com/amplify/",
 548 |   hive: "https://hive.apache.org/",
 549 |   realm: "https://realm.io/",
 550 |   gatsby: "https://www.gatsbyjs.com/",
 551 |   gridsome: "https://gridsome.org/",
 552 |   nuxtjs: "https://nuxtjs.org/",
 553 |   jekyll: "https://jekyllrb.com/",
 554 |   nextjs: "https://nextjs.org/",
 555 |   reactnative: "https://reactnative.dev/",
 556 |   mariadb: "https://mariadb.org/",
 557 |   cockroachdb: "https://www.cockroachlabs.com/product/cockroachdb/",
 558 |   objectivec:
 559 |     "https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html",
 560 |   clojure: "https://clojure.org/",
 561 |   haskell: "https://www.haskell.org/",
 562 |   svelte: "https://svelte.dev",
 563 |   vuetify: "https://vuetifyjs.com/en/",
 564 |   pug: "https://pugjs.org",
 565 |   mocha: "https://mochajs.org",
 566 |   jest: "https://jestjs.io",
 567 |   cypress: "https://www.cypress.io",
 568 |   selenium: "https://www.selenium.dev",
 569 |   puppeteer: "https://github.com/puppeteer/puppeteer",
 570 |   karma: "https://karma-runner.github.io/latest/index.html",
 571 |   jasmine: "https://jasmine.github.io/",
 572 |   gtk: "https://www.gtk.org/",
 573 |   qt: "https://www.qt.io/",
 574 |   wx_widgets: "https://www.wxwidgets.org/",
 575 |   ember: "https://emberjs.com/",
 576 |   scikit_learn: "https://scikit-learn.org/",
 577 |   quasar: "https://quasar.dev/",
 578 |   kibana: "https://www.elastic.co/kibana",
 579 |   grafana: "https://grafana.com",
 580 |   elasticsearch: "https://www.elastic.co",
 581 |   circleci: "https://circleci.com",
 582 |   scully: "https://scully.io/",
 583 |   sculpin: "https://sculpin.io/",
 584 |   "11ty": "https://www.11ty.dev/",
 585 |   sapper: "https://sapper.svelte.dev/",
 586 |   vuepress: "https://vuepress.vuejs.org/",
 587 |   unity: "https://unity.com/",
 588 |   unreal: "https://unrealengine.com/",
 589 |   hexo: "hexo.io/",
 590 |   heroku: "https://heroku.com",
 591 |   appwrite: "https://appwrite.io",
 592 |   zapier: "https://zapier.com",
 593 |   ifttt: "https://ifttt.com/",
 594 |   elixir: "https://elixir-lang.org",
 595 |   travisci: "https://travis-ci.org",
 596 |   apachecordova: "https://cordova.apache.org/",
 597 |   sqlite: "https://www.sqlite.org/",
 598 |   mssql: "https://www.microsoft.com/en-us/sql-server",
 599 |   postman: "https://postman.com",
 600 |   erlang: "https://www.erlang.org/",
 601 |   nim: "https://nim-lang.org/",
 602 |   middleman: "https://middlemanapp.com/",
 603 | };
 604 | 
 605 | const initialSkillState = {};
 606 | 
 607 | const skillsArray = Object.keys(categorizedSkills).map(
 608 |   (key) => categorizedSkills[key].skills
 609 | );
 610 | const skills = [].concat.apply([], skillsArray).sort();
 611 | 
 612 | skills.forEach((skill) => {
 613 |   if (skill === "c" || skill === "cplusplus") {
 614 |     initialSkillState[skill] = true;
 615 |   } else {
 616 |     initialSkillState[skill] = false;
 617 |   }
 618 | });
 619 | 
 620 | const categories = Object.keys(categorizedSkills);
 621 | 
 622 | export {
 623 |   initialSkillState,
 624 |   icons,
 625 |   skills,
 626 |   skillWebsites,
 627 |   categorizedSkills,
 628 |   categories,
 629 | };
 630 | export const socialConst = {
 631 |   github: "technicalranjitofficial",
 632 |   dev: "",
 633 |   linkedin: "",
 634 |   codepen: "",
 635 |   stackoverflow: "",
 636 |   kaggle: "",
 637 |   codesandbox: "",
 638 |   fb: "",
 639 |   instagram: "",
 640 |   twitter: "",
 641 |   dribbble: "",
 642 |   behance: "",
 643 |   medium: "",
 644 |   youtube: "",
 645 |   codechef: "",
 646 |   hackerrank: "",
 647 |   codeforces: "",
 648 |   leetcode: "",
 649 |   topcoder: "",
 650 |   hackerearth: "",
 651 |   geeks_for_geeks: "",
 652 |   discord: "",
 653 |   rssurl: "",
 654 | };
 655 | 
 656 | export const socialName = [
 657 |   "github",
 658 |   "dev",
 659 |   "linkedin",
 660 |   "codepen",
 661 |   "stackoverflow",
 662 |   "kaggle",
 663 |   "codesandbox",
 664 |   "fb",
 665 |   "instagram",
 666 |   "twitter",
 667 |   "dribbble",
 668 |   "behance",
 669 |   "medium",
 670 |   "youtube",
 671 |   "codechef",
 672 |   "hackerrank",
 673 |   "codeforces",
 674 |   "leetcode",
 675 |   "topcoder",
 676 |   "hackerearth",
 677 |   "geeks_for_geeks",
 678 |   "discord",
 679 |   "rssurl",
 680 | ];
 681 | 
 682 | export const socialIcons = {
 683 |   github: "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/github.svg",
 684 |   dev: "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/devto.svg",
 685 |   linkedin:
 686 |     "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/linked-in-alt.svg",
 687 |   codepen: "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/codepen.svg",
 688 |   stackoverflow:
 689 |     "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/stack-overflow.svg",
 690 |   kaggle: "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/kaggle.svg",
 691 |   codesandbox:
 692 |     "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/codesandbox.svg",
 693 |   fb: "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/facebook.svg",
 694 |   instagram:
 695 |     "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/instagram.svg",
 696 |   twitter: "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/twitter.svg",
 697 |   dribbble:
 698 |     "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/dribbble.svg",
 699 |   behance: "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/behance.svg",
 700 |   medium: "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/medium.svg",
 701 |   youtube: "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/youtube.svg",
 702 |   codechef:
 703 |     "https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codechef.svg",
 704 |   hackerrank:
 705 |     "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/hackerrank.svg",
 706 |   codeforces:
 707 |     "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/codeforces.svg",
 708 |   leetcode:
 709 |     "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/leet-code.svg",
 710 |   topcoder:
 711 |     "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/topcoder.svg",
 712 |   hackerearth:
 713 |     "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/hackerearth.svg",
 714 |   geeks_for_geeks:
 715 |     "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/geeks-for-geeks.svg",
 716 |   discord: "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/discord.svg",
 717 |   rssurl: "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/rss.svg",
 718 | }
 719 | 
 720 | 
 721 | export const socialUrl = {
 722 |   github: "https://github.com/",
 723 |   dev: "https://dev.to/",
 724 |   linkedin: "https://linkedin.com/in/",
 725 |   codepen: "https://codepen.io/",
 726 |   stackoverflow: "https://stackoverflow.com/users/",
 727 |   kaggle: "https://kaggle.com/",
 728 |   codesandbox: "https://codesandbox.com/",
 729 |   fb: "https://fb.com/",
 730 |   instagram: "https://instagram.com/",
 731 |   twitter: "https://twitter.com/",
 732 |   dribbble: "https://dribbble.com/",
 733 |   behance: "https://www.behance.net/",
 734 |   medium: "https://medium.com/",
 735 |   youtube: "https://www.youtube.com/c/",
 736 |   codechef: "https://www.codechef.com/users/",
 737 |   hackerrank: "https://www.hackerrank.com/",
 738 |   codeforces: "https://codeforces.com/profile/",
 739 |   leetcode: "https://www.leetcode.com/",
 740 |   topcoder: "https://www.topcoder.com/members/",
 741 |   hackerearth: "https://www.hackerearth.com/",
 742 |   geeks_for_geeks: "https://auth.geeksforgeeks.org/user/",
 743 |   discord: "https://discord.gg/",
 744 |   rssurl: "/",
 745 | };
 746 | 
 747 | export const initialAddon = {
 748 |   visitorBadge: true,
 749 |   twiterBadge: false,
 750 |   trophy: true,
 751 |   githubProfileStats: true,
 752 |   showMemes: true,
 753 |   showStreakStats: true,
 754 |   showMostLanguageUsed: true,
 755 | };
 756 | 
 757 | export const initialTheme = "origin";
 758 | 
 759 | export const gitStatsInitialThemes = "radical";
 760 | 
 761 | 
 762 | export const locale = [
 763 |   {
 764 |     name: "English (en)",
 765 |     locale: "en",
 766 |   },
 767 |   {
 768 |     name: "(ar) العربية",
 769 |     locale: "ar",
 770 |   },
 771 |   {
 772 |     name: "български(bg)",
 773 |     locale: "bg",
 774 |   },
 775 |   {
 776 |     name: "বাংলা (bn)",
 777 |     locale: "bn",
 778 |   },
 779 |   {
 780 |     name: "dansk (da)",
 781 |     locale: "da",
 782 |   },
 783 |   {
 784 |     name: "Deutsch (de)",
 785 |     locale: "de",
 786 |   },
 787 |   {
 788 |     name: "español (es)",
 789 |     locale: "en",
 790 |   },
 791 |   {
 792 |     name: "(fa) فارسی",
 793 |     locale: "fa",
 794 |   },
 795 |   {
 796 |     name: "Français (fr)",
 797 |     locale: "fr",
 798 |   },{
 799 |     name: "(he) עברית",
 800 |     locale: "he",
 801 |   },{
 802 |     name: "हिन्दी (hi)",
 803 |     locale: "hi",
 804 |   },{
 805 |     name: "Haitian Creole (ht)",
 806 |     locale: "ht",
 807 |   },{
 808 |     name: "Indonesia (id)",
 809 |     locale: "id",
 810 |   },{
 811 |     name: "italiano (it)",
 812 |     locale: "it",
 813 |   },{
 814 |     name: "日本語 (a)",
 815 |     locale: "a",
 816 |   },{
 817 |     name: "ಕನಡ (kn)",
 818 |     locale: "kn",
 819 |   },{
 820 |     name: "한국어 (ko)",
 821 |     locale: "ko",
 822 |   },{
 823 |     name: "मराठी (mr)",
 824 |     locale: "mr",
 825 |   },{
 826 |     name: "(ar) العربية",
 827 |     locale: "ar",
 828 |   },{
 829 |     name: "日本語 (ja)",
 830 |     locale: "ja",
 831 |   },{
 832 |     name: "ಕನ್ನಡ (kn)",
 833 |     locale: "kn",
 834 |   },{
 835 |     name: "한국어 (ko)",
 836 |     locale: "ko",
 837 |   },{
 838 |     name: "polski (pl)",
 839 |     locale: "pl",
 840 |   },{
 841 |     name: "(ps) پښتو",
 842 |     locale: "ps",
 843 |   },{
 844 |     name: "português (Brasil) (pt_BR)",
 845 |     locale: "pt_BR",
 846 |   },{
 847 |     name: "русский (ru)",
 848 |     locale: "ru",
 849 |   },{
 850 |     name: "संस्कृत भाषा (sa)",
 851 |     locale: "sa",
 852 |   },{
 853 |     name: "தமிழ் (ta)",
 854 |     locale: "ta",
 855 |   },{
 856 |     name: "Türkçe (tr)",
 857 |     locale: "tr",
 858 |   },{
 859 |     name: "українська (uk)",
 860 |     locale: "uk",
 861 |   },{
 862 |     name: "Èdè Yorùbá (yo)",
 863 |     locale: "yo",
 864 |   }
 865 | ]
 866 | 
 867 | export const locale2 = [
 868 |   {
 869 |     name: "English (en)",
 870 |     locale: "en",
 871 |   },
 872 |   {
 873 |     name: "(ar) العربية",
 874 |     locale: "ar",
 875 |   },
 876 |   
 877 |   {
 878 |     name: "বাংলা (bn)",
 879 |     locale: "bn",
 880 |   },
 881 |   
 882 |   {
 883 |     name: "Deutsch (de)",
 884 |     locale: "de",
 885 |   },
 886 |   {
 887 |     name: "español (es)",
 888 |     locale: "en",
 889 |   },
 890 |   {
 891 |     name: "Français (fr)",
 892 |     locale: "fr",
 893 |   },{
 894 |     name: "Indonesia (id)",
 895 |     locale: "id",
 896 |   },{
 897 |     name: "italiano (it)",
 898 |     locale: "it",
 899 |   },{
 900 |     name: "日本語 (ja)",
 901 |     locale: "ja",
 902 |   },{
 903 |     name: "polski (pl)",
 904 |     locale: "pl",
 905 |   },{
 906 |     name: "தமிழ் (ta)",
 907 |     locale: "ta",
 908 |   },{
 909 |     name: "Türkçe (tr)",
 910 |     locale: "tr",
 911 |   }
 912 | ]
 913 | 
 914 | 
 915 | export const ConstTrophyData = {
 916 |   themes: [
 917 |     "flat",
 918 |     "onedark",
 919 |     "gruvbox",
 920 |     "dracula",
 921 |     "monokai",
 922 |     "chalk",
 923 |     "nord",
 924 |     "alduin",
 925 |     "darkhub",
 926 |     "juicyfresh",
 927 |     "buddhism",
 928 |     "oldie",
 929 |     "radical",
 930 |     "onestar",
 931 |     "discord",
 932 |     "algolia",
 933 |     "gitdimmed",
 934 |     "tokyonight",
 935 |     "matrix",
 936 |     "apprentice",
 937 |     "dark_dimmed",
 938 |     "dark_lover",
 939 |   ],
 940 | 
 941 |   no_frames: false,
 942 |   column: [3, 4, 5, 6],
 943 |   background_transparent: false,
 944 | };
 945 | 
 946 | export const initialTrophyData = {
 947 |   theme: "matrix",
 948 |   no_frames: false,
 949 |   column: 6,
 950 |   background_transparent: false,
 951 | };
 952 | 
 953 | export const ConstStreaksData = {
 954 |   themes: [
 955 |     "default",
 956 |     "dark",
 957 |     "highcontrast",
 958 |     "radical",
 959 |     "merko",
 960 |     "gruvbox",
 961 |     "gruvbox_duo",
 962 |     "tokyonight",
 963 |     "tokyonight_duo",
 964 |     "onedark",
 965 |     "onedark_duo",
 966 |     "cobalt",
 967 |     "synthwave",
 968 |     "dracula",
 969 |     "prussian",
 970 |     "monokai",
 971 |     "vue",
 972 |     "vue-dark",
 973 |     "shades-of-purple",
 974 |     "nightowl",
 975 |     "buefy",
 976 |     "buefy-dark",
 977 |     "blue-green",
 978 |     "algolia",
 979 |     "great-gatsby",
 980 |     "darcula",
 981 |     "bear",
 982 |     "solarized-dark",
 983 |     "solarized-light",
 984 |     "chartreuse-dark",
 985 |     "nord",
 986 |     "gotham",
 987 |     "material-palenight",
 988 |     "graywhite",
 989 |     "vision-friendly-dark",
 990 |     "ayu-mirage",
 991 |     "midnight-purple",
 992 |     "calm",
 993 |     "flag-india",
 994 |     "omni",
 995 |     "react",
 996 |     "jolly",
 997 |     "maroongold",
 998 |     "yeblu",
 999 |     "blueberry",
1000 |     "blueberry_duo",
1001 |     "slateorange",
1002 |     "kacho_ga",
1003 |     "ads-juicy-fresh",
1004 |     "black-ice",
1005 |     "soft-green",
1006 |     "blood",
1007 |     "blood-dark",
1008 |     "green_nur",
1009 |     "neon-dark",
1010 |     "neon-palenight",
1011 |     "dark-smoky",
1012 |     "monokai-metallian",
1013 |     "city-lights",
1014 |     "blux",
1015 |     "earth",
1016 |     "deepBlue",
1017 |     "holi-theme",
1018 |     "ayu-light",
1019 |     "javascript",
1020 |     "javascript-dark",
1021 |     "noctis-minimus",
1022 |     "github-dark",
1023 |     "github-dark-blue",
1024 |     "github-light",
1025 |     "elegant",
1026 |     "leafy",
1027 |     "navy-gear",
1028 |     "hacker",
1029 |     "garden",
1030 |     "github-green-purple",
1031 |     "icegray",
1032 |     "neon_blurange",
1033 |     "yellowdark",
1034 |     "java-dark",
1035 |     "android-dark",
1036 |     "deuteranopia-friendly-theme",
1037 |     "windows-dark",
1038 |     "git-dark",
1039 |     "python-dark",
1040 |     "sea",
1041 |     "sea-dark",
1042 |     "violet-dark",
1043 |     "horizon",
1044 |     "material",
1045 |     "modern-lilac",
1046 |     "modern-lilac2",
1047 |     "halloween",
1048 |     "violet-punch",
1049 |     "submarine-flowers",
1050 |   ],
1051 | 
1052 |   hide_border: false,
1053 |   locale: locale,
1054 | 
1055 |   mode:["weekly","daily"]
1056 | };
1057 | 
1058 | export const initialStreaksData = {
1059 |   theme: "dark",
1060 |   hide_border: false,
1061 |   locale: {name:"English (en)",locale:"en"},
1062 |   mode: "weekly",
1063 | };
1064 | 
1065 | 
1066 | export const ConstGitStats = {
1067 |   themes:[
1068 |     "dark",
1069 |   "radical",
1070 |   "merko",
1071 |   "gruvbox",
1072 |   "tokyonight",
1073 |   "onedark",
1074 |   "cobalt",
1075 |   "synthwave",
1076 |   "highcontrast",
1077 |   "dracula",
1078 |   ],
1079 |   hide_border:false,
1080 |   locale:locale2
1081 | }
1082 | 
1083 | export const initialGitStats = {
1084 |   theme: "dark",
1085 |   hide_border: false,
1086 |   locale: {name:"English (en)",locale:"en"},
1087 |  
1088 | };
1089 | 
1090 | export const ConstTopLanguageStats = {
1091 |   themes:[
1092 |     "dark",
1093 |   "radical",
1094 |   "merko",
1095 |   "gruvbox",
1096 |   "tokyonight",
1097 |   "onedark",
1098 |   "cobalt",
1099 |   "synthwave",
1100 |   "highcontrast",
1101 |   "dracula",
1102 |   ],
1103 |   hide_border:false,
1104 |   locale:locale2
1105 | }
1106 | 
1107 | export const initialTopLangStats = {
1108 |   theme: "dark",
1109 |   hide_border: false,
1110 |  
1111 | };
1112 | 
1113 | 
1114 | export const initialTemplateData = {
1115 |   trophy: {
1116 |     data: ConstTrophyData,
1117 |   },
1118 |   gitstats: {
1119 |     data:ConstGitStats,
1120 |   },
1121 |   streakstats: {
1122 |     data: ConstStreaksData,
1123 |   },
1124 |   toplanguage: {
1125 |     data: ConstTopLanguageStats,
1126 |   },
1127 | };
1128 | 
1129 | 
1130 | export const devSocialTitle=['instagram','linkedin','github'];
1131 | 
1132 | export const devSocial ={
1133 |   instagram:{
1134 |     url:"https://www.instagram.com/official_ranjitdas",
1135 |     img:"https://raw.githubusercontent.com/edent/SuperTinyIcons/master/images/svg/instagram.svg",
1136 |   },
1137 |   linkedin:{
1138 |     url:"https://www.linkedin.com/in/technicalranjit",
1139 |     img:"https://raw.githubusercontent.com/edent/SuperTinyIcons/master/images/svg/linkedin.svg",
1140 |   },
1141 |   github:{
1142 |     url:"https://github.com/Technicalranjitofficial",
1143 |     img:"https://raw.githubusercontent.com/edent/SuperTinyIcons/master/images/png/github.png",
1144 |   }
1145 | }


--------------------------------------------------------------------------------