About Page done

package.json

@@ -16,6 +16,7 @@
     "react": "^18.2.0",
     "react-animate-on-scroll": "^2.1.9",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.2.1",
     "react-parallax-tilt": "^1.7.224",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",

src/App.tsx

@@ -5,6 +5,8 @@ import InfogramBelowMain from './components/infobelowmain'
 import { HashRouter } from './components/HashRouter'
 import Route from './components/HashRouter/Route'
 import AboutPage from './components/AboutPage'
+import SkillSet from './components/AboutPage/SkillSet'
+import GithubStats from './components/AboutPage/Github'
 // import logo from './logo.svg';
 // import './App.css';
 
@@ -16,7 +18,11 @@ function App () {
         <InfogramBelowMain />
         <br />
       </div>} />
-      <Route path='#/about' component={<AboutPage />} />
+      <Route path='#/about' component={<>
+        <AboutPage />
+        <SkillSet />
+        <GithubStats />
+        </>} />
     </HashRouter>
   )
 }

src/components/AboutPage/Github.tsx

@@ -1,6 +1,7 @@
+import './skillset.css'
 export default function GithubStats () {
-  return <div>
+  return <div className='text-center items-center'>
-    <h1 className='project-heading font-bold text-2xl ' style={{ paddingBottom: '20px' }}>
+    <h1 className='project-heading font-bold text-2xl' style={{ paddingBottom: '20px' }}>
         Days I <strong className='text-highlight'>Code</strong>
     </h1>
     {/* <GitHubCalendar
@@ -11,6 +12,6 @@ export default function GithubStats () {
         fontSize={16}
       /> */}
     {/* svg from git, updated every 3 hours */}
-    <img src='https://raw.githubusercontent.com/NeonGamerBot-QK/NeonGamerBot-QK/output/github-contribution-grid-snake.svg' />
+    <img src='https://raw.githubusercontent.com/NeonGamerBot-QK/NeonGamerBot-QK/output/github-contribution-grid-snake.svg'  className='ms-auto me-auto'/>
   </div>
 }

src/components/AboutPage/SkillSet.tsx

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

src/components/AboutPage/skillset.css

@@ -3,12 +3,14 @@
     margin: 15px !important;
     padding: 10px !important;
     opacity: 0.93 !important;
-    border: 1.7px solid rgba(200, 137, 230, 0.637) !important;
+    /* rgba(200, 137, 230, 0.637)  */
+    border: 1.7px solid rgba(203, 166, 247, 0.637) !important;
     vertical-align: middle !important;
     text-align: center !important;
     border-radius: 5px !important;
     display: table !important;
-    box-shadow: 4px 5px 4px 3px rgba(89, 4, 168, 0.137) !important;
+    /* rgba(89, 4, 168, 0.137) */
+    box-shadow: 4px 5px 4px 3px rgba(49, 50, 68, 0.137) !important;
     overflow: hidden !important;
     transition: all 0.4s ease 0s !important;
   }
@@ -22,10 +24,16 @@
   .tech-icons:hover {
     transform: scale(1.05) !important;
     overflow: hidden !important;
-    border: 2.2px solid rgba(197, 115, 230, 0.883) !important;
+    /* rgba(197, 115, 230, 0.883) */
+    border: 2.2px solid rgba(203, 166, 247, 0.883) !important;
   }
   .tech-icon-images {
     padding: 20px !important;
     line-height: 1.6 !important;
   }
-  
+  .project-heading {
+    color: var(--text) !important;
+    font-size: 2.3em !important;
+    font-weight: 500 !important;
+    padding-top: 10px !important;
+  }

src/components/static/Icons.tsx

