Skip to content

Commit 271c36e

Browse files
realstomanrealstoman
committed
Create json data files
1 parent 76d8069 commit 271c36e

File tree

7 files changed

+289
-273
lines changed

7 files changed

+289
-273
lines changed

‎src/context/AboutMeContext.js‎

Lines changed: 6 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,16 @@
11
import { useState, createContext } from 'react';
2-
3-
import AmazonImage from '../images/brands/amazon_gray.png';
4-
import SonyImage from '../images/brands/sony_gray.png';
5-
import AdidasImage from '../images/brands/adidas_gray.png';
6-
import FilaImage from '../images/brands/fila_gray.png';
7-
import NBImage from '../images/brands/nb_gray.png';
8-
import SamsungImage from '../images/brands/samsung_gray.png';
9-
import CanonImage from '../images/brands/canon_gray.png';
10-
import PumaImage from '../images/brands/puma_gray.png';
2+
import { aboutMeData } from '../data/aboutMeData';
3+
import { clientsHeading as clientsPageHeading } from '../data/clientsData';
4+
import { clientsData as clientsDataJson } from '../data/clientsData';
115

126
const AboutMeContext = createContext();
137

148
export const AboutMeProvider = ({ children }) => {
15-
const [aboutMe, setAboutMe] = useState([
16-
{
17-
id: 1,
18-
bio: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt totam dolorum, ducimus obcaecati, voluptas facilis molestias nobis ut quam natus similique inventore excepturi optio ipsa deleniti fugit illo. Unde, amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illo necessitatibus perspiciatis! Aperiam perferendis labore temporibus, eos culpa corporis recusandae quas, fuga voluptatibus nesciunt odit libero tenetur neque consequatur ea.',
19-
},
20-
{
21-
id: 2,
22-
bio: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta?',
23-
},
24-
]);
9+
const [aboutMe, setAboutMe] = useState(aboutMeData);
2510

26-
const clientsHeading = 'Some of the brands I worked with';
11+
const clientsHeading = clientsPageHeading;
2712

28-
const [clientsData, setClientsData] = useState([
29-
{
30-
id: 1,
31-
title: 'Amazon',
32-
img: AmazonImage,
33-
},
34-
{
35-
id: 2,
36-
title: 'Sony',
37-
img: SonyImage,
38-
},
39-
{
40-
id: 3,
41-
title: 'Adidas',
42-
img: AdidasImage,
43-
},
44-
{
45-
id: 4,
46-
title: 'FILA',
47-
img: FilaImage,
48-
},
49-
{
50-
id: 5,
51-
title: 'NB',
52-
img: NBImage,
53-
},
54-
{
55-
id: 6,
56-
title: 'SAMSUNG',
57-
img: SamsungImage,
58-
},
59-
{
60-
id: 7,
61-
title: 'CANON',
62-
img: CanonImage,
63-
},
64-
{
65-
id: 8,
66-
title: 'PUMA',
67-
img: PumaImage,
68-
},
69-
]);
13+
const [clientsData, setClientsData] = useState(clientsDataJson);
7014

7115
return (
7216
<AboutMeContext.Provider

‎src/context/ProjectsContext.js‎

Lines changed: 2 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,12 @@
11
import { useState, createContext } from 'react';
2-
3-
// Import images
4-
import WebImage1 from '../images/web-project-1.jpg';
5-
import WebImage2 from '../images/web-project-2.jpg';
6-
import MobileImage1 from '../images/mobile-project-1.jpg';
7-
import MobileImage2 from '../images/mobile-project-2.jpg';
8-
import UIImage1 from '../images/ui-project-1.jpg';
9-
import UIImage2 from '../images/ui-project-2.jpg';
2+
import { projectsData } from '../data/projects';
103

114
// Create projects context
125
export const ProjectsContext = createContext();
136

147
// Create the projects context provider
158
export const ProjectsProvider = (props) => {
16-
const [projects, setProjects] = useState([
17-
{
18-
id: 1,
19-
title: 'Google Health Platform',
20-
category: 'Web Application',
21-
img: WebImage2,
22-
ProjectHeader: {
23-
title: 'Project Management UI - From Context',
24-
publishDate: 'Jul 26, 2021',
25-
tags: 'UI / Frontend',
26-
},
27-
},
28-
{
29-
id: 2,
30-
title: 'Phoenix Digital Agency',
31-
category: 'Mobile Application',
32-
img: MobileImage2,
33-
},
34-
{
35-
id: 3,
36-
title: 'Project Management UI',
37-
category: 'UI/UX Design',
38-
img: UIImage1,
39-
},
40-
{
41-
id: 4,
42-
title: 'Cloud Storage Platform',
43-
category: 'UI/UX Design',
44-
img: UIImage2,
45-
},
46-
{
47-
id: 5,
48-
title: 'React Social App',
49-
category: 'Mobile Application',
50-
img: MobileImage1,
51-
},
52-
{
53-
id: 6,
54-
title: 'Apple Design System',
55-
category: 'Web Application',
56-
img: WebImage1,
57-
},
58-
]);
9+
const [projects, setProjects] = useState(projectsData);
5910

6011
return (
6112
<ProjectsContext.Provider value={{ projects, setProjects }}>

‎src/context/SingleProjectContext.js‎

Lines changed: 4 additions & 160 deletions
Original file line numberDiff line numberDiff line change
@@ -1,168 +1,12 @@
11
import { useState, createContext } from 'react';
2-
3-
import Image1 from '../images/ui-project-1.jpg';
4-
import Image2 from '../images/web-project-2.jpg';
5-
import Image3 from '../images/mobile-project-2.jpg';
6-
import Image4 from '../images/mobile-project-1.jpg';
7-
import Image5 from '../images/web-project-1.jpg';
8-
import Image6 from '../images/ui-project-2.jpg';
9-
import {
10-
FiFacebook,
11-
FiInstagram,
12-
FiLinkedin,
13-
FiTwitter,
14-
FiYoutube,
15-
} from 'react-icons/fi';
2+
import { singleProjectData as singleProjectDataJson } from '../data/singleProjectData';
163

174
const SingleProjectContext = createContext();
185

196
export const SingleProjectProvider = ({ children }) => {
20-
const [singleProjectData, setSingleProjectData] = useState({
21-
ProjectHeader: {
22-
title: 'Project Management UI',
23-
publishDate: 'Jul 26, 2021',
24-
tags: 'UI / Frontend',
25-
},
26-
ProjectImages: [
27-
{
28-
id: 1,
29-
title: 'Kabul Project Management UI',
30-
img: Image1,
31-
},
32-
{
33-
id: 2,
34-
title: 'Kabul Project Management UI',
35-
img: Image2,
36-
},
37-
{
38-
id: 3,
39-
title: 'Kabul Project Management UI',
40-
img: Image3,
41-
},
42-
],
43-
ProjectInfo: {
44-
ClientHeading: 'About Client',
45-
CompanyInfo: [
46-
{
47-
id: 1,
48-
title: 'Name',
49-
details: 'Company Ltd',
50-
},
51-
{
52-
id: 2,
53-
title: 'Services',
54-
details: 'UI Design & Frontend Development',
55-
},
56-
{
57-
id: 3,
58-
title: 'Website',
59-
details: 'https://company.com',
60-
},
61-
{
62-
id: 4,
63-
title: 'Phone',
64-
details: '555 8888 888',
65-
},
66-
],
67-
ObjectivesHeading: 'Objective',
68-
ObjectivesDetails:
69-
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, natus! Quibusdam enim quod in esse, mollitia molestias incidunt quas ipsa accusamus veniam.',
70-
Technologies: [
71-
{
72-
title: 'Tools & Technologies',
73-
techs: [
74-
'HTML',
75-
'CSS',
76-
'JavaScript',
77-
'Vue.js',
78-
'TailwindCSS',
79-
'AdobeXD',
80-
],
81-
},
82-
],
83-
ProjectDetailsHeading: 'Challenge',
84-
ProjectDetails: [
85-
{
86-
id: 1,
87-
details:
88-
'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt totam dolorum, ducimus obcaecati, voluptas facilis molestias nobis ut quam natus similique inventore excepturi optio ipsa deleniti fugit illo. Unde, amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illo necessitatibus perspiciatis! Aperiam perferendis labore temporibus, eos culpa corporis recusandae quas, fuga voluptatibus nesciunt odit libero tenetur neque consequatur ea.',
89-
},
90-
{
91-
id: 2,
92-
details:
93-
'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta?',
94-
},
95-
{
96-
id: 3,
97-
details:
98-
'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta?',
99-
},
100-
{
101-
id: 4,
102-
details:
103-
'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt totam dolorum, ducimus obcaecati, voluptas facilis molestias nobis ut quam natus similique inventore excepturi optio ipsa deleniti fugit illo. Unde, amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illo necessitatibus perspiciatis! Aperiam perferendis labore temporibus, eos culpa corporis recusandae quas, fuga voluptatibus nesciunt odit libero tenetur neque consequatur ea.',
104-
},
105-
],
106-
SocialSharingHeading: 'Share This',
107-
SocialSharing: [
108-
{
109-
id: 1,
110-
name: 'Twitter',
111-
icon: <FiTwitter />,
112-
url: 'https://twitter.com/NangialaiStoman',
113-
},
114-
{
115-
id: 2,
116-
name: 'Instagram',
117-
icon: <FiInstagram />,
118-
url: 'https://instagram.com/NangialaiStoman',
119-
},
120-
{
121-
id: 3,
122-
name: 'Facebook',
123-
icon: <FiFacebook />,
124-
url: 'https://facebook.com/',
125-
},
126-
{
127-
id: 4,
128-
name: 'LinkedIn',
129-
icon: <FiLinkedin />,
130-
url: 'https://linkedin.com/',
131-
},
132-
{
133-
id: 5,
134-
name: 'Youtube',
135-
icon: <FiYoutube />,
136-
url: 'https://www.youtube.com/c/StomanStudio',
137-
},
138-
],
139-
},
140-
RelatedProject: {
141-
title: 'Related Projects',
142-
Projects: [
143-
{
144-
id: 1,
145-
title: 'Mobile UI',
146-
img: Image4,
147-
},
148-
{
149-
id: 2,
150-
title: 'Web Application',
151-
img: Image5,
152-
},
153-
{
154-
id: 3,
155-
title: 'UI Design',
156-
img: Image6,
157-
},
158-
{
159-
id: 4,
160-
title: 'Kabul Mobile App UI',
161-
img: Image3,
162-
},
163-
],
164-
},
165-
});
7+
const [singleProjectData, setSingleProjectData] = useState(
8+
singleProjectDataJson
9+
);
16610

16711
return (
16812
<SingleProjectContext.Provider

‎src/data/aboutMeData.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export const aboutMeData = [
2+
{
3+
id: 1,
4+
bio: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt totam dolorum, ducimus obcaecati, voluptas facilis molestias nobis ut quam natus similique inventore excepturi optio ipsa deleniti fugit illo. Unde, amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illo necessitatibus perspiciatis! Aperiam perferendis labore temporibus, eos culpa corporis recusandae quas, fuga voluptatibus nesciunt odit libero tenetur neque consequatur ea.',
5+
},
6+
{
7+
id: 2,
8+
bio: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta?',
9+
},
10+
];

‎src/data/clientsData.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
// Import images
2+
import AmazonImage from '../images/brands/amazon_gray.png';
3+
import SonyImage from '../images/brands/sony_gray.png';
4+
import AdidasImage from '../images/brands/adidas_gray.png';
5+
import FilaImage from '../images/brands/fila_gray.png';
6+
import NBImage from '../images/brands/nb_gray.png';
7+
import SamsungImage from '../images/brands/samsung_gray.png';
8+
import CanonImage from '../images/brands/canon_gray.png';
9+
import PumaImage from '../images/brands/puma_gray.png';
10+
11+
export const clientsHeading = 'Some of the brands I worked with';
12+
13+
export const clientsData = [
14+
{
15+
id: 1,
16+
title: 'Amazon',
17+
img: AmazonImage,
18+
},
19+
{
20+
id: 2,
21+
title: 'Sony',
22+
img: SonyImage,
23+
},
24+
{
25+
id: 3,
26+
title: 'Adidas',
27+
img: AdidasImage,
28+
},
29+
{
30+
id: 4,
31+
title: 'FILA',
32+
img: FilaImage,
33+
},
34+
{
35+
id: 5,
36+
title: 'NB',
37+
img: NBImage,
38+
},
39+
{
40+
id: 6,
41+
title: 'SAMSUNG',
42+
img: SamsungImage,
43+
},
44+
{
45+
id: 7,
46+
title: 'CANON',
47+
img: CanonImage,
48+
},
49+
{
50+
id: 8,
51+
title: 'PUMA',
52+
img: PumaImage,
53+
},
54+
];

0 commit comments

Comments
 (0)