in progress: os theme matching
This commit is contained in:
@@ -13,7 +13,7 @@ export const ColorChangeName = () => {
|
||||
<h2 className={"px-4 uppercase text-2xl text-transparent font-bold bg-opacity-100 animate-text-gradient bg-clip-text bg-gradient-to-r " + `from-${secondColor.split('-').slice(1).join('-')} to-${thirdColor.split('-').slice(1).join('-')}`}>Software Engineer</h2>
|
||||
|
||||
<div id="hero-mask" className="bg-inherit bg-opacity-10 p-4 flex flex-col">
|
||||
<p className="mt-4 text-right text-sky-300 tracking-wide">Pragmatic software design with style and artistry.</p>
|
||||
<p className="mt-4 text-right text-slate-700 dark:text-sky-300 tracking-wide">Pragmatic software design with style and artistry.</p>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -7,7 +7,7 @@ export default function FeaturedLink({ href, label, logo, disabled = false}: Lin
|
||||
<Panel width="1/2">
|
||||
<div className="flex flex-col items-center p-8">
|
||||
{logo}
|
||||
<a aria-disabled={disabled} href="https://app.dropper.studio/store/innocuous-symmetry" target="_blank">{label}</a>
|
||||
<a aria-disabled={disabled} href={href} target="_blank">{label}</a>
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ export default function Navbar({ pageIsScrolled = false }) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div id="navbar" className={"w-full z-50 fixed flex flex-nowrap items-baseline justify-apart bg-opacity-95 px-8 py-4 " + (mobileMenuOpen ? "bg-[#131313] " : pageIsScrolled ? "bg-black " : "bg-inherit ") + " text-white transition-all duration-200"}>
|
||||
<div id="navbar" className={"w-full z-50 fixed flex flex-nowrap items-baseline justify-apart bg-opacity-95 px-8 py-4 " + (mobileMenuOpen ? "bg-slate-300 dark:bg-[#131313] " : pageIsScrolled ? "bg-slate-300 dark:bg-black " : "bg-inherit ") + " text-white transition-all duration-200"}>
|
||||
<Link passHref href="/" className="w-1/4">
|
||||
<InlineLogo customHookInstance={navbarColorShift} />
|
||||
</Link>
|
||||
|
||||
@@ -1,41 +1,42 @@
|
||||
import Link from "next/link";
|
||||
import Card from "../ui/Card";
|
||||
|
||||
const Experience = () => {
|
||||
return (
|
||||
<section className="w-full">
|
||||
<article className="bg-slate-800 bg-opacity-40 shadow shadow-black p-3 my-4 rounded-lg">
|
||||
<Card>
|
||||
<Link target="_blank" referrerPolicy="no-referrer" href="https://dropper.studio" className="uppercase text-2xl text-rose-600 hover:text-rose-400 active:text-rose-600">Dropper Studio</Link>
|
||||
<p className="font-light italic text-rose-300">Nashville, TN (hybrid) - Software Engineer</p>
|
||||
<p>March 2023 - present</p>
|
||||
<p className="font-light italic text-black dark:text-rose-300">Nashville, TN (hybrid) - Software Engineer</p>
|
||||
<p className="dark:text-white">March 2023 - present</p>
|
||||
|
||||
<div className="h-[1px] w-full my-3 bg-rose-300" />
|
||||
<div className="h-[1px] w-full my-3 bg-rose-600 dark:bg-rose-300" />
|
||||
|
||||
<p className="leading-relaxed font-light">Building a full-stack e-commerce platform for the music industry. Experience includes: producing a functional proof of concept from design specifications; constructing a scalable, performant full-stack architecture; and project/team management skills.</p>
|
||||
<p className="dark:text-white leading-relaxed font-light">Building a full-stack e-commerce platform for the music industry. Experience includes: producing a functional proof of concept from design specifications; constructing a scalable, performant full-stack architecture; and project/team management skills.</p>
|
||||
|
||||
<Link href="/about/work/dropper" className="text-rose-300 hover:text-rose-500 active:text-rose-300">Learn more about my work with Dropper</Link>
|
||||
</article>
|
||||
<Link href="/about/work/dropper" className="text-rose-600 hover:text-rose-400 active:text-rose-300">Learn more about my work with Dropper</Link>
|
||||
</Card>
|
||||
|
||||
<article className="bg-slate-800 bg-opacity-40 shadow shadow-black p-3 my-4 rounded-lg">
|
||||
<Card>
|
||||
<Link target="_blank" referrerPolicy="no-referrer" href="https://dization.com/" className="uppercase text-2xl text-rose-600 hover:text-rose-400 active:text-rose-600">Dization, Inc.</Link>
|
||||
<p className="font-light italic text-rose-300">Pittsburgh, PA (remote) - Software Engineer (intern)</p>
|
||||
<p>October 2022 - March 2023</p>
|
||||
<p className="font-light italic text-black dark:text-rose-300">Pittsburgh, PA (remote) - Software Engineer (intern)</p>
|
||||
<p className="dark:text-white">October 2022 - March 2023</p>
|
||||
|
||||
<div className="h-[1px] w-full my-3 bg-rose-300" />
|
||||
<div className="h-[1px] w-full my-3 bg-rose-600 dark:bg-rose-300" />
|
||||
|
||||
<p className="leading-relaxed font-light">Participated in the development of an enterprise project management solution. Built several new features, contributed to design and UX discussions, and took initiative on debugging efforts. Technologies included PHP, MySQL, jQuery, and Bootstrap.</p>
|
||||
<p className="dark:text-white leading-relaxed font-light">Participated in the development of an enterprise project management solution. Built several new features, contributed to design and UX discussions, and took initiative on debugging efforts. Technologies included PHP, MySQL, jQuery, and Bootstrap.</p>
|
||||
|
||||
<Link href="/about/work/dization" className="text-rose-300 hover:text-rose-500 active:text-rose-300">Learn more about my work with Dization</Link>
|
||||
</article>
|
||||
<Link href="/about/work/dization" className="text-rose-600 hover:text-rose-400 active:text-rose-300">Learn more about my work with Dization</Link>
|
||||
</Card>
|
||||
|
||||
<article className="bg-slate-800 bg-opacity-40 shadow shadow-black p-3 my-4 rounded-lg">
|
||||
<Card>
|
||||
<h3 className="uppercase text-2xl text-rose-600">Metazu Studio</h3>
|
||||
<p className="font-light italic text-rose-300">Nashville, TN (hybrid) - Software Engineer (consultant)</p>
|
||||
<p>March 2022 - December 2022</p>
|
||||
<p className="font-light italic text-black dark:text-rose-300">Nashville, TN (hybrid) - Software Engineer (consultant)</p>
|
||||
<p className="dark:text-white">March 2022 - December 2022</p>
|
||||
|
||||
<div className="h-[1px] w-full my-3 bg-rose-300" />
|
||||
<div className="h-[1px] w-full my-3 bg-rose-600 dark:bg-rose-300" />
|
||||
|
||||
<p className="leading-relaxed font-light">Consulted on small teams for the design and engineering of full-stack web applications for clients. Used technologies including Node.js, React, MongoDB, and PostgreSQL.</p>
|
||||
</article>
|
||||
<p className="dark:text-white leading-relaxed font-light">Consulted on small teams for the design and engineering of full-stack web applications for clients. Used technologies including Node.js, React, MongoDB, and PostgreSQL.</p>
|
||||
</Card>
|
||||
|
||||
<Link href="/about/work" className="text-rose-300 hover:text-rose-500 active:text-rose-300 bg-slate-950 p-2 rounded-lg shadow-lg">See more about my experience</Link>
|
||||
</section>
|
||||
|
||||
@@ -1,24 +1,26 @@
|
||||
import Card from "../ui/Card"
|
||||
|
||||
const Projects = () => (
|
||||
<section className="w-full">
|
||||
<article className="bg-slate-800 bg-opacity-40 shadow shadow-black p-3 my-4 rounded-lg">
|
||||
<Card>
|
||||
<h3 className="uppercase text-2xl text-rose-600">Subsequent</h3>
|
||||
<p className="font-light italic text-rose-300">May 2023 - present</p>
|
||||
<p>TypeScript, Tone.js</p>
|
||||
<p className="text-rose-300">TypeScript, Tone.js</p>
|
||||
|
||||
<div className="h-[1px] w-full my-3 bg-rose-300" />
|
||||
<div className="h-[1px] w-full my-3 bg-rose-600 dark:bg-rose-300" />
|
||||
|
||||
<p className="leading-relaxed font-light">A tool for music creators to explore generative music composition. Composed of an engine that wraps around Tone.js, allowing the end user to specify parameters for indefinite generative music output. To be published as an NPM package, including providers to be consumed in front-end web frameworks.</p>
|
||||
</article>
|
||||
<p className="dark:text-white leading-relaxed font-light">A tool for music creators to explore generative music composition. Composed of an engine that wraps around Tone.js, allowing the end user to specify parameters for indefinite generative music output. To be published as an NPM package, including providers to be consumed in front-end web frameworks.</p>
|
||||
</Card>
|
||||
|
||||
<article className="bg-slate-800 bg-opacity-40 shadow shadow-black p-3 my-4 rounded-lg">
|
||||
<Card>
|
||||
<h3 className="uppercase text-2xl text-rose-600">Recipin</h3>
|
||||
<p className="font-light italic text-rose-300">October 2022 - present</p>
|
||||
<p>React, Express, TypeScript, PostgreSQL</p>
|
||||
<p className="text-rose-300">React, Express, TypeScript, PostgreSQL</p>
|
||||
|
||||
<div className="h-[1px] w-full my-3 bg-rose-300" />
|
||||
<div className="h-[1px] w-full my-3 bg-rose-600 dark:bg-rose-300" />
|
||||
|
||||
<p className="leading-relaxed font-light">A full stack web application for storing personal recipes in collections and sharing them in a lightweight social network.</p>
|
||||
</article>
|
||||
<p className="dark:text-white leading-relaxed font-light">A full stack web application for storing personal recipes in collections and sharing them in a lightweight social network.</p>
|
||||
</Card>
|
||||
</section>
|
||||
)
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -2,13 +2,13 @@ import Link from "next/link";
|
||||
|
||||
export function NavbarButton({ href, label, children }: { href: string, label?: string, children?: React.ReactNode }) {
|
||||
return (
|
||||
<Link passHref href={href} /* onMouseOver={() => mouseOver('about')} onMouseOut={() => mouseOut('about')} */ className={`ml-2 ${/* colors.firstColor */ ''} rounded-lg transition-colors ease-quick-start duration-${/* hoverState.about ? '[5000ms]' : */ '0'}`}>
|
||||
<Link passHref href={href} className={`ml-2 rounded-lg`}>
|
||||
{ label ? (
|
||||
<p className='text-lg text-white text-opacity-80 hover:text-opacity-100 uppercase border-white border-2 p-2 rounded-lg border-opacity-50 hover:border-opacity-75'>
|
||||
<p className='text-lg text-slate-700 dark:text-white text-opacity-80 hover:text-opacity-100 uppercase border-slate-700 dark:border-white border-2 p-2 rounded-lg border-opacity-50 hover:border-opacity-75'>
|
||||
{ label }
|
||||
</p>
|
||||
) : children ? children : (
|
||||
<p className='text-lg text-white text-opacity-80 hover:text-opacity-100 uppercase border-white border-2 p-2 rounded-lg border-opacity-50 hover:border-opacity-75'>
|
||||
<p className='text-lg text-slate-700 dark:text-white text-opacity-80 hover:text-opacity-100 uppercase border-slate-700 dark:border-white border-2 p-2 rounded-lg border-opacity-50 hover:border-opacity-75'>
|
||||
Button text
|
||||
</p>
|
||||
)}
|
||||
|
||||
7
components/ui/Card.tsx
Normal file
7
components/ui/Card.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
const Card = ({ children }: { children: React.ReactNode }) => (
|
||||
<article className="bg-slate-400 dark:bg-slate-800 dark:bg-opacity-40 p-3 my-4 rounded-lg">
|
||||
{children}
|
||||
</article>
|
||||
)
|
||||
|
||||
export default Card;
|
||||
16
components/ui/Chip.tsx
Normal file
16
components/ui/Chip.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import Link from "next/link"
|
||||
|
||||
const Chip = ({ label, href }: { label: string, href?: string }) => (
|
||||
href ? (
|
||||
<Link
|
||||
href={href}
|
||||
target="_blank"
|
||||
referrerPolicy="no-referrer"
|
||||
className="py-0.5 px-2 bg-rose-300 text-black dark:text-white dark:bg-rose-900 rounded-xl m-0.5 hover:bg-rose-500 active:bg-rose-900"
|
||||
>
|
||||
<p>{label}</p>
|
||||
</Link>
|
||||
) : <p className="py-0.5 px-2 bg-rose-300 dark:bg-rose-900 text-black dark:text-white rounded-xl m-0.5">{label}</p>
|
||||
)
|
||||
|
||||
export default Chip
|
||||
@@ -8,6 +8,7 @@ interface PanelProps {
|
||||
height?: TailwindFraction | TailwindNumber | undefined
|
||||
}
|
||||
|
||||
/** @deprecated i kinda hate this */
|
||||
const Panel: FC<PanelProps> = ({ children, width, height }) => {
|
||||
const narrow = (input: TailwindNumber | TailwindFraction | undefined) => {
|
||||
if (typeof input === 'number') return input.toString();
|
||||
|
||||
Reference in New Issue
Block a user