Merge pull request #18 from firehawk89/add-about-section

Add About Section
firehawk89 · Feb 2, 2024 · 927251e · 927251e
2 parents 2ed3b53 + 6fb4835
commit 927251e
Show file tree

Hide file tree

Showing 21 changed files with 314 additions and 111 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,11 +15,14 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
     "next": "14.1.0",
     "next-themes": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
-    "react-icons": "^5.0.1"
+    "react-icons": "^5.0.1",
+    "tailwind-merge": "^2.2.1"
   },
   "devDependencies": {
     "@types/node": "^20",

diff --git a/project-words.txt b/project-words.txt
@@ -1,2 +1,5 @@
 raleway
-Bochkovskyi
+Bochkovskyi
+clsx
+Nextdotjs
+Tailwindcss
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from 'next'
 
 import Header from '@/components/header/header'
 import Providers from '@/store/providers'
-import { classnames } from '@/utils'
+import { cn } from '@/utils'
 
 import { raleway } from './fonts'
 import './globals.css'
@@ -19,9 +19,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body
-        className={classnames('flex min-h-screen flex-col', raleway.className)}
-      >
+      <body className={cn('flex min-h-screen flex-col', raleway.className)}>
         <Providers>
           <Header />
           <main className="flex-shrink flex-grow basis-0">{children}</main>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,5 +1,11 @@
-import Hero from '@/components/pages/hero/hero'
+import About from '@/components/sections/about'
+import Hero from '@/components/sections/hero/hero'
 
 export default function Home() {
-  return <Hero />
+  return (
+    <>
+      <Hero />
+      <About />
+    </>
+  )
 }
diff --git a/src/components/header/header-navbar.tsx b/src/components/header/header-navbar.tsx
@@ -5,7 +5,7 @@ import MenuItem from '@/components/header/menu/menu-item'
 import Socials from '@/components/ui/socials/socials'
 import useMediaQuery from '@/hooks/use-media-query'
 import HeaderContext from '@/store/header-context'
-import { MOBILE_BREAKPOINT, classnames } from '@/utils'
+import { MOBILE_BREAKPOINT, cn } from '@/utils'
 import { FC, useContext } from 'react'
 
 type HeaderNavbarProps = {
@@ -18,8 +18,8 @@ const HeaderNavbar: FC<HeaderNavbarProps> = ({ className }) => {
 
   return (
     <nav
-      className={classnames(
-        'fixed left-0 right-0 top-0 z-20 -translate-y-full border-b border-accent bg-light py-8 transition-transform duration-500 dark:bg-black md:static md:translate-y-0 md:border-none md:p-0 md:dark:bg-transparent',
+      className={cn(
+        'fixed left-0 right-0 top-0 z-20 -translate-y-full border-b border-accent bg-light py-8 transition-transform duration-500 dark:bg-black md:static md:translate-y-0 md:border-none md:bg-transparent md:p-0 md:dark:bg-transparent',
         isMenuOpened && 'translate-y-0',
         className
       )}

diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
@@ -1,6 +1,6 @@
 import HeaderNavbar from '@/components/header/header-navbar'
 import ThemeToggler from '@/components/ui/theme-toggler'
-import { classnames } from '@/utils'
+import { cn } from '@/utils'
 import { FC } from 'react'
 
 import MenuIcon from './menu/menu-icon/menu-icon'
@@ -12,7 +12,7 @@ type HeaderProps = {
 const Header: FC<HeaderProps> = ({ className }) => {
   return (
     <header
-      className={classnames(
+      className={cn(
         'fixed left-0 top-0 z-10 w-full bg-light bg-opacity-10 px-8 py-4 shadow-blur backdrop-blur-[8px] lg:px-10',
         className
       )}

diff --git a/src/components/header/menu/menu-icon/menu-icon-bar.tsx b/src/components/header/menu/menu-icon/menu-icon-bar.tsx
@@ -1,12 +1,12 @@
-import { classnames } from '@/utils'
+import { cn } from '@/utils'
 import { FC } from 'react'
 
 type MenuIconBarProps = { className?: string }
 
 const MenuIconBar: FC<MenuIconBarProps> = ({ className }) => {
   return (
     <span
-      className={classnames(
+      className={cn(
         'absolute left-0 right-0 block h-0.5 w-full rounded-sm bg-dark transition-all dark:bg-light',
         className
       )}

diff --git a/src/components/header/menu/menu-icon/menu-icon.tsx b/src/components/header/menu/menu-icon/menu-icon.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import HeaderContext from '@/store/header-context'
-import { classnames } from '@/utils'
+import { cn } from '@/utils'
 import { FC, useContext } from 'react'
 
 import MenuIconBar from './menu-icon-bar'
@@ -15,25 +15,19 @@ const MenuIcon: FC<MenuIconProps> = ({ className }) => {
 
   return (
     <div
-      className={classnames(
-        'relative h-5 w-7 cursor-pointer md:static',
-        className
-      )}
+      className={cn('relative h-5 w-7 cursor-pointer md:static', className)}
       onClick={toggleMenu}
     >
       <MenuIconBar
-        className={classnames(
+        className={cn(
           isMenuOpened ? 'top-1/2 -translate-y-1/2 rotate-45' : 'top-0'
         )}
       />
       <MenuIconBar
-        className={classnames(
-          'top-1/2 -translate-y-1/2',
-          isMenuOpened && 'opacity-0'
-        )}
+        className={cn('top-1/2 -translate-y-1/2', isMenuOpened && 'opacity-0')}
       />
       <MenuIconBar
-        className={classnames(
+        className={cn(
           isMenuOpened
             ? 'top-1/2 -translate-y-1/2 -rotate-45'
             : 'top-full -translate-y-full'

diff --git a/src/components/header/menu/menu.tsx b/src/components/header/menu/menu.tsx
@@ -1,4 +1,4 @@
-import { classnames } from '@/utils'
+import { cn } from '@/utils'
 import { FC, ReactNode } from 'react'
 
 type MenuProps = {
@@ -10,7 +10,7 @@ type MenuProps = {
 const Menu: FC<MenuProps> = ({ children, className, orientation }) => {
   return (
     <ul
-      className={classnames(
+      className={cn(
         'flex w-fit items-center justify-stretch bg-transparent',
         orientation === 'vertical' ? 'flex-col gap-6' : 'flex-row gap-10',
         className

diff --git a/src/components/sections/about.tsx b/src/components/sections/about.tsx
@@ -0,0 +1,47 @@
+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'
+
+const About: FC = () => {
+  return (
+    <section
+      className={cn('bg-light py-12 dark:bg-black md:py-20')}
+      id="about-me"
+    >
+      <Content className="flex gap-6 md:gap-10">
+        <article>
+          <Heading size="h2" variant="underline">
+            About Me
+          </Heading>
+          <div className="mt-6 space-y-4 font-medium md:text-xl">
+            <p>
+              I&apos;m a <strong>Front-End Developer</strong> specializing in
+              React, Next.js, and Tailwind CSS, with a keen focus on crafting{' '}
+              <b>responsive</b> and visually <b>stunning</b> web applications.
+            </p>
+            <p>
+              I enjoy working closely with cross-functional teams, including
+              designers and back-end developers, to{' '}
+              <strong>transform ideas into reality</strong>. Clear
+              communication, attention to detail, and a commitment to delivering{' '}
+              <b>high-quality</b> code are values I uphold in my works.
+            </p>
+            <p>
+              If you&apos;re in search of a developer who is <b>well-versed</b>{' '}
+              in React, Next.js, and Tailwind CSS, and has a passion for
+              crafting <b>responsive</b> and <b>user-centric</b> applications,
+              I&apos;m eager to contribute my skills to your projects.
+              Let&apos;s collaborate and build digital experiences that leave a{' '}
+              <b>lasting impression</b>!
+            </p>
+          </div>
+        </article>
+        <Technologies className="self-start" />
+      </Content>
+    </section>
+  )
+}
+
+export default About
diff --git a/src/components/pages/hero/hero.module.css → src/components/sections/hero/hero.module.css b/src/components/pages/hero/hero.module.css → src/components/sections/hero/hero.module.css
diff --git a/src/components/pages/hero/hero.tsx → src/components/sections/hero/hero.tsx b/src/components/pages/hero/hero.tsx → src/components/sections/hero/hero.tsx
@@ -1,35 +1,33 @@
 import Button from '@/components/ui/button'
 import Content from '@/components/ui/content'
+import Heading from '@/components/ui/heading'
 import Socials from '@/components/ui/socials/socials'
-import { classnames } from '@/utils'
+import { cn } from '@/utils'
 import { FC } from 'react'
 
 import styles from './hero.module.css'
 
 const Hero: FC = () => {
   return (
     <section
-      className={classnames(
-        'relative bg-ghost dark:bg-dark',
-        styles['hero-container']
-      )}
+      className={cn('relative bg-ghost dark:bg-dark', styles['hero-container'])}
     >
       <Content className="flex flex-col items-center justify-center text-center">
-        <div className="max-w-4xl">
-          <h1 className="text-4xl font-bold md:text-5xl">
+        <article className="max-w-4xl">
+          <Heading className="mx-auto">
             Hi, I&apos;m <span className="text-accent">Anton Bochkovskyi</span>
-          </h1>
+          </Heading>
           <p className="mt-4 font-medium md:text-xl">
-            Motivated Junior Front-End Developer with a passion for creating
-            engaging, elegant and responsive user interfaces.
+            Motivated Front-End Developer with a passion for creating engaging,
+            elegant and responsive user interfaces.
           </p>
-        </div>
+        </article>
         <Button className="mt-5" variant="outline">
           My Work
         </Button>
       </Content>
       <Socials
-        className="absolute bottom-8 left-8 md:hidden"
+        className="absolute bottom-8 left-8 hidden md:flex"
         orientation="vertical"
       />
     </section>