Fix lint errors for src/components/AboutPage/SkillSet.tsx

This commit is contained in:
zeon-neon[bot] 2024-06-29 04:31:10 +00:00 committed by GitHub
parent 18b1a85726
commit c9792b807d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -1,114 +1,112 @@
import { json } from 'stream/consumers' import { json } from 'stream/consumers'
import Icon from '../static/Icons' import Icon from '../static/Icons'
import MIcon from '@mdi/react'; import MIcon from '@mdi/react'
import { bash, bun, coffeescript, cpp, csharp, docker, graphql, html, javascriptReact, next, npm, prisma, puppeteer, python, sass, tailwind, yarn, ejs, pnpm, vscode, git, figma, robots, vercel, visualStudio } from '../static/icons_list' import { bash, bun, coffeescript, cpp, csharp, docker, graphql, html, javascriptReact, next, npm, prisma, puppeteer, python, sass, tailwind, yarn, ejs, pnpm, vscode, git, figma, robots, vercel, visualStudio } from '../static/icons_list'
import './skillset.css' import './skillset.css'
import { SiKalilinux, SiPostman } from 'react-icons/si' import { SiKalilinux, SiPostman } from 'react-icons/si'
import { mdiArch, mdiConsole, mdiLinux, mdiUbuntu } from '@mdi/js' import { mdiArch, mdiConsole, mdiLinux, mdiUbuntu } from '@mdi/js'
export function SkillSet () { export function SkillSet () {
return<div className='items-center text-center place-items-center'> return <div className='items-center text-center place-items-center'>
<h1 className='project-heading'> <h1 className='project-heading'>
Professional <strong className='texthighlight'>Skillset </strong> Professional <strong className='texthighlight'>Skillset </strong>
</h1> </h1>
<div className='flex inline-flex grid ' > <div className='flex inline-flex grid ' >
<div style={{ }} className='flex-1 max-w-5xl text-center min-w-sm ms-auto me-auto'> <div style={{ }} className='flex-1 max-w-5xl text-center min-w-sm ms-auto me-auto'>
<div className='inline-flex'> <div className='inline-flex'>
<div className={"tech-icons inline-flex"}><Icon icon='css' className='w-40' width={2000} height={2000}/></div> <div className={'tech-icons inline-flex'}><Icon icon='css' className='w-40' width={2000} height={2000} /></div>
<div className={"tech-icons inline-flex"}><Icon icon='javascript' className='w-40' /></div> <div className={'tech-icons inline-flex'}><Icon icon='javascript' className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon='typescript' className='w-40' /></div> <div className={'tech-icons inline-flex'}><Icon icon='typescript' className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={next} className='w-40' /></div> <div className={'tech-icons inline-flex'}><Icon icon={next} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={npm} className='w-40' /></div> <div className={'tech-icons inline-flex'}><Icon icon={npm} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={prisma} className='w-40' /></div> <div className={'tech-icons inline-flex'}><Icon icon={prisma} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={puppeteer} className='w-40' /></div> <div className={'tech-icons inline-flex'}><Icon icon={puppeteer} className='w-40' /></div>
</div> </div>
<div className='inline-flex'> <div className='inline-flex'>
<div className={"tech-icons inline-flex"}><Icon icon={sass} className='w-40' /></div> <div className={'tech-icons inline-flex'}><Icon icon={sass} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={tailwind} className='w-40' /></div> <div className={'tech-icons inline-flex'}><Icon icon={tailwind} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={bash} className='w-40' /></div> <div className={'tech-icons inline-flex'}><Icon icon={bash} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={bun} className='w-40' /></div> <div className={'tech-icons inline-flex'}><Icon icon={bun} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={cpp} className='w-40' /></div> <div className={'tech-icons inline-flex'}><Icon icon={cpp} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={docker} className='w-40' /></div> <div className={'tech-icons inline-flex'}><Icon icon={docker} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={graphql} className='w-40' /></div> <div className={'tech-icons inline-flex'}><Icon icon={graphql} className='w-40' /></div>
</div> </div>
<div className='inline-flex'> <div className='inline-flex'>
<div className={"tech-icons inline-flex"}><Icon icon={html} className='w-40' /></div> <div className={'tech-icons inline-flex'}><Icon icon={html} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={javascriptReact} className='w-40' /></div> <div className={'tech-icons inline-flex'}><Icon icon={javascriptReact} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={python} className='w-40' /></div> <div className={'tech-icons inline-flex'}><Icon icon={python} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={csharp} className='w-40' /></div> <div className={'tech-icons inline-flex'}><Icon icon={csharp} className='w-40' /></div>
{/* for the sake of css coffeescript is out! */} {/* for the sake of css coffeescript is out! */}
{/* <div className={"tech-icons inline-flex"}><Icon icon={coffeescript} className='w-40' /></div> */} {/* <div className={"tech-icons inline-flex"}><Icon icon={coffeescript} className='w-40' /></div> */}
<div className={"tech-icons inline-flex"}><Icon icon={yarn} className='w-40' /></div> <div className={'tech-icons inline-flex'}><Icon icon={yarn} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={ejs} className='w-40' /></div> <div className={'tech-icons inline-flex'}><Icon icon={ejs} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={pnpm} className='w-40' /></div> <div className={'tech-icons inline-flex'}><Icon icon={pnpm} className='w-40' /></div>
</div> </div>
{/* {/*
*/} */}
</div> </div>
{/* <br /> {/* <br />
<div style={{ justifyContent: 'center', textAlign: 'center', alignItems: "center", marginLeft: '50px', paddingBottom: '50px' }} className='inline-flex'> <div style={{ justifyContent: 'center', textAlign: 'center', alignItems: "center", marginLeft: '50px', paddingBottom: '50px' }} className='inline-flex'>
<div className={"tech-icons inline-flex"}><Icon icon={tailwind} className='w-40' /></div> <div className={"tech-icons inline-flex"}><Icon icon={tailwind} className='w-40' /></div>
</div> */} </div> */}
</div> </div>
</div> </div>
} }
export function TechStack () { export function TechStack () {
return<div className='items-center text-center place-items-center'> return <div className='items-center text-center place-items-center'>
<h1 className='project-heading'> <h1 className='project-heading'>
<strong className='text-highlight'>Tools</strong> I use <strong className='text-highlight'>Tools</strong> I use
</h1> </h1>
<div className='flex inline-flex grid' > <div className='flex inline-flex grid' >
<div style={{ }} className='content-center flex-1 max-w-5xl ms-auto me-auto min-w-sm'> <div style={{ }} className='content-center flex-1 max-w-5xl ms-auto me-auto min-w-sm'>
<div className='inline-flex max-w-5xl min-w-sm'> <div className='inline-flex max-w-5xl min-w-sm'>
<div className={"tech-icons inline-flex"}><Icon icon={vscode} className='w-40' width={2000} height={2000}/></div> <div className={'tech-icons inline-flex'}><Icon icon={vscode} className='w-40' width={2000} height={2000} /></div>
<div className={"tech-icons inline-flex"}><Icon icon={git} className='w-40' width={2000} height={2000}/></div> <div className={'tech-icons inline-flex'}><Icon icon={git} className='w-40' width={2000} height={2000} /></div>
<div className={"tech-icons inline-flex"}><Icon icon={docker} className='w-40' width={2000} height={2000}/></div> <div className={'tech-icons inline-flex'}><Icon icon={docker} className='w-40' width={2000} height={2000} /></div>
<div className={"tech-icons inline-flex"}><Icon icon={figma} className='w-40' width={2000} height={2000}/></div> <div className={'tech-icons inline-flex'}><Icon icon={figma} className='w-40' width={2000} height={2000} /></div>
<div className={"tech-icons inline-flex"}><Icon icon={robots} className='w-40' width={2000} height={2000}/></div> <div className={'tech-icons inline-flex'}><Icon icon={robots} className='w-40' width={2000} height={2000} /></div>
<div className={"tech-icons inline-flex"}><Icon icon={vercel} className='w-40' width={2000} height={2000}/></div> <div className={'tech-icons inline-flex'}><Icon icon={vercel} className='w-40' width={2000} height={2000} /></div>
<div className={"tech-icons inline-flex"}><Icon icon={visualStudio} className='w-40' width={2000} height={2000}/></div> <div className={'tech-icons inline-flex'}><Icon icon={visualStudio} className='w-40' width={2000} height={2000} /></div>
{/* <div className={"tech-icons inline-flex"}><Icon icon=' className='w-40' /></div> */} {/* <div className={"tech-icons inline-flex"}><Icon icon=' className='w-40' /></div> */}
</div> </div>
<br /> <br />
<div className='inline-flex'> <div className='inline-flex'>
{/* <div className={"tech-icons inline-flex"}><Icon icon={figma} className='w-40' width={2000} height={2000}/></div> */} {/* <div className={"tech-icons inline-flex"}><Icon icon={figma} className='w-40' width={2000} height={2000}/></div> */}
<div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><MIcon path={mdiLinux} size={2} className='m-0 md:m-5 lg:w-full' /></div> <div className={'tech-icons inline-flex mauve'} style={{ color: 'var(--mauve)'}}><MIcon path={mdiLinux} size={2} className='m-0 md:m-5 lg:w-full' /></div>
<div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><MIcon path={mdiConsole} size={2} className='m-0 md:m-5 lg:w-full' /></div> <div className={'tech-icons inline-flex mauve'} style={{ color: 'var(--mauve)'}}><MIcon path={mdiConsole} size={2} className='m-0 md:m-5 lg:w-full' /></div>
<div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><MIcon path={mdiUbuntu} size={2} className='m-0 md:m-5 lg:w-full' /></div> <div className={'tech-icons inline-flex mauve'} style={{ color: 'var(--mauve)'}}><MIcon path={mdiUbuntu} size={2} className='m-0 md:m-5 lg:w-full' /></div>
<div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><MIcon path={mdiArch} size={2} className='m-0 md:m-5 lg:w-full' /></div> <div className={'tech-icons inline-flex mauve'} style={{ color: 'var(--mauve)'}}><MIcon path={mdiArch} size={2} className='m-0 md:m-5 lg:w-full' /></div>
<div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><SiPostman /></div> <div className={'tech-icons inline-flex mauve'} style={{ color: 'var(--mauve)'}}><SiPostman /></div>
<div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}> <SiKalilinux /></div> <div className={'tech-icons inline-flex mauve'} style={{ color: 'var(--mauve)'}}> <SiKalilinux /></div>
{/* <div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><MIcon path={mdiKaliLinux} size={2} className='w-full m-5' /></div> */} {/* <div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><MIcon path={mdiKaliLinux} size={2} className='w-full m-5' /></div> */}
</div> </div>
{/* <div className='inline-flex'> {/* <div className='inline-flex'>
<div className={"tech-icons inline-flex"}><Icon icon={html} className='w-40' /></div> <div className={"tech-icons inline-flex"}><Icon icon={html} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={javascriptReact} className='w-40' /></div> <div className={"tech-icons inline-flex"}><Icon icon={javascriptReact} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={python} className='w-40' /></div> <div className={"tech-icons inline-flex"}><Icon icon={python} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={csharp} className='w-40' /></div> */} <div className={"tech-icons inline-flex"}><Icon icon={csharp} className='w-40' /></div> */}
{/* for the sake of css coffeescript is out! */} {/* for the sake of css coffeescript is out! */}
{/* <div className={"tech-icons inline-flex"}><Icon icon={coffeescript} className='w-40' /></div> */} {/* <div className={"tech-icons inline-flex"}><Icon icon={coffeescript} className='w-40' /></div> */}
{/* <div className={"tech-icons inline-flex"}><Icon icon={yarn} className='w-40' /></div> {/* <div className={"tech-icons inline-flex"}><Icon icon={yarn} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={ejs} className='w-40' /></div> <div className={"tech-icons inline-flex"}><Icon icon={ejs} className='w-40' /></div>
<div className={"tech-icons inline-flex"}><Icon icon={pnpm} className='w-40' /></div> <div className={"tech-icons inline-flex"}><Icon icon={pnpm} className='w-40' /></div>
</div> */} </div> */}
{/* {/*
*/} */}
</div> </div>
{/* <br /> {/* <br />
<div style={{ justifyContent: 'center', textAlign: 'center', alignItems: "center", marginLeft: '50px', paddingBottom: '50px' }} className='inline-flex'> <div style={{ justifyContent: 'center', textAlign: 'center', alignItems: "center", marginLeft: '50px', paddingBottom: '50px' }} className='inline-flex'>
<div className={"tech-icons inline-flex"}><Icon icon={tailwind} className='w-40' /></div> <div className={"tech-icons inline-flex"}><Icon icon={tailwind} className='w-40' /></div>
</div> */} </div> */}
</div> </div>
</div> </div>
} }
export default function() { export default function () {
return <div className='-mt-20'> return <div className='-mt-20'>
<SkillSet /> <SkillSet />
<TechStack /></div> <TechStack /></div>
} }