153 lines
8.3 KiB
TypeScript
153 lines
8.3 KiB
TypeScript
import { RxChevronDown } from "react-icons/rx";
|
|
import Link from "next/link";
|
|
import Chip from "../ui/Chip";
|
|
|
|
const Skills = () => (
|
|
<section className="w-full">
|
|
<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-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">
|
|
<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="Next.js" />
|
|
<Chip label="AWS S3 SDK" />
|
|
<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-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">
|
|
<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 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-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">
|
|
<Chip label="Micropython" href="https://github.com/innocuous-symmetry/picosynth" />
|
|
<Chip label="Flask" />
|
|
</div>
|
|
</details>
|
|
</article>
|
|
|
|
<article className="mt-2">
|
|
<details className="group">
|
|
<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">
|
|
<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-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">
|
|
<Chip label="Virtualization / Proxmox" />
|
|
<Chip label="Docker" />
|
|
<Chip label="Github Actions" />
|
|
<Chip label="Git / Github" />
|
|
</div>
|
|
</details>
|
|
</article>
|
|
</div>
|
|
|
|
<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-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">
|
|
<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-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">
|
|
<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-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">
|
|
<Chip label="C# / ASP.NET" />
|
|
<Chip label="Golang" />
|
|
</div>
|
|
</details>
|
|
</article>
|
|
</div>
|
|
|
|
<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">
|
|
<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>
|
|
);
|
|
|
|
export default Skills;
|