Listen. | Perpetual Education: 010
Listen. | Perpetual Education: 010
Nobody writes anything. All we do is translate.
Ahhh what a feeling to step away from everything you are doing and remembering that there are other things left to do out there.
Okay, but seriously, we took some time to work on a lot of things with new ideas and skills. A big portion of my time was sunk into my personal site.
Wait up..
PRO PERSONAL SITE. 😎
We’re leveling up. I believe working on this really pushed me to my limits. The way I think about things certainly changed after “completing” this. It meant a lot to make this site truly a bright representation of myself and wanted to put all of my heart into it.
In with the new, out with the old.
First step was getting rid of the original site. You may remember an old blog post going over how I went about create that version of it.
I think as a group we really took a step back and tried to analyze how to approach the structure of the site. We know HTML, CSS, PHP and how to use JSON data, but how do we make the best site that will be shown to recruiters and hear an audible “Woah”.
At some point in the week it really hit me. I have to make an object of JSON data for each page, in that object there will be sections that get loop through to be represented on the page. We use PHP to figure out what page we’re on and get the appropriate data for that page.
Each section is a module that is create to flexible take data from the JSON and present it on the page. All this is a way of making a personal site with our own “CMS-like” structure.
It took some critical thinking to wrap my head around structuring my site this way, but once it clicked. IT REALLY CLICKED.
These images show all the folders that I used to make the sections and page data.
This last images shows the base PHP loop to generate the page. So first if there is a $page it proceeds to get the $pageData, and from that data it will look for [‘sections’] array inside the data object. Now it will look through my templates/modules folder for that specific $section module.
Okay. What about the look?
I basically live in dark mode on my devices so sometimes I don’t take into account how my site might look in a light mode version.
This time I wanted to be more conscious of my color choices and set up variables that would be easily transformed between light and dark versions. This way a simple variable change could give the site a whole different vibe.
I started to learn some grid in CSS. This really helped get some ideas out that might generally be more difficult with only flex-box. Saying that, I really had to think about how the exact layout of my pages was going to look. I figured I would do a general home page with all the basic information a hiring representative might be looking for but have options for some pages of extra work.
This was the first pass through trying to get an idea for structure and how components were going to be on the page. This is actually where I made some cubes that I thought would be cool additions to my page. These were heading in the right idea but were not great, needed to go through each and really lean into a style and influence. I ended up returning with a more solid grid structure that would be uniform throughout the sight. You could see mobile is always going to be design first as it comes intuitively, followed by a the page being split into four columns.
Some really cool design ideas here that made it onto the final layout. Feedback is important because you want the user to feel a certain way when they enter your site and want to create the least amount of friction in the experience. Taking things into code starts to show some holes in the original blueprints that I think could be better represented.
Okay but what about the actually site?
Yeah! You could check out the site for yourself right here! We could still talk about whats going on here right? I personally like the dark mode a little more.. but the light mode is pretty sweet so check it for yourself.
I wanted that initial page to talk about me. My projects. Maybe more about me? And finally connecting me with other individuals.
On the about me page you could find a little more details about myself, my goals, and my resume.
The writing post brings you here! To my blog! Well, each post has it’s own link incase you only want to look for something specific but it could bring people to this post eventually. 😉
The forms page contains practice exercises I completed to take care of simple task. All of these are done using PHP server side rendering to grab the users input and display the result.
Theres a cute little button there that turns all the PHP forms into JavaScript forms. 😉
It is a pretty simple idea, but since I learned some JS, I took the time to give the user the option of doing one or another. I do plan to change those up a bit so look out for that in the future.
The cool thing about all this information is that it is all data backed. The projects, the blog post, the forms, goals, and resume could easily be adjust if I just add or remove things in the JSON page data files.
Lastly, theres a guide tab. That page contains all the modules on the site. I learned about joining a team on a new project. You want to have an idea of all the components, modules, the styling they use, the variables, and fonts. There’s a lot important things to keep in mind in an already existing project. The concept is simple here, taking everything that’s available and putting it onto the page for viewing but in theory this could help some view how to make a new page and grab the appropriate module for their page.
What’s next? 😍
Well.. I’m still learning.. probably will be for a long time. I want to be the best and want to be apart of a lot of cool things, and that isn’t so simple.
This site is great and I truly gave a piece of myself to make it but theres more to be done! The projects are going to get better and deeper! The form exercises are going to be more optimal. The site is going to use Javascript and add some cool animations. The goals are going to be crazier. The resume is going to be nicer. THE NAME IS GOING TO GET BIGGER! I AM JESSE haha.
These are all goals and ideas for the future.
Hope to see you there.
…. ✈️.…..🫡