[1/15] Week 1: Launching my portfolio site

Seth Centerbar — Sat, 11 Apr 2020 20:57:31 +0000

👋😬 Before we get started, I want to invite you to share your website in the comments, along with any questions or suggestions you have for me! I'd love to chat.

Quick Recap ♻️
Last week, I wrote this post.

[0/15] How about 15 weeks of code?

Seth Centerbar ・ Apr 4 '20

#100daysofcode #aws #node

TLDR: I got laid off because of COVID-19 and decided to take this time to build my full stack skills. I also want to increase my online presence to have a bigger network and better job security going forward.

Week 1: Launching my portfolio site 🧑‍🚀🚀
As many of you have likely experienced, there are an unreasonable amount of options when it comes to hosting a website. It's pretty easy to get overwhelmed in those decisions and not upload anything at all. While I can't really give a suggestion on where you should host your site, I can talk about why I chose to host mine on AWS.

The whole point of this portfolio idea is to show off the skills that we've learned. Technically, I'm AWS certified as a Solutions Architect. I can tell you with great confidence that when I received that certification, I was not ready to be hired as an AWS expert. In fact, memorizing facts about security groups, VPC's, and RDS doesn't really give you much of a picture of cloud-native development strategies at all.

Because of what I've learned over the past year, I felt like the way I hosted this site was actually a pretty good indicator of my comfort with AWS. I chose to host the site using a CloudFront web distribution backed by s3. If you're interested in doing the same, these docs are fantastic.

https://docs.aws.amazon.com/AmazonS3/latest/dev/website-hosting-custom-domain-walkthrough.html

Make sure to read the next page, "Speeding Up Your Website with Amazon CloudFront", as well.

Some of the things I learned by doing this were as follows:

How to purchase a domain through route 53
How to host a website in s3
How to add SSL to your website using the AWS service Certificate Manager
How to redirect traffic from one URL to another with s3
What a CloudFront web distribution is, and how cache invalidation works

Progress on my site, Svelte, and Routing 🚧📈
If you want to check out my website, it's https://sethcenterbar.com

It's definitely a work in progress, and I'm obviously not the best at design, but I think it's starting to come together. The first piece I built was a navbar that is heavily inspired by fireship.io's video Animated Responsive Navbar with CSS.

Next, I began working on my about page. At this point, it's gone through a few iterations with different looks, but I'm still not happy with it. I think I can do something more elegant that captures my experience and personality without the layout issues I'm struggling with.

Next, I had to figure out routing in Svelte. I almost decided to switch to react, because svelte doesn't come with a simple router, and many people urge you to move to Sapper. Fortunately, I found an article on dev.to by the author of svelte-router, Jorge Alvarez. Thanks, Jorge!

Jorge AlvarezFollow

SaaS using Ruby on Rails

Following his README, I was able to get a contact page set up and routing working so that I could jump between the pages of my app!

From here, I decided to implement my first API call, which made this project feel like it was really coming together. I decided to start with the GitHub API, as it holds my public repos, and has a very well documented public API. Honestly, I was surprised at how easily this part came together. I was kind of expecting some complications, but I'm not complaining! I still have a good bit of styling to do on this page, as it currently looks horrible. 😂

Implementing GitHub Actions 🧰
After getting my site set up on AWS, I really enjoyed the workflow of only needing to run a simple set of commands to update the site live. I was chatting with a few other members of my team who were laid off, and one of them mentioned I should add a GitHub action for deploying my site on a push to master. My initial reaction was that this could wait until later, but I decided to give it a go. Following my buddy Aaron's template, I was able to automate the deployment of my site in just a few minutes.

name: CI
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v1
    - name: Configure AWS Credentials
      uses: aws-actions/configure-aws-credentials@v1
      with:
        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        aws-region: us-east-1
    - name: Build static site
      run: npm install && npm run-script build
    - name: Deploy static site to S3 bucket
      run: aws s3 sync ./public s3://${{ secrets.S3_BUCKET_NAME }} --delete
    - name: Invalidate CloudFront Cache
      run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CDN_DISTRIBUTION_ID }} --paths "/*"