@@ -1,21 +1,19 @@
-import cssIcon from "../../assets/icons/css.svg"
+// import cssIcon from "../../assets/icons/css.svg"
-import htmlIcon from "../../assets/icons/html.svg"
+// import htmlIcon from "../../assets/icons/html.svg"
-import reactjs from "../../assets/icons/reactjs.svg"
+// import reactjs from "../../assets/icons/reactjs.svg"
-import nodejs from "../../assets/icons/nodejs.svg"
+// import nodejs from "../../assets/icons/nodejs.svg"
-import typescript from "../../assets/icons/typescript.svg"
+// import typescript from "../../assets/icons/typescript.svg"
-import javascript from "../../assets/icons/javascript.svg"
+// import javascript from "../../assets/icons/javascript.svg"
-import CloudFolder from "../../assets/icons/folder_cloud.svg"
+// import CloudFolder from "../../assets/icons/folder_cloud.svg"
-import CloudFolderOpen from "../../assets/icons/folder_cloud_open.svg"
+// import CloudFolderOpen from "../../assets/icons/folder_cloud_open.svg"
+// import { htmlToJsx } from "html-to-jsx-transform";
+import * as Icons from "./icons_list"
 const icons:any = {
-    "css": cssIcon,
+    // pre set names so they dont break
-    "html": htmlIcon,
+    CloudFolder: Icons.folder_cloud,
-    "reactjs": reactjs,
+    CloudFolderOpen: Icons.folder_cloud_open,
-    "nodejs":    nodejs,
+    ...Icons
-    "typescript": typescript,
-    javascript,
-    CloudFolder,
-    CloudFolderOpen
 }
