Repository navigation
Releases: vocksel/vocksel.com
Release list
v8.2.0
What's Changed
- Setup Docker by @vocksel in #17
- Url rewrites by @vocksel in #18
- Add README with deployment instructions by @vocksel in #19
- Setup logging services by @vocksel in #20
- Swatch API by @vocksel in #21
- Use Swatch image instead of building it ourselves by @vocksel in #23
- Publish Grafana by @vocksel in #22
- Fixes by @vocksel in #24
- Move services to new repo by @vocksel in #26
New Contributors
Full Changelog: 8.1.0...v8.2.0
8.1.0
v8.0.0
v7.2.0
The site is now ready for production!
In a mad dash to finish the site by the end of February, there have been a plethora of changes to get ready. 140 commits worth of changes, in fact. All in the span of 12 days.
It's been a long road, but it's done. The deadline has been met, and the finished product is live. Now it's time to take a step back and list off the all the changes since the last release:
Site
- Added a Contact page. Features a pretty slick contact form.
- Added an introduction on the homepage.
- Added links for projects that have public sites. GitHub repos for projects, game pages for Roblox, and published websites for web design.
- Changed the main image for Snowy Mountain. We're now showing off the standing stone. It draws attention much more than the mountain overview.
Styles
- Grouped component styles with their components. All styling for components now lives right along side the components. This makes everything a lot easier to work with, as we no longer need to go back and forth between our JSX and CSS folders.
- Merged base element styling into a single file. Styles for
img,h1-h6, etc. has all been combined into a single file. Our styling on the base HTML elements isn't very long, so having everything split up doesn't give many benefits. - Added Neat to manage our grids.
- Removed Toast in favor of Neat.
- Added FontAwesome for icons.
- Expanded content width to 960px. Up from 800px.
- Added breakpoints so the site looks good on mobile.
- Split vendor styles to their own bundle.
- Added a slider to project pages. All the images are now contained in a single space, instead of being stacked on top of each other.
- Added a slight box-shadow to project tiles and slider images.
- Styled the Portfolio page.
- Styled the About page.
- Styled project tiles.
- Styled the navigation.
- Styled headings. Added a nice little underline.
- Changed
widthtomax-widthon the wrapper. This makes the content shrink when the page is resized. - Switched to a lighter text color.
- Removed huge padding at the top of headings.
- Removed unused global variables.
- Removed unused Sass partials.
- Removed the commented inuitcss partials in
main.scss.
Images
Note: "project images" refers to the images that are used in the slider on each project's page.
- Changed project images to share a standard resolution. Before, the resolutions were varied. Some were 16:9, others were closer to 4:3. Images now share a standard size of 960x540.
- Converted project images to JPG from PNG.
- Drastically reduced combined image filesize. Lowering the resolution of all the images to 960x540, along with converting them to JPG has given us some crazy huge filesize decreases. We've gone from a whopping 47mb of combined images, down to a measly 1.5mb.
- Moved the favicon into the root. The site's favicon is the only image we have left after grouping the project images with their projects. It doesn't warrant a dedicated folder, so it's been moved to the root.
- Fixed accidental white line at the bottom of Mirage Isle's boat screenshot.
JavaScript
- Fixed the scroll bar not going to the top when you change pages.
- Exclusively use class-based components. This is for consistency. There were class components and functional components, and there was no pattern for using one over the other. We're sticking to class components, as they allow us to easily add on functionality if we need the component to do something.
- Removed photo components. We had a set of components for creating images on the site. This was typically used in conjunction with a caption component in the same file. We no longer use these components, so they've been removed.
- Encapsulated everything to do with grids into React components. Before we were using Toast and applying classes where we wanted to use grids. Now we're using standard components for the same purpose, but now everything is contained and can be easily modified to effect everything at once.
- Added a method for getting the current year. This is used with the copyright at the bottom of the page. Now it doesn't need to be updated yearly.
- Added jQuery. This is a dependency of the contact form so we can use AJAX for submitting the form. This is on the to-do list for being removed in favor of a lightweight solution using XMLHttpRequest.
Webpack
- Updated extract-text-webpack-plugin.
Screenshots
Home page
About page
Contact page
v7.1.0
More progress! A ton of content has been added to the site with a fancy grid layout on the homepage.
We're getting closer and closer to a finished site. This release focuses on setting up React Router, adding case studies and info about all my best projects, and creating pages to split up the content.
Content
- Setup React Router.
- Turned the homepage into a list my projects.
- Moved the paragraphs about me to a dedicated About page.
- Added pages for most of my projects.
- Removed the paragraph with my GitHub link. After moving the content about me to its own page, this paragraph didn't really fit in anymore.
- Removed the Walkway Over the Hudson photo. I wanted to keep the new About page as just words.
JavaScript
- Added ESLint. This allows us to keep our JavaScript nice and consistent.
- Removed need to append file extension for
.jsxfiles when importing. This also applies to.js, but we weren't making use of it until now. All imports in our JavaScript files are to be written with no extensions. - Setup Webpack to compile vendor code to a separate file from our app code.
- Enabled automatic webpage reloading for development.
Styles
- Added Toast. It's a super small Sass file for making grids. We'll likely need to upgrade to something more powerful in the future, but for now it gets the job done.
- Removed styling for blockquotes. These were never used and don't look too great. If need be, we can make new styles.
- Removed
$accent-colorvariable. This was only used for the blockquote styles. We don't use it anywhere else in the design so it's been removed.
Screenshots
Portfolio (Home):
Project detail:
v7.0.0
It's time again for another site redesign!
We're taking a break from static sites, and diving into React. The site is going to be transformed into a hub of sorts, where people can view my best work in a central location. Each piece of work will be displayed on the homepage, and will have its own dedicated page with a comprehensive case study.
I wanted to learn a new web technology, and after looking over both Angular 2 and React, I settled on the latter. React should be a great platform to build my site off of, and the React Router looks incredibly promising for setting up all my pages.
This is the first release after moving over to React and getting all setup, there are currently very minimal styles as the next design is worked on and finalized. Now, without further ado, the changelog:
Website
- Ported the site to React. 🎉
Styles
- Removed the Table of Contents from
main.scss. A comprehensive ToC would be nice to have, but I don't want to maintain it. It's fairly easy to scroll throughmain.scssand see everything that's imported, and you can check individual partials for more information, so hopefully that's enough. - Removed most of the site's styling. The site is going to be given a new design with different styling and layout. Removal of most current styles puts the project at a sort of "blank slate" to build off of later.
- Removed
.wrapper--content. We're now using a single.wrapperclass to wrap all the content on the page. - Removed the site's title. - Removed the background image.
- Removed images going from grayscale to color on scroll.
- Removed most margins/padding.
- Removed most header styles.
- Removed
- Using a sans-serif font everywhere. We've switched from a Droid Sans + Merriweather to just Roboto.
- Edited note about importing inuitcss. We had an old comment mentioning how we import inuitcss with Gulp. Since we've ported over to Webpack, this comment has been updated to reflect that.
Other
- Renamed the the
servescript tostart. This defines our webpack dev server as the default command. We can now usenpm startinstead ofnpm run serve. - Updated the license for this year. Two months in but at least it's updated now.
- Added documentation to the deployment script.
- Removed out old dependencies.
Screenshots
v6.7.1 - Dependency Hotfix
This is a bit of an emergency release with some other minor changes sprinkled in.
- Added
babel-coreas a dependency. This package was installed locally and wasn't noticed until recently. It's now added as a dependency so there should be no problems for new contributors. - Fixed styles not being applied for a split second. We're now using
extract-text-webpack-pluginto put our CSS into a tag. - Set Webpack's
contextto thesrcfolder. Now we can simply reference assets inside that folder when working in the Webpack config, instead of needing to prepend./srcall the time. - Now using the standard convention for task namespacing. (from
deployProdtodeploy:prod)
v6.7.0 - Webpack
The site has been ported to Webpack, removing the use of Gulp.
This was done to make life with JavaScript easier. We're going to be rebuilding the site from the ground up on React, and Webpack comes highly recommended for use with it. Even if React doesn't work out, Webpack is a commonly accepted standard, and easier to work with than Gulp.
Notable Changes
- Moved over to Webpack.
- Created a deployment script. This is the only thing Webpack can't handle for us, so it's just been abstracted to its own file.
- Removed Gulp. Webpack and our deployment script handle all of our needs.
- Removed jQuery. See "Grayscale Filter" below.
- Use a single class to apply the grayscale filter to images. See "Grayscale Filter" below.
- Moved Pug locals to their own file.
Grayscale Filter
We apply a grayscale filter to all images on the page. When the images are scrolled over we remove the filter to return them to color.
Previously, this effect was achieved using a .grayscale and .colorize class, along with jQuery's toggleClass function to switch between the two.
We're now using .coloring--grayscale for handling color, and applying transitions in .transition. The .transition class stays on the element, and we can use pure JavaScript to toggle .coloring--grayscale. Now we have reusable classes for all of our transitions, and we no longer require jQuery.
That's all very technical, here's a before/after of the markup to give a feel of the difference:
Before:
<!-- Default state -->
<img class="js-color-scroll grayscale" src="/img/sample.png">
<!-- Scrolled over -->
<img class="js-color-scroll colorize" src="/img/sample.png">After:
<!-- Default state. -->
<img class="js-color-scroll transition coloring--grayscale" src="/img/sample.png">
<!-- Scrolled over. -->
<img class="js-color-scroll transition" src="/img/sample.png">v6.6.0
This update is focused on touching up the site, along with reworking the backend in preparation for a redesign.
The site is going to be turned into a portfolio to display all of my best projects. I have a lot of 3D models and programming work I'm proud of, and I want to create a centralized hub to showcase all of my work. This update lays a lot of the groundwork we need before we can start the redesign.
Without further ado, here's all the notable changes:
Website
-
Added a new picture showing off Fireflies.
-
Updated the pictures used for Echo Ridge. The map has undergone a lot of stylistic changes recently and needed an update on the site.
Overview:
House comparison:
-
Updated the Echo Ridge house comparison to be before/after instead of after/before.
Tasks
- Converted Gulp to ES2015. We're now using Babel to give us more features for use in the gulpfile.
- Automated my age and copyright year. I got tired of having to constantly change how old I am, along with the current copyright year. Now it's all automated when compiling, so instead of changing files and committing, the site can just be rebuilt and deployed.
- Handle images and JavaScripts as static files. We actually don't need to do any preprocessing for either of these, so they can just be moved over when compiling.
Markup
- Added use of Pug templates (formerly Jade)
- Compile
index.pugto the root, and all other Pug files to folders. This will turn files likeabout.pugintoabout/index.htmlso it can be accessed in the browser at http://example.org/about/. - Moved all pages to
src/views/. This is where all of our markup to be seen will be located, while templates are still insrc/templates/. Right now this folder only contains the index, but other files will be added later.
Styles
- Updated to the latest version of inuitcss.
- Removed all Bower dependencies. inuitcss was the last package installed through Bower. With it updated, we were free to remove Bower. Now all we have to worry about is a single package manager.
- Removed the use of aliases. We had a file dedicated to defining aliases (e.g.
$small-spacing-unit: $inuit-spacing-unit-small;), but this has been phased out. The built-in variables aren't very long, and they really don't warrant an extra layer of abstraction just to make the variable names shorter.
Misc
- Updated the README to give a little more information to those looking to contribute.
- Updated URLs for repository and user account renaming. This repo used to be hosted at
voxeldavid/voxeldavid-website, but is nowvocksel/my-website. - Fixed not being able to push to production.
v6.5.0
This is a fairly small update, but its contents are critical to the future of the project.
Notable Changes
- Deployment! The site can now be deployed to a staging and production environment (only with proper authorization, of course). But this is a very, very big step for the project. Now that changes can be pushed out easily (instead of having to drag and drop via an FTP client), updates to the site are painless to publish
- Updated to Gulp 4.0, refactoring the gulpfile along the way. 4.0 is still in development but it's stable and works just fine. Plus using it means we could get rid of the
run-sequencedependency that allowed us to do whatgulp.parallel()does. - Clerical changes to the README to reflect recent changes.
- Updated the copyright year and my age on the site. I did these a while ago but felt they were worth mentioning.