Thanks, Aaron!

Aaron StoneFollow

Full Stack Software Developer for 5+ years with expertise in NodeJS/React/React Native

Personal Update -> Go! 🤠
As an update to my unemployment situation, I have received a formal offer from one company, and have my final interview with another on Monday. I'm really excited about the future, as both opportunities are fantastic. Because of my upcoming interview Monday, I've decided to shift focus this week to playing with MongoDB, Go, and maybe even figure out a third-party identity management system like Auth0.

I spent about three hours last night working with Go. I'll share the tutorials I followed below. Huge thanks to Brad Traversy, as his videos on Go have really helped solidify my understanding of the language, dependency management, and packages.

Brad TraversyFollow

/traversymedia

Goals for next week ✅

Create a guestbook app on my website that integrates Auth0, MongoDB, and a REST API built on lambda and Go.
Finish the styling of the Projects page on my website
Convert the blog page of my website into an API call with cards as opposed to a link to dev.to
Do well on my upcoming final interview, and hopefully have news to report by next weeks post

Stretch Goals (likely to carry over)

Implement the 'skills' page on my website

Wrapping Up 🎁
This has been one of the most unstable weeks of my life. On top of isolation, being laid off after purchasing a home has been a pretty eye-opening experience. I've had some wins this week, and I'm really happy that this post can celebrate that with this community. I've also had a couple of dark days where I could barely get off the couch to eat. Being productive makes me feel more in control, so I've been putting in some crazy hours. With that said, remember to focus on what's important to you, reach out to friends you haven't heard from, and keep your heads up.

Let me know if there is anything you'd like more detail on, I would be happy to elaborate!

[0/15] How about 15 weeks of code?

Seth Centerbar — Sat, 04 Apr 2020 20:23:17 +0000

Introduction 👋
Hey there dev.to community! My name is Seth, and I've been working in tech and software for about 7 years. I've worked across many tech stacks, and even started my career as a mainframe operator. Much of my career has been spent working with databases and infrastructure, but lately I've really been getting the itch to become a full stack engineer. I decided to start working on a portfolio website about a week ago, and that was probably a good decision!

Being Laid Off 🦠😔👎
Unfortunately, I was laid off along with many of my team members last Thursday morning due to the COVID-19 situation. If nothing else, this has really highlighted the necessity of having good examples of my work available for others to see. Because of this, I've decided to commit to do #100daysofcode, but to reduce spam and better organize my time, I'm going to publish a weekly update here on dev.to.

Planning 📝
Over the next 100 days, I want to accomplish the following:

Get comfortable blogging about technology (this is a good start, huh!?)
Build a portfolio website I can be proud of
Start my youtube channel -> create interesting content that revolves around my interests and experience
Learn a popular SPA framework and build my html+css skillset
Build javascript skillset -> become proficient with node/express
Build multiple projects with REST APIs built in NodeJS, Python, and maybe Go
Experiment with GraphQL & FaunaDB

What I've done so far 💪
My next post will go into greater detail, but I would like to highlight some of the work I've done so far for week 1.

I've purchased sethcenterbar.com, set up route53, ssl certs, cloudfront etc.
I've played with react and svelte. Currently, I'm moving forward with svelte, but I don't have a huge preference at this point.
Worked on collecting all content I have to share for now
Published WIP site

Before following up with post[1/15] I would like to: 🛠️

Finish cross-browser support for navbar
Implement routing in svelte
Integrate with a third party api (maybe pull projects from github to display on my site)

In Conclusion 🧑‍🚀🚀
This has been a pretty scary time for all of us, and losing my job has been quite unsettling. I'm deciding to make the best of it. I would love to make some friends on this site and I'm always excited to talk about data, polyglot persistence, microservices, serverless, and backend dev.

If you want to follow my website work live, -> https://sethcenterbar.com

DEV Community: Seth Centerbar

[1/15] Week 1: Launching my portfolio site

[0/15] How about 15 weeks of code?

Seth Centerbar ・ Apr 4 '20

Jorge AlvarezFollow

Aaron StoneFollow

Brad TraversyFollow

[0/15] How about 15 weeks of code?