-export default function Icon({ icon, className }: { icon: string, className?: string }) {
+export default function Icon({ icon, inject, className,width,height }: { icon: string, className?: string,width?:number,height?:number, inject?:boolean }) {
-    return <img  src={icons[icon]} className={"inline-flex hover:scale-125 duration-500 linear " + (className ?? "")} />
+    return inject ? <svg xmlns="http://www.w3.org/2000/svg" fill="var(--mauve)" className={"inline-flex hover:scale-125 duration-500 linear " + (className ?? "")}> <path d={icon}></path></svg>: <img  src={icons[icon] ? icons[icon] : icon} className={"inline-flex hover:scale-125 duration-500 linear " + (className ?? "")} width={width} height={height} />
 }

src/components/static/icons_list.ts

@@ -0,0 +1,71 @@
+
+// template: import cssIcon from "../../assets/icons/css.svg"
+// autogenerated script fyi
+import bashIcon from "../../assets/icons/bash.svg"
+import bunIcon from "../../assets/icons/bun.svg"
+import coffeescriptIcon from "../../assets/icons/coffeescript.svg"
+import cppIcon from "../../assets/icons/cpp.svg"
+import csharpIcon from "../../assets/icons/csharp.svg"
+import cssIcon from "../../assets/icons/css.svg"
+import dockerIcon from "../../assets/icons/docker.svg"
+import ejsIcon from "../../assets/icons/ejs.svg"
+import figmaIcon from "../../assets/icons/figma.svg"
+import folder_cloudIcon from "../../assets/icons/folder_cloud.svg"
+import folder_cloud_openIcon from "../../assets/icons/folder_cloud_open.svg"
+import gitIcon from "../../assets/icons/git.svg"
+import graphqlIcon from "../../assets/icons/graphql.svg"
+import htmlIcon from "../../assets/icons/html.svg"
+import javascriptIcon from "../../assets/icons/javascript.svg"
+import javascriptReactIcon from "../../assets/icons/javascriptReact.svg"
+import jsonIcon from "../../assets/icons/json.svg"
+import nextIcon from "../../assets/icons/next.svg"
+import nodejsIcon from "../../assets/icons/nodejs.svg"
+import npmIcon from "../../assets/icons/npm.svg"
+import pnpmIcon from "../../assets/icons/pnpm.svg"
+import prismaIcon from "../../assets/icons/prisma.svg"
+import puppeteerIcon from "../../assets/icons/puppeteer.svg"
+import pythonIcon from "../../assets/icons/python.svg"
+import reactjsIcon from "../../assets/icons/reactjs.svg"
+import robotsIcon from "../../assets/icons/robots.svg"
+import sassIcon from "../../assets/icons/sass.svg"
+import tailwindIcon from "../../assets/icons/tailwind.svg"
+import typescriptIcon from "../../assets/icons/typescript.svg"
+import vercelIcon from "../../assets/icons/vercel.svg"
+import visualStudioIcon from "../../assets/icons/visualStudio.svg"
+import vscodeIcon from "../../assets/icons/vscode.svg"
+import yarnIcon from "../../assets/icons/yarn.svg"
+
+export const bash = bashIcon;
+export const bun = bunIcon;
+export const coffeescript = coffeescriptIcon;
+export const cpp = cppIcon;
+export const csharp = csharpIcon;
+export const css = cssIcon;
+export const docker = dockerIcon;
+export const ejs = ejsIcon;
+export const figma = figmaIcon;
+export const folder_cloud = folder_cloudIcon;
+export const folder_cloud_open = folder_cloud_openIcon;
+export const git = gitIcon;
+export const graphql = graphqlIcon;
+export const html = htmlIcon;
+export const javascript = javascriptIcon;
+export const javascriptReact = javascriptReactIcon;
+export const json = jsonIcon;
+export const next = nextIcon;
+export const nodejs = nodejsIcon;
+export const npm = npmIcon;
+export const pnpm = pnpmIcon;
+export const prisma = prismaIcon;
+export const puppeteer = puppeteerIcon;
+export const python = pythonIcon;
+export const reactjs = reactjsIcon;
+export const robots = robotsIcon;
+export const sass = sassIcon;
+export const tailwind = tailwindIcon;
+export const typescript = typescriptIcon;
+export const vercel = vercelIcon;
+export const visualStudio = visualStudioIcon;
+export const vscode = vscodeIcon;
+export const yarn = yarnIcon;
+

src/index.css

@@ -29,7 +29,10 @@
   --base: #1e1e2e;
   --mantle: #181825;
   --crust: #11111b;
-  }  
+  } 
+  .mauve {
+    color: var(--mauve)
+  } 
   .text-highlight {
     color: var(--mauve);
     /* color: linear-gradient(var(--mauve), var(--mantle); */

src/index.tsx

@@ -9,6 +9,7 @@ import { injectOneko } from './scripts/oneko';
 import Navbar from './components/navbar';
 import { runTitle } from './scripts/title';
 import { startEvent } from './scripts/hashevent';
+import { listenForEasterEgg } from './scripts/oneko_easteregg';
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
@@ -16,6 +17,7 @@ document.title = "Saahild.com"
 injectOneko();
 runTitle()
 startEvent()
+listenForEasterEgg()
 document.title = 'React App';
 root.render(
   <React.StrictMode>

src/scripts/easteregg.css

@@ -0,0 +1,49 @@
+.easter-egg {
+    color:red;
+     pointer-events: none;
+      position: fixed;
+       /* top: 40vh;  */
+       /* left: 20vw; */
+        object-fit: cover;
+         background-size: cover!important; 
+         width: 10vw;
+          height: 10vw;
+          animation: Toast--spinner infinite linear 60s, Overlay--motion-slideInLeft infinite alternate 1.06s, Overlay--motion-slideUp infinite alternate 2.2s; background: url('https://github.com/NeonGamerBot-QK/NeonGamerBot-QK/blob/main/com--unscreen.gif?raw=true');
+z-index: 999;
+        }
+/* https://github.com/primer/css/blob/main/src/toasts/toasts.scss#L119-#L127 */
+@keyframes Toast--spinner {
+    from {
+      transform: rotate(0deg);
+    }
+  
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+/* https://github.com/primer/view_components/blob/main/app/components/primer/alpha/dialog.pcss */
+  
+@keyframes Overlay--motion-slideDown {
+    from {
+      transform: translateY(-100%);
+    }
+  }
+  
+  @keyframes Overlay--motion-slideUp {
+    from {
+      transform: translateY(100%);
+    }
+  }
+  
+  @keyframes Overlay--motion-slideInRight {
+    from {
+      transform: translateX(-100%);
+    }
+  }
+  
+  @keyframes Overlay--motion-slideInLeft {
+    from {
+      transform: translateX(100%);
+    }
+  }

src/scripts/oneko_easteregg.ts

@@ -0,0 +1,26 @@
+import "./easteregg.css"
+export function startEasterEgg() {
+const el = document.createElement('div')
+el.innerHTML = ""
+el.className = `easter-egg hidden`
+document.body.append(el)
+return {
+    destroy: () => {
+        el.remove()
+    },
+    toggle: () => el.classList.toggle('hidden')
+}
+}
+export function listenForEasterEgg() {
+const oneko2 = startEasterEgg()
+window.addEventListener('keydown', (k) => {
+if((k.ctrlKey || k.metaKey) && k.shiftKey && k.altKey) oneko2.toggle()
+})
+window.addEventListener('keyup', (k) => {
+    if((k.ctrlKey || k.metaKey) && k.shiftKey && k.altKey) oneko2.toggle()
+})    
+}
+// expose to window
+// LATER: there is a way to type this im just lazy atm
+//@ts-ignore
+window.easter_egg = startEasterEgg

yarn.lock

@@ -7877,6 +7877,11 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
+react-icons@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.2.1.tgz#28c2040917b2a2eda639b0f797bff1888e018e4a"
+  integrity sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"