Skip to content

Commit

Permalink
feat(ux): adapt portifolio page to small devices
Browse files Browse the repository at this point in the history
  • Loading branch information
@mateusfg7
mateusfg7 committed Jun 21, 2023
1 parent 5492a99 commit c6b48d5
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 94 deletions.
148 changes: 75 additions & 73 deletions src/app/portifolio/components/about-section.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import Link from 'next/link'
import { FiBook, FiDownload } from 'react-icons/fi'
import { DownloadSimple, Book } from '@/shared/lib/phosphor-icons'

export function AboutSection() {
return (
Expand All @@ -20,89 +20,91 @@ export function AboutSection() {
src="https://github.com/mateusfg7.png"
className="my-14 w-1/2 rounded-3xl object-cover md:hidden"
/>
<p className="mb-3 px-4 text-xl md:p-0">
Me chamo <span className="font-bold">Mateus Felipe Gonçalves</span>,
tenho 20 anos e moro em Pará de Minas - MG, Brasil.
</p>
<p className="mb-3 px-4 text-xl md:p-0">
<span className="font-semibold">Auto didata</span> full-stack.
Possuo conhecimento em{' '}
<a
className="text-neutral-50 hover:cursor-pointer hover:underline"
href="https://reactjs.org/"
target="_blank"
rel="noreferrer"
>
ReactJS
</a>{' '}
e{' '}
<a
className="text-neutral-50 hover:cursor-pointer hover:underline"
href="https://nextjs.org/"
target="_blank"
rel="noreferrer"
>
NextJS
</a>{' '}
no Front-end,{' '}
<a
className="text-neutral-50 hover:cursor-pointer hover:underline"
href="https://deno.land/"
target="_blank"
rel="noreferrer"
>
Deno
</a>{' '}
e{' '}
<a
className="text-neutral-50 hover:cursor-pointer hover:underline"
href="https://nodejs.org/"
target="_blank"
rel="noreferrer"
>
NodeJS
</a>{' '}
no Back-end, e{' '}
<a
className="text-neutral-50 hover:cursor-pointer hover:underline"
href="https://reactnative.dev/"
target="_blank"
rel="noreferrer"
>
React-native
</a>
/
<a
className="text-neutral-50 hover:cursor-pointer hover:underline"
href="https://expo.dev/"
target="_blank"
rel="noreferrer"
>
Expo
</a>{' '}
no Mobile com foco em Android. Possuo nível intermediário de inglês
em leitura e escrita, habilidade adquirida através da leitura de
várias documentações e artigos relacionados a tecnologias e outros
assuntos em inglês, e também escrevendo blog posts e documentações
de projetos pessoais.
</p>
<p className="px-4 text-xl md:p-0">
Também tenho interesse na área de construção civil, elétrica e
automação residencial.
</p>
<div className='px-4 md:p-0 text-xl flex flex-col gap-3 text-justify md:text-left'>
<p>
Me chamo <span className="font-bold">Mateus Felipe Gonçalves</span>,
tenho 20 anos e moro em Pará de Minas - MG, Brasil.
</p>
<p>
<span className="font-semibold">Auto didata</span> full-stack.
Possuo conhecimento em{' '}
<a
className="text-neutral-50 hover:cursor-pointer hover:underline"
href="https://reactjs.org/"
target="_blank"
rel="noreferrer"
>
ReactJS
</a>{' '}
e{' '}
<a
className="text-neutral-50 hover:cursor-pointer hover:underline"
href="https://nextjs.org/"
target="_blank"
rel="noreferrer"
>
NextJS
</a>{' '}
no Front-end,{' '}
<a
className="text-neutral-50 hover:cursor-pointer hover:underline"
href="https://deno.land/"
target="_blank"
rel="noreferrer"
>
Deno
</a>{' '}
e{' '}
<a
className="text-neutral-50 hover:cursor-pointer hover:underline"
href="https://nodejs.org/"
target="_blank"
rel="noreferrer"
>
NodeJS
</a>{' '}
no Back-end, e{' '}
<a
className="text-neutral-50 hover:cursor-pointer hover:underline"
href="https://reactnative.dev/"
target="_blank"
rel="noreferrer"
>
React-native
</a>
/
<a
className="text-neutral-50 hover:cursor-pointer hover:underline"
href="https://expo.dev/"
target="_blank"
rel="noreferrer"
>
Expo
</a>{' '}
no Mobile com foco em Android. Possuo nível intermediário de inglês
em leitura e escrita, habilidade adquirida através da leitura de
várias documentações e artigos relacionados a tecnologias e outros
assuntos em inglês, e também escrevendo blog posts e documentações
de projetos pessoais.
</p>
<p>
Também tenho interesse na área de construção civil, elétrica e
automação residencial.
</p>
</div>
<div className="mt-12 flex items-center gap-10 md:mt-6">
<a
className="flex items-center justify-center gap-2 text-blue-500 hover:text-blue-300"
target="_blank"
href="/assets/portifolio/cv-mateus-felipe.pdf"
>
Baixar CV <FiDownload />
Baixar CV <DownloadSimple />
</a>
<Link
className="flex items-center justify-center gap-2 text-blue-500 hover:text-blue-300"
href="/"
>
Blog <FiBook />
Blog <Book />
</Link>
</div>
</div>
Expand Down
26 changes: 14 additions & 12 deletions src/app/portifolio/components/contact-section/contact.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,20 @@ export const Contact: React.FC<{
const [isHover, setIsHover] = useState(false)

return (
<div className="flex items-center border-b border-b-neutral-800 text-xl text-neutral-200 last:border-none">
<div
className="mr-7 flex h-full w-40 items-center gap-2 text-2xl"
style={{
color
}}
>
<Icon weight="duotone" />
<span>{title}</span>
</div>
<div className="mr-20 flex h-full w-72 items-center">
<span>{data}</span>
<div className="flex items-center border-b border-b-neutral-800 text-xl text-neutral-200 last:border-none gap-5 md:gap-10 py-3 md:p-0">
<div className='flex-1 flex md:items-center flex-col md:flex-row md:gap-7'>
<div
className="flex h-full md:w-40 items-center gap-2 text-2xl"
style={{
color
}}
>
<Icon weight="duotone" />
<span>{title}</span>
</div>
<div className="flex md:w-72 h-full items-center text-neutral-400">
<span>{data}</span>
</div>
</div>
<div
className="group flex items-center py-6 text-3xl hover:cursor-pointer"
Expand Down
16 changes: 8 additions & 8 deletions src/app/portifolio/components/knowledge-section/accordion.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const AccordionTrigger = React.forwardRef(
) => (
<Accordion.Header className="flex">
<Accordion.Trigger
className="group flex flex-1 cursor-default items-center justify-between bg-neutral-900 p-7 text-lg leading-none shadow-lg shadow-black/5 outline-none duration-300 hover:cursor-pointer hover:bg-neutral-800"
className="group flex flex-1 cursor-default items-center justify-between bg-neutral-900 p-4 py-7 md:p-7 text-lg leading-none shadow-lg shadow-black/5 outline-none duration-300 hover:cursor-pointer hover:bg-neutral-800"
{...props}
ref={forwardedRef}
>
Expand All @@ -60,7 +60,7 @@ export const AccordionContent = React.forwardRef(
{...props}
ref={forwardedRef}
>
<div className="p-7">{children}</div>
<div className="p-4 py-7 md:p-7">{children}</div>
</Accordion.Content>
)
)
Expand All @@ -69,24 +69,24 @@ export const Info: React.FC<{ knowledge: Knowledge }> = ({ knowledge }) => {
const Icon = knowledge.icon

return (
<div className="relative flex w-full items-center text-xl">
<div className="flex w-[60%] items-center gap-6">
<div className="relative flex w-full items-center">
<div className="flex w-1/2 md:w-[60%] items-center gap-4 md:gap-6 md:text-xl">
<span>
<Icon />
</span>
<span>{knowledge.title}</span>
</div>
<div className="flex-1">
<div
className={`rounded-2xl bg-neutral-800 px-3 text-lg text-neutral-400 ${
className={`rounded-full bg-neutral-800 leading-none p-[0.35rem] md:px-3 md:text-lg text-neutral-400 ${
knowledge.level === 1 && 'w-[10%]'
} ${knowledge.level === 2 && 'w-[60%]'} ${
knowledge.level === 3 && 'w-[100%]'
} min-w-max`}
>
{knowledge.level === 1 && 'Iniciante'}
{knowledge.level === 2 && 'Intermediário'}
{knowledge.level === 3 && 'Avançado'}
{knowledge.level === 1 && 'iniciante'}
{knowledge.level === 2 && 'intermediário'}
{knowledge.level === 3 && 'avançado'}
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/app/portifolio/components/knowledge-section/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { SectionLayout } from '../section-layout'
export function KnowledgeSection() {
return (
<SectionLayout title="Em que me destaco" id="conhecimentos">
<div className="px-28">
<div className="md:px-28">
<Accordion.Root
className="w-full overflow-hidden rounded-3xl border border-neutral-900"
type="single"
Expand Down

0 comments on commit c6b48d5

Please sign in to comment.