Merge pull request #24 from firehawk89/add-projects-section

Add Projects Section

content/projects/itour.md

@@ -0,0 +1,7 @@
+---
+title: 'iTour'
+image: '/iTour.jpg'
+technologies: ['JavaScript', 'React', 'Next.js', 'TailwindCSS', 'i18n']
+---
+
+iTour project info goes here

content/projects/skauna.md

@@ -0,0 +1,7 @@
+---
+title: 'Skauna'
+image: '/Skauna.jpg'
+technologies: ['HTML', 'CSS', 'JavaScript']
+---
+
+Skauna project info goes here

package.json

@@ -17,6 +17,8 @@
   "dependencies": {
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "gray-matter": "^4.0.3",
+    "marked": "^12.0.0",
     "next": "14.1.0",
     "next-themes": "^0.2.1",
     "react": "^18",

project-words.txt

@@ -2,4 +2,5 @@ raleway
 Bochkovskyi
 clsx
 Nextdotjs
-Tailwindcss
+Tailwindcss
+Skauna

src/app/page.tsx

@@ -1,11 +1,13 @@
 import About from '@/components/sections/about'
 import Hero from '@/components/sections/hero/hero'
+import Projects from '@/components/sections/projects/projects'
 
 export default function Home() {
   return (
     <>
       <Hero />
-      <About />
+      <About className="py-16 md:py-24" id="about-me" />
+      <Projects className="py-16 md:py-24" id="my-projects" />
     </>
   )
 }

src/components/header/header-navbar.tsx

@@ -29,7 +29,7 @@ const HeaderNavbar: FC<HeaderNavbarProps> = ({ className }) => {
         orientation={isMobile ? 'vertical' : 'horizontal'}
       >
         <MenuItem href="/#about-me">About Me</MenuItem>
-        <MenuItem href="/#my-projects">My Work</MenuItem>
+        <MenuItem href="/#my-projects">My Projects</MenuItem>
         <MenuItem href="/#contact-me">Contact Me</MenuItem>
       </Menu>
       <Socials className="mt-6 justify-center md:hidden" />

src/components/header/header.tsx

@@ -19,7 +19,7 @@ const Header: FC<HeaderProps> = ({ className }) => {
     >
       <HeaderNavbar />
       <div className="relative z-30 flex items-center justify-between md:static">
-        <ThemeToggler className="-m-2 md:absolute md:right-10 md:top-1/2 md:m-0 md:-translate-y-1/2" />
+        <ThemeToggler className="-mx-5 -my-2 md:absolute md:right-5 md:top-1/2 md:m-0 md:-translate-y-1/2" />
         <MenuIcon className="md:hidden" />
       </div>
     </header>

src/components/sections/about.tsx

@@ -1,15 +1,16 @@
+import { buttonVariants } from '@/components/ui/button'
 import Content from '@/components/ui/content'
 import Heading from '@/components/ui/heading'
 import Technologies from '@/components/ui/technologies/technologies'
 import { cn } from '@/utils'
-import { FC } from 'react'
+import Link from 'next/link'
+import { FC, HTMLAttributes } from 'react'
 
-const About: FC = () => {
+interface AboutProps extends HTMLAttributes<HTMLDivElement> {}
+
+const About: FC<AboutProps> = ({ className, ...props }) => {
   return (
-    <section
-      className={cn('bg-light py-12 dark:bg-black md:py-20')}
-      id="about-me"
-    >
+    <section className={cn('bg-light dark:bg-black', className)} {...props}>
       <Content className="flex gap-6 md:gap-10">
         <article>
           <Heading size="h2" variant="underline">
@@ -37,6 +38,15 @@ const About: FC = () => {
               <b>lasting impression</b>!
             </p>
           </div>
+          <Link
+            className={cn('mt-6', buttonVariants())}
+            download="Anton_Bochkovskyi_Front-End_Developer_CV"
+            href="/Anton_Bochkovskyi_Front-End_Developer_CV.pdf"
+            rel="noreferrer"
+            target="_blank"
+          >
+            Download CV
+          </Link>
         </article>
         <Technologies className="self-start" />
       </Content>

src/components/sections/hero/hero.module.css

@@ -1,4 +1,4 @@
 .hero-container {
-  margin-top: var(--header-height);
-  height: calc(100dvh - var(--header-height));
+  padding-top: var(--header-height);
+  height: 100dvh;
 }

src/components/sections/hero/hero.tsx

@@ -3,18 +3,25 @@ import Content from '@/components/ui/content'
 import Heading from '@/components/ui/heading'
 import Socials from '@/components/ui/socials/socials'
 import { cn } from '@/utils'
-import { FC } from 'react'
+import { FC, HTMLAttributes } from 'react'
 
 import styles from './hero.module.css'
 
-const Hero: FC = () => {
+interface HeroProps extends HTMLAttributes<HTMLDivElement> {}
+
+const Hero: FC<HeroProps> = ({ className, ...props }) => {
   return (
     <section
-      className={cn('relative bg-ghost dark:bg-dark', styles['hero-container'])}
+      className={cn(
+        'relative bg-ghost dark:bg-dark',
+        styles['hero-container'],
+        className
+      )}
+      {...props}
     >
       <Content className="flex flex-col items-center justify-center text-center">
         <article className="max-w-4xl">
-          <Heading className="mx-auto">
+          <Heading position="center">
             Hi, I&apos;m <span className="text-accent">Anton Bochkovskyi</span>
           </Heading>
           <p className="mt-4 font-medium md:text-xl">

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<HTMLDivElement> {
+  data: Project
+  imageSizes?: string
+}
+
+const ProjectCard: FC<ProjectCardProps> = ({
+  className,
+  data: { body, image, slug, technologies, title },
+  imageSizes,
+}) => {
+  return (
+    <article className={cn('group', className)}>
+      <Card>
+        <Link className="relative block aspect-video" href={`/${slug}`}>
+          {image ? (
+            <Image
+              alt={title || slug}
+              fill
+              sizes={imageSizes || '100vw'}
+              src={image}
+            />
+          ) : (
+            <ImagePlaceholder />
+          )}
+          <div className="absolute left-0 top-0 flex h-full w-full flex-col justify-end gap-3 bg-gradient-to-t from-dark p-4 text-light opacity-0 transition-all group-hover:opacity-100 sm:gap-5 sm:px-6 sm:py-7">
+            <Heading size="h3">{title || slug}</Heading>
+            <p
+              className="line-clamp-1 sm:line-clamp-2 md:line-clamp-3"
+              dangerouslySetInnerHTML={{ __html: body }}
+            />
+            {technologies && (
+              <div className="flex flex-wrap gap-2">
+                {technologies.map((technology, index) => (
+                  <span
+                    className="rounded-xl bg-accent bg-opacity-75 px-2 py-1 text-sm font-semibold"
+                    key={index + 1}
+                  >
+                    {technology}
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+        </Link>
+      </Card>
+    </article>
+  )
+}
+
+export default ProjectCard