-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdatabase.json
239 lines (235 loc) · 12.7 KB
/
database.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
{
"about": {
"heading": "Jose Negrete is a web developer and UX designer based in San Francisco, CA.",
"body": "He wants to help small businesses and non-profits with bringing their ideas to the next level by using the most dangerous tool known to modern man (the web). Unlike his competitors, he has an adaptive skill set that is valuable at every stage of the design process."
},
"projects": {
"heading": "Oh cool, you made it to the 2nd module. You must be somewhat interested.",
"body": "This is where Jose proves his self-worth. Click a project, any project. See it in action by clicking the website. Study the code by using the inspector and/or visiting my GitHub. Get a deeper insight into my thought process by looking at the case studies. Explore!",
"list": [
{
"id": 1,
"heading": "Intergalactic Plant World",
"body": "I built a website for a succulent shop ran by hippies that would appeal to the general public without alienating their already established clientele.",
"links": [
{
"title": "Case Study",
"link": "?page=case-study&id=igw"
}
]
},
{
"id": 2,
"heading": "The Alpha-Net",
"body": "I redesigned the student directory for Alpha-3 at Perpetual Education so that an outsider would know what this is and would be interested to learn more.",
"links": [
{
"title": "Case Study",
"link": "?page=case-study&id=alpha"
}
]
},
{
"id": 3,
"heading": "Super Responsive Layout Challenge",
"body": "I put my design skills to the test by building a website with a lot of moving parts that adapts to every screen size while retaining cleanliness.",
"links": [
{
"title": "Case Study",
"link": "#"
}
]
}
]
},
"blog": {
"heading": "You scrolled this far so you might as well keep on reading. Speaking of reading...",
"body": "Jose writes... a lot. In fact he's documented his whole learning experience. They say everyone enjoys a train wreck. Well here lies many. Just when you thought the bar couldn't get any lower, leave it to Jose. What is a web developer, really? Jose walks that line.",
"list": [
{
"heading": "Perpetual Education: Week 13",
"body": "Jose gets turnt while in the early stages of the design process and as a result, it totally backfires and forces him to reexamine his life choices.",
"link": "https://fishouttawater.substack.com/p/perpetual-education-week-13"
},
{
"heading": "Perpetual Education: Week 12",
"body": "Jose does a ridiculous amount of research in order to design a legit looking e-commerce site for electric bikes and executes it with unflagging fervor.",
"link": "https://fishouttawater.substack.com/p/perpetual-education-week-12"
},
{
"heading": "Perpetual Education: Week 11",
"body": "Jose uses his newly acquired skills of basic design principles and applies it to an already existing site so that it makes sense to the outside world.",
"link": "https://fishouttawater.substack.com/p/perpetual-education-week-11"
}
]
},
"footer": {
"text" : [
{
"id": "home",
"heading": "Ok, now I'm getting stalker vibes.",
"paragraph": "Why are you still on the fence? Just write me a damn email already. If this site didn't do the trick then these links probably won't win you over either."
},
{
"id": "case-study",
"heading": "So what's it gonna be?",
"paragraph": "We working together? Send me an email! Still need more convincing? Check the links below. Showing this to your co-workers as a joke? Rot in hell! You Single? Let's mingle."
}
],
"links": [
{
"title": "CodePen",
"link": "https://codepen.io/j-negrete"
},
{
"title": "GitHub",
"link": "https://github.com/jose-negrete"
},
{
"title": "Substack",
"link": "https://fishouttawater.substack.com/"
},
{
"title": "Reddit",
"link": "https://www.reddit.com/user/purpleplatypusparty"
},
{
"title": "dev.to",
"link": "https://dev.to/jnegrete"
},
{
"title": "CodeNewbie",
"link": "https://community.codenewbie.org/jnegrete"
}
],
"blogLinks": [
"https://fishouttawater.substack.com/p/perpetual-education-week-1",
"https://fishouttawater.substack.com/p/portland-life",
"https://fishouttawater.substack.com/p/perpetual-education-week-2",
"https://fishouttawater.substack.com/p/real-fast-blog-post",
"https://fishouttawater.substack.com/p/perpetual-education-week-3",
"https://fishouttawater.substack.com/p/perpetual-education-week-4",
"https://fishouttawater.substack.com/p/perpetual-education-week-5",
"https://fishouttawater.substack.com/p/perpetual-education-week-6",
"https://fishouttawater.substack.com/p/perpetual-education-week-7",
"https://fishouttawater.substack.com/p/perpetual-education-week-8",
"https://fishouttawater.substack.com/p/perpetual-education-week-9",
"https://fishouttawater.substack.com/p/perpetual-education-week-10",
"https://fishouttawater.substack.com/p/perpetual-education-week-11",
"https://fishouttawater.substack.com/p/perpetual-education-week-12",
"https://fishouttawater.substack.com/p/perpetual-education-week-13",
"https://fishouttawater.substack.com/p/perpetual-education-week-14"
]
},
"caseStudies": [
{
"id": "igw",
"heading": "Intergalactic Plant World",
"images": [
"images/igw-1.jpg",
"images/igw-2.jpg",
"images/igw-3.jpg"
],
"liveSite": "https://peprojects.dev/alpha-3/jose/igw/",
"colors": {
"light": "#FFFFFF",
"dark": "#3D71E6"
},
"goals": {
"heading": "Goals",
"paragraphs": [
"Appeal to the general public without alienating their niche market (hippies).",
"To let the public know they’re open for direct sales to customers as well as sales to other shops.",
"To send the message that this a friendly place to hang out and soak in the vibes."
]
},
"research": {
"heading": "Research",
"paragraphs": [
"I studied the sites of their competitors so I could find themes and make unique design choices. I quickly found that this shop wasn't at all like the others — but what they do have is an eccentric story and business model. One that doesn't really mesh well with your classic e-commerce site. Since they didn’t plan on doing any online sales and didn’t even have a product list I figured, why not just tell a story and use extremely effective images. This got us on the right track to accomplishing our goals."
]
},
"design": {
"heading": "Design",
"paragraphs": [
"For the logo I wanted to create something that was a nod to hippie culture without being explicit. I came across this cool skull drawing on etsy that matched perfectly. Even had succulents sticking out of it. Doesn't even have to say the company name. This will be something that locals would use as a bumper sticker.",
"To find a font for the header I took a screen shot of each google font I found interesting and would place it next to the skull to see what fit best. Megrim was the obvious winner because it had a futuristic look (which looks great for words like intergalactic and world) and the A's and W's had large open counters and apertures that reminded me of those diamond-shaped planters that are popular for housing succulents."
]
},
"code": {
"heading": "Code",
"paragraphs": [
"For the header I used a cool css property called filter to invert the colors. Also added a shadow to the to the text. When you hover over the links in the navigation it shows a bunch of red dotted lines. This is the border-property. I had to make so the border changes from zero to full opacity when you hover so that it doesn’t push the rest of the content every time it appears. To keep the design cohesive, I also used red dots to break up the sections.",
"Since this is a fairly simple page I only needed to design for 2 different screen sizes. I made it so on small screen sizes the images connect but when you expand the page it disconnects them and gives the image rounded corners adds a subtle shadow."
]
}
},
{
"id": "alpha",
"heading": "The Alpha-Net",
"goals": {
"heading": "Goals",
"paragraphs": [
"Implement basic design principles I’ve recently learned.",
"Dynamically share and store data for each student with PHP.",
"Make this site interesting to an outsider."
]
},
"images": [
"images/alpha-1.png",
"images/alpha-2.png",
"images/alpha-3.png"
],
"liveSite": "https://peprojects.dev/alpha-3/jose/lesson-99/",
"colors": {
"light": "#FFFFFF",
"dark": "#E63946"
},
"research": {
"heading": "Research",
"paragraphs": [
"So there’s this thing called the AlphaNet. This is a student directory. It’s pretty basic. Just some cards with their name, maybe an image, and some info.For the version on the main site we styled all our cards individually.",
"For school I had to create my own version of the AlphaNet where I implement things I’ve learned so far in the course like generating HTML with PHP, having a cohesive design, and a bunch of other stuff."
]
},
"design": {
"heading": "Design",
"paragraphs": [
"I decided to keep it simple with 2 colors. I wanted something that would get a passing grade on the contrast checker without being super boring and bland.",
"I think my favorite css property is mix-blend-mode. I used the lighten property on all the images. Just connects the images to the content. When an image is untreated it looks kind of out of place to me. Allows you to use more colors and get a little weirder. Also lots of happy mistakes since I don’t know all the property yet. The images with the lightened blend-mode gave it this 70s yearbook sort of vibe that I liked.",
"Since I was going for that retro vibe, I decided to use a display font for the headers. I thought shrikhand blended in well with the style that’s already somewhat established. Kept the rest basic. Roboto for the blurb and monospace for the links.",
"Another thing to consider was that no one outside of PE has any clue what the AlphaNet is. We need some information at the top of the page. Threw together some quick copy and problem solved.",
"The card content being in a column created some problems. I decided to make it responsive so that the column layout remains on the small screen sizes, then changes to a row at a larger viewport sizes. Looks a bit nicer."
]
},
"code": {
"heading": "Code",
"paragraphs": [
"I decided to stored all the student information as objects in a JSON file. Should be easy to read and understand the key/value pairs. Imported that data from the JSON and used a shuffle function so that the order in which the objects are read are randomized on reload.",
"To make life a little easier and php a little less uglier, I saved all the values from the objects to their own variables.",
"I used a foreach loop to generate the html for all the cards. Just have to place the variables in the right spot and it’ll dynamically create all the cards without having to code every single one. If I just added another object to the JSON file and it’ll generate like the others. EZ-PZ.",
"In case a student failed to add a description or text content for their button, I created an if statement that would generate default strings. Also If the description is super long, it can make the other cards look weird when they’re in a row. I needed to set a character limit for the description so I created an if statement with some library functions. Used strlen() function checks the string length (duh). Also used substr() function which takes in a string as an argument and an index number to signify where you want the display of characters to start and end.",
"I wanted to see if I could generate an id with an if statement inside a foreach loop for Derek. Ran into some issues with the variables not working. Lots of trial and error. Eventually got it in a working state. Now when you click Derek’s link in the intro paragraph at the top of the page it will scroll down to his card. I’m a freaking wizard."
]
}
}
],
"meta": [
"clean-meta.jpg",
"designer-meta.jpg",
"gandhi-meta.jpg",
"epstein-meta.jpg",
"rip-meta.jpg",
"wolf-meta.jpg"
],
"lfps": {
"lineOne": [
"He wants to help small businesses and non-profits with bringing their ideas to the next level by using the most dangerous tool known to modern man (the web)",
"He wants to help you make more money and witness the desecration of your rivals by upgrading your web presence and using questionably unethical business practices"
],
"lineTwo": [
"he has an adaptive skill set that is valuable at every stage of the design process",
"he's willing to sacrifice his reputation and put the lives of others at stake"
]
}
}