From 5a39355ca107ad161f07cfbe2fd3da8f832cbf99 Mon Sep 17 00:00:00 2001 From: Saahil Date: Thu, 20 Jun 2024 00:08:44 -0400 Subject: [PATCH] About Page done --- package.json | 1 + src/App.tsx | 8 +- src/components/AboutPage/Github.tsx | 7 +- src/components/AboutPage/SkillSet.tsx | 114 +++++++++++++++++++++++++- src/components/AboutPage/skillset.css | 16 +++- src/components/static/Icons.tsx | 34 ++++---- src/components/static/icons_list.ts | 71 ++++++++++++++++ src/index.css | 5 +- src/index.tsx | 2 + src/scripts/easteregg.css | 49 +++++++++++ src/scripts/oneko_easteregg.ts | 26 ++++++ yarn.lock | 5 ++ 12 files changed, 309 insertions(+), 29 deletions(-) create mode 100644 src/components/static/icons_list.ts create mode 100644 src/scripts/easteregg.css create mode 100644 src/scripts/oneko_easteregg.ts diff --git a/package.json b/package.json index a3a86565..48cb31c5 100644 --- a/package.json +++ b/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", diff --git a/src/App.tsx b/src/App.tsx index 012cdb52..875b13fe 100644 --- a/src/App.tsx +++ b/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 () {
} /> - } /> + + + + + } /> ) } diff --git a/src/components/AboutPage/Github.tsx b/src/components/AboutPage/Github.tsx index 17e0d4c2..2d009d54 100644 --- a/src/components/AboutPage/Github.tsx +++ b/src/components/AboutPage/Github.tsx @@ -1,6 +1,7 @@ +import './skillset.css' export default function GithubStats () { - return
-

+ return
+

Days I Code

{/* */} {/* svg from git, updated every 3 hours */} - +
} diff --git a/src/components/AboutPage/SkillSet.tsx b/src/components/AboutPage/SkillSet.tsx index ea2188a4..c448411f 100644 --- a/src/components/AboutPage/SkillSet.tsx +++ b/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 () { - return
+import { SiKalilinux, SiPostman } from 'react-icons/si' +import { mdiArch, mdiConsole, mdiLinux, mdiUbuntu } from '@mdi/js' +export function SkillSet () { + return
+

+ Professional Skillset +

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* for the sake of css coffeescript is out! */} + {/*
*/} +
+
+
+
+ {/* + + */} + +
+ {/*
+
+
+
*/} +
+
+ } +export function TechStack () { + return
+

+ Tools I use +

+
+
+
+
+
+
+
+
+
+
+ {/*
*/} +
+
+
+ {/*
*/} +
+
+
+
+
+
+ {/*
*/} + +
+ {/*
+
+
+
+
*/} + {/* for the sake of css coffeescript is out! */} + {/*
*/} + {/*
+
+
+
*/} + {/* + + */} + +
+ {/*
+
+
+
*/} +
+
+ +} +export default function() { + return <> + + +} \ No newline at end of file diff --git a/src/components/AboutPage/skillset.css b/src/components/AboutPage/skillset.css index 8995a075..723bcbc6 100644 --- a/src/components/AboutPage/skillset.css +++ b/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; } - \ No newline at end of file + .project-heading { + color: var(--text) !important; + font-size: 2.3em !important; + font-weight: 500 !important; + padding-top: 10px !important; + } \ No newline at end of file diff --git a/src/components/static/Icons.tsx b/src/components/static/Icons.tsx index 36971cf8..abcdbe3a 100644 --- a/src/components/static/Icons.tsx +++ b/src/components/static/Icons.tsx @@ -1,21 +1,19 @@ -import cssIcon from "../../assets/icons/css.svg" -import htmlIcon from "../../assets/icons/html.svg" -import reactjs from "../../assets/icons/reactjs.svg" -import nodejs from "../../assets/icons/nodejs.svg" -import typescript from "../../assets/icons/typescript.svg" -import javascript from "../../assets/icons/javascript.svg" -import CloudFolder from "../../assets/icons/folder_cloud.svg" -import CloudFolderOpen from "../../assets/icons/folder_cloud_open.svg" +// import cssIcon from "../../assets/icons/css.svg" +// import htmlIcon from "../../assets/icons/html.svg" +// import reactjs from "../../assets/icons/reactjs.svg" +// import nodejs from "../../assets/icons/nodejs.svg" +// import typescript from "../../assets/icons/typescript.svg" +// import javascript from "../../assets/icons/javascript.svg" +// import CloudFolder from "../../assets/icons/folder_cloud.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, - "html": htmlIcon, - "reactjs": reactjs, - "nodejs": nodejs, - "typescript": typescript, - javascript, - CloudFolder, - CloudFolderOpen + // pre set names so they dont break + CloudFolder: Icons.folder_cloud, + CloudFolderOpen: Icons.folder_cloud_open, + ...Icons } -export default function Icon({ icon, className }: { icon: string, className?: string }) { - return +export default function Icon({ icon, inject, className,width,height }: { icon: string, className?: string,width?:number,height?:number, inject?:boolean }) { + return inject ? : } \ No newline at end of file diff --git a/src/components/static/icons_list.ts b/src/components/static/icons_list.ts new file mode 100644 index 00000000..cedca512 --- /dev/null +++ b/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; + diff --git a/src/index.css b/src/index.css index 40adc57b..b5146449 100644 --- a/src/index.css +++ b/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); */ diff --git a/src/index.tsx b/src/index.tsx index 6c6fafa0..72127bb7 100644 --- a/src/index.tsx +++ b/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( diff --git a/src/scripts/easteregg.css b/src/scripts/easteregg.css new file mode 100644 index 00000000..291316ab --- /dev/null +++ b/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%); + } + } \ No newline at end of file diff --git a/src/scripts/oneko_easteregg.ts b/src/scripts/oneko_easteregg.ts new file mode 100644 index 00000000..2b89f3a1 --- /dev/null +++ b/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 diff --git a/yarn.lock b/yarn.lock index d7aa6b9d..dcc3f20b 100644 --- a/yarn.lock +++ b/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"