diff --git a/package-lock.json b/package-lock.json index 72d089c..e4ed538 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,10 +8,10 @@ "name": "portfolio", "version": "0.1.0", "dependencies": { - "@radix-ui/react-aspect-ratio": "^1.0.3", "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-icons": "^1.3.0", + "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", @@ -493,29 +493,6 @@ } } }, - "node_modules/@radix-ui/react-aspect-ratio": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.0.3.tgz", - "integrity": "sha512-fXR5kbMan9oQqMuacfzlGG/SQMcmMlZ4wrvpckv8SgUulD0MMpspxJrxg/Gp/ISV3JfV1AeSWTYK9GvxA4ySwA==", - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-primitive": "1.0.3" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0", - "react-dom": "^16.8 || ^17.0 || ^18.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, "node_modules/@radix-ui/react-avatar": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.0.4.tgz", @@ -916,6 +893,29 @@ } } }, + "node_modules/@radix-ui/react-separator": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.0.3.tgz", + "integrity": "sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-slot": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz", diff --git a/package.json b/package.json index 93bdfe1..ebaa2b1 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-icons": "^1.3.0", + "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", diff --git a/src/components/profile.tsx b/src/components/profile.tsx index 60ecdde..9a20c24 100644 --- a/src/components/profile.tsx +++ b/src/components/profile.tsx @@ -19,9 +19,21 @@ import { CardHeader, CardTitle } from "@/components/ui/card" -import { cn } from '@/lib/utils'; -type CardProps = React.ComponentProps; +// seperator +import { + Separator +} from "@/components/ui/separator" + +// badge +import { + Badge +} from "@/components/ui/badge" + + +// import { cn } from '@/lib/utils'; + +// type CardProps = React.ComponentProps; // env variables @@ -35,9 +47,9 @@ const { export function ProfileLeft() { return ( - -
- + +
+ Akib @@ -50,18 +62,87 @@ export function ProfileLeft() { Junior Software Engineer | Pridesys IT Ltd - - + + +
+
+

+ • Personal Details +

+

+ ✉ Email: + + cadetakib1689@gmail.com + +
+ 📞 Phone: + +880 1521 705298 +
+ 🏠 Address: + Dhaka, Bangladesh +
+

+
+
+

+ • Programming Langugage +

+
+ C + C++ + Java + JavaScript + Python + Bash + Assembly +
+
+
+

+ • Frontend Frameworks +

+
+ HTML + CSS + Android + React + Next.js + TailwindCSS + Bootstrap +
+
+
+

+ • Backend Frameworks +

+
+ Node.js + Express.js + Spring Boot +
+
+
+

+ • Database +

+
+ MySQL + MongoDB + Firebase + PostgreSQL +
+
+

Socials

diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx new file mode 100644 index 0000000..e87d62b --- /dev/null +++ b/src/components/ui/badge.tsx @@ -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-md 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 shadow hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ) +} + +export { Badge, badgeVariants } diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx new file mode 100644 index 0000000..12d81c4 --- /dev/null +++ b/src/components/ui/separator.tsx @@ -0,0 +1,31 @@ +"use client" + +import * as React from "react" +import * as SeparatorPrimitive from "@radix-ui/react-separator" + +import { cn } from "@/lib/utils" + +const Separator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>( + ( + { className, orientation = "horizontal", decorative = true, ...props }, + ref + ) => ( + + ) +) +Separator.displayName = SeparatorPrimitive.Root.displayName + +export { Separator } diff --git a/src/styles/globals.css b/src/styles/globals.css index 1d2309d..b1e141b 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -60,7 +60,7 @@ --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; - --border: 217.2 32.6% 17.5%; + --border: 52.2 94.4% 94.4%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; }