My Portfolio Site - Pt 1
I decided to launch a static site to quickly bring my online presence together. I'll always be able to launch a new version with more bells and whistles when I'm ready.
I have tinkered with site generators like Gatsby but felt they were unnecessary for this first iteration of my site. I originally wanted as little code as possible for such a minimal project, but I quickly realized I'm not setting much structure for scale in the future. I think that what I lost in that initial preparation for scale doesn't necessarily justify the extremely small amount of code.
I had skimmed over documentation for build systems like Gulp and Grunt and decided it would be good to start there. I chose Gulp and I really enjoyed it through this development process, especially with the addition of BrowserSync which allowed me to work from one machine and view on another. Finally I look like the quintessential depiction of a developer with two laptops and a desktop running on my desk, but I still don't fit the night owl stereotype.
As for the design I definitely want to start with a single page scroll through jumbotron panels. I wanted to keep the styling simple and image-focused so a quick swap of images will give me a completely fresh look with minimal effort. The images and videos I've chosen are all my own with some manipulation using Gimp, an open open source photo editor that I highly recommend checking out. I was able to do a lot of work with background removal to accomplish some really cool parallax effects!
Let's get started!
I started with a totally empty repository and project directory with a typical app directory, .gitignore, and index.html in the root then installed my initial dependencies.
npm install gulp del browser-sync merge-stream gulp-sass --save-dev
npm install bootstrap jquery
The next step was to setup the gulpfile. Gulp and Sass thankfully have really easy to comprehend documentation so check them out! I'd hate to overload this post with recommendations that will be out of date in a year ;)
It really was as easy as that to get something up and I can't wait to tinker with it more. I wound up just hosting the site on github.io which was a total breeze. Check it out and if you're interested in the html/ css, check out the repo!
Top comments (5)
Hey Jared! Thanks for the great right up. I just tried clicking on the link in your profile hoping to take a peak at your work and it isn't working for me. Last checked 2019-10-28 12:50 PM EST.
Thanks! I added the links.
Sorry I don't see the link to repo/demo.
Thanks! I added the links.
404 when I clicked on the link to the site.
Some comments have been hidden by the post's author - find out more