Skip to content

Commit 27a24e7

Browse files
Ay7otAy7ot
committed
Added extra projects and see more with animations
1 parent 75a4c97 commit 27a24e7

10 files changed

+189
-54
lines changed

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,10 @@
1212
"animate.css": "^4.1.1",
1313
"daisyui": "^2.51.5",
1414
"firebase": "^9.20.0",
15+
"framer-motion": "^10.12.16",
1516
"nanoid": "^4.0.2",
1617
"react": "^18.2.0",
18+
"react-animate-on-scroll": "^2.1.7",
1719
"react-animation-on-scroll": "^5.1.0",
1820
"react-dom": "^18.2.0",
1921
"react-icons": "^4.8.0",

‎public/chatty.png

94.9 KB
Loading

‎public/moviePitch.jpg

157 KB
Loading

‎src/AppContext.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ export const AppContext = createContext<AppContextType>({
88
dispatch: ()=> {},
99
themeModal: false,
1010
hasStarted: false,
11-
shortNav: false
11+
shortNav: false,
12+
seeMore: false
1213
})
1314

1415
export const useAppContext = () => {

‎src/Components/Projects.tsx

+71-21
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,85 @@
11
import React from 'react'
22
import { projects } from './ProjectsFile'
3-
3+
import { useAppContext } from '../AppContext'
4+
import { AnimationOnScroll } from 'react-animation-on-scroll'
5+
import {HiOutlineExternalLink} from 'react-icons/hi'
6+
import {AiFillGithub} from 'react-icons/Ai'
47
export default function Projects() {
58

9+
const {dispatch, seeMore} = useAppContext()
10+
11+
function seeMoreProjects(){
12+
dispatch({
13+
type: 'setSeeMore',
14+
payload: {
15+
seeMorePayload: true
16+
}
17+
})
18+
}
19+
20+
function seeLessProjects(){
21+
dispatch({
22+
type: 'setSeeMore',
23+
payload: {
24+
seeMorePayload: false
25+
}
26+
})
27+
}
28+
29+
30+
631
return (
7-
<div id='projects' className='p-4 md:px-10 xl:px-[10%]'>
32+
<div id='projects' className='p-4 md:px-10 xl:px-[10%] flex flex-col items-center'>
833
<h2 className='text-center text-neutral-content my-10 text-5xl tracking-wide font-bold'>Projects</h2>
9-
<div className='md:grid md:grid-cols-2 lg:grid-cols-3 mt-5 gap-6'>
10-
{projects.map(project=>{
34+
<section className='md:grid md:grid-cols-2 lg:grid-cols-3 mt-5 gap-6'>
35+
{projects.map((project, index)=>{
1136
return (
12-
<div key={project.id} className='mb-10 bg-secondary md:bg-secondary-focus text-accent-content flex flex-col overflow-hidden relative rounded-2xl'>
13-
<div>
14-
<img
15-
src={project.image}
16-
height='300'
17-
/>
18-
</div>
19-
<div className='p-4'>
20-
<h3 className='text-base-300 font-bold text-2xl'>
21-
{project.name}
22-
</h3>
23-
<p className='text-lg font-semibold text-neutral-content mt-4'>{project.description}</p>
24-
</div>
25-
<div className='p-4 flex gap-3 items-center'>
26-
<a href={project.liveLink} target='_blank' className='btn'>Live Link</a>
27-
<a href={project.github} target='_blank' className='btn'>GitHub</a>
37+
<div className={`mb-10 bg-secondary md:bg-secondary-focus text-accent-content overflow-hidden flex flex-col relative rounded-2xl ${!seeMore && index >=6 ? 'hidden' : ''}`}>
38+
<AnimationOnScroll animateIn='animate__fadeIn'>
39+
<div key={project.id} className='flex flex-col justify-between'>
40+
<div>
41+
<img
42+
src={project.image}
43+
height='300'
44+
/>
45+
</div>
46+
<div className='p-4'>
47+
<h3 className='text-base-300 font-bold text-2xl'>
48+
{project.name}
49+
</h3>
50+
<p className='font-semibold text-neutral-content mt-4'>{project.description}</p>
51+
</div>
52+
<div className='flex p-4 gap-2'>
53+
{project.techStack.map((tech, index)=>{
54+
return (
55+
<p className={`px-2 py-1 text-xs font-semibold text-neutral-content rounded-md bg-${index === 0 ? 'primary' : index===1 ? 'secondary' : index === 2 ? 'primary' : 'secondary'}`}>
56+
{tech}
57+
</p>
58+
)
59+
})}
60+
</div>
61+
<div className='p-4 flex gap-3 items-center mt-auto'>
62+
<a href={project.liveLink} target='_blank' className='btn'><HiOutlineExternalLink /></a>
63+
<a href={project.github} target='_blank' className='btn'><AiFillGithub /></a>
64+
</div>
2865
</div>
66+
</AnimationOnScroll>
2967
</div>
3068
)
3169
})}
32-
</div>
70+
</section>
71+
<button
72+
onClick={()=>{
73+
if(seeMore){
74+
seeLessProjects()
75+
} else {
76+
seeMoreProjects()
77+
}
78+
}}
79+
className='btn bg-primary'
80+
>
81+
{`See ${seeMore ?'Less' : 'More'}`}
82+
</button>
3383
</div>
3484
)
3585
}

‎src/Components/ProjectsFile.ts

+53-29
Original file line numberDiff line numberDiff line change
@@ -3,59 +3,83 @@ import { ProjectType } from "../Types/types";
33

44
export const projects: ProjectType[] = [
55
{
6+
name: 'Chatty',
7+
id: nanoid(),
8+
description: 'Chatty is an AI chat assistant that is always ready to help with all your questions.',
9+
github: 'https://github.com/Ay7ot/chatty',
10+
liveLink: 'https://chattyai.web.app/',
11+
image: 'chatty.png',
12+
techStack: ['React', 'TypeScript', 'OpenaiAPI', 'TailwindCSS']
13+
},{
614
name: 'ProTaskMate',
715
id: nanoid(),
8-
description: 'A task Management web app that applies the kanban methodology to sort tasks. Deployed as a full stack application with firebase for the database, hosting and user authentication. Built using Reactjs, Typescript, Firebase, TailwindCSS and ContextAPI',
16+
description: 'A task Management web app that applies the kanban methodology to sort tasks. Deployed as a full stack application with firebase for the database, hosting and user authentication.',
917
github: 'https://github.com/Ay7ot/protaskmate/',
1018
liveLink: 'https://protaskmate.web.app',
11-
image: 'protaskmate.png'
19+
image: 'protaskmate.png',
20+
techStack: ['React', 'TypeScript', 'Firebase', 'TailwindCSS']
21+
},
22+
{
23+
name: 'MoviePitch',
24+
id: nanoid(),
25+
description: 'A simple AI web app done with openaiAPI. Users would input a single sentence for a movie and they would get back a movie title, synopsis, actors and even a poster.',
26+
github: 'https://github.com/Ay7ot/moviePitch',
27+
liveLink: 'https://movie-synopsis.netlify.app/',
28+
image: 'moviePitch.jpg',
29+
techStack: ['React', 'TypeScript', 'TailwindCSS', 'OpenaiAPI']
30+
},{
31+
name: 'BookWormz',
32+
id: nanoid(),
33+
description: 'An open book library where users can search for books, read books, download and download them.',
34+
github: 'https://github.com/Ay7ot/bookwormz',
35+
liveLink: 'https://bookwormz.netlify.app',
36+
image: 'bookWormz.png',
37+
techStack: ['React', 'JavaScript', 'ContextAPI', 'dbooksAPI']
1238
},
1339
{
1440
name: 'Musica',
1541
id: nanoid(),
16-
description: 'A music web app built with SpotifyAPI. Users can sign in with their spotify account, search for an artist and play songs from the artist. Built using Reactjs, Typescript, SpotifyAPI, TailwindCSS and was built to practice handling api calls and advanced React',
42+
description: 'A music web app built with SpotifyAPI. Users can sign in with their spotify account, search for an artist and play songs from the artist. Built to practice handling api calls and advanced React',
1743
github: 'https://github.com/Ay7ot/musica-typescript',
1844
liveLink: 'https://dot-musica.netlify.app',
19-
image: 'aydot-musica.png'
45+
image: 'aydot-musica.png',
46+
techStack: ['React', 'TypeScript', 'TailwindCSS', 'SpotifyAPI']
2047
},
2148
{
22-
name: 'BookWormz',
49+
name: 'Food ways',
2350
id: nanoid(),
24-
description: 'An open book library where users can search for books, read books, download and download them. Built using Reactjs, Typescript, VanillaCSS, ContextAPI and dbooks openAPI',
25-
github: 'https://github.com/Ay7ot/bookwormz',
26-
liveLink: 'https://bookwormz.netlify.app',
27-
image: 'bookWormz.png'
51+
description: 'A UI for a food delivery service made to practice working with react components and basic state properties',
52+
github: 'https://github.com/Ay7ot/food-ways',
53+
liveLink: 'https://food-ways.netlify.app',
54+
image: 'food-ways.png',
55+
techStack: ['React', 'JavaScript', 'Animation-on-scroll']
56+
},
57+
{
58+
name: 'Tick Tasks',
59+
id: nanoid(),
60+
description: 'A small to-do web app made to practice working with firebase database and authentication services. Users can sign in and perform basic CRUD operations with their tasks.',
61+
github: 'https://github.com/Ay7ot/firebase-database',
62+
liveLink: 'https://tick-tasks.netlify.app',
63+
image: 'tickTasks.png',
64+
techStack: ['React', 'TypeScript', 'TailwindCSS', 'Firebase']
2865
},
2966
{
3067
name: 'Trivia',
3168
id: nanoid(),
32-
description: 'A trivia web app built after completing the react course on the scrimba platform. Built with Reactjs, VanillaCSS and OpenDB trivia api',
69+
description: 'A trivia web app built after completing the react course on the scrimba platform.',
3370
github: 'https://github.com/Ay7ot/spandors-trivia',
3471
liveLink: 'https://spandors-trivia.netlify.app',
35-
image: 'spandors-trivia.png'
72+
image: 'spandors-trivia.png',
73+
techStack: ['React', 'JavaScript', 'VanillaCSS']
3674
},
3775
{
3876
name: 'Tenzie Game',
3977
id: nanoid(),
40-
description: 'A tenzie web based browser game built to practice basic react state. Players roll the dice until its all the same number on all available dies. Best time and no. of rolls are saved to local storage. Built with Reactjs, VanillaCSS and Javascript',
78+
description: 'A tenzie web based browser game built to practice basic react state. Players roll the dice until its all the same number on all available dies. Best time and no. of rolls are saved to local storage.',
4179
github: 'https://github.com/Ay7ot/tenzie',
4280
liveLink: 'https://spandors-tenzie.netlify.app',
43-
image: 'spandors-tenzie.png'
81+
image: 'spandors-tenzie.png',
82+
techStack: ['React', 'JavaScript', 'VanillaCSS']
4483
},
45-
// {
46-
// name: 'Tick Tasks',
47-
// id: nanoid(),
48-
// description: 'A small to-do web app made to practice working with firebase database and authentication services. Users can sign in and perform basic CRUD operations with their tasks. Built with Reactjs, Typescript, Firebase, TailwindCSS and ContextAPI',
49-
// github: 'https://github.com/Ay7ot/firebase-database',
50-
// liveLink: 'https://tick-tasks.netlify.app',
51-
// image: 'tickTasks.png'
52-
// },
53-
{
54-
name: 'Food ways',
55-
id: nanoid(),
56-
description: 'A UI for a food delivery service made to practice working with react components and basic state properties',
57-
github: 'https://github.com/Ay7ot/food-ways',
58-
liveLink: 'https://food-ways.netlify.app',
59-
image: 'food-ways.png'
60-
}
84+
6185
]

‎src/Types/types.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ export type ProjectType = {
44
description: string;
55
image: string;
66
github: string;
7-
liveLink: string
7+
liveLink: string,
8+
techStack: string[]
89
}
910

1011
export type AppContextType = {
@@ -13,11 +14,13 @@ export type AppContextType = {
1314
themeModal: boolean;
1415
hasStarted: boolean;
1516
shortNav: boolean;
17+
seeMore: boolean;
1618
}
1719

1820
export type AppActionType = {
1921
type: string;
2022
payload?: {
2123
themePayload?: string;
24+
seeMorePayload?: boolean
2225
}
2326
}

‎src/main.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import React from 'react'
22
import ReactDOM from 'react-dom/client'
33
import App from './App'
44
import './index.css'
5+
import "animate.css/animate.min.css";
6+
57

68
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
79
<React.StrictMode>

‎src/reducer.ts

+5
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,11 @@ export function appReducer(state: AppContextType, action: AppActionType){
4545
...state,
4646
hasStarted: true
4747
}
48+
case 'setSeeMore':
49+
return {
50+
...state,
51+
seeMore: action.payload?.seeMorePayload ?? false
52+
}
4853
default : return state
4954
}
5055
}

‎yarn.lock

+50-2
Original file line numberDiff line numberDiff line change
@@ -210,6 +210,18 @@
210210
"@babel/helper-validator-identifier" "^7.19.1"
211211
to-fast-properties "^2.0.0"
212212

213+
"@emotion/is-prop-valid@^0.8.2":
214+
version "0.8.8"
215+
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
216+
integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
217+
dependencies:
218+
"@emotion/memoize" "0.7.4"
219+
220+
"@emotion/[email protected]":
221+
version "0.7.4"
222+
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
223+
integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
224+
213225
"@esbuild/[email protected]":
214226
version "0.17.15"
215227
resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.17.15.tgz#893ad71f3920ccb919e1757c387756a9bca2ef42"
@@ -1237,6 +1249,15 @@ fraction.js@^4.2.0:
12371249
resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
12381250
integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
12391251

1252+
framer-motion@^10.12.16:
1253+
version "10.12.16"
1254+
resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.12.16.tgz#ccba11d216ac370c6bc65fcd9953a61deb54f071"
1255+
integrity sha512-w/SfWEIWJkYSgRHYBmln7EhcNo31ao8Xexol8lGXf1pR/tlnBtf1HcxoUmEiEh6pacB4/geku5ami53AAQWHMQ==
1256+
dependencies:
1257+
tslib "^2.4.0"
1258+
optionalDependencies:
1259+
"@emotion/is-prop-valid" "^0.8.2"
1260+
12401261
fs.realpath@^1.0.0:
12411262
version "1.0.0"
12421263
resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -1419,7 +1440,7 @@ long@^5.0.0:
14191440
resolved "https://registry.yarnpkg.com/long/-/long-5.2.1.tgz#e27595d0083d103d2fa2c20c7699f8e0c92b897f"
14201441
integrity sha512-GKSNGeNAtw8IryjjkhZxuKB3JzlcLTwjtiQCHKvqQet81I93kXslhDQruGI/QsddO83mcDToBVy7GqGS/zYf/A==
14211442

1422-
loose-envify@^1.1.0:
1443+
loose-envify@^1.1.0, loose-envify@^1.4.0:
14231444
version "1.4.0"
14241445
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
14251446
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -1506,7 +1527,7 @@ normalize-range@^0.1.2:
15061527
resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
15071528
integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
15081529

1509-
object-assign@^4.0.1:
1530+
object-assign@^4.0.1, object-assign@^4.1.1:
15101531
version "4.1.1"
15111532
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
15121533
integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@@ -1606,6 +1627,15 @@ postcss@^8.0.9, postcss@^8.4.21:
16061627
picocolors "^1.0.0"
16071628
source-map-js "^1.0.2"
16081629

1630+
prop-types@^15.5.9:
1631+
version "15.8.1"
1632+
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
1633+
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
1634+
dependencies:
1635+
loose-envify "^1.4.0"
1636+
object-assign "^4.1.1"
1637+
react-is "^16.13.1"
1638+
16091639
protobufjs@^6.11.3:
16101640
version "6.11.3"
16111641
resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-6.11.3.tgz#637a527205a35caa4f3e2a9a4a13ddffe0e7af74"
@@ -1653,6 +1683,14 @@ quick-lru@^5.1.1:
16531683
resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
16541684
integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
16551685

1686+
react-animate-on-scroll@^2.1.7:
1687+
version "2.1.7"
1688+
resolved "https://registry.yarnpkg.com/react-animate-on-scroll/-/react-animate-on-scroll-2.1.7.tgz#6bf3102519eb89c07264148cb0492b8de79fbed3"
1689+
integrity sha512-A4MsApouThr2YhguCQ0fq/HVOLtDMuBM1XCHxhYug8k2NfP0S4S6B7qhrVjylMCX4zFAnTa+YKz7eQG/StizFw==
1690+
dependencies:
1691+
lodash.throttle "^4.1.1"
1692+
prop-types "^15.5.9"
1693+
16561694
react-animation-on-scroll@^5.1.0:
16571695
version "5.1.0"
16581696
resolved "https://registry.yarnpkg.com/react-animation-on-scroll/-/react-animation-on-scroll-5.1.0.tgz#4b69419d187bb5fdf2c4a01208d4a654ac8d883f"
@@ -1673,6 +1711,11 @@ react-icons@^4.8.0:
16731711
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.8.0.tgz#621e900caa23b912f737e41be57f27f6b2bff445"
16741712
integrity sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==
16751713

1714+
react-is@^16.13.1:
1715+
version "16.13.1"
1716+
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
1717+
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
1718+
16761719
react-lazy-load@^4.0.1:
16771720
version "4.0.1"
16781721
resolved "https://registry.yarnpkg.com/react-lazy-load/-/react-lazy-load-4.0.1.tgz#08bc820693ba2c4e69ab4da9c9ef017f0ae7819c"
@@ -1882,6 +1925,11 @@ tslib@^2.1.0:
18821925
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
18831926
integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
18841927

1928+
tslib@^2.4.0:
1929+
version "2.5.2"
1930+
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.2.tgz#1b6f07185c881557b0ffa84b111a0106989e8338"
1931+
integrity sha512-5svOrSA2w3iGFDs1HibEVBGbDrAY82bFQ3HZ3ixB+88nsbsWQoKqDRb5UBYAUPEzbBn6dAp5gRNXglySbx1MlA==
1932+
18851933
typescript@^4.9.3:
18861934
version "4.9.5"
18871935
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"

0 commit comments

Comments
 (0)