mirror of
https://github.com/NeonGamerBot-QK/saahild.com.git
synced 2024-11-24 05:33:40 +00:00
Compare commits
No commits in common. "6f50b72003d8834fc20811dd4dbf5eb5fe730df5" and "0e91d9f3a72d1b6093f86690c1e151d4d2c97e5b" have entirely different histories.
6f50b72003
...
0e91d9f3a7
1 changed files with 89 additions and 265 deletions
|
|
@ -1,157 +1,50 @@
|
||||||
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 {
|
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'
|
||||||
bash,
|
import './skillset.css'
|
||||||
bun,
|
import { SiKalilinux, SiPostman } from 'react-icons/si'
|
||||||
coffeescript,
|
import { mdiArch, mdiConsole, mdiLinux, mdiUbuntu } from '@mdi/js'
|
||||||
cpp,
|
export function SkillSet () {
|
||||||
csharp,
|
return <div className='items-center text-center place-items-center'>
|
||||||
docker,
|
<h1 className='project-heading'>
|
||||||
graphql,
|
Professional <strong className='texthighlight'>Skillset </strong>
|
||||||
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 { SiKalilinux, SiPostman } from "react-icons/si";
|
|
||||||
import { mdiArch, mdiConsole, mdiLinux, mdiUbuntu } from "@mdi/js";
|
|
||||||
export function SkillSet() {
|
|
||||||
return (
|
|
||||||
<div className="items-center text-center place-items-center">
|
|
||||||
<h1 className="project-heading">
|
|
||||||
Professional <strong className="texthighlight">Skillset </strong>
|
|
||||||
</h1>
|
</h1>
|
||||||
<div className="flex inline-flex grid ">
|
<div className='flex inline-flex grid ' >
|
||||||
<div
|
<div style={{ }} className='flex-1 max-w-5xl text-center min-w-sm ms-auto me-auto'>
|
||||||
style={{}}
|
<div className='inline-flex'>
|
||||||
className="flex-1 max-w-5xl text-center min-w-sm ms-auto me-auto"
|
<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="inline-flex">
|
<div className={'tech-icons inline-flex'}><Icon icon='typescript' className='w-40' /></div>
|
||||||
<a
|
<div className={'tech-icons inline-flex'}><Icon icon={next} className='w-40' /></div>
|
||||||
href="https://www.w3schools.com/w3css/"
|
<div className={'tech-icons inline-flex'}><Icon icon={npm} className='w-40' /></div>
|
||||||
className={"tech-icons inline-flex"}
|
<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>
|
||||||
<Icon icon="css" className="w-40" width={2000} height={2000} />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://www.w3schools.com/js/DEFAULT.asp"
|
|
||||||
className={"tech-icons inline-flex"}
|
|
||||||
>
|
|
||||||
<Icon icon="javascript" className="w-40" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://www.typescriptlang.org/"
|
|
||||||
className={"tech-icons inline-flex"}
|
|
||||||
>
|
|
||||||
<Icon icon="typescript" className="w-40" />
|
|
||||||
</a>
|
|
||||||
<a href="https://nextjs.org/" className={"tech-icons inline-flex"}>
|
|
||||||
<Icon icon={next} className="w-40" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://www.npmjs.com/"
|
|
||||||
className={"tech-icons inline-flex"}
|
|
||||||
>
|
|
||||||
<Icon icon={npm} className="w-40" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://www.prisma.io/"
|
|
||||||
className={"tech-icons inline-flex"}
|
|
||||||
>
|
|
||||||
<Icon icon={prisma} className="w-40" />
|
|
||||||
</a>
|
|
||||||
<a href="https://pptr.dev/" className={"tech-icons inline-flex"}>
|
|
||||||
<Icon icon={puppeteer} className="w-40" />
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="inline-flex">
|
<div className='inline-flex'>
|
||||||
<a
|
<div className={'tech-icons inline-flex'}><Icon icon={sass} className='w-40' /></div>
|
||||||
href="https://sass-lang.com/"
|
<div className={'tech-icons inline-flex'}><Icon icon={tailwind} className='w-40' /></div>
|
||||||
className={"tech-icons inline-flex"}
|
<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>
|
||||||
<Icon icon={sass} className="w-40" />
|
<div className={'tech-icons inline-flex'}><Icon icon={cpp} className='w-40' /></div>
|
||||||
</a>
|
<div className={'tech-icons inline-flex'}><Icon icon={docker} className='w-40' /></div>
|
||||||
<a
|
<div className={'tech-icons inline-flex'}><Icon icon={graphql} className='w-40' /></div>
|
||||||
href="https://tailwindcss.com/"
|
|
||||||
className={"tech-icons inline-flex"}
|
|
||||||
>
|
|
||||||
<Icon icon={tailwind} className="w-40" />
|
|
||||||
</a>
|
|
||||||
<div className={"tech-icons inline-flex"}>
|
|
||||||
<Icon icon={bash} className="w-40" />
|
|
||||||
</div>
|
</div>
|
||||||
<a href="https://bun.sh/" className={"tech-icons inline-flex"}>
|
<div className='inline-flex'>
|
||||||
<Icon icon={bun} className="w-40" />
|
<div className={'tech-icons inline-flex'}><Icon icon={html} className='w-40' /></div>
|
||||||
</a>
|
<div className={'tech-icons inline-flex'}><Icon icon={javascriptReact} className='w-40' /></div>
|
||||||
<a
|
<div className={'tech-icons inline-flex'}><Icon icon={python} className='w-40' /></div>
|
||||||
href="https://cplusplus.com/"
|
<div className={'tech-icons inline-flex'}><Icon icon={csharp} className='w-40' /></div>
|
||||||
className={"tech-icons inline-flex"}
|
|
||||||
>
|
|
||||||
<Icon icon={cpp} className="w-40" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://www.docker.com/"
|
|
||||||
className={"tech-icons inline-flex"}
|
|
||||||
>
|
|
||||||
<Icon icon={docker} className="w-40" />
|
|
||||||
</a>
|
|
||||||
<a href="https://graphql.org/" className={"tech-icons inline-flex"}>
|
|
||||||
<Icon icon={graphql} className="w-40" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div className="inline-flex">
|
|
||||||
<a
|
|
||||||
href="https://www.w3schools.com/html/"
|
|
||||||
className={"tech-icons inline-flex"}
|
|
||||||
>
|
|
||||||
<Icon icon={html} className="w-40" />
|
|
||||||
</a>
|
|
||||||
<a href="https://react.dev/" className={"tech-icons inline-flex"}>
|
|
||||||
<Icon icon={javascriptReact} className="w-40" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://www.python.org/"
|
|
||||||
className={"tech-icons inline-flex"}
|
|
||||||
>
|
|
||||||
<Icon icon={python} className="w-40" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://dotnet.microsoft.com/en-us/languages/csharp"
|
|
||||||
className={"tech-icons inline-flex"}
|
|
||||||
>
|
|
||||||
<Icon icon={csharp} className="w-40" />
|
|
||||||
</a>
|
|
||||||
{/* 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> */}
|
||||||
<a href="https://yarnpkg.com/" className={"tech-icons inline-flex"}>
|
<div className={'tech-icons inline-flex'}><Icon icon={yarn} className='w-40' /></div>
|
||||||
<Icon icon={yarn} className="w-40" />
|
<div className={'tech-icons inline-flex'}><Icon icon={ejs} className='w-40' /></div>
|
||||||
</a>
|
<div className={'tech-icons inline-flex'}><Icon icon={pnpm} className='w-40' /></div>
|
||||||
<a href="https://ejs.co/" className={"tech-icons inline-flex"}>
|
|
||||||
<Icon icon={ejs} className="w-40" />
|
|
||||||
</a>
|
|
||||||
<a href="https://pnpm.io/" className={"tech-icons inline-flex"}>
|
|
||||||
<Icon icon={pnpm} className="w-40" />
|
|
||||||
</a>
|
|
||||||
</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'>
|
||||||
|
|
@ -159,101 +52,35 @@ export function SkillSet() {
|
||||||
</div> */}
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
|
||||||
}
|
}
|
||||||
export function TechStack() {
|
export function TechStack () {
|
||||||
return (
|
return <div className='items-center text-center place-items-center'>
|
||||||
<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
|
<div style={{ }} className='content-center flex-1 max-w-5xl ms-auto me-auto min-w-sm'>
|
||||||
style={{}}
|
<div className='inline-flex max-w-5xl min-w-sm'>
|
||||||
className="content-center flex-1 max-w-5xl ms-auto me-auto 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={git} className='w-40' width={2000} height={2000} /></div>
|
||||||
<div className="inline-flex max-w-5xl min-w-sm">
|
<div className={'tech-icons inline-flex'}><Icon icon={docker} className='w-40' width={2000} height={2000} /></div>
|
||||||
<div className={"tech-icons inline-flex"}>
|
<div className={'tech-icons inline-flex'}><Icon icon={figma} className='w-40' width={2000} height={2000} /></div>
|
||||||
<Icon icon={vscode} className="w-40" width={2000} height={2000} />
|
<div className={'tech-icons inline-flex'}><Icon icon={robots} className='w-40' width={2000} height={2000} /></div>
|
||||||
</div>
|
<div className={'tech-icons inline-flex'}><Icon icon={vercel} className='w-40' width={2000} height={2000} /></div>
|
||||||
<div className={"tech-icons inline-flex"}>
|
<div className={'tech-icons inline-flex'}><Icon icon={visualStudio} className='w-40' width={2000} height={2000} /></div>
|
||||||
<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={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={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=' 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
|
<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>
|
||||||
className={"tech-icons inline-flex mauve"}
|
<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>
|
||||||
style={{ color: "var(--mauve)" }}
|
<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>
|
||||||
<MIcon
|
<div className={'tech-icons inline-flex mauve'} style={{ color: 'var(--mauve)'}}><SiPostman /></div>
|
||||||
path={mdiLinux}
|
<div className={'tech-icons inline-flex mauve'} style={{ color: 'var(--mauve)'}}> <SiKalilinux /></div>
|
||||||
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={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)" }}
|
|
||||||
>
|
|
||||||
{" "}
|
|
||||||
<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>
|
||||||
|
|
@ -269,6 +96,7 @@ export function TechStack() {
|
||||||
{/*
|
{/*
|
||||||
|
|
||||||
*/}
|
*/}
|
||||||
|
|
||||||
</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'>
|
||||||
|
|
@ -276,13 +104,9 @@ export function TechStack() {
|
||||||
</div> */}
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
|
||||||
}
|
}
|
||||||
export default function () {
|
export default function () {
|
||||||
return (
|
return <div className='-mt-20'>
|
||||||
<div className="-mt-20">
|
|
||||||
<SkillSet />
|
<SkillSet />
|
||||||
<TechStack />
|
<TechStack /></div>
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue