Skip to content

Commit

Permalink
fixed the left portion of the profile
Browse files Browse the repository at this point in the history
  • Loading branch information
akib1689 committed Apr 2, 2024
1 parent f69e3a3 commit aa96406
Show file tree
Hide file tree
Showing 6 changed files with 192 additions and 43 deletions.
48 changes: 24 additions & 24 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
117 changes: 99 additions & 18 deletions src/components/profile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,21 @@ import {
CardHeader,
CardTitle
} from "@/components/ui/card"
import { cn } from '@/lib/utils';

type CardProps = React.ComponentProps<typeof Card>;
// seperator
import {
Separator
} from "@/components/ui/separator"

// badge
import {
Badge
} from "@/components/ui/badge"


// import { cn } from '@/lib/utils';

// type CardProps = React.ComponentProps<typeof Card>;


// env variables
Expand All @@ -35,9 +47,9 @@ const {

export function ProfileLeft() {
return (
<Card className="w-[350px]">
<div className='flex justify-center pt-5 p-3'>
<Avatar className='w-48 h-48'>
<Card className="sm:w-full md:w-[350px] flex flex-col p-3 border-none">
<div className='flex justify-center p-3'>
<Avatar className='w-48 h-48 border'>
<AvatarImage src="/images/profile_img.jpg" />
<AvatarFallback>Akib</AvatarFallback>
</Avatar>
Expand All @@ -50,18 +62,87 @@ export function ProfileLeft() {
Junior Software Engineer | <a href='https://www.linkedin.com/company/pridesys-it-ltd' target='_blank' className='text-blue-500'>Pridesys IT Ltd</a>
</CardDescription>
</CardHeader>
<CardContent>

<Separator />
<CardContent className='my-3'>
<div className='space-y-3'>
<div >
<p className='font-medium my-2'>
• Personal Details
</p>
<p className='text-sm lg:text-md ml-3 my-2'>
<span className='font-medium'>✉ Email:</span>
<span className='ml-2'>
<a href='mailto:cadetakib1689+profile@gmail.com' className='text-blue-500'> cadetakib1689@gmail.com</a>
</span>
<br/>
<span className='font-medium'>📞 Phone:</span>
<span className='ml-2'>+880 1521 705298</span>
<br/>
<span className='font-medium'>🏠 Address:</span>
<span className='ml-2'>Dhaka, Bangladesh</span>
<br/>
</p>
</div>
<div className='flex flex-col'>
<p className='font-medium my-2'>
• Programming Langugage
</p>
<div className='flex flex-wrap gap-1'>
<Badge >C</Badge>
<Badge >C++</Badge>
<Badge >Java</Badge>
<Badge >JavaScript</Badge>
<Badge >Python</Badge>
<Badge >Bash</Badge>
<Badge >Assembly</Badge>
</div>
</div>
<div className='flex flex-col'>
<p className='font-medium my-2'>
• Frontend Frameworks
</p>
<div className='flex flex-wrap gap-1'>
<Badge >HTML</Badge>
<Badge >CSS</Badge>
<Badge >Android</Badge>
<Badge >React</Badge>
<Badge >Next.js</Badge>
<Badge >TailwindCSS</Badge>
<Badge >Bootstrap</Badge>
</div>
</div>
<div className='flex flex-col'>
<p className='font-medium my-2'>
• Backend Frameworks
</p>
<div className='flex flex-wrap gap-1'>
<Badge >Node.js</Badge>
<Badge >Express.js</Badge>
<Badge >Spring Boot</Badge>
</div>
</div>
<div className='flex flex-col'>
<p className='font-medium my-2'>
• Database
</p>
<div className='flex flex-wrap gap-1'>
<Badge >MySQL</Badge>
<Badge >MongoDB</Badge>
<Badge >Firebase</Badge>
<Badge >PostgreSQL</Badge>
</div>
</div>
</div>
</CardContent>
<CardFooter className='flex flex-col items-start space-y-3'>
<p className='font-medium text-md lg:text-lg'>
Socials
</p>
<div className='flex flex-row space-x-3 w-fill'>
<a type='_blank' href={NEXT_PUBLIC_FACEBOOK}>
<a href={NEXT_PUBLIC_GITHUB}>
<Avatar className='w-6 h-6'>
<AvatarImage src="/images/facebook.png" />
<AvatarFallback>FB</AvatarFallback>
<AvatarImage src='/images/github.png' />
<AvatarFallback>.git</AvatarFallback>
</Avatar>
</a>
<a href={NEXT_PUBLIC_LINKEDIN}>
Expand All @@ -70,24 +151,24 @@ export function ProfileLeft() {
<AvatarFallback>ln</AvatarFallback>
</Avatar>
</a>
<a href={NEXT_PUBLIC_GITHUB}>
<Avatar className='w-6 h-6'>
<AvatarImage src='/images/github.png' />
<AvatarFallback>.git</AvatarFallback>
</Avatar>
</a>
<a href={NEXT_PUBLIC_YOUTUBE}>
<Avatar className='w-9 h-6'>
<Avatar className='w-9 h-6 rounded-none'>
<AvatarImage src='/images/youtube.png' />
<AvatarFallback>yt</AvatarFallback>
</Avatar>
</a>
<a href={NEXT_PUBLIC_TWITTER}>
<Avatar className='w-6 h-6'>
<Avatar className='w-6 h-6 rounded-none'>
<AvatarImage src='/images/twitter.png' />
<AvatarFallback>tw</AvatarFallback>
</Avatar>
</a>
<a type='_blank' href={NEXT_PUBLIC_FACEBOOK}>
<Avatar className='w-6 h-6'>
<AvatarImage src="/images/facebook.png" />
<AvatarFallback>FB</AvatarFallback>
</Avatar>
</a>
</div>
</CardFooter>
</Card>
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-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<HTMLDivElement>,
VariantProps<typeof badgeVariants> {}

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

export { Badge, badgeVariants }
31 changes: 31 additions & 0 deletions src/components/ui/separator.tsx
Original file line number Diff line number Diff line change
@@ -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<typeof SeparatorPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(
(
{ className, orientation = "horizontal", decorative = true, ...props },
ref
) => (
<SeparatorPrimitive.Root
ref={ref}
decorative={decorative}
orientation={orientation}
className={cn(
"shrink-0 bg-border",
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
className
)}
{...props}
/>
)
)
Separator.displayName = SeparatorPrimitive.Root.displayName

export { Separator }
2 changes: 1 addition & 1 deletion src/styles/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}
Expand Down

0 comments on commit aa96406

Please sign in to comment.