From b84527c7d706b8010eefabbc6a78275bc17ca81a Mon Sep 17 00:00:00 2001 From: Scott McMahon Date: Wed, 10 Apr 2024 14:27:48 +0100 Subject: [PATCH] thanks to https://github.com/stephane-monnot/react-vertical-timeline/issues/166#issuecomment-1752152276 solution timeline now works --- app/globals.css | 6 ++++- components/experience.tsx | 54 ++++++++++++++++++++++++++++++++++----- components/skills.tsx | 40 ++++++++++++++++++++++++----- package-lock.json | 40 ++++++++++++++++++++++++++--- package.json | 2 ++ 5 files changed, 125 insertions(+), 17 deletions(-) diff --git a/app/globals.css b/app/globals.css index bd6213e..5086426 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,3 +1,7 @@ @tailwind base; @tailwind components; -@tailwind utilities; \ No newline at end of file +@tailwind utilities; + +html { + --line-color: #e5e7eb; +} \ No newline at end of file diff --git a/components/experience.tsx b/components/experience.tsx index a7e0c90..1a542cd 100644 --- a/components/experience.tsx +++ b/components/experience.tsx @@ -1,15 +1,57 @@ +"use client" import React from 'react' -import { useSectionInView } from '../lib/hooks'; import SectionHeading from './section-heading'; +import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component'; +import 'react-vertical-timeline-component/style.min.css'; +import { experiencesData } from '../lib/data' +import { useSectionInView } from '../lib/hooks'; +import { useInView } from 'react-intersection-observer'; + export default function Experience() { - const { ref } = useSectionInView('Experience'); + const { ref } = useSectionInView('Experience'); return ( -
- Experience +
+ My Experience + + {experiencesData.map((item, index) => { + const { ref, inView } = useInView({ + triggerOnce: true, + }); + return ( +
+ +

{item.title}

+

{item.location}

+

+ {item.description} +

+ +
+ ); + })} +
) } diff --git a/components/skills.tsx b/components/skills.tsx index 0ccbb68..bdda47e 100644 --- a/components/skills.tsx +++ b/components/skills.tsx @@ -1,18 +1,46 @@ -import React from 'react' -import SectionHeading from './section-heading' -import { skillsData } from '../lib/data' +import React from 'react'; +import { skillsData } from '../lib/data'; import { useSectionInView } from '../lib/hooks'; +import { animate, motion } from 'framer-motion' +import SectionHeading from './section-heading'; + +const fadeInAnimationVariance ={ + initial: { + opacity: 0, + y:100, + }, + animate: (index: number) => ({ + opacity: 1, + y: 0, + transition: { + delay: 0.05*index, + }, + }), +}; export default function Skills() { + const { ref } = useSectionInView('Skills'); return ( -
+
My Skills -
    +
      { skillsData.map((skill,index) => ( -
    • {skill}
      • + {skill} )) }
    diff --git a/package-lock.json b/package-lock.json index 4d5b28b..238095d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,12 +15,14 @@ "react-dom": "^18", "react-icons": "^4.12.0", "react-intersection-observer": "^9.8.1", + "react-vertical-timeline-component": "^3.6.0", "sharp": "^0.33.3" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "@types/react-vertical-timeline-component": "^3.3.6", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.0.3", @@ -893,6 +895,15 @@ "@types/react": "*" } }, + "node_modules/@types/react-vertical-timeline-component": { + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/@types/react-vertical-timeline-component/-/react-vertical-timeline-component-3.3.6.tgz", + "integrity": "sha512-OUvyPXRjXvUD/SNLO0CW0GbIxVF32Ios5qHecMSfw6kxnK1cPULD9NV80EuqZ3WmS/s6BgbcwmN8k4ISb3akhQ==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/scheduler": { "version": "0.16.8", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", @@ -1506,6 +1517,11 @@ "node": ">= 6" } }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" + }, "node_modules/client-only": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", @@ -3482,7 +3498,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -3908,7 +3923,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -3992,8 +4006,26 @@ "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "node_modules/react-vertical-timeline-component": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/react-vertical-timeline-component/-/react-vertical-timeline-component-3.6.0.tgz", + "integrity": "sha512-l9zulqjIGlRuaQeplGzV4r/tG2RYBpYt84Il8w4IxnJze2cDIGI04MKo3F7f1sHT0Sih1ohEFts8UV23AJS15Q==", + "hasInstallScript": true, + "dependencies": { + "classnames": "^2.2.6", + "prop-types": "^15.7.2", + "react-intersection-observer": "^8.26.2" + } + }, + "node_modules/react-vertical-timeline-component/node_modules/react-intersection-observer": { + "version": "8.34.0", + "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-8.34.0.tgz", + "integrity": "sha512-TYKh52Zc0Uptp5/b4N91XydfSGKubEhgZRtcg1rhTKABXijc4Sdr1uTp5lJ8TN27jwUsdXxjHXtHa0kPj704sw==", + "peerDependencies": { + "react": "^15.0.0 || ^16.0.0 || ^17.0.0|| ^18.0.0" + } }, "node_modules/read-cache": { "version": "1.0.0", diff --git a/package.json b/package.json index 932bda9..1eef47f 100644 --- a/package.json +++ b/package.json @@ -16,12 +16,14 @@ "react-dom": "^18", "react-icons": "^4.12.0", "react-intersection-observer": "^9.8.1", + "react-vertical-timeline-component": "^3.6.0", "sharp": "^0.33.3" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "@types/react-vertical-timeline-component": "^3.3.6", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.0.3",