in progress: os theme matching
This commit is contained in:
@@ -1,138 +1,139 @@
|
||||
import { RxChevronDown } from "react-icons/rx";
|
||||
import Link from "next/link";
|
||||
import Chip from "../ui/Chip";
|
||||
|
||||
const Skills = () => (
|
||||
<section className="w-full">
|
||||
<div className="bg-slate-800 bg-opacity-40 shadow shadow-black p-3 my-4 rounded-lg">
|
||||
<h3 className="uppercase text-2xl text-rose-600">Strong:</h3>
|
||||
<div id="strong-skills" className="bg-slate-400 dark:bg-slate-800 dark:bg-opacity-40 p-3 my-4 rounded-lg">
|
||||
<h3 className="uppercase text-2xl text-rose-600 dark:text-rose-300">Strong:</h3>
|
||||
<article className="mt-2">
|
||||
<details className="group">
|
||||
<summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
|
||||
<summary className="flex items-center text-rose-600 dark:text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
|
||||
<p className="mr-2">JavaScript</p>
|
||||
<RxChevronDown className="transition group-open:rotate-180" />
|
||||
</summary>
|
||||
<div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap">
|
||||
<Link target="_blank" referrerPolicy="no-referrer" href="https://github.com/innocuous-symmetry?tab=repositories&language=typescript" className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5 hover:bg-rose-500 active:bg-rose-900">TypeScript</Link>
|
||||
<Link target="_blank" referrerPolicy="no-referrer" href="https://github.com/innocuous-symmetry?tab=repositories&q=react" className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5 hover:bg-rose-500 active:bg-rose-900">React</Link>
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Next.js</p>
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">tRPC</p>
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">React Query</p>
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">jQuery</p>
|
||||
<Link target="_blank" referrerPolicy="no-referrer" href="https://github.com/innocuous-symmetry?tab=repositories&q=express" className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5 hover:bg-rose-500 active:bg-rose-900">Express</Link>
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Node.js</p>
|
||||
<Chip label="Typescript" href="https://github.com/innocuous-symmetry?tab=repositories&language=typescript" />
|
||||
<Chip label="React" href="https://github.com/innocuous-symmetry?tab=repositories&q=react" />
|
||||
<Chip label="AWS S3 SDK" />
|
||||
<Chip label="Next.js" />
|
||||
<Chip label="tRPC" />
|
||||
<Chip label="React Query" />
|
||||
<Chip label="jQuery" />
|
||||
<Chip label="Express.js" href="https://github.com/innocuous-symmetry?tab=repositories&q=express" />
|
||||
<Chip label="Node.js" />
|
||||
</div>
|
||||
</details>
|
||||
</article>
|
||||
|
||||
<article className="mt-2">
|
||||
<details className="group">
|
||||
<summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
|
||||
<summary className="flex items-center text-rose-600 dark:text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
|
||||
<p className="mr-2">CSS</p>
|
||||
<RxChevronDown className="transition group-open:rotate-180" />
|
||||
</summary>
|
||||
<div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap">
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Tailwind</p>
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Bootstrap</p>
|
||||
<Link target="_blank" referrerPolicy="no-referrer" href="https://github.com/innocuous-symmetry/recipe-manager" className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5 hover:bg-rose-500 active:bg-rose-900">Sass</Link>
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Material UI</p>
|
||||
<Chip label="Tailwind" />
|
||||
<Chip label="Bootstrap" />
|
||||
<Chip label="Sass" href="https://github.com/innocuous-symmetry/recipe-manager" />
|
||||
<Chip label="Material UI" />
|
||||
</div>
|
||||
</details>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-800 bg-opacity-40 shadow shadow-black p-3 my-4 rounded-lg">
|
||||
<h3 className="uppercase text-2xl text-rose-600">Experienced:</h3>
|
||||
<div id="intermediate-skills" className="bg-slate-400 dark:bg-slate-800 dark:bg-opacity-40 p-3 my-4 rounded-lg">
|
||||
<h3 className="uppercase text-2xl text-rose-600 dark:text-rose-300">Experienced:</h3>
|
||||
<article className="mt-2">
|
||||
<details className="group">
|
||||
<summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
|
||||
<summary className="flex items-center text-rose-600 dark:text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
|
||||
<p className="mr-2">Python</p>
|
||||
<RxChevronDown className="transition group-open:rotate-180" />
|
||||
</summary>
|
||||
<div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap">
|
||||
<Link target="_blank" referrerPolicy="no-referrer" href="https://github.com/innocuous-symmetry/picosynth" className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5 hover:bg-rose-500 active:bg-rose-900">Micropython</Link>
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Flask</p>
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Flet</p>
|
||||
<Chip label="Micropython" href="https://github.com/innocuous-symmetry/picosynth" />
|
||||
<Chip label="Flask" />
|
||||
<Chip label="Flet" />
|
||||
</div>
|
||||
</details>
|
||||
</article>
|
||||
|
||||
<article className="mt-2">
|
||||
<details className="group">
|
||||
<summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
|
||||
<summary className="flex items-center text-rose-600 dark:text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
|
||||
<p className="mr-2">Database Operations</p>
|
||||
<RxChevronDown className="transition group-open:rotate-180" />
|
||||
</summary>
|
||||
<div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap">
|
||||
<Link target="_blank" referrerPolicy="no-referrer" href="https://github.com/innocuous-symmetry/recipe-manager" className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5 hover:bg-rose-500 active:bg-rose-900">PostgreSQL</Link>
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">MySQL</p>
|
||||
<Link href="/about/work/dropper" className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5 hover:bg-rose-500 active:bg-rose-900">MongoDB</Link>
|
||||
<Link href="/about/work/dropper" className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5 hover:bg-rose-500 active:bg-rose-900">Caching with Redis</Link>
|
||||
<Chip label="PostgreSQL" href="https://github.com/innocuous-symmetry/recipe-manager" />
|
||||
<Chip label="MySQL" />
|
||||
<Chip label="MongoDB" href="/about/dropper" />
|
||||
<Chip label="Redis" href="/about/dropper" />
|
||||
</div>
|
||||
</details>
|
||||
</article>
|
||||
|
||||
<article className="mt-2">
|
||||
<details className="group">
|
||||
<summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
|
||||
<summary className="flex items-center text-rose-600 dark:text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
|
||||
<p className="mr-2">Tooling</p>
|
||||
<RxChevronDown className="transition group-open:rotate-180" />
|
||||
</summary>
|
||||
<div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap">
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Docker</p>
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Github Actions</p>
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Git / Github</p>
|
||||
<Chip label="Docker" />
|
||||
<Chip label="Github Actions" />
|
||||
<Chip label="Git / Github" />
|
||||
</div>
|
||||
</details>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-800 bg-opacity-40 shadow shadow-black p-3 my-4 rounded-lg">
|
||||
<h3 className="uppercase text-2xl text-rose-600">Learning:</h3>
|
||||
<div id="learning-skills" className="bg-slate-400 dark:bg-slate-800 dark:bg-opacity-40 p-3 my-4 rounded-lg">
|
||||
<h3 className="uppercase text-2xl text-rose-600 dark:text-rose-300">Learning:</h3>
|
||||
<article className="mt-2">
|
||||
<details className="group">
|
||||
<summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
|
||||
<summary className="flex items-center text-rose-600 dark:text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
|
||||
<p className="mr-2">Design Principles</p>
|
||||
<RxChevronDown className="transition group-open:rotate-180" />
|
||||
</summary>
|
||||
<div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap">
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Domain Driven Design</p>
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Microservices</p>
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Readable Code</p>
|
||||
<Chip label="Domain Driven Design" />
|
||||
<Chip label="Microservices" />
|
||||
</div>
|
||||
</details>
|
||||
</article>
|
||||
|
||||
<article className="mt-2">
|
||||
<details className="group">
|
||||
<summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
|
||||
<summary className="flex items-center text-rose-600 dark:text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
|
||||
<p className="mr-2">Cloud Development and Infrastructure</p>
|
||||
<RxChevronDown className="transition group-open:rotate-180" />
|
||||
</summary>
|
||||
<div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap">
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">AWS SDK</p>
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Proxmox</p>
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Minio</p>
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Linux</p>
|
||||
<Chip label="AWS" />
|
||||
<Chip label="Proxmox" />
|
||||
<Chip label="Minio" />
|
||||
<Chip label="Linux" />
|
||||
</div>
|
||||
</details>
|
||||
</article>
|
||||
|
||||
<article className="mt-2">
|
||||
<details className="group">
|
||||
<summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
|
||||
<summary className="flex items-center text-rose-600 dark:text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
|
||||
<p className="mr-2">Server-side programming languages</p>
|
||||
<RxChevronDown className="transition group-open:rotate-180" />
|
||||
</summary>
|
||||
<div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap">
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Ruby / Rails</p>
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Golang</p>
|
||||
<Chip label="Ruby / Rails" />
|
||||
<Chip label="Golang" />
|
||||
</div>
|
||||
</details>
|
||||
</article>
|
||||
|
||||
<article className="mt-2">
|
||||
{/* <article className="mt-2">
|
||||
<details className="group">
|
||||
<summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
|
||||
<summary className="flex items-center text-rose-600 dark:text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
|
||||
<p className="mr-2">Natural Language Processing</p>
|
||||
<RxChevronDown className="transition group-open:rotate-180" />
|
||||
</summary>
|
||||
@@ -141,21 +142,21 @@ const Skills = () => (
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Spacy</p>
|
||||
</div>
|
||||
</details>
|
||||
</article>
|
||||
</article> */}
|
||||
</div>
|
||||
|
||||
<details className="group bg-slate-800 bg-opacity-40 shadow shadow-black p-3 my-4 rounded-lg">
|
||||
<summary className="flex items-center uppercase text-2xl text-rose-600 list-none">
|
||||
<details className="group bg-slate-400 dark:bg-slate-800 dark:bg-opacity-40 p-3 my-4 rounded-lg">
|
||||
<summary className="flex items-center uppercase text-2xl text-rose-600 dark:text-rose-300 list-none">
|
||||
<p className="mr-2">Soft Skills:</p>
|
||||
<RxChevronDown className="transition group-open:rotate-180" />
|
||||
</summary>
|
||||
<div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap">
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Strong communicator</p>
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Fast learner</p>
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Self-driver</p>
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Improviser</p>
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Problem solver</p>
|
||||
<p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Design thinker</p>
|
||||
<Chip label="Strong communicator" />
|
||||
<Chip label="Fast learner" />
|
||||
<Chip label="Self-driver" />
|
||||
<Chip label="Improviser" />
|
||||
<Chip label="Problem solver" />
|
||||
<Chip label="Design thinker" />
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user