Skip to content

Commit 76c7100

Browse files
Jon ChristieJon Christie
Jon Christie
authored and
Jon Christie
committed
styling improved UX
1 parent b3024d5 commit 76c7100

File tree

8 files changed

+71
-39
lines changed

8 files changed

+71
-39
lines changed

‎notes/README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
Tasks:
2+
3+
FOOTER IN CONTACTS COMPONENT
4+
5+
NEW PROJECTS SECTION USIN THE CARDS GALLERY COMPONENT
6+
7+
IMPLEMENTATION TOGGLE FOR USER TO CHOOSE THEME
8+
- create corresponding colors for the themes for the new gif create today
9+
10+
MAKE SERVICES INTO LINKS WITH MORE INFORMATION
11+

‎src/assets/img/FLOATING.gif‎

2.73 MB
Loading

‎src/components/.DS_Store‎

0 Bytes
Binary file not shown.

‎src/components/Projects/Projects.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,27 @@ function Projects() {
6262
image={project.image}
6363
/>
6464
))}
65+
6566
</div>
67+
{/* <br/> */}
68+
{/* <div className="projects--bodyContainer">
69+
{projectsData.slice(4, 8).map(project => (
70+
<SingleProject
71+
theme={theme}
72+
key={project.id}
73+
id={project.id}
74+
name={project.projectName}
75+
desc={project.projectDesc}
76+
tags={project.tags}
77+
code={project.code}
78+
demo={project.demo}
79+
image={project.image}
80+
/>
81+
))}
82+
83+
</div> */}
84+
85+
6686

