So I made a website...

hey there!

I feel like I've been lurking around long enough. I've seen all these cool projects and have read all these cool articles and have decided -- "I want to do that too!"

Now that we've got that out of the way, I'm just going to get right to it. This is my first post, so forgive me if it's a little rough around the edges!

In sticking with the theme of beginnings, I felt that it would only be appropriate for me to share a little bit about the behind-the-scenes of my homepage. I don't really have any screenshots (the page can speak for itself), so I'll try to keep things mostly to-the-point.

main goal:

Place for me to easily share and write about my work while also keeping track of my accomplishments as a developer. In honesty, this website was a bit of a departure for me for two main reasons:

• I have never published anything (literally, anything...) other than a digital resume...
• I have never published anything built with technologies that weren't HTML and CSS...

That said, after lurking around here for a bit and seeing everyone talk about how important portfolio sites are, I figured I should probably have one too. But I didn't want to just stick something out there like, "Oh, hey, here's my stuff!"

I wanted to learn something from this. I wanted it to be an adventure, like all the best things in life!

When I sat down to think about the site, my main concerns were:

• Easy updates. I did not want to spend time fiddling about with various web services, hosts, etc. My existing site was published to GitHub Pages, and I very much wanted to leverage this again. I was not really all that keen to set up a backend somewhere to host my posts, so I had to come up with another solution.
• I wanted the site to be lightweight and performant across all most devices and on all most connections. I uploaded my mugshot up there in pretty high resolution, so the load time on that beast can be hit or miss. I've thought about compressing it down a bit but just... haven't? Hrmmm...

technologies:

I wanted to keep the tech stack pretty small in order to ensure that things didn't get too out of hand. I can get a little carried away sometimes! Heh...

I've outlined most everything I used to get this done below and have provided links so you can learn more if you're curious.

• React: I think we all know about React 😊
• Axios: This handles getting the data from the GitHub API
• Showdown: This converts my Markdown to HTML
• GitHub Pages: This is where my site lives

how it works (in a nutshell...)

• In order to save myself the hassle (if you really want to call it that) of setting up a backend somewhere, I decided that I would just serve my posts as JSON directly out of the public directory. Take a look here to see what I mean. This would allow me the ability to serve posts directly out of the application. Neat.
• Once the application was published, I was still going to need a way to connect to the GitHub API and download the raw data. Axios seemed the perfect tool for this!
• After Axios gets the goods, it's all parsed out and passed off to various components so that I don't have to do any work to get a new page or card on my work listing. It all happens when the "post" is added to the public directory. Neat!
• For the posts themselves, I simply store some Markdown right in the JSON file so that I don't have to muck about with any real layout. The whole process is not too unlike what I'm doing right now. Neat-o burrito!
• Once I have everything all set in my public directory, I just push it all to my repo, and the changes happen automagically! Laziness prevails! Huzzah!

a note:

Posts load in random order cause I was too lazy to enforce any kind of order for the moment. This is something I may address at a later date, but for the moment, the number of projects that I have listed is low enough that I feel it is unwarranted.

closing thoughts:

So, I pretty much failed at keeping this short and sweet, but I feel like that's okay. If you've made it through my ramblings, I applaud you! I'd love to hear what you guys think about the layout of the site, what you think of my solution, and any areas that you feel I could improve in the future.

Cheers!