feat: finish website (#35)

* refactor: improve margins in sections

* feat: add interactive navbar

* feat: add contents

* feat: improve metadata

d

@@ -0,0 +1,253 @@
+commit a4dc8930cab79d7a5e78463fa0c6bbc092da80b9 (HEAD -> finish-website)
+Author: Michał <skolakmichal1@gmail.com>
+Date:   Fri Feb 23 14:51:56 2024 +0100
+
+    refactor: improve margins in sections
+
+commit 7935f7de6d5a422c7f738192c1a5c2372496eeed (origin/main, origin/HEAD, main)
+Author: Michał Skolak <skolakmichal1@gmail.com>
+Date:   Mon Feb 19 21:27:58 2024 +0100
+
+    feat: add animations (#33)
+
+commit 0b18dd2862ae2c50c40b25dc7754170434698313
+Author: Michał Skolak <skolakmichal1@gmail.com>
+Date:   Sun Feb 18 12:12:15 2024 +0100
+
+    feat: add email sending (#32)
+
+    * feat: add basic email sending functionality
+
+    * feat: add toast after submit form
+
+commit 025a952b040e1bbe785dc7d29e0f619d1c14706f
+Author: Michał Skolak <skolakmichal1@gmail.com>
+Date:   Sat Feb 17 15:53:12 2024 +0100
+
+    feat: create header (#29)
+
+commit dde5564951fbfa7f6f04c59d3ba1e6e6878d00fb
+Author: Michał Skolak <skolakmichal1@gmail.com>
+Date:   Wed Feb 14 20:48:21 2024 +0100
+
+    feat: create contact section (#27)
+
+    * feat: create contact form
+
+    * feat: create footer
+
+    * feat: add form validation
+
+commit ad8b85e43e2470633e7dc74b1dcdd70a013c2a62
+Author: Michał Skolak <skolakmichal1@gmail.com>
+Date:   Wed Feb 14 17:09:33 2024 +0100
+
+    feat: create experience section (#25)
+
+commit ab93a9df2ccb5103484a041d7d59746457a113d2
+Author: Michał Skolak <skolakmichal1@gmail.com>
+Date:   Wed Feb 14 12:57:37 2024 +0100
+
+    feat: create projects section (#23)
+
+commit c4ece005bb1f292a8c1668d1439c10162cf76beb
+Author: Michał Skolak <skolakmichal1@gmail.com>
+Date:   Tue Feb 13 19:01:22 2024 +0100
+
+    feat: create about section (#21)
+
+commit 56cd71f47fc62537ac49d10c6033486d0b84a49a
+Author: Michał Skolak <skolakmichal1@gmail.com>
+Date:   Mon Feb 12 21:15:58 2024 +0100
+
+    feat: create intro section (#19)
+
+    * feat: add intro section
+
+    * feat: add section divider
+
+commit af8f2069b089002b14d6aba282fb43912ce4cc5c
+Author: Michał Skolak <skolakmichal1@gmail.com>
+Date:   Mon Feb 12 20:05:15 2024 +0100
+
+    feat: create reusable button component (#17)
+
+    * feat: add reusable button component and implement it to theme toggle
+
+    * fix: change link in PR template
+
+commit 53fa2699145d9251c317c5a279fc969c620840db
+Author: Michał Skolak <skolakmichal1@gmail.com>
+Date:   Sun Feb 11 20:26:16 2024 +0100
+
+    feat: Init next app (#15)
+
+    * feat: init next app
+
+    * feat: clean up project
+
+commit 5a6f93881ac79d6e62fc561d828239053337db1c
+Author: Michał Skolak <76774237+Skolaczk@users.noreply.github.com>
+Date:   Sat Jan 13 14:59:42 2024 +0100
+
+    Remove env file
+
+commit 48ebdb1b012cf928741b81b3af0b05313c560ed2
+Author: Michał Skolak <76774237+Skolaczk@users.noreply.github.com>
+Date:   Sat Jan 13 14:54:05 2024 +0100
+
+    Update content#2 (#6)
+
+commit 253c3e2ba5568b98ad6eb8bb27dca1091c7f7659
+Author: Michał Skolak <76774237+Skolaczk@users.noreply.github.com>
+Date:   Mon Jan 1 16:20:22 2024 +0100
+
+    Fix wrapper
+
+commit 1d46bef869965c9fe6fd69dba5bea4c3e6b75fa6
+Author: Michał Skolak <76774237+Skolaczk@users.noreply.github.com>
+Date:   Mon Jan 1 15:31:19 2024 +0100
+
+    Remove gallery field
+
+commit a276e9b0e144f851af09cfec25510162ce93628c
+Author: Michał Skolak <76774237+Skolaczk@users.noreply.github.com>
+Date:   Mon Jan 1 15:23:36 2024 +0100
+
+    Update content (#4)
+
+    * Update Hero.js
+
+    * Update AboutMe.js
+
+    * Update Footer.js
+
+    * Update README.md
+
+commit 4ab07de9340166f10f983e44745ea066db220485
+Author: Michał Skolak <76774237+Skolaczk@users.noreply.github.com>
+Date:   Mon Jan 1 15:11:02 2024 +0100
+
+    Remove gallery modal (#3)
+
+commit 94f5b884a1a5cfd41526b46c2e4bebb6fb4bba07
+Author: Michał <76774237+Skolaczk@users.noreply.github.com>
+Date:   Fri Apr 7 11:57:38 2023 +0200
+
+    Update content
+
+commit a4f558a39ed2ab4a5861e71fdb488a7e09376507
+Author: Skolaczk <skolakmichal1@gmail.com>
+Date:   Tue Dec 27 11:19:09 2022 +0100
+
+    Add google-site-verification
+
+commit 86d51d3de9b55c54809332769fa0165d37f2c758
+Author: Skolaczk <skolakmichal1@gmail.com>
+Date:   Sun Dec 18 12:12:51 2022 +0100
+
+    Add gallery of projects
+
+    Install react-responsive-carousel and react-modal to create
+    carousel in modal. Create hooks - useModal and useWindow.
+    useModal is responsible for modal functionality, and useWindow
+    for return matchMedia.
+
+commit 2e5524df05ca0a311d949cc1739dd756c19072dc
+Merge: d08b6a6 e898a91
+Author: Skolaczk <skolakmichal1@gmail.com>
+Date:   Sat Nov 19 19:40:54 2022 +0100
+
+    Merge branch 'main' of github.com:Skolaczk/Portfolio into main
+
+commit d08b6a658ff8c8e42d6e2f2380834ed091ee992a
+Author: Skolaczk <skolakmichal1@gmail.com>
+Date:   Sat Nov 19 19:38:01 2022 +0100
+
+    Add environment variables
+
+commit e898a915154bda30ca30b74458e340fb05284d8b
+Author: Michał <76774237+Skolaczk@users.noreply.github.com>
+Date:   Sun Sep 4 15:19:09 2022 +0200
+
+    Update README.md
+
+commit 19ec8b841ca0b6e91798aa9167874fd4a35f1f87
+Author: Skolaczk <skolakmichal1@gmail.com>
+Date:   Sat Sep 3 19:51:44 2022 +0200
+
+    Create the final version
+
+    Create SEO component using react-helmet. Now, data from
+    gatsby-config.js file is in head tag. Create 404 page.
+    Fix some bugs related to operation of the site.
+
+commit 9e8d83eb65726524a32c6c6015394bd62c47b04c
+Author: Skolaczk <skolakmichal1@gmail.com>
+Date:   Fri Aug 19 20:32:26 2022 +0200
+
+    Add email sending
+
+    Install EmailJs library to sending email from page. Install Formik
+    and Yup to validate form. If values in form are incorrect, erros is
+    displayed and the form is not send. Update styles for Contact component.
+
+commit 0fcbd45a48869be777d818e95aecdb1315ddb252
+Author: Skolaczk <skolakmichal1@gmail.com>
+Date:   Thu Aug 18 10:44:02 2022 +0200
+
+    Fetching data from Contenful
+
+    Create custom hook - useData. It uses hook - useStaticQuery() to get data
+    and returns it. Create Icons component. It displays data from CMS.
+
+commit d3dbb19cb42172e1c31d3ae1c15396a3563e132e
+Author: Skolaczk <skolakmichal1@gmail.com>
+Date:   Tue Aug 16 18:06:10 2022 +0200
+
+    Create animations
+
+    Install gsap with scrollTrigger plugin to do better animations.
+    Create animation for showing hero elements and use scrollTrigger
+    plugin to do showing projects when page is scrolling. Make a several
+    smaller animations with color change on hover. Now, after click
+    burger button, navigation moves from the right side. Also, burger
+    button is animated after click. The last animation is related to
+    scroll and header. When page scrolls down header is not visible,
+    and when page scrolls up header is visible.
+
+commit 70b578411d597754b88a2fe1c6cab48a13cac8ea
+Author: Skolaczk <skolakmichal1@gmail.com>
+Date:   Sat Aug 13 20:24:16 2022 +0200
+
+    Create desktop homepage view
+
+    Add styles for tablet and desktop view.
+
+commit 41a115b54e2dd2e7c6be7b49b0d340f3462fcf0d
+Author: Skolaczk <skolakmichal1@gmail.com>
+Date:   Thu Aug 11 10:53:56 2022 +0200
+
+    Create mobile homepage view
+
+    Add a templates: Hero, AboutMe, Projects and Contact.
+    They make a homepage in index.js. Add a components:
+    Button, Footer, Heading, Navigation, SectionWrapper.
+    Install gatsby-plugin-react-svg to use svg file as react
+    component. Add files to icons folder.
+
+commit c5f8d8d413047541dc7f19168ef39c48cc3ef233
+Author: Skolaczk <skolakmichal1@gmail.com>
+Date:   Sat Aug 6 15:35:27 2022 +0200
+
+    Add initial files
+
+    Install needed plugins and configure project. Create assets folder.
+    There are GlobalStyles.js, normalize.css and theme.js files.
+    Create MainTemplate.js file and gatsby-browser.js so that each page
+    can use the styles. Configure eslint with airbnb extends to keep
+    clean code.
+
+commit 38ed13100f3a34d922678b0afc76cd3e2f2a5928
+Author: Skolaczk <skolakmichal1@gmail.com>
+Date:   Fri 

next-sitemap.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  siteUrl: process.env.NEXT_PUBLIC_SITE_URL || '',
+  siteUrl: process.env.SITE_URL || '',
   generateRobotsTxt: true,
   generateIndexSitemap: false,
   robotsTxtOptions: {

src/app/layout.tsx

@@ -3,6 +3,7 @@ import '@/styles/globals.css';
 import { PropsWithChildren } from 'react';
 import type { Metadata } from 'next';
 
+import { ActiveSectionProvider } from '@/components/active-section-provider';
 import { ThemeProvider } from '@/components/theme-provider';
 import { Toaster } from '@/components/toaster';
 import { fonts } from '@/lib/fonts';
@@ -26,30 +27,17 @@ export const metadata: Metadata = {
   verification: {
     google: siteConfig.googleSiteVerificationId,
   },
-  openGraph: {
-    url: siteConfig.url,
-    title: siteConfig.title,
-    description: siteConfig.description,
-    siteName: siteConfig.title,
-    images: '/opengraph-image.png',
-    type: 'website',
-    locale: 'en_US',
-  },
-  twitter: {
-    card: 'summary_large_image',
-    title: siteConfig.title,
-    description: siteConfig.description,
-    images: '/opengraph-image.png',
-  },
 };
 
 const RootLayout = ({ children }: PropsWithChildren) => {
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={cn('min-h-screen font-sans', fonts)}>
         <ThemeProvider attribute="class">
-          {children}
-          <Toaster position="bottom-left" />
+          <ActiveSectionProvider>
+            {children}
+            <Toaster position="bottom-left" />
+          </ActiveSectionProvider>
         </ThemeProvider>
       </body>
     </html>

src/app/page.tsx

@@ -6,7 +6,6 @@ import { Header } from '@/components/header';
 import { Intro } from '@/components/intro';
 import { Projects } from '@/components/projects';
 import { SectionDivider } from '@/components/section-divider';
-import { Skills } from '@/components/skills';
 import { ThemeToggle } from '@/components/theme-toggle';
 
 const Home = () => {
@@ -17,7 +16,6 @@ const Home = () => {
         <Intro />
         <SectionDivider />
         <About />
-        <Skills />
         <Projects />
         <Experience />
         <Contact />

src/components/about.tsx

@@ -3,35 +3,42 @@
 import { motion } from 'framer-motion';
 
 import { SectionHeading } from '@/components/section-heading';
+import { Skills } from '@/components/skills';
+import { useSectionInView } from '@/hooks/use-section-in-view';
 
 export const About = () => {
+  const { ref } = useSectionInView('About');
+
   return (
     <motion.section
+      ref={ref}
       id="about"
-      className="my-8 flex w-full scroll-mt-28 flex-col items-center sm:my-10"
+      className="my-10 flex w-full scroll-mt-28 flex-col items-center"
       initial={{ opacity: 0, y: 100 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ delay: 0.175 }}
     >
       <SectionHeading heading="About Me" />
-      <div className="max-w-2xl text-center leading-7">
+      <div className="-mt-5 max-w-2xl text-center leading-7">
         <p className="mb-4">
-          After graduating with a degree in Accounting, I decided to pursue my
-          passion for programming. I enrolled in a coding bootcamp and learned
-          full-stack web development. My favorite part of programming is the
-          problem-solving aspect. I love the feeling of finally figuring out a
-          solution to a problem. My core stack is React, Next.js, Node.js, and
-          MongoDB. I am also familiar with TypeScript and Prisma. I am always
-          looking to learn new technologies. I am currently looking for a
-          full-time position as a software developer.
+          I&apos;m Michał Skolak, I&apos;m a front-end developer from Poland.
+          I&apos;ve been learning programming for over 3 years. After I started
+          high school, I decided to pursue my passion for programming. My
+          favorite part of programming is the problem-solving aspect. I love the
+          feeling of finally figuring out a solution to a problem. I&apos;ve had
+          the opportunity to work on several exciting projects during my
+          learning journey, ranging from personal projects to collaborative
+          ventures. My core stack is React, Next.js, TypeScript, and Tailwind
+          CSS. I am also familiar with Nest.js and Prisma. I am always looking
+          to learn new technologies.
         </p>
         <p>
-          When I am not coding, I enjoy playing video games, watching movies,
-          and playing with my dog. I also enjoy learning new things. I am
-          currently learning about history and philosophy. I am also learning
-          how to play the guitar.
+          I&apos;m open to Job opportunities where I can contribute, learn and
+          grow. If you have a good opportunity that matches my skills and
+          experience then don&apos;t hesitate to contact me.
         </p>
       </div>
+      <Skills />
     </motion.section>
   );
 };