From a4dc8930cab79d7a5e78463fa0c6bbc092da80b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Fri, 23 Feb 2024 14:51:56 +0100 Subject: [PATCH 1/4] refactor: improve margins in sections --- next-sitemap.config.js | 2 +- src/components/about.tsx | 4 ++-- src/components/contact.tsx | 2 +- src/components/experience.tsx | 2 +- src/components/intro.tsx | 6 +++--- src/components/project.tsx | 4 ++-- src/components/projects.tsx | 2 +- src/components/section-divider.tsx | 2 +- src/components/section-heading.tsx | 2 +- src/components/skills.tsx | 2 +- 10 files changed, 14 insertions(+), 14 deletions(-) diff --git a/next-sitemap.config.js b/next-sitemap.config.js index ca94d67..114dea6 100644 --- a/next-sitemap.config.js +++ b/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: { diff --git a/src/components/about.tsx b/src/components/about.tsx index 5dadf19..a94be36 100644 --- a/src/components/about.tsx +++ b/src/components/about.tsx @@ -8,13 +8,13 @@ export const About = () => { return ( -
+

After graduating with a degree in Accounting, I decided to pursue my passion for programming. I enrolled in a coding bootcamp and learned diff --git a/src/components/contact.tsx b/src/components/contact.tsx index 6794fde..5161dfa 100644 --- a/src/components/contact.tsx +++ b/src/components/contact.tsx @@ -45,7 +45,7 @@ export const Contact = () => { return ( { const { ref, inView } = useInView({ triggerOnce: true }); return ( -

+
{ return (
{ diff --git a/src/components/project.tsx b/src/components/project.tsx index c2bac37..9e879ee 100644 --- a/src/components/project.tsx +++ b/src/components/project.tsx @@ -55,12 +55,12 @@ export const Project = ({ project, index }: TProps) => { ))}
diff --git a/src/components/projects.tsx b/src/components/projects.tsx index 218b40c..12280a9 100644 --- a/src/components/projects.tsx +++ b/src/components/projects.tsx @@ -8,7 +8,7 @@ import { projectsData } from '@/lib/data'; export const Projects = () => { return ( -
+
{ initial={{ opacity: 0, y: 100 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.125 }} - className="bg-muted h-16 w-1 rounded-full sm:my-5" + className="bg-muted my-5 h-16 w-1 rounded-full" > ); }; diff --git a/src/components/section-heading.tsx b/src/components/section-heading.tsx index fa13ca9..665d06a 100644 --- a/src/components/section-heading.tsx +++ b/src/components/section-heading.tsx @@ -5,7 +5,7 @@ type TProps = { export const SectionHeading = ({ heading, content }: TProps) => { return ( -
+

{heading}

{content && (

{content}

diff --git a/src/components/skills.tsx b/src/components/skills.tsx index 96f2071..1fbff52 100644 --- a/src/components/skills.tsx +++ b/src/components/skills.tsx @@ -20,7 +20,7 @@ const fadeInAnimationVariants = { export const Skills = () => { return ( -
+
{skillsData.map(({ icon }, index) => ( Date: Fri, 23 Feb 2024 16:10:42 +0100 Subject: [PATCH 2/4] feat: add interactive navbar --- d | 253 +++++++++++++++++++++ src/app/layout.tsx | 7 +- src/app/page.tsx | 2 - src/components/about.tsx | 6 + src/components/active-section-provider.tsx | 51 +++++ src/components/contact.tsx | 3 + src/components/experience.tsx | 4 +- src/components/header.tsx | 24 +- src/components/intro.tsx | 6 +- src/components/projects.tsx | 5 +- src/components/section-divider.tsx | 2 +- src/components/skills.tsx | 2 +- src/hooks/use-section-in-view.ts | 31 +++ src/lib/types.ts | 3 + 14 files changed, 387 insertions(+), 12 deletions(-) create mode 100644 d create mode 100644 src/components/active-section-provider.tsx create mode 100644 src/hooks/use-section-in-view.ts create mode 100644 src/lib/types.ts diff --git a/d b/d new file mode 100644 index 0000000..17605c2 --- /dev/null +++ b/d @@ -0,0 +1,253 @@ +commit a4dc8930cab79d7a5e78463fa0c6bbc092da80b9 (HEAD -> finish-website) +Author: Michał +Date: Fri Feb 23 14:51:56 2024 +0100 + + refactor: improve margins in sections + +commit 7935f7de6d5a422c7f738192c1a5c2372496eeed (origin/main, origin/HEAD, main) +Author: Michał Skolak +Date: Mon Feb 19 21:27:58 2024 +0100 + + feat: add animations (#33) + +commit 0b18dd2862ae2c50c40b25dc7754170434698313 +Author: Michał Skolak +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 +Date: Sat Feb 17 15:53:12 2024 +0100 + + feat: create header (#29) + +commit dde5564951fbfa7f6f04c59d3ba1e6e6878d00fb +Author: Michał Skolak +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 +Date: Wed Feb 14 17:09:33 2024 +0100 + + feat: create experience section (#25) + +commit ab93a9df2ccb5103484a041d7d59746457a113d2 +Author: Michał Skolak +Date: Wed Feb 14 12:57:37 2024 +0100 + + feat: create projects section (#23) + +commit c4ece005bb1f292a8c1668d1439c10162cf76beb +Author: Michał Skolak +Date: Tue Feb 13 19:01:22 2024 +0100 + + feat: create about section (#21) + +commit 56cd71f47fc62537ac49d10c6033486d0b84a49a +Author: Michał Skolak +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 +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 +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 +Date: Tue Dec 27 11:19:09 2022 +0100 + + Add google-site-verification + +commit 86d51d3de9b55c54809332769fa0165d37f2c758 +Author: Skolaczk +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 +Date: Sat Nov 19 19:40:54 2022 +0100 + + Merge branch 'main' of github.com:Skolaczk/Portfolio into main + +commit d08b6a658ff8c8e42d6e2f2380834ed091ee992a +Author: Skolaczk +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 +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 +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 +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 +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 +Date: Sat Aug 13 20:24:16 2022 +0200 + + Create desktop homepage view + + Add styles for tablet and desktop view. + +commit 41a115b54e2dd2e7c6be7b49b0d340f3462fcf0d +Author: Skolaczk +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 +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 +Date: Fri \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 4d52d30..d6408bd 100644 --- a/src/app/layout.tsx +++ b/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'; @@ -48,8 +49,10 @@ const RootLayout = ({ children }: PropsWithChildren) => { - {children} - + + {children} + + diff --git a/src/app/page.tsx b/src/app/page.tsx index 91b5d7d..6d10f0f 100644 --- a/src/app/page.tsx +++ b/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 = () => { - diff --git a/src/components/about.tsx b/src/components/about.tsx index a94be36..0cbfe19 100644 --- a/src/components/about.tsx +++ b/src/components/about.tsx @@ -3,10 +3,15 @@ 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 ( { how to play the guitar.

+ ); }; diff --git a/src/components/active-section-provider.tsx b/src/components/active-section-provider.tsx new file mode 100644 index 0000000..2984867 --- /dev/null +++ b/src/components/active-section-provider.tsx @@ -0,0 +1,51 @@ +'use client'; + +import React, { + createContext, + PropsWithChildren, + useContext, + useState, +} from 'react'; + +import type { SectionName } from '@/lib/types'; + +type TActiveSectionContext = { + activeSection: SectionName; + setActiveSection: React.Dispatch>; + timeOfLastClick: number; + setTimeOfLastClick: React.Dispatch>; +}; + +export const ActiveSectionContext = createContext( + null +); + +export const ActiveSectionProvider = ({ children }: PropsWithChildren) => { + const [activeSection, setActiveSection] = useState('Home'); + const [timeOfLastClick, setTimeOfLastClick] = useState(0); + + return ( + + {children} + + ); +}; + +export const useActiveSection = () => { + const context = useContext(ActiveSectionContext); + + if (context === null) { + throw new Error( + 'useActiveSection must be used within an ActiveSectionProvider' + ); + } + + return context; +}; diff --git a/src/components/contact.tsx b/src/components/contact.tsx index 5161dfa..33b6788 100644 --- a/src/components/contact.tsx +++ b/src/components/contact.tsx @@ -10,6 +10,7 @@ import { sendEmail } from '@/actions/send-email'; import { Button } from '@/components/button'; import { Icons } from '@/components/icons'; import { SectionHeading } from '@/components/section-heading'; +import { useSectionInView } from '@/hooks/use-section-in-view'; import { cn } from '@/lib/utils'; const formSchema = z.object({ @@ -23,6 +24,7 @@ const formSchema = z.object({ export type TFormSchema = z.infer; export const Contact = () => { + const { ref } = useSectionInView('Contact'); const { register, handleSubmit, @@ -44,6 +46,7 @@ export const Contact = () => { return ( { const { ref, inView } = useInView({ triggerOnce: true }); + const { ref: sectionRef } = useSectionInView('Experience'); return ( -
+
{ const [open, setOpen] = useState(false); + const { activeSection, setActiveSection, setTimeOfLastClick } = + useActiveSection(); return ( @@ -56,14 +59,29 @@ export const Header = () => {