feat: improve css, upgrade deps, inline assets (#14)

* feat: improve styles of buttons; add tooltips * feat: add google analytics * fix: update images * build: switch to yarn v3 * build: upgrade dependencies * build: inline css instead of linking it * build: update sitemap
sbolel · Dec 4, 2021 · 3052a70 · 3052a70
1 parent 954f31f
commit 3052a70
Show file tree

Hide file tree

Showing 15 changed files with 9,313 additions and 6,049 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,8 +1,18 @@
+**/*.log*
 **/.DS_Store
 **/.firebase
 **/node_modules
+
 public/index.html
 public/styles-*.min.css
 public/assets/css
 public/release/
 public/.git
+
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
diff --git a/.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs b/.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
diff --git a/.yarn/releases/yarn-berry.cjs b/.yarn/releases/yarn-berry.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1,5 @@
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
+yarnPath: .yarn/releases/yarn-berry.cjs
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -3,14 +3,24 @@
 
 const pkg = require('./package.json')
 
+const plugins = [
+  'grunt-contrib-clean',
+  'grunt-contrib-connect',
+  'grunt-contrib-cssmin',
+  'grunt-contrib-htmlmin',
+  'grunt-contrib-watch',
+  'grunt-replace',
+]
+
 const clean = {
-  release: ['public/release/*.js']
+  cssmin: ['public/sinanbolel.min.css'],
+  release: ['public/release/*.js'],
 }
 
 const connect = {
   client: {
     options: {
-      base: './public',
+      base: 'public',
       livereload: true,
       open: {
         appName: 'Google Chrome',
@@ -30,7 +40,10 @@ const cssmin = {
   target: {
     files: {
       'public/<%= pkg.name %>.min.css': [
-        'public/assets/css/*.css',
+        'public/assets/css/base.css',
+        'public/assets/css/buttons.css',
+        'public/assets/css/logos.css',
+        'public/assets/css/tooltip.css',
       ]
     },
   },
@@ -59,15 +72,6 @@ const watch = {
   },
 }
 
-const plugins = [
-  'grunt-contrib-clean',
-  'grunt-contrib-connect',
-  'grunt-contrib-cssmin',
-  'grunt-contrib-htmlmin',
-  'grunt-contrib-watch',
-  'grunt-replace',
-]
-
 module.exports = ({
   initConfig,
   loadNpmTasks,
@@ -78,19 +82,26 @@ module.exports = ({
     dist: {
       options: {
         patterns: [{
-          match: 'CSS_FILE_HASH',
-          replacement: () => `${option('target')}`
-        }]
+          match: '/*__MINIFIED_CSS__*/',
+          replacement: '<%= grunt.file.read("public/sinanbolel.min.css") %>',
+        }],
+        prefix: '',
+        usePrefix: false,
       },
       files: [
-        { dest: 'public/', expand: true, flatten: true, src: ['public/index.html'] }
+        {
+          dest: 'public/',
+          expand: true,
+          flatten: true,
+          src: ['public/index.html'],
+        }
       ]
     }
   }
 
   initConfig({ clean, connect, cssmin, htmlmin, pkg, replace, watch })
   plugins.forEach(loadNpmTasks)
   registerTask('serve', ['connect', 'watch'])
-  registerTask('build', ['cssmin', 'htmlmin'])
+  registerTask('build', ['cssmin', 'htmlmin', 'replace', 'clean:cssmin'])
   registerTask('default', ['build', 'serve'])
 }
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
   <meta http-equiv="Content-Security-Policy" content="base-uri 'self' firebasehostingproxy.page.link">
   <title>Sinan Bolel | Full Stack Software Engineer</title>
-  <style>body,html{height:100%;height:100vh;position:relative;background-color:#00afcb;color:#fff}body{margin:0;padding:0;font-family:--apple-system,"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;text-align:center;z-index:-1}.hero-cover{z-index:0;background-color:#2f526e;height:35%;height:35vh;box-shadow:#f5f5f5 0 1rem 10rem 1rem;width:100%;position:absolute;top:0}.hero-container{position:relative;top:15vh;height:30rem;width:100%}.hero-container>p{color:#bdbdbd;font-size:1.125rem;top:-1.5rem;width:15.33rem;margin:1rem 0 1rem .33rem}.connections{position:relative;z-index:1}.connections>a{margin:0}.subtitle,.title{text-shadow:0 .05rem .1rem #192b3a;color:#fafafa;padding:0;vertical-align:bottom;width:100%}.title{font-size:3rem;line-height:3rem;margin:0;font-weight:300}.subtitle{font-size:1.5rem;line-height:1.5rem;font-weight:100;margin:0;color:#e4f4fe}.logo{box-shadow:0 .0625rem 1rem #192b3a;vertical-align:middle;height:13rem;width:13rem;border-radius:50%;border:8px outset #eee;padding:0;margin:0 0 1rem}</style>
+  <style></style>
   <meta name="description" content="Sinan is a web systems engineer and full-stack developer who specializes in enterprise web applications.">
   <meta http-equiv="expires" content="0">
   <meta name="robots" content="all">
@@ -24,7 +24,7 @@
   <meta property="og:title" content="Sinan Bolel | Full Stack Software Engineer">
   <meta property="og:description" content="Sinan is a web systems engineer and full-stack developer who specializes in enterprise web applications.">
   <meta property="og:site_name" content="Sinan Bolel">
-  <meta property="og:see_also" content="https://link.sinanbolel.com/url/resume">
+  <meta property="og:see_also" content="https://sinanbolel.com/resume">
   <meta property="og:see_also" content="https://link.sinanbolel.com/url/github">
   <meta property="og:see_also" content="https://link.sinanbolel.com/url/linkedin">
   <meta property="og:type" content="profile">
@@ -35,26 +35,63 @@
   <meta itemprop="description" content="Sinan is a web systems engineer and full-stack developer who specializes in enterprise web applications.">
   <link rel="canonical" href="/">
   <base href="/">
-  <script type="application/ld+json">{"@context": "http://schema.org","@type": "Person","affiliation": {"@context": "http://schema.org","@type": "CollegeOrUniversity","address": {"@type": "PostalAddress","addressLocality": "Evanston","addressRegion": "IL","postalCode": "60208","streetAddress": "633 Clark St"},"alumni": [{"@type": "Person","name": "Sinan Bolel"}],"name": "Northwestern University","sameAs": "http://www.northwestern.edu/"},"alumniOf": {"@context": "http://schema.org","@type": "CollegeOrUniversity","address": {"@type": "PostalAddress","addressLocality": "Evanston","addressRegion": "IL","postalCode": "60208","streetAddress": "633 Clark St"},"alumni": [{"@type": "Person","name": "Sinan Bolel"}],"name": "Northwestern University","sameAs": "http://www.northwestern.edu/"},"image": ["https://sinanbolel.com/sinan-bolel.jpg"],"jobTitle": "Full Stack Software Engineer","name": "Sinan Bolel","telephone": "773-789-7421","url": "http://sinanbolel.com","sameAs": ["http://linkedin.com/in/sinanbolel", "http://twitter.com/sinbols", "http://www.npmjs.com/~sinanbolel","http://stackoverflow.com/users/1526037/sinan-bolel", "http://github.com/sbolel"]}</script>
-  <link rel="stylesheet" href="@@CSS_FILE_HASH">
+  <script type="application/ld+json">{"@context": "http://schema.org","@type": "Person","affiliation": {"@context": "http://schema.org","@type": "CollegeOrUniversity","address": {"@type": "PostalAddress","addressLocality": "Evanston","addressRegion": "IL","postalCode": "60208","streetAddress": "633 Clark St"},"alumni": [{"@type": "Person","name": "Sinan Bolel"}],"name": "Northwestern University","sameAs": "http://www.northwestern.edu/"},"alumniOf": {"@context": "http://schema.org","@type": "CollegeOrUniversity","address": {"@type": "PostalAddress","addressLocality": "Evanston","addressRegion": "IL","postalCode": "60208","streetAddress": "633 Clark St"},"alumni": [{"@type": "Person","name": "Sinan Bolel"}],"name": "Northwestern University","sameAs": "http://www.northwestern.edu/"},"image": ["https://sinanbolel.com/sinan-bolel.jpg"],"jobTitle": "Senior Software Engineer","name": "Sinan Bolel","telephone": "+17737897421","url": "http://sinanbolel.com","sameAs": ["http://linkedin.com/in/sinanbolel", "http://github.com/sbolel", "http://twitter.com/sinbols", "http://www.npmjs.com/~sinanbolel","http://stackoverflow.com/users/1526037/sinan-bolel"]}</script>
+  <style type="text/css">
+    /*__MINIFIED_CSS__*/
+  </style>
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-73719262-3"></script>
+  <script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag('js',new Date());gtag('config','UA-73719262-3')</script>
 </head>
 <body>
   <div class="hero-cover"></div>
   <div class="hero-container" layout="column" layout-align="center center">
-    <img class="logo" src="sinan-bolel.jpg" alt="Welcome" height="18em" width="18em"></img>
+    <img class="logo" src="sinanbolel.png" alt="Welcome" height="18em" width="18em"></img>
     <h1 class="title">Sinan Bolel</h1>
-    <h2 class="subtitle">Full Stack Software Engineer</h2>
+      <h2 class="subtitle">
+        Sr. Full Stack
+        <span class="separator visible-xs visible-s"><br/></span>
+        Software Engineer
+      </h2>
     <section class="connections">
-      <a id="a-resume" class="md-fab md-button md-raised" href="https://sinanbolel.com/resume" target="_blank" aria-label="Resume">
+      <a
+        id="a-resume"
+        class="md-fab md-button md-raised md-button-shrink"
+        href="https://sinanbolel.com/resume"
+        target="_blank"
+        data-md-tooltip="Resume"
+        aria-label="Resume"
+      >
         <div class="md-font ion-logo ion-logo-resume"></div>
       </a>
-      <a id="a-linkedin" class="md-fab md-button md-raised" href="https://sinanbolel.com/linkedin" target="_blank" aria-label="LinkedIn">
+      <a
+        id="a-linkedin"
+        class="md-fab md-button md-raised md-button-shrink"
+        href="https://sinanbolel.com/linkedin"
+        target="_blank"
+        data-md-tooltip="LinkedIn"
+        aria-label="LinkedIn"
+      >
         <div class="md-font ion-logo ion-logo-linkedin"></div>
       </a>
-      <a id="a-github" class="md-fab md-button md-raised" href="https://sinanbolel.com/github" target="_blank" aria-label="GitHub">
+      <span class="visible-xs"><br/></span>
+      <a
+        id="a-github"
+        class="md-fab md-button md-raised md-button-shrink"
+        href="https://sinanbolel.com/github"
+        target="_blank"
+        data-md-tooltip="GitHub"
+        aria-label="GitHub"
+      >
         <div class="md-font ion-logo ion-logo-github"></div>
       </a>
-      <a id="a-stackoverflow" class="md-fab md-button md-raised" href="https://sinanbolel.com/stackoverflow" target="_blank" aria-label="Stack Overflow">
+      <a
+        id="a-stackoverflow"
+        class="md-fab md-button md-raised md-button-shrink"
+        href="https://sinanbolel.com/stackoverflow"
+        target="_blank"
+        data-md-tooltip="StackOverflow"
+        aria-label="StackOverflow"
+      >
         <div class="md-font ion-logo ion-logo-stackoverflow"></div>
       </a>
     </section>

diff --git a/package.json b/package.json
@@ -9,44 +9,43 @@
     "type": "git",
     "url": "git@github.com:sbolel/sinanbolel-com.git"
   },
+  "license": "UNLICENSED",
   "scripts": {
     "clean": "rimraf public/index.html public/sinanbolel.min.css",
     "prebuild": "npm run clean",
-    "build": "grunt build && grunt replace --target=\"$(bin/hash.sh)\"",
-    "postbuild": "cp public/sinanbolel.min.css \"public/$(bin/hash.sh)\" && rm public/sinanbolel.min.css",
+    "build": "grunt build",
     "predeploy": "firebase use default",
     "predeploy-ci": "firebase use default",
     "deploy": "firebase deploy --only database:rules,hosting",
     "deploy-ci": "firebase deploy --only database:rules,hosting -m \"[ci] $(git rev-parse --short HEAD)\" --token \"$FIREBASE_TOKEN\"",
     "start": "grunt serve",
-    "serve": "npm run start",
     "semantic-release": "semantic-release"
   },
   "devDependencies": {
-    "@commitlint/cli": "^12.1.1",
-    "@commitlint/config-conventional": "^12.1.1",
-    "@semantic-release/changelog": "^5.0.1",
-    "@semantic-release/commit-analyzer": "^8.0.1",
-    "@semantic-release/github": "^7.2.1",
-    "@semantic-release/npm": "^7.1.1",
-    "@semantic-release/release-notes-generator": "^9.0.2",
-    "conventional-changelog-conventionalcommits": "^4.5.0",
-    "grunt": "^1.3.0",
+    "@commitlint/cli": "^15.0.0",
+    "@commitlint/config-conventional": "^15.0.0",
+    "@semantic-release/changelog": "^6.0.1",
+    "@semantic-release/commit-analyzer": "^9.0.2",
+    "@semantic-release/github": "^8.0.2",
+    "@semantic-release/npm": "^8.0.3",
+    "@semantic-release/release-notes-generator": "^10.0.3",
+    "conventional-changelog-conventionalcommits": "^4.6.1",
+    "grunt": "^1.4.1",
     "grunt-contrib-clean": "^2.0.0",
     "grunt-contrib-connect": "^3.0.0",
-    "grunt-contrib-cssmin": "^3.0.0",
+    "grunt-contrib-cssmin": "^4.0.0",
     "grunt-contrib-htmlmin": "^3.1.0",
     "grunt-contrib-watch": "^1.1.0",
-    "grunt-replace": "^1.0.1",
-    "husky": "^4.3.0",
+    "grunt-replace": "^2.0.2",
+    "husky": "^4.3.8",
     "md5": "^2.3.0",
     "rimraf": "^3.0.2",
-    "semantic-release": "^17.4.2",
-    "serve": "^11.3.2",
+    "semantic-release": "^17.4.7",
+    "serve": "^13.0.2",
     "yarn-run-all": "^3.1.1"
   },
   "optionalDependencies": {
-    "ionicons": "^5.2.3"
+    "ionicons": "^6.0.0"
   },
   "husky": {
     "hooks": {

diff --git a/public/assets/css/base.css b/public/assets/css/base.css
@@ -1,24 +1,51 @@
-html, body {
-  background-color: #00AFCB;
+body,
+html {
+  background-color: #00afcb;
   color: #fff;
   height: 100%;
   height: 100vh;
   position: relative;
 }
 
 body {
-  font-family: --apple-system,"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
+  font-family: --apple-system, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   margin: 0;
   padding: 0;
   text-align: center;
   z-index: -1;
 }
 
+/* Utility */
+
+.separator {
+  line-height: 0;
+}
+
+.visible-xs, .visible-s {
+  display: none;
+}
+
+@media screen and (max-width: 360px) {
+  .visible-xs {
+    display: inherit;
+  }
+}
+
+
+@media screen and (min-width: 361px) and (max-width: 480px) {
+  .visible-s {
+    display: inherit;
+  }
+}
+
+/* Base */
+
 .hero-cover {
-  background-color: #2F526E;
-  box-shadow: #f5f5f5 0 12px 150px 6px;
-  height: 35%;
-  height: 35vh;
+  background-color: #2f526e;
+  box-shadow: #f5f5f5 0 1rem 10rem 1rem;
+  /* box-shadow: #f5f5f5 0 12px 150px 6px; */
+  height: 30%;
+  height: 30vh;
   position: absolute;
   top: 0;
   width: 100%;
@@ -34,20 +61,19 @@ body {
 
 .hero-container > p {
   color: #bdbdbd;
-  font-size: 1.125em;
+  font-size: 1.125rem;
   margin: 1rem 0 1rem .33rem;
   top: -1.5rem;
   width: 15.33rem;
 }
 
-.connections {
-  margin-top: 2.5rem;
-  position: relative;
-  z-index: 1;
-}
-
-.connections a {
-  margin: 0 1rem;
+.subtitle,
+.title {
+  color: #fafafa;
+  padding: 0;
+  text-shadow: 0 .05rem .1rem #192b3a;
+  vertical-align: bottom;
+  width: 100%;
 }
 
 .title {
@@ -61,12 +87,10 @@ body {
   width: 100%;
 }
 
-.logo {
-  border-radius: 50%;
-  border-width: 8px outset #eee;
-  box-shadow: 0 0 1rem #424242;
-  height: 13rem;
-  margin: 0 0 1rem;
-  padding: 0;
-  width: 13rem;
+.subtitle {
+  color: #e4f4fe;
+  font-size: 1.5rem;
+  font-weight: 200;
+  line-height: 1.75rem;
+  margin: 0;
 }