Skip to content

Commit

Permalink
feat(ui): add icons on KnowledgeSection
Browse files Browse the repository at this point in the history
  • Loading branch information
@mateusfg7
mateusfg7 committed Dec 21, 2022
1 parent 20bbe7d commit 2f23998
Showing 1 changed file with 128 additions and 50 deletions.
178 changes: 128 additions & 50 deletions src/components/portifolio/KnowledgeSection.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,31 @@
import { IoLogoJavascript } from 'react-icons/io'
import {
SiAdobephotoshop,
SiCss3,
SiDeno,
SiDocker,
SiExpo,
SiExpress,
SiFastify,
SiFigma,
SiGit,
SiGithub,
SiHtml5,
SiJavascript,
SiLinux,
SiNestjs,
SiNextdotjs,
SiNginx,
SiNodedotjs,
SiPrisma,
SiPython,
SiReact,
SiRust,
SiStyledcomponents,
SiTailwindcss,
SiTypescript
} from 'react-icons/si'

export function KnowledgeSection() {
return (
<div
Expand All @@ -15,29 +43,37 @@ export function KnowledgeSection() {
</h2>
<div className="w-full h-full flex justify-center">
<div className="h-full grid grid-cols-2 gap-x-10 gap-y-5">
<div className="flex gap-3">
<span className="text-neutral-50">[X]</span>
<div className="flex gap-2">
<span className="p-px text-neutral-50 text-xl">
<SiJavascript />
</span>
<span className="flex flex-col gap-1">
<span className="text-neutral-50">Javascript</span>
<span className="text-neutral-400">Avançado</span>
</span>
</div>
<div className="flex gap-3">
<span className="text-neutral-50">[X]</span>
<div className="flex gap-2">
<span className="p-px text-neutral-50 text-xl">
<SiTypescript />
</span>
<span className="flex flex-col gap-1">
<span className="text-neutral-50">Typescript</span>
<span className="text-neutral-400">Avançado</span>
</span>
</div>
<div className="flex gap-3">
<span className="text-neutral-50">[X]</span>
<div className="flex gap-2">
<span className="p-px text-neutral-50 text-xl">
<SiPython />
</span>
<span className="flex flex-col gap-1">
<span className="text-neutral-50">Python</span>
<span className="text-neutral-400">Intermediário</span>
</span>
</div>
<div className="flex gap-3">
<span className="text-neutral-50">[X]</span>
<div className="flex gap-2">
<span className="p-px text-neutral-50 text-xl">
<SiRust />
</span>
<span className="flex flex-col gap-1">
<span className="text-neutral-50">Rust</span>
<span className="text-neutral-400">Iniciante</span>
Expand All @@ -52,43 +88,55 @@ export function KnowledgeSection() {
</h2>
<div className="w-full h-full flex justify-center">
<div className="h-full grid grid-cols-2 gap-x-10 gap-y-5">
<div className="flex gap-3">
<span className="text-neutral-50">[X]</span>
<div className="flex gap-2">
<span className="p-px text-neutral-50 text-xl">
<SiHtml5 />
</span>
<span className="flex flex-col gap-1">
<span className="text-neutral-50">HTML</span>
<span className="text-neutral-400">Avançado</span>
</span>
</div>
<div className="flex gap-3">
<span className="text-neutral-50">[X]</span>
<div className="flex gap-2">
<span className="p-px text-neutral-50 text-xl">
<SiCss3 />
</span>
<span className="flex flex-col gap-1">
<span className="text-neutral-50">CSS</span>
<span className="text-neutral-400">Avançado</span>
</span>
</div>
<div className="flex gap-3">
<span className="text-neutral-50">[X]</span>
<div className="flex gap-2">
<span className="p-px text-neutral-50 text-xl">
<SiReact />
</span>
<span className="flex flex-col gap-1">
<span className="text-neutral-50">ReactJS</span>
<span className="text-neutral-400">Intermediário</span>
</span>
</div>
<div className="flex gap-3">
<span className="text-neutral-50">[X]</span>
<div className="flex gap-2">
<span className="p-px text-neutral-50 text-xl">
<SiNextdotjs />
</span>
<span className="flex flex-col gap-1">
<span className="text-neutral-50">NextJS</span>
<span className="text-neutral-400">Intermediário</span>
</span>
</div>
<div className="flex gap-3">
<span className="text-neutral-50">[X]</span>
<div className="flex gap-2">
<span className="p-px text-neutral-50 text-xl">
<SiTailwindcss />
</span>
<span className="flex flex-col gap-1">
<span className="text-neutral-50">Tailwind CSS</span>
<span className="text-neutral-400">Avançado</span>
</span>
</div>
<div className="flex gap-3">
<span className="text-neutral-50">[X]</span>
<div className="flex gap-2">
<span className="p-px text-neutral-50 text-xl">
<SiStyledcomponents />
</span>
<span className="flex flex-col gap-1">
<span className="text-neutral-50">Styled Components</span>
<span className="text-neutral-400">Avançado</span>
Expand All @@ -103,50 +151,64 @@ export function KnowledgeSection() {
</h2>
<div className="w-full h-full flex justify-center">
<div className="h-full grid grid-cols-2 gap-x-10 gap-y-5">
<div className="flex gap-3">
<span className="text-neutral-50">[X]</span>
<div className="flex gap-2">
<span className="p-px text-neutral-50 text-xl">
<SiNodedotjs />
</span>
<span className="flex flex-col gap-1">
<span className="text-neutral-50">NodeJS</span>
<span className="text-neutral-400">Intermediário</span>
</span>
</div>
<div className="flex gap-3">
<span className="text-neutral-50">[X]</span>
<div className="flex gap-2">
<span className="p-px text-neutral-50 text-xl">
<SiDeno />
</span>
<span className="flex flex-col gap-1">
<span className="text-neutral-50">Deno</span>
<span className="text-neutral-400">Iniciante</span>
</span>
</div>
<div className="flex gap-3">
<span className="text-neutral-50">[X]</span>
<div className="flex gap-2">
<span className="p-px text-neutral-50 text-xl">
<SiPrisma />
</span>
<span className="flex flex-col gap-1">
<span className="text-neutral-50">Prisma</span>
<span className="text-neutral-400">Intermediário</span>
</span>
</div>
<div className="flex gap-3">
<span className="text-neutral-50">[X]</span>
<div className="flex gap-2">
<span className="p-px text-neutral-50 text-xl">
<SiExpress />
</span>
<span className="flex flex-col gap-1">
<span className="text-neutral-50">Express</span>
<span className="text-neutral-400">Intermediário</span>
</span>
</div>
<div className="flex gap-3">
<span className="text-neutral-50">[X]</span>
<div className="flex gap-2">
<span className="p-px text-neutral-50 text-xl">
<SiNestjs />
</span>
<span className="flex flex-col gap-1">
<span className="text-neutral-50">NestJS</span>
<span className="text-neutral-400">Iniciante</span>
</span>
</div>
<div className="flex gap-3">
<span className="text-neutral-50">[X]</span>
<div className="flex gap-2">
<span className="p-px text-neutral-50 text-xl">
<SiFastify />
</span>
<span className="flex flex-col gap-1">
<span className="text-neutral-50">Fastify</span>
<span className="text-neutral-400">Iniciantes</span>
</span>
</div>
<div className="flex gap-3">
<span className="text-neutral-50">[X]</span>
<div className="flex gap-2">
<span className="p-px text-neutral-50 text-xl">
<SiNginx />
</span>
<span className="flex flex-col gap-1">
<span className="text-neutral-50">NGINX</span>
<span className="text-neutral-400">Iniciantes</span>
Expand All @@ -161,57 +223,73 @@ export function KnowledgeSection() {
</h2>
<div className="w-full h-full flex justify-center">
<div className="h-full grid grid-cols-2 gap-x-10 gap-y-5">
<div className="flex gap-3">
<span className="text-neutral-50">[X]</span>
<div className="flex gap-2">
<span className="p-px text-neutral-50 text-xl">
<SiReact />
</span>
<span className="flex flex-col gap-1">
<span className="text-neutral-50">React-Native</span>
<span className="text-neutral-400">Intermediário</span>
</span>
</div>
<div className="flex gap-3">
<span className="text-neutral-50">[X]</span>
<div className="flex gap-2">
<span className="p-px text-neutral-50 text-xl">
<SiExpo />
</span>
<span className="flex flex-col gap-1">
<span className="text-neutral-50">Expo</span>
<span className="text-neutral-400">Intermediário</span>
</span>
</div>
<div className="flex gap-3">
<span className="text-neutral-50">[X]</span>
<div className="flex gap-2">
<span className="p-px text-neutral-50 text-xl">
<SiGit />
</span>
<span className="flex flex-col gap-1">
<span className="text-neutral-50">GIT</span>
<span className="text-neutral-400">Avançado</span>
</span>
</div>
<div className="flex gap-3">
<span className="text-neutral-50">[X]</span>
<div className="flex gap-2">
<span className="p-px text-neutral-50 text-xl">
<SiGithub />
</span>
<span className="flex flex-col gap-1">
<span className="text-neutral-50">Github</span>
<span className="text-neutral-400">Avançado</span>
</span>
</div>
<div className="flex gap-3">
<span className="text-neutral-50">[X]</span>
<div className="flex gap-2">
<span className="p-px text-neutral-50 text-xl">
<SiDocker />
</span>
<span className="flex flex-col gap-1">
<span className="text-neutral-50">Docker</span>
<span className="text-neutral-400">Intermediário</span>
</span>
</div>
<div className="flex gap-3">
<span className="text-neutral-50">[X]</span>
<div className="flex gap-2">
<span className="p-px text-neutral-50 text-xl">
<SiLinux />
</span>
<span className="flex flex-col gap-1">
<span className="text-neutral-50">Linux</span>
<span className="text-neutral-400">Intermediário</span>
</span>
</div>
<div className="flex gap-3">
<span className="text-neutral-50">[X]</span>
<div className="flex gap-2">
<span className="p-px text-neutral-50 text-xl">
<SiFigma />
</span>
<span className="flex flex-col gap-1">
<span className="text-neutral-50">Figma</span>
<span className="text-neutral-400">Intermediário</span>
</span>
</div>
<div className="flex gap-3">
<span className="text-neutral-50">[X]</span>
<div className="flex gap-2">
<span className="p-px text-neutral-50 text-xl">
<SiAdobephotoshop />
</span>
<span className="flex flex-col gap-1">
<span className="text-neutral-50">Photoshop</span>
<span className="text-neutral-400">Intermediário</span>
Expand Down

0 comments on commit 2f23998

Please sign in to comment.