+
Hi, I'm Anton Bochkovskyi
diff --git a/src/components/sections/projects/project-card.tsx b/src/components/sections/projects/project-card.tsx
new file mode 100644
index 0000000..27c1563
--- /dev/null
+++ b/src/components/sections/projects/project-card.tsx
@@ -0,0 +1,59 @@
+import Card from '@/components/ui/card'
+import Heading from '@/components/ui/heading'
+import ImagePlaceholder from '@/components/ui/image-placeholder'
+import Project from '@/types/Project'
+import { cn } from '@/utils'
+import Image from 'next/image'
+import Link from 'next/link'
+import { FC, HTMLAttributes } from 'react'
+
+interface ProjectCardProps extends HTMLAttributes {
+ data: Project
+ imageSizes?: string
+}
+
+const ProjectCard: FC = ({
+ className,
+ data: { body, image, slug, technologies, title },
+ imageSizes,
+}) => {
+ return (
+
+
+
+ {image ? (
+
+ ) : (
+
+ )}
+
+
{title || slug}
+
+ {technologies && (
+
+ {technologies.map((technology, index) => (
+
+ {technology}
+
+ ))}
+
+ )}
+
+ No projects found at the moment. Check back later for updates or
+ explore other sections of the site.
+
+ ) : (
+
+ {projects.map((project) => (
+
+ ))}
+
+ )}
+
+
+ )
+}
+
+export default Projects
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 817b61b..75f04f7 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -11,12 +11,12 @@ export const buttonVariants = cva(
},
variants: {
size: {
- default: 'py-2 px-5 rounded-md',
- sm: 'p-2',
+ default: 'block w-fit py-2 px-5 rounded-md',
+ sm: 'block w-fit p-2',
},
variant: {
default:
- 'border-2 border-accent bg-accent text-light md:hover:bg-opacity-80',
+ 'border-2 border-accent bg-accent text-light md:hover:bg-accent-light md:hover:border-accent-light',
icon: 'bg-transparent md:hover:text-accent',
outline:
'border-2 border-accent bg-transparent text-accent md:hover:bg-accent md:hover:text-light',
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..093aa8d
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,17 @@
+import { cn } from '@/utils'
+import { FC, HTMLAttributes } from 'react'
+
+interface CardProps extends HTMLAttributes {}
+
+const Card: FC = ({ children, className, ...props }) => {
+ return (
+
+ {children}
+
+ )
+}
+
+export default Card
diff --git a/src/components/ui/heading.tsx b/src/components/ui/heading.tsx
index 6dd53ec..c324e84 100644
--- a/src/components/ui/heading.tsx
+++ b/src/components/ui/heading.tsx
@@ -4,16 +4,25 @@ import { FC, HTMLAttributes } from 'react'
export const headingVariants = cva('w-fit', {
defaultVariants: {
+ position: 'default',
size: 'h1',
},
variants: {
+ position: {
+ center: 'mx-auto after:left-1/2 after:-translate-x-1/2',
+ default: 'after:left-0',
+ },
size: {
h1: 'text-4xl font-bold md:text-5xl',
h2: 'text-3xl font-semibold md:text-4xl',
+ h3: 'text-2xl font-semibold md:text-3xl',
+ h4: 'text-xl font-semibold md:text-2xl',
+ h5: 'text-lg font-semibold md:text-xl',
+ h6: 'font-semibold md:text-4xl',
},
variant: {
underline:
- 'pb-1.5 relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:bg-accent after:w-2/6',
+ 'pb-1.5 relative after:absolute after:bottom-0 after:h-0.5 after:bg-accent after:w-2/6',
},
},
})
@@ -22,11 +31,19 @@ interface HeadingProps
extends HTMLAttributes,
VariantProps {}
-const Heading: FC = ({ children, className, size, variant }) => {
+const Heading: FC = ({
+ children,
+ className,
+ position,
+ size,
+ variant,
+}) => {
const HeadingTag = size ? size : 'h1'
return (
-
+
{children}
)
diff --git a/src/components/ui/image-placeholder.tsx b/src/components/ui/image-placeholder.tsx
new file mode 100644
index 0000000..38fcfa0
--- /dev/null
+++ b/src/components/ui/image-placeholder.tsx
@@ -0,0 +1,25 @@
+import { cn } from '@/utils'
+import { FC, HTMLAttributes } from 'react'
+import { CiImageOff } from 'react-icons/ci'
+
+interface ImagePlaceholderProps extends HTMLAttributes {}
+
+const ImagePlaceholder: FC = ({
+ className,
+ ...props
+}) => {
+ return (
+
+
+ Image Not Found
+
+ )
+}
+
+export default ImagePlaceholder
diff --git a/src/components/ui/technologies/technologies.tsx b/src/components/ui/technologies/technologies.tsx
index f156702..9fb4dc5 100644
--- a/src/components/ui/technologies/technologies.tsx
+++ b/src/components/ui/technologies/technologies.tsx
@@ -1,10 +1,13 @@
import TechnologiesItem from '@/components/ui/technologies/technologies-item'
import { cn } from '@/utils'
import { FC, HTMLAttributes } from 'react'
-import { FaReact, FaSass } from 'react-icons/fa'
+import { FaSass } from 'react-icons/fa'
import {
+ SiCss3,
+ SiHtml5,
SiJavascript,
SiNextdotjs,
+ SiReact,
SiTailwindcss,
SiTypescript,
} from 'react-icons/si'
@@ -20,13 +23,25 @@ const Technologies: FC = ({ className, ...props }) => {
)}
{...props}
>
+
+
+
+
@@ -35,17 +50,11 @@ const Technologies: FC = ({ className, ...props }) => {
className="text-black dark:text-white"
title="Next.js"
/>
-
-
)
}
diff --git a/src/components/ui/theme-toggler.tsx b/src/components/ui/theme-toggler.tsx
index 46870c4..735529f 100644
--- a/src/components/ui/theme-toggler.tsx
+++ b/src/components/ui/theme-toggler.tsx
@@ -17,26 +17,18 @@ const ThemeToggler: FC = ({ className }) => {
useEffect(() => setMounted(true), [])
- if (!mounted) {
- return (
-
- )
- }
-
return (
<>
{!mounted ? (
) : (