Skip to content

Commit

Permalink
version 0.3.5
Browse files Browse the repository at this point in the history
  • Loading branch information
PhelipeG committed May 11, 2024
1 parent 33e1354 commit 26eb2e5
Show file tree
Hide file tree
Showing 13 changed files with 351 additions and 317 deletions.
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-avatar": "^1.0.4",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-switch": "^1.0.3",
"@radix-ui/react-tabs": "^1.0.4",
"@types/node": "20.3.1",
"@types/react": "18.2.13",
"@types/react-dom": "18.2.6",
Expand All @@ -25,6 +27,7 @@
"next": "13.4.6",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^5.2.1",
"tailwind-merge": "^2.3.0",
"tailwindcss-animate": "^1.0.7",
"typescript": "5.1.3"
Expand Down
30 changes: 30 additions & 0 deletions src/components/bagde-techs.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { Badge } from "./ui/badge";
import { FaReact, } from 'react-icons/fa'
import { IoLogoJavascript } from "react-icons/io";
import { SiTypescript, SiTailwindcss , SiExpo , SiShadcnui} from "react-icons/si";
import { RiNextjsLine, RiFirebaseLine } from "react-icons/ri";

export function BadgeTechs(){
const techs = [
{ name: 'React/React Native', Icon: FaReact },
{ name: 'Expo', Icon: SiExpo},
{ name: 'Javascript', Icon: IoLogoJavascript },
{ name: 'Typescript', Icon: SiTypescript },
{ name: 'Nextjs', Icon: RiNextjsLine },
{ name: 'Tailwind Css', Icon: SiTailwindcss},
{ name: 'Shadcn UI', Icon: SiShadcnui},
{ name: 'Firebase', Icon: RiFirebaseLine},
];


return(
<div className="flex flex-wrap items-center justify-center gap-4 animate-bounce mt-8">
{techs.map((tech, index) => (
<Badge key={index} >
<tech.Icon size={24} />
<span>{tech.name}</span>
</Badge>
))}
</div>
)
}
2 changes: 1 addition & 1 deletion src/components/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ type LayoutProps = {

export default function Layout({ children }: LayoutProps) {
return (
<div className="flex h-screen">
<div className="flex">
<MenuBarNav />
<main className="flex-grow">
{children}
Expand Down
29 changes: 22 additions & 7 deletions src/components/menubar-nav.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,17 @@
import { CodeIcon, ContactIcon, HomeIcon, InfoIcon, MenuIcon, XIcon } from "lucide-react";
import {
CodeIcon,
ContactIcon,
HomeIcon,
InfoIcon,
MenuIcon,
XIcon,
} from "lucide-react";
import Image from "next/image";
import Hero from "../assets/Hero.jpg";
import { useEffect, useState } from "react";
import { Button } from "./ui/button";
import Link from "next/link";
import { Switch } from "./ui/switch";

export function MenuBarNav() {
const [isOpen, setIsOpen] = useState(true);
Expand All @@ -30,13 +38,14 @@ export function MenuBarNav() {
return isOpen ? (
<>
<aside
className={`flex flex-col w-80 h-screen px-3 py-8 overflow-y-auto bg-green-600 border-r rtl:border-r-0 rtl:border-l `}
className={`flex flex-col w-80 min-h-screen px-6 py-8 overflow-y-auto bg-green-600 border-r `}
>
{/* parte de cima com icone */}
<div className="flex items-center justify-between">
<div className="text-2xl font-semibold text-white">
<span>Menu</span>
</div>

<div className="">
<Button
onClick={handleMenuClick}
Expand All @@ -52,7 +61,7 @@ export function MenuBarNav() {
<div className="flex items-center py-2 mt-5 text-white rounded-md hover:animate-shake">
<HomeIcon size={24} className="flex-shrink-0" />
<Link href="/" className="mx-2 font-medium">
Inicio
Inicio
</Link>
</div>

Expand All @@ -70,22 +79,28 @@ export function MenuBarNav() {

<div className="flex items-center py-2 mt-5 text-white transform rounded-md hover:animate-shake">
<ContactIcon size={24} className="flex-shrink-0" />
<span className="mx-2 font-medium">Contato</span>
<Link href="/contact" className="mx-2 font-medium">Contato</Link>
</div>
</nav>

<a href="#" className="flex items-center -mx-2">
<div className="flex items-center">
<Image
src={Hero}
alt="avatar"
width={40}
height={40}
className="object-cover w-10 h-10 mx-2 rounded-full"
/>
<span className="mx-2 font-medium text-gray-800 dark:text-gray-200">
<span className="flex-1 mx-2 font-medium text-gray-800 dark:text-gray-200">
Luis Felipe
</span>
</a>
{/* <div className="flex items-center lg:hidden">
<div className="flex items-center h-6">
<Switch checked className="bg-white mr-2 w-6" />
<label>Mode</label>
</div>
</div> */}
</div>
</div>
</aside>
</>
Expand Down
36 changes: 36 additions & 0 deletions src/components/ui/badge.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
{
variants: {
variant: {
default:
"border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
secondary:
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive:
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
outline: "text-foreground",
},
},
defaultVariants: {
variant: "default",
},
}
)

export interface BadgeProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
return (
<div className={cn(badgeVariants({ variant }), className)} {...props} />
)
}

export { Badge, badgeVariants }
27 changes: 27 additions & 0 deletions src/components/ui/switch.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"

import { cn } from "@/lib/utils"

const Switch = React.forwardRef<
React.ElementRef<typeof SwitchPrimitives.Root>,
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
<SwitchPrimitives.Root
className={cn(
"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
className
)}
{...props}
ref={ref}
>
<SwitchPrimitives.Thumb
className={cn(
"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
)}
/>
</SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName

export { Switch }
53 changes: 53 additions & 0 deletions src/components/ui/tabs.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"

import { cn } from "@/lib/utils"

const Tabs = TabsPrimitive.Root

const TabsList = React.forwardRef<
React.ElementRef<typeof TabsPrimitive.List>,
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
<TabsPrimitive.List
ref={ref}
className={cn(
"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
className
)}
{...props}
/>
))
TabsList.displayName = TabsPrimitive.List.displayName

const TabsTrigger = React.forwardRef<
React.ElementRef<typeof TabsPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
<TabsPrimitive.Trigger
ref={ref}
className={cn(
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
className
)}
{...props}
/>
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

const TabsContent = React.forwardRef<
React.ElementRef<typeof TabsPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
<TabsPrimitive.Content
ref={ref}
className={cn(
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
className
)}
{...props}
/>
))
TabsContent.displayName = TabsPrimitive.Content.displayName

export { Tabs, TabsList, TabsTrigger, TabsContent }
11 changes: 3 additions & 8 deletions src/pages/about.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default function About() {
className="rounded-full"
alt="Luis"
/>
<Accordion
{/* <Accordion
type="single"
collapsible
className=" w-3/4 border-2 border-green-700"
Expand All @@ -28,12 +28,7 @@ export default function About() {
<AccordionTrigger>O que eu gosto?</AccordionTrigger>
<AccordionContent className="flex justify-center text-center max-w-24 overflow-auto font-bold">
<p>
Meu objetivo principal é criar experiências digitais que cativem
os usuários e proporcionem uma jornada suave e agradável. Como um
desenvolvedor front-end e mobile, minha especialidade está em
traduzir designs e conceitos em código, combinando todas as
tecnologias listadas nesse portifolio para dar vida a websites e
aplicativos.
</p>
</AccordionContent>
</AccordionItem>
Expand All @@ -53,7 +48,7 @@ export default function About() {
<AccordionTrigger>Melhor Projeto?</AccordionTrigger>
<AccordionContent className="mx-2 text-base font-bold">Nextjs Ifood Clone</AccordionContent>
</AccordionItem>
</Accordion>
</Accordion> */}
</div>
</Layout>
);
Expand Down
63 changes: 63 additions & 0 deletions src/pages/contact.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import Layout from "@/components/layout";
import { Badge } from "@/components/ui/badge";

import {
Card,
CardContent,
CardHeader,
CardTitle,
} from "@/components/ui/card";

import { ContactIcon, MailIcon } from "lucide-react";
import Link from "next/link";


export default function Contact() {
return (
<Layout>
<div className="flex items-center justify-center min-h-screen mx-auto">
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-2">
<Card className="">
<CardHeader>
<CardTitle>Contatos</CardTitle>
</CardHeader>
<CardContent>
<ul className="space-y-4">
<li className="flex space-x-2">
<ContactIcon size={24} />
<span>(99)9 9216-9563</span>
</li>
<li className="flex space-x-2">
<MailIcon size={24} />
<span>[email protected]</span>
</li>
</ul>
</CardContent>
</Card>

<Card className="flex-wrap">
<CardHeader>
<CardTitle>Redes Sociais</CardTitle>
</CardHeader>
<CardContent className="flex flex-wrap gap-2">
<Badge className=" border border-blue-500" variant={"outline"}>
Facebook
</Badge>
<Badge className=" border border-rose-300" variant={"outline"}>
Instagram
</Badge>
<Badge className=" border border-blue-500" variant={"outline"}>
<Link href="https://www.linkedin.com/in/luis-felipe-silv/">
Linkedin
</Link>
</Badge>
<Badge className=" border border-green-500" variant={"outline"}>
Whatsapp Pessoal
</Badge>
</CardContent>
</Card>
</div>
</div>
</Layout>
);
}
Loading

0 comments on commit 26eb2e5

Please sign in to comment.