diff --git a/app/favicon.ico b/app/favicon.ico index 718d6fe..f433e8f 100644 Binary files a/app/favicon.ico and b/app/favicon.ico differ diff --git a/app/globals.css b/app/globals.css index b5c61c9..000e9a8 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,3 +1,66 @@ @tailwind base; @tailwind components; @tailwind utilities; +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 0 0% 3.9%; + --card: 0 0% 100%; + --card-foreground: 0 0% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.9%; + --primary: 0 0% 9%; + --primary-foreground: 0 0% 98%; + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + --accent: 0 0% 96.1%; + --accent-foreground: 0 0% 9%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + --ring: 0 0% 3.9%; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + --radius: 0.5rem + } + .dark { + --background: 0 0% 3.9%; + --foreground: 0 0% 98%; + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 0 0% 9%; + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + --ring: 0 0% 83.1%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55% + } +} +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/app/page.tsx b/app/page.tsx index c2bf9a1..6747586 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,17 +1,7 @@ -import Image from "next/image"; -import NavBar from "@/components/NavBar"; -import HomeComp from "@/components/Home"; -import AboutMe from "@/components/About"; -import Project from "@/components/Project"; -import Contact from "@/components/Contact"; +import LandingPage from "@/components/LandingPage"; export default function Home() { - return ( -
- - - - - -
- ); -} + return
+ + +
+} \ No newline at end of file diff --git a/components.json b/components.json new file mode 100644 index 0000000..dea737b --- /dev/null +++ b/components.json @@ -0,0 +1,21 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "tailwind.config.ts", + "css": "app/globals.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + }, + "iconLibrary": "lucide" +} \ No newline at end of file diff --git a/components/LandingPage.tsx b/components/LandingPage.tsx new file mode 100644 index 0000000..0eaee07 --- /dev/null +++ b/components/LandingPage.tsx @@ -0,0 +1,233 @@ +'use client' +import React, { useState } from 'react' +import { Mail, Github, Linkedin, Twitter, ExternalLink } from 'lucide-react' +import { motion } from 'framer-motion' +import Image from 'next/image' +import toast from 'react-hot-toast' + +export default function LandingPage() { + const [copyNotification, setCopyNotification] = useState(false); + const [showEmail, setShowEmail] = useState(false); + + const skills = [ + "Next.js", "React", "TypeScript", "Tailwind CSS", "HTML5/CSS3", + "Node.js", "PostgreSQL", "Express", "REST API", "GraphQL", + "Git", "Docker", "AWS", "Firebase", "NextJs","Prisma" + ] + + const projectCards = [ + { title: 'DecentraWork', description: "DecentraWork is a web3-powered freelancing platform that streamlines project management and payment processes. It enables project providers to collaborate securely with freelancers while leveraging Solana blockchain for seamless payments via escrow. The platform features real-time messaging, robust project tracking, and end-to-end functionality, all while maintaining low fees for providers. DecentraWork offers a modern and efficient alternative to traditional freelancing platforms by integrating decentralized technology with user-centric design.", src: '/project1.jpg', url: 'https://decentra-work.vercel.app/' }, + { title: 'Solana Token Launcher', description: "Token Launcher App is a Solana-based platform that allows users to launch new tokens with metadata, airdrop SOL to their accounts, send SOL to others, and sign blockchain messages. Designed for simplicity and efficiency, the app empowers users to manage their on-chain assets effortlessly while leveraging Solana's fast and low-cost transactions.", src: '/project3.jpg', url: 'https://launcher-solana.vercel.app/' }, + { title: 'OpenSource Repositories', description: "RepoFlow is a platform designed to support open-source collaboration by allowing users to showcase repositories that need contributions. It directly integrates with GitHub, enabling users to fetch and display their projects effortlessly. Additionally, RepoFlow offers a bookmarking feature so users can save and organize their favorite repositories, making it easier to keep track of potential contribution opportunities. The platform fosters a vibrant community of developers by streamlining the process of discovering and contributing to open-source projects.", src: '/project6.png', url: 'https://repoflow-abstergo.vercel.app/' }, + { title: 'Forums', description: "MuktiForums, founded by Het Joshi, is a vibrant online platform for open-source enthusiasts. It offers a modern, gradient-themed interface where users can discuss software, collaborate on projects, and share knowledge. With features like trending topics, community spotlights, and interactive elements, MuktiForums fosters a dynamic ecosystem for open-source innovation and learning.", src: '/project4.png', url: 'https://forums-abstergo.vercel.app/' }, + ] + + const handleEmailClick = () => { + navigator.clipboard.writeText("parvj5212@gmail.com"); + setCopyNotification(true); + setTimeout(() => setCopyNotification(false), 2000); // Hide notification after 2 seconds + }; + + + const containerVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + staggerChildren: 0.1 + } + } + } + + const itemVariants = { + hidden: { y: 20, opacity: 0 }, + visible: { + y: 0, + opacity: 1 + } + } + + return ( +
+
+ {/* Animated Header */} + +

