Skip to content

Commit

Permalink
`
Browse files Browse the repository at this point in the history
  • Loading branch information
@elidakirigo
elidakirigo committed Dec 4, 2023
1 parent 07ea6a0 commit 287ad09
Show file tree
Hide file tree
Showing 4 changed files with 144 additions and 9 deletions.
2 changes: 2 additions & 0 deletions react-portfolio-framer-motion/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,6 @@ yarn dev

yarn add --dev tailwindcss postcss autoprefixer

yarn add framer-motion framer-motion-3d

tailwind with vite - https://tailwindcss.com/docs/guides/vite
2 changes: 2 additions & 0 deletions react-portfolio-framer-motion/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@
"@react-three/drei": "9.75.0",
"@react-three/fiber": "8.13.3",
"@types/three": "0.152.1",
"framer-motion": "^10.16.12",
"framer-motion-3d": "^10.16.12",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"three": "0.153.0"
Expand Down
110 changes: 101 additions & 9 deletions react-portfolio-framer-motion/src/components/Interface.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,23 @@
import { motion } from 'framer-motion'

const Section = (props) => {
const { children } = props

return <section className={`h-screen w-screen p-8 max-w-screen-2xl mx-auto flex flex-col items-start justify-center`}>{children}</section>
return (
<motion.section className={`h-screen w-screen p-8 max-w-screen-2xl mx-auto flex flex-col items-start justify-center`} initial={{ opacity: 0, y: 50 }}>
{children}
</motion.section>
)
}
export const Interface = () => {
return (
<div className='flex flex-col items-center w-screen'>
<AboutSection/>
<SkillsSection/>
<AboutSection />
<SkillsSection />
<Section>
<h1>Projects</h1>
</Section>
<Section>
<h1>Contacts</h1>
</Section>
<ContactSection />
</div>
)
}
Expand All @@ -31,8 +35,96 @@ const AboutSection = () => {
}

const skills = [
{}
{
title: 'Threejs / React Three Fiber',
level: 80,
},
{
title: 'React / React Native',
level: 90,
},
{
title: 'Nodejs',
level: 90,
},
{
title: 'Typescript',
level: 60,
},
{
title: '3D Modelling',
level: 40,
},
]
const languages = [
{
title: '🇫🇷 French',
level: 100,
},
{
title: '🇬🇧 English',
level: 80,
},
{
title: '🇯🇵 Japanese',
level: 20,
},
]
const SkillsSection = ()=>{

}
const SkillsSection = () => {
return (
<Section>
<div>
<h2 className='text-5xl font-bold'>Skills</h2>
<div className='mt-8 space-y-4'>
{skills.map((skill, index) => (
<div className='w-64' key={index}>
<h3 className='text-xl font-bold text-gray-800'>{skill.title}</h3>
<div className='h-2 w-full bg-gray-200 rounded-full mt-2'>
<div className='h-full bg-indigo-500 rounded-full' style={{ width: `${skill.level}%` }}></div>
</div>
</div>
))}
</div>
<div>
<h2 className='text-5xl font-bold mt-10'>Languages</h2>
<div className='mt-8 space-y-4'>
{languages.map((lng, index) => (
<div className='w-64' key={index}>
<h3 className='text-xl font-bold text-gray-800'>{lng.title}</h3>
<div className='h-2 w-full bg-gray-2200 rounded-full mt-2'>
<div className='h-full bg-indigo-500 rounded-full' style={{ width: `${lng.level}%` }} />
</div>
</div>
))}
</div>
</div>
</div>
</Section>
)
}

const ContactSection = () => {
return (
<Section>
<h2 className='text-5xl font-bold'>Contact me</h2>
<div className='mt-8 p-8 rounded-md bg-white w-96 max-w-full'>
<form>
<label htmlFor='name' className='font-medium text-gray-900 block mb-1'>
Name
</label>
<input type='text' name='name' id='name' className='block w-full rounded-md border-0 text-gray-900 shadow-sm ring-1ring-inset ring-gray-300 placeholder:text-gray-500 h-10 mb-5 ' />
<label htmlFor='email' className='font-medium text-gray-900 block mb-1'>
Email
</label>
<input type='email' name='email' id='email' className='block w-full rounded-md border-0 text-gray-900 shadow-sm ring-1ring-inset ring-gray-300 placeholder:text-gray-500 h-10 mb-5' />
<label htmlFor='message' className='font-medium text-gray-900 block mb-1'>
Message
</label>
<textarea name='message' id='message' className='h-32 w-full rounded-md border-0 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-500' />
<button className='bg-indigo-600 text-white py-4 px-8 rounded-lg font-bold text-lg mt-16'>Submit</button>
</form>
</div>
</Section>
)
}
39 changes: 39 additions & 0 deletions react-portfolio-framer-motion/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,18 @@
"@babel/helper-validator-identifier" "^7.22.20"
to-fast-properties "^2.0.0"

"@emotion/is-prop-valid@^0.8.2":
version "0.8.8"
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
dependencies:
"@emotion/memoize" "0.7.4"

"@emotion/[email protected]":
version "0.7.4"
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==

"@esbuild/[email protected]":
version "0.18.20"
resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622"
Expand Down Expand Up @@ -841,6 +853,23 @@ fraction.js@^4.3.6:
resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==

framer-motion-3d@^10.16.12:
version "10.16.12"
resolved "https://registry.yarnpkg.com/framer-motion-3d/-/framer-motion-3d-10.16.12.tgz#20763bda5ac9ece367b9d9bf31ff280934684f05"
integrity sha512-08Nw0V7SSId8/XzelD1bgUBp8L5JW84Aa2dXyNHWr1+IuWSjXO36BR5aQzymVk7JYZC+h/2IySKj8ha/D5btlw==
dependencies:
framer-motion "^10.16.12"
react-merge-refs "^2.0.1"

framer-motion@^10.16.12:
version "10.16.12"
resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.16.12.tgz#8aca3ffa4801953dd873de422a3c1f78b2aa7bfa"
integrity sha512-w7Yzx0OzQ5Uh6uNkxaX+4TuAPuOKz3haSbjmHpdrqDpGuCJCpq6YP9Dy7JJWdZ6mJjndrg3Ao3vUwDajKNikCA==
dependencies:
tslib "^2.4.0"
optionalDependencies:
"@emotion/is-prop-valid" "^0.8.2"

fs.realpath@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
Expand Down Expand Up @@ -1244,6 +1273,11 @@ react-merge-refs@^1.1.0:
resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-1.1.0.tgz#73d88b892c6c68cbb7a66e0800faa374f4c38b06"
integrity sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==

react-merge-refs@^2.0.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-2.1.1.tgz#e46763f8f1b881c0226ee54a1a2a10ffefba0233"
integrity sha512-jLQXJ/URln51zskhgppGJ2ub7b2WFKGq3cl3NYKtlHoTG+dN2q7EzWrn3hN3EgPsTMvpR9tpq5ijdp7YwFZkag==

react-reconciler@^0.27.0:
version "0.27.0"
resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.27.0.tgz#360124fdf2d76447c7491ee5f0e04503ed9acf5b"
Expand Down Expand Up @@ -1483,6 +1517,11 @@ ts-interface-checker@^0.1.9:
resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==

tslib@^2.4.0:
version "2.6.2"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==

update-browserslist-db@^1.0.13:
version "1.0.13"
resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4"
Expand Down

1 comment on commit 287ad09

@vercel
Copy link

@vercel vercel bot commented on 287ad09 Dec 4, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

public – ./

public-elidakirigo.vercel.app
public-git-main-elidakirigo.vercel.app
public-lovat-five.vercel.app

Please sign in to comment.