6787
{projectsData.length > 3 && (
6888
<div className="projects--viewAll">

‎src/components/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,5 @@ export { default as Services } from './Services/Services'
99
export { default as SingleProject } from './Projects/SingleProject/SingleProject'
1010
export { default as SingleService } from './Services/SingleService/SingleService'
1111
export { default as BackToTop } from './BackToTop/BackToTop'
12-
export { default as RecipeReviewCard } from './Card/RecipeReviewCard'
13-
export { default as CardGallery } from './CardGallery/CardGallery'
12+
// export { default as RecipeReviewCard } from './Card/RecipeReviewCard'
13+
// export { default as CardGallery } from './CardGallery/CardGallery'

‎src/pages/Main/Main.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22
import { Helmet } from 'react-helmet'
3-
import { Navbar, Landing, About, Skills, Testimonials, Contacts, Services, CardGallery } from '../../components'
3+
import { Navbar, Landing, About, Skills, Testimonials, Contacts, Services, Projects } from '../../components'
44
import { headerData } from '../../data/headerData'
55

66
function Main() {
@@ -15,7 +15,8 @@ function Main() {
1515
{/* <RecipeReviewCard /> */}
1616

1717
<Skills />
18-
<CardGallery />
18+
<Projects />
19+
{/* <CardGallery /> */}
1920
<Services />
2021
<Testimonials />
2122
<Contacts />

‎src/theme/images.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import redMan from '../assets/svg/about/avatarRedMan.svg'
88
import yellowMan from '../assets/svg/about/avatarYellowMan.svg'
99
import sittingBlueMan3 from '../assets/png/jonavatarBLUE.svg'
1010
import sittingBlueMan2 from '../assets/png/jonavatarBLUEHOVER.svg'
11-
11+
import floatingMan from '../assets/img/FLOATING.gif';
1212

1313

1414
import contactsBlue from '../assets/svg/contacts/contactsBlue.svg'
@@ -23,5 +23,5 @@ import contactsYellow from '../assets/svg/contacts/contactsYellow.svg'
2323

2424
export {
2525
blueMan, bwMan, greenMan, techMan, pinkMan, purpleMan, redMan, yellowMan, contactsBlue, contactsBlack,
26-
contactsGreen, contactsOrange, contactsPink, contactsPurple, contactsRed, contactsYellow, sittingBlueMan2, sittingBlueMan3
26+
contactsGreen, contactsOrange, contactsPink, contactsPurple, contactsRed, contactsYellow, sittingBlueMan2, sittingBlueMan3, floatingMan
2727
}

‎src/theme/theme.js‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable */
22
import {
3-
blueMan, bwMan, greenMan, techMan, pinkMan, purpleMan, redMan, yellowMan, eduBlue, eduBlack, eduGreen, eduOrange, eduPink, eduPurple, eduRed, eduYellow,
3+
floatingMan, blueMan, bwMan, greenMan, techMan, pinkMan, purpleMan, redMan, yellowMan, eduBlue, eduBlack, eduGreen, eduOrange, eduPink, eduPurple, eduRed, eduYellow,
44
expBlue, expBlack, expGreen, expOrange, expPink, expPurple, expRed, expYellow, contactsBlue, contactsBlack,
55
contactsGreen, contactsOrange, contactsPink, contactsPurple, contactsRed, contactsYellow, sittingBlueMan2, sittingBlueMan3
66
} from './images'
@@ -21,8 +21,8 @@ export const greenThemeLight = {
2121
tertiary80: '#212121cc',
2222
tertiary70: '#212121b3',
2323
tertiary50: '#21212180',
24-
aboutimg1: greenMan,
25-
aboutimg2: greenMan,
24+
aboutimg1: floatingMan,
25+
aboutimg2: floatingMan,
2626
contactsimg: contactsGreen
2727
}
2828
export const greenThemeDark = {
@@ -40,8 +40,8 @@ export const greenThemeDark = {
4040
tertiary80: '#eaeaeacc',
4141
tertiary70: '#eaeaeab3',
4242
tertiary50: '#eaeaea80',
43-
aboutimg1: greenMan,
44-
aboutimg2: greenMan,
43+
aboutimg1: floatingMan,
44+
aboutimg2: floatingMan,
4545
contactsimg: contactsGreen
4646
}
4747
export const bwThemeLight = {
@@ -59,8 +59,8 @@ export const bwThemeLight = {
5959
tertiary80: '#212121cc',
6060
tertiary70: '#212121b3',
6161
tertiary50: '#21212180',
62-
aboutimg1: bwMan,
63-
aboutimg2: bwMan,
62+
aboutimg1: floatingMan,
63+
aboutimg2: floatingMan,
6464
contactsimg: contactsBlack
6565
}
6666
export const bwThemeDark = {
@@ -78,8 +78,8 @@ export const bwThemeDark = {
7878
tertiary80: '#eaeaeacc',
7979
tertiary70: '#eaeaeab3',
8080
tertiary50: '#eaeaea80',
81-
aboutimg1: bwMan,
82-
aboutimg2: bwMan,
81+
aboutimg1: floatingMan,
82+
aboutimg2: floatingMan,
8383
contactsimg: contactsBlack
8484
}
8585
export const blueThemeLight = {
@@ -97,8 +97,8 @@ export const blueThemeLight = {
9797
tertiary80: '#212121cc',
9898
tertiary70: '#212121b3',
9999
tertiary50: '#21212180',
100-
aboutimg1: blueMan,
101-
aboutimg2: blueMan,
100+
aboutimg1: floatingMan,
101+
aboutimg2: floatingMan,
102102
contactsimg: contactsBlue
103103
}
104104
export const blueThemeDark = {
@@ -116,8 +116,8 @@ export const blueThemeDark = {
116116
tertiary80: '#eaeaeacc',
117117
tertiary70: '#eaeaeab3',
118118
tertiary50: '#eaeaea80',
119-
aboutimg1: blueMan,
120-
aboutimg2: blueMan,
119+
aboutimg1: floatingMan,
120+
aboutimg2: floatingMan,
121121
contactsimg: contactsBlue
122122
}
123123
export const redThemeLight = {
@@ -135,8 +135,8 @@ export const redThemeLight = {
135135
tertiary80: '#212121cc',
136136
tertiary70: '#212121b3',
137137
tertiary50: '#21212180',
138-
aboutimg1: redMan,
139-
aboutimg2: redMan,
138+
aboutimg1: floatingMan,
139+
aboutimg2: floatingMan,
140140
contactsimg: contactsRed
141141
}
142142
export const redThemeDark = {
@@ -154,8 +154,8 @@ export const redThemeDark = {
154154
tertiary80: '#eaeaeacc',
155155
tertiary70: '#eaeaeab3',
156156
tertiary50: '#eaeaea80',
157-
aboutimg1: redMan,
158-
aboutimg2: redMan,
157+
aboutimg1: floatingMan,
158+
aboutimg2: floatingMan,
159159
contactsimg: contactsRed
160160
}
161161
export const orangeThemeLight = {
@@ -173,8 +173,8 @@ export const orangeThemeLight = {
173173
tertiary80: '#212121cc',
174174
tertiary70: '#212121b3',
175175
tertiary50: '#21212180',
176-
aboutimg1: techMan,
177-
aboutimg2: techMan,
176+
aboutimg1: floatingMan,
177+
aboutimg2: floatingMan,
178178
contactsimg: contactsOrange
179179
}
180180
export const orangeThemeDark = {
@@ -192,8 +192,8 @@ export const orangeThemeDark = {
192192
tertiary80: '#eaeaeacc',
193193
tertiary70: '#eaeaeab3',
194194
tertiary50: '#eaeaea80',
195-
aboutimg1: sittingBlueMan2,
196-
aboutimg2: sittingBlueMan2,
195+
aboutimg1: floatingMan,
196+
aboutimg2: floatingMan,
197197
contactsimg: contactsOrange
198198
}
199199
export const purpleThemeLight = {
@@ -211,8 +211,8 @@ export const purpleThemeLight = {
211211
tertiary80: '#212121cc',
212212
tertiary70: '#212121b3',
213213
tertiary50: '#21212180',
214-
aboutimg1: purpleMan,
215-
aboutimg2: purpleMan,
214+
aboutimg1: floatingMan,
215+
aboutimg2: floatingMan,
216216
contactsimg: contactsPurple
217217
}
218218
export const purpleThemeDark = {
@@ -230,8 +230,8 @@ export const purpleThemeDark = {
230230
tertiary80: '#eaeaeacc',
231231
tertiary70: '#eaeaeab3',
232232
tertiary50: '#eaeaea80',
233-
aboutimg1: purpleMan,
234-
aboutimg2: purpleMan,
233+
aboutimg1: floatingMan,
234+
aboutimg2: floatingMan,
235235
contactsimg: contactsPurple
236236
}
237237
export const pinkThemeLight = {
@@ -249,8 +249,8 @@ export const pinkThemeLight = {
249249
tertiary80: '#212121cc',
250250
tertiary70: '#212121b3',
251251
tertiary50: '#21212180',
252-
aboutimg1: pinkMan,
253-
aboutimg2: pinkMan,
252+
aboutimg1: floatingMan,
253+
aboutimg2: floatingMan,
254254
contactsimg: contactsPink
255255
}
256256
export const pinkThemeDark = {
@@ -268,8 +268,8 @@ export const pinkThemeDark = {
268268
tertiary80: '#eaeaeacc',
269269
tertiary70: '#eaeaeab3',
270270
tertiary50: '#eaeaea80',
271-
aboutimg1: pinkMan,
272-
aboutimg2: pinkMan,
271+
aboutimg1: floatingMan,
272+
aboutimg2: floatingMan,
273273
contactsimg: contactsPink
274274
}
275275
export const yellowThemeLight = {
@@ -287,8 +287,8 @@ export const yellowThemeLight = {
287287
tertiary80: '#212121cc',
288288
tertiary70: '#212121b3',
289289
tertiary50: '#21212180',
290-
aboutimg1: yellowMan,
291-
aboutimg2: yellowMan,
290+
aboutimg1: floatingMan,
291+
aboutimg2: floatingMan,
292292
contactsimg: contactsYellow
293293
}
294294
export const yellowThemeDark = {
@@ -306,8 +306,8 @@ export const yellowThemeDark = {
306306
tertiary80: '#eaeaeacc',
307307
tertiary70: '#eaeaeab3',
308308
tertiary50: '#eaeaea80',
309-
aboutimg1: yellowMan,
310-
aboutimg2: yellowMan,
309+
aboutimg1: floatingMan,
310+
aboutimg2: floatingMan,
311311
contactsimg: contactsYellow
312312
}
313313

0 commit comments

Comments
 (0)