+ Abstergo +

+ + + {/* Hero Section */} + +
+
+

+ Web Developer & Designer +

+

+ A passionate 20-year-old web developer, familiar with NextJs, React, Postgres, and more. + Love to code and build webapps from scratch. +

+
+ +
+
+ Profile +
+ +
+ + + {/* Redesigned Skills Section */} + +

Skills & Technologies

+ + {skills.map((skill) => ( + + {skill} + + ))} + + + + {/* Updated Projects Section */} + +

Projects

+
+ {projectCards.map((project, index) => ( + +
+ {project.title} +
+
+
+
+

+ {project.title} +

+

{project.description}

+
+ + View Project + +
+ + ))} +
+ + {copyNotification && ( +
+ Email copied to clipboard! +
+ )} + + + {/* Footer */} + +

+ © 2024 Abstergo. All rights reserved. +

+
+ + + + + + + + + + +
+ +
+
+ ) +} \ No newline at end of file diff --git a/components/ui/button.tsx b/components/ui/button.tsx new file mode 100644 index 0000000..65d4fcd --- /dev/null +++ b/components/ui/button.tsx @@ -0,0 +1,57 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const buttonVariants = cva( + "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", + { + variants: { + variant: { + default: + "bg-primary text-primary-foreground shadow hover:bg-primary/90", + destructive: + "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", + outline: + "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground", + secondary: + "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", + ghost: "hover:bg-accent hover:text-accent-foreground", + link: "text-primary underline-offset-4 hover:underline", + }, + size: { + default: "h-9 px-4 py-2", + sm: "h-8 rounded-md px-3 text-xs", + lg: "h-10 rounded-md px-8", + icon: "h-9 w-9", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, + } +) + +export interface ButtonProps + extends React.ButtonHTMLAttributes, + VariantProps { + asChild?: boolean +} + +const Button = React.forwardRef( + ({ className, variant, size, asChild = false, ...props }, ref) => { + const Comp = asChild ? Slot : "button" + return ( + + ) + } +) +Button.displayName = "Button" + +export { Button, buttonVariants } diff --git a/components/ui/input.tsx b/components/ui/input.tsx new file mode 100644 index 0000000..8c73d8b --- /dev/null +++ b/components/ui/input.tsx @@ -0,0 +1,25 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +export interface InputProps + extends React.InputHTMLAttributes {} + +const Input = React.forwardRef( + ({ className, type, ...props }, ref) => { + return ( + + ) + } +) +Input.displayName = "Input" + +export { Input } diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx new file mode 100644 index 0000000..47308d3 --- /dev/null +++ b/components/ui/textarea.tsx @@ -0,0 +1,24 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +export interface TextareaProps + extends React.TextareaHTMLAttributes {} + +const Textarea = React.forwardRef( + ({ className, ...props }, ref) => { + return ( +