{"id":39,"date":"2023-01-01T04:42:09","date_gmt":"2023-01-01T04:42:09","guid":{"rendered":"https:\/\/www.leogong.net\/?p=39"},"modified":"2023-01-02T03:47:18","modified_gmt":"2023-01-02T03:47:18","slug":"my-original-portfolio-page","status":"publish","type":"post","link":"https:\/\/www.leogong.net\/?p=39","title":{"rendered":"My original portfolio page"},"content":{"rendered":"\n
\n
\"Leo
My original landing page to some of my projects<\/figcaption><\/figure>\n\n\n\n

Key Details<\/h3>\n\n\n\n
\n
\n

Date<\/p>\n\n\n\n

Tech Stack

<\/p>\n\n\n\n


Link<\/p>\n<\/div>\n\n\n\n

\n

2013<\/p>\n\n\n\n

Backend: Node.js
Frontend: Express, html, css, javascript
Former hosted on: MacBook with dyndns and Nginx reverse proxy
Now hosted on: Digital Ocean Droplet configured with Nginx reverse proxy<\/p>\n\n\n\n

https:\/\/portfolio.leogong.net<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n

I made this page to play with javascript animations and to learn self hosting<\/strong><\/h2>\n\n\n\n

Use case<\/h4>\n\n\n\n

I\u2019d created a couple of sites here and there that were sitting on my local machine or in heroku. There was also the domain I\u2019d purchased \u2013 leogong.net that was sitting unused. I built this pretty quickly over a weekend \u2013 got to experiment with using javascript to animate my landing page. Nothing fancy, just html \/ css \/ javascript.<\/p>\n\n\n\n

Until I migrated to digital ocean in Dec 2022, this was self hosted on my own MacBook. It was a fun way to learn about how routing and servers worked.<\/p>\n\n\n\n

What it did<\/h4>\n\n\n\n

Pretty simple page with animated water droplets on a black background. The links would take you to my LinkedIn profile, or a few of my projects at the time:<\/p>\n\n\n\n

    \n
  • Dana\u2019s podcast blog<\/li>\n\n\n\n
  • My package tracker<\/li>\n\n\n\n
  • My meal planner<\/li>\n<\/ul>\n\n\n\n

    How it was set up <\/h4>\n\n\n\n
      \n
    1. User would type in leogong.net<\/li>\n\n\n\n
    2. It would resolve to point to my local machine\u2019s IP address that was regularly updated by a dynamic dns service that ran on my machine<\/li>\n\n\n\n
    3. Once it hit my machine, the nginx reverse proxy I set up would redirect the request for leogong.net to a specific port<\/li>\n\n\n\n
    4. The node app that was serving this website would be listening to that specific port<\/li>\n<\/ol>\n\n\n\n

      What I learned<\/h4>\n\n\n\n

      Hosting isn\u2019t all that complicated. You can actually host multiple domains for free on your own machine. It felt like magic \u2013 it was pretty neat to dive into how reverse proxies worked. The main issue was dynamic dns and being on my own machine. The website pretty much broke after a few months when something about the dynamic dns script broke, and when I eventually replaced the laptop with a new one.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

      Key Details Date Tech Stack Link 2013 Backend: Node.jsFrontend: Express, html, css, javascriptFormer hosted on: MacBook with dyndns and Nginx reverse proxyNow hosted on: Digital Ocean Droplet configured with Nginx reverse proxy https:\/\/portfolio.leogong.net I made this page to play with javascript animations and to learn self hosting Use case I\u2019d created a couple of sites […]<\/p>\n","protected":false},"author":1,"featured_media":87,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.leogong.net\/index.php?rest_route=\/wp\/v2\/posts\/39"}],"collection":[{"href":"https:\/\/www.leogong.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.leogong.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.leogong.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.leogong.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=39"}],"version-history":[{"count":12,"href":"https:\/\/www.leogong.net\/index.php?rest_route=\/wp\/v2\/posts\/39\/revisions"}],"predecessor-version":[{"id":131,"href":"https:\/\/www.leogong.net\/index.php?rest_route=\/wp\/v2\/posts\/39\/revisions\/131"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.leogong.net\/index.php?rest_route=\/wp\/v2\/media\/87"}],"wp:attachment":[{"href":"https:\/\/www.leogong.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=39"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.leogong.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=39"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.leogong.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}