update : v0.1.1

GuilhaoF · Oct 24, 2024 · cc3f198 · cc3f198
1 parent e994cb3
commit cc3f198
Show file tree

Hide file tree

Showing 57 changed files with 3,362 additions and 5,133 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -0,0 +1,40 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer base {
+  body {
+    @apply font-primary bg-primary text-white leading-loose;
+  }
+  .h1 {
+    @apply text-[48px] xl:text-[80px] leading-[1.1] font-semibold;
+  }
+  .h2 {
+    @apply text-[36px] xl:text-[48px] leading-[1.1] font-semibold;
+  }
+  .h3 {
+    @apply text-[20px] xl:text-[24px] leading-[1.1] font-semibold;
+  }
+  .text-outline {
+    -webkit-text-stroke: 1px #ffffff;
+  }
+
+  .text-outline-hover {
+    -webkit-text-stroke: 1px #00ff99;
+  }
+}
+
+
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+@layer base {
+  :root {
+    --radius: 0.5rem;
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,33 @@
+import type { Metadata } from "next";
+import { JetBrains_Mono } from "next/font/google";
+import { Header } from "../components/header";
+import "./globals.css";
+
+
+const jetbrainsMono = JetBrains_Mono({
+  subsets: ["latin"],
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800"],
+  variable: "--font-jetbrains-mono",
+});
+
+export const metadata: Metadata = {
+  title: "Portfolio Luis",
+  description: "Portfólio de Luis Felipe Guilhao",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="pt-BR">
+      <body
+        className={`${jetbrainsMono.variable} ${jetbrainsMono.variable} antialiased`}
+      >
+        <Header />
+        {children}
+      </body>
+    </html>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,36 @@
+import { FiDownload } from "react-icons/fi";
+import { ProfilePic } from "../components/profile-pic";
+import { Social } from "../components/social-links";
+import { Button } from "../components/ui/button";
+
+
+export default function Home() {
+  return (
+    <div className="h-full">
+      <div className="container mx-auto h-full">
+        <div className="flex flex-col xl:flex-row items-center justify-between xl:pt-8 xl:pb-24" >
+          <div className="text-center xl:text-left order-2 xl:order-none">
+            <span className="text-xl">Desenvolvedor Front-end e Mobile</span>
+            <h1 className="h1 mb-6">
+              Olá, me chamo <br />
+            </h1>
+            <span className=" text-[1.5rem] text-green-500">Luis Felipe Guilhao</span>
+            <div className="flex flex-col xl:flex-row items-center gap-8">
+              <Button variant={'ghost'} size="lg" className="uppercase flex items-center gap-2">
+                <span>Baixar Currículo</span>
+                <FiDownload className="text-xl" />
+              </Button>
+              <div className="mb-8 xl:mb-0">
+                <Social containerStyles="flex gap-6" iconStyles="w-9 h-9 border border-accent rounded-full flex justify-center items-center text-accent text-base hover:bg-accent hover:text-primary hover: transition-all
+                  duration-500"/>
+              </div>
+            </div>
+          </div>
+          <div className="order-1 xl:order-none mb-8 xl:mb-0">
+              <ProfilePic />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/public/android-chrome-192x192.png → app/public/android-chrome-192x192.png b/public/android-chrome-192x192.png → app/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png → app/public/android-chrome-512x512.png b/public/android-chrome-512x512.png → app/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png → app/public/apple-touch-icon.png b/public/apple-touch-icon.png → app/public/apple-touch-icon.png
diff --git a/public/curriculo/Luis Felipe Pdf.pdf → app/public/curriculo/Luis Felipe Pdf.pdf b/public/curriculo/Luis Felipe Pdf.pdf → app/public/curriculo/Luis Felipe Pdf.pdf
diff --git a/public/favicon-16x16.png → app/public/favicon-16x16.png b/public/favicon-16x16.png → app/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png → app/public/favicon-32x32.png b/public/favicon-32x32.png → app/public/favicon-32x32.png
diff --git a/public/favicon.ico → app/public/favicon.ico b/public/favicon.ico → app/public/favicon.ico
diff --git a/public/images-projects/gdelivery.png → app/public/images-projects/gdelivery.png b/public/images-projects/gdelivery.png → app/public/images-projects/gdelivery.png
diff --git a/public/images-projects/healtcare.png → app/public/images-projects/healtcare.png b/public/images-projects/healtcare.png → app/public/images-projects/healtcare.png
diff --git a/public/images-projects/iweather.png → app/public/images-projects/iweather.png b/public/images-projects/iweather.png → app/public/images-projects/iweather.png
diff --git a/public/images-projects/mycontacts.png → app/public/images-projects/mycontacts.png b/public/images-projects/mycontacts.png → app/public/images-projects/mycontacts.png
diff --git a/public/images-projects/mygoals.png → app/public/images-projects/mygoals.png b/public/images-projects/mygoals.png → app/public/images-projects/mygoals.png
diff --git a/public/images-projects/pass-in.png → app/public/images-projects/pass-in.png b/public/images-projects/pass-in.png → app/public/images-projects/pass-in.png
diff --git a/public/images-projects/planner-io.png → app/public/images-projects/planner-io.png b/public/images-projects/planner-io.png → app/public/images-projects/planner-io.png
diff --git a/public/images-projects/webcarros.png → app/public/images-projects/webcarros.png b/public/images-projects/webcarros.png → app/public/images-projects/webcarros.png
diff --git a/public/images/about.jpg → app/public/images/about.jpg b/public/images/about.jpg → app/public/images/about.jpg
diff --git a/public/images/hero-1.png → app/public/images/hero-1.png b/public/images/hero-1.png → app/public/images/hero-1.png
diff --git a/public/next.svg → app/public/next.svg b/public/next.svg → app/public/next.svg
diff --git a/public/site.webmanifest → app/public/site.webmanifest b/public/site.webmanifest → app/public/site.webmanifest
diff --git a/public/thirteen.svg → app/public/thirteen.svg b/public/thirteen.svg → app/public/thirteen.svg
diff --git a/public/vercel.svg → app/public/vercel.svg b/public/vercel.svg → app/public/vercel.svg
diff --git a/components.json b/components.json
@@ -1,11 +1,11 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
   "style": "default",
-  "rsc": false,
+  "rsc": true,
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.ts",
-    "css": "src/styles/globals.css",
+    "css": "app/globals.css",
     "baseColor": "slate",
     "cssVariables": false,
     "prefix": ""

diff --git a/components/header.tsx b/components/header.tsx
@@ -0,0 +1,29 @@
+import Link from "next/link";
+import Nav from "./navbar";
+import { Button } from "./ui/button";
+
+
+export function Header() {
+  return (
+    <header className="py-8 xl:py-12 text-white">
+      <div className="container mx-auto flex justify-between items-center">
+        <Link href='/'>
+          <h1 className="text-4xl font-semibold">
+           Luis Felipe <span className="text-green-700">.</span>
+          </h1>
+        </Link>
+
+        <div className="hidden xl:flex items-center gap-8">
+          <Nav />
+            <Link href='https://www.linkedin.com/in/luis-felipe-silv/'>
+                <Button>Linkedin</Button>
+            </Link>
+        </div>
+
+        <div className="xl:hidden">
+
+        </div>
+      </div>
+    </header>
+  )
+}
diff --git a/components/navbar.tsx b/components/navbar.tsx
@@ -0,0 +1,47 @@
+"use client";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const links = [
+  {
+    name: "Home",
+    path: "/",
+  },
+  {
+    name: "Serviços",
+    path: "/services",
+  },
+  {
+    name: "Resumo",
+    path: "/resume",
+  },
+  {
+    name: "Projetos",
+    path: "/work",
+  },
+  {
+    name: "Contact",
+    path: "/contact",
+  },
+];
+
+export default function Nav() {
+  const pathname = usePathname();
+  return (
+    <nav className="flex gap-8">
+      {links.map((link, index) => {
+        return (
+          <Link
+            href={link.path}
+            key={index}
+            className={`${
+              link.path === pathname && "text-accent border-b-2 border-accent"
+            } captalize font-medium hover:text-accent transition-all`}
+          >
+            {link.name}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}
diff --git a/components/profile-pic.tsx b/components/profile-pic.tsx
@@ -0,0 +1,64 @@
+"use client";
+import { motion } from "framer-motion";
+import Image from "next/image";
+import profile from "../app/public/images/hero-1.png";
+
+export function ProfilePic() {
+  return (
+    <div className="w-full h-full relative">
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{
+          opacity: 1,
+          transition: { delay: 1.5, duration: 0.4, ease: "easeIn" },
+        }}
+      >
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{
+            opacity: 1,
+            transition: { delay: 2, duration: 0.4, ease: "easeIn" },
+          }}
+          className="w-[298px] h-[298px] xl:w-[498px] xl:h-[498px]"
+        >
+           <Image
+            src={profile}
+            priority
+            quality={100}
+            fill
+            alt=""
+            className="object-contain rounded-full"
+          />
+
+          {/* Código do Círculo */}
+          <motion.svg
+            className="w-[300px] xl:w-[506px] h-[300px] xl:h-[506px]"
+            fill="transparent"
+            viewBox="0 0 506 506"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <motion.circle
+              cx="253"
+              cy="253"
+              r="250"
+              stroke="#00ffff"
+              strokeWidth="4"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              initial={{ strokeDasharray: "24 10 0 0" }}
+              animate={{
+                strokeDasharray: ["15 120 25 25", "16 25 92 72", "4 250 22 22"],
+                rotate: [120, 360],
+              }}
+              transition={{
+                duration: 20,
+                repeat: Infinity,
+                repeatType: "reverse",
+              }}
+            />
+          </motion.svg>
+        </motion.div>
+      </motion.div>
+    </div>
+  );
+}
diff --git a/components/social-links.tsx b/components/social-links.tsx
@@ -0,0 +1,24 @@
+import Link from 'next/link';
+import { FaGithub, FaLinkedinIn } from 'react-icons/fa';
+
+const socials = [
+    {icon: <FaGithub />, link: ""},
+    {icon: <FaLinkedinIn />, link: ""},
+]
+
+interface SocialProps {
+    containerStyles: string;
+    iconStyles: string;
+}
+
+export function Social({containerStyles, iconStyles}: SocialProps) {
+    return (
+        <div className={containerStyles}>
+            {socials.map((item, index) => (
+                <Link key={index} href={item.link} className={iconStyles}>
+                    {item.icon} 
+                </Link>
+            ))}
+        </div>
+    )
+}
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300",
+  {
+    variants: {
+      variant: {
+        default: "bg-slate-900 text-slate-50 hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90",
+        destructive:
+          "bg-red-500 text-slate-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/90",
+        outline:
+          "border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50",
+        secondary:
+          "bg-slate-100 text-slate-900 hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80",
+        ghost: "hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50",
+        link: "text-slate-900 underline-offset-4 hover:underline dark:text-slate-50",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
diff --git a/src/data/projects-data.ts → data/projects-data.ts b/src/data/projects-data.ts → data/projects-data.ts
diff --git a/src/lib/utils.ts → lib/utils.ts b/src/lib/utils.ts → lib/utils.ts