![Cover image for [1/15] Week 1: Launching my portfolio site](https://media.dev.to/cdn-cgi/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F3psge8mqcaun9ax9y958.png)
👋😬 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.
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!
jorgealvarez
jorgegorka
https://www.alvareznavarro.es
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!
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.
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!
Top comments (0)