loading...

So I made a website...

couch3ater profile image Connor Tangney ・4 min read

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!

Posted on by:

couch3ater profile

Connor Tangney

@couch3ater

Ski bum at heart, web developer by trade.

Discussion

pic
Editor guide
 

I dig how clean and straight forward it is. Also you should post more!

 

Hey thanks! I certainly want to post more, it's just a matter of figuring out what to post about.

I also want to be sure I'm strong enough with the subject to make certain that people can get something out of it 😅

I've been messing with some random JS over the past few months. Maybe I'll just do a brain dump post, see if people are interested...

 

You should. Don't make it about perfecting something or setting an imaginary bar. No one is going to expect you to have a perfect post before they'll bother reading it. You can post about anything and if it interested 1 person, then that is progress. If you wait until you have the perfect post, the right thing to say, the best time, and so on... you'll be waiting for a long long time. Read my post on the 25 years and just beginning. I did the same thing as you, it had to be right for people to want it. Nope, i was wrong. I mean look at me! I don't even know whats in your head, but I want to see more from you because you're nice and treat others with kindness. So what you find interested, is something i'd like to see.