Skip to content
A website for my professional profile (JAMstack, HTML, CSS/SCSS, JavaScript, Vue.js)
Vue JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.unotes
.vscode
favicon
files/pluralsight-certificates
fonts
images
src
vendor
.babelrc
.gitignore
README.md
index.html
package-lock.json
package.json
postcss.config.js
webpack.config.js

README.md

profile-jsnelders-com

Turning my resume into a profile and making it more interesting.

I've created this site for 2 reasons:

  1. I'm sick of having a boring word document resume that looks like everyone else's. So this site.
  2. I've open sources the site on GitHub to also demonstact capability (i.e. it's a portfolio item).

Status

8 February 2020

  • Site is still under development. Most of the technical design has been sorted out. There are some issues with responsiveness, mobile design, and UX that I need to work on. I'm chipping away at it. I'm taking a progressive MVP approach to this site: developing, testing and ticking things off one at a time. Content development is just starting. I'm planning on having the first version finished in the next 2 days. There will be more work after that, but "adapt and release fast" is my aim on this particular site.

I've taken a "progressive" approach to building the site. Start simple. Solve specific problems. Combine and upgrade.

Technical Details

Made with:

  • JAMstack
  • HTML
  • CSS/SCSS
  • JavaScript (including ES2015+)
  • Vue.js 2.x
  • webpack
  • Babel

Hosted on Netlify.

Live Site

Running at jasonsnelders.dev

Also check out my main website/blog at jsnelders.com

Enhancements List

13 February 2020:

  • Left/right swipe on pages for mobile devices.
  • Adaptive width of slide out menu on smaller screens.
  • A "simplified" view for mobile/small screen devices. Remove wasted space, borders, etc.
  • Add Vue Router and assign each page to a route. Need to figure out how to keep the page transition animation while navigating.

Development Environment Setup

To use this project, download or Clone from GitHub to a folder on your computer, then follow these steps:

  1. Install Node Package Manager (npm). It comes with Node.js, so download and install Node (https://nodejs.org/en/download/).
  2. If you already have Node installed, make sure your running the latest version. Older versions may throw errors when running "npm install" (see step 4).
  3. Open a command-line/terminal window and browser. Set your location to the root folder of this project.
  4. Run "npm install". Dependency packages defined in package.js will be downloaded and installed into a "node_modules" folder. This will take some time.
  5. Run "npm run watch". The webpack watcher process will run which will watch for file changes and create new build files in a "dist" folder. The first time you run "watch" it will generate the "dist" folder and perform a build.
  6. Start your site and it should all work.

How you run the site is up to you. I work in Visual Studio Code (VS Code) and have the "Live Server" extension by Ritwich Dey installed (Extension ID: ritwickdey.liveserver). Running that will start a web server within VS Code and launch the site.

You can’t perform that action at this time.