10/12/2022

Author: jvogit

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015-ie"]
+}

.gitignore

@@ -1 +1,14 @@
-/node_modules/
+# Files
+
+.DS_Store
+.ruby-version
+npm-debug.log
+
+# Folders
+
+.idea/
+.jekyll-cache/
+.sass-cache
+_gh_pages
+_site
+node_modules

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 Justin Vo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,106 @@
+# Start package for [Bulma](http://bulma.io)
+
+Tiny npm package that includes the `npm` **dependencies** you need to **build your own website** with Bulma.
+
+<a href="http://bulma.io"><img src="https://raw.githubusercontent.com/jgthms/bulma-start/master/bulma-start.png" alt="Bulma: a Flexbox CSS framework" style="max-width:100%;" width="600" height="315"></a>
+
+## Install
+
+```sh
+npm install bulma-start
+```
+_or_
+
+```sh
+yarn add bulma-start
+```
+
+## What's included
+
+The `npm` dependencies included in `package.json` are:
+
+* <code>[bulma](https://github.com/jgthms/bulma)</code>
+* <code>[node-sass](https://github.com/sass/node-sass)</code> to compile your own Sass file
+* <code>[postcss-cli](https://github.com/postcss/postcss-cli)</code> and <code>[autoprefixer](https://github.com/postcss/autoprefixer)</code> to add support for older browsers
+* <code>[babel-cli](https://babeljs.io/docs/usage/cli/)</code>, <code>[babel-preset-env](https://github.com/babel/babel-preset-env)</code> and <code>[babel-preset-es2015-ie](https://github.com/jmcriffey/babel-preset-es2015-ie)</code> for compiling ES6 JavaScript files
+
+Apart from `package.json`, the following files are included:
+
+* `.babelrc` configuration file for [Babel](https://babeljs.io/)
+* `.gitignore` common [Git](https://git-scm.com/) ignored files
+* `index.html` this HTML5 file
+* `_sass/main.scss` a basic SCSS file that **imports Bulma** and explains how to **customize** your styles, and compiles to `css/main.css`
+* `_javascript/main.js` an ES6 JavaScript that compiles to `lib/main.js`
+
+
+## Get your feet wet
+
+This package is meant to provide a **good starting point** for working with Bulma.
+
+When installing this package with the commands above, it landed in `$HOME/node_packages/bulma-start`.
+In order to use it as a **template** for your **project**, you might consider copying it to a better suited location:
+
+```sh
+cd $HOME/projects
+cp -a $HOME/node_modules/bulma-start my-bulma-project
+```
+
+Alternatively, you could do something similar with a GitHub clone as well.
+
+```sh
+cd $HOME/projects
+git clone https://github.com/jgthms/bulma-start
+mv bulma-start my-bulma-project
+rm -rf my-bulma-project/.git     # cut its roots
+```
+
+Now, that you prepared the groundwork for your project, set up Bulma and run the watchers:
+
+```sh
+cd my-bulma-project
+npm install
+npm start
+```
+
+As long as `npm start` is running, it will **watch** your changes. You can edit `_sass/main.scss` and `_javascript/main.js` at will. Changes are **immediately** compiled to their destinations, where `index.html` will pick them up upon reload in your browser.
+
+Some controlling output is written to the `npm start` console in that process:
+
+```sh
+_javascript/main.js -> lib/main.js
+
+=> changed: $HOME/projects/start-with-bulma/_sass/main.scss
+Rendering Complete, saving .css file...
+Wrote CSS to $HOME/projects/start-with-bulma/css/main.css
+```
+
+Use `npm run` to show all available commands:
+
+```sh
+Lifecycle scripts included in bulma-start:
+  start
+    npm-run-all --parallel css-watch js-watch
+
+available via `npm run-script`:
+  css-build
+    node-sass _sass/main.scss css/main.css
+  css-deploy
+    npm run css-build && npm run css-postcss
+  css-postcss
+    postcss --use autoprefixer --output css/main.css css/main.css
+  css-watch
+    npm run css-build -- --watch
+  deploy
+    npm run css-deploy && npm run js-build
+  js-build
+    babel _javascript --out-dir lib
+  js-watch
+    npm run js-build -- --watch
+```
+
+If you want to learn more, follow these links: [Bulma homepage](http://bulma.io) and [Documentation](http://bulma.io/documentation/overview/start/).
+
+
+## Copyright and license
+
+Code copyright 2017 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma-start/blob/master/LICENSE).

js/func.js _javascript/func.jsjs/func.js renamed to _javascript/func.js

@@ -1,8 +1,8 @@
-$(document).ready(function() {
-    // Check for click events on the navbar burger icon
-    $(".navbar-burger").click(function() {
-        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
-        $(".navbar-burger").toggleClass("is-active");
-        $(".navbar-menu").toggleClass("is-active");
-    });
+$(document).ready(function() {
+    // Check for click events on the navbar burger icon
+    $(".navbar-burger").click(function() {
+        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+        $(".navbar-burger").toggleClass("is-active");
+        $(".navbar-menu").toggleClass("is-active");
+    });
   });

js/jquery-3.5.1.slim.min.js _javascript/jquery-3.5.1.slim.min.jsjs/jquery-3.5.1.slim.min.js renamed to _javascript/jquery-3.5.1.slim.min.js

@@ -0,0 +1,39 @@
+@charset "utf-8";
+
+// Customization
+
+// You can easily customize Bulma with your own variables.
+// Just uncomment the following block to see the result.
+
+/*
+// 1. Import the initial variables
+@import "../node_modules/bulma/sass/utilities/initial-variables";
+
+// 2. Set your own initial variables
+// Update the blue shade, used for links
+$blue: #06bcef;
+// Add pink and its invert
+$pink: #ff8080;
+$pink-invert: #fff;
+// Update the sans-serif font family
+$family-sans-serif: "Helvetica", "Arial", sans-serif;
+
+// 3. Set the derived variables
+// Use the new pink as the primary color
+$primary: $pink;
+$primary-invert: $pink-invert;
+
+// 4. Import the rest of Bulma
+*/
+@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
+$family-sans-serif: "Nunito", sans-serif;
+$primary: #3b3b3b;
+$dark: #303030;
+$footer-background-color: $dark;
+$footer-color: true;
+$scheme-main: $primary;
+$scheme-main-bis: #343434;
+$link: #cfcfcf;
+$link-hover: #ffffff;
+$text: white;
+@import "../node_modules/bulma/bulma";

_sass/main.scss

@@ -30,4 +30,10 @@ p, .navbar-menu a, .title {
 }
 .projects .card {
     margin-bottom: 1.5rem;
+}
+.avatar-img {
+    object-fit: cover;
+    width: 150px;
+    height: 150px;
+    clip-path: circle();
 }