Site is now live!

Author: aharshac

README.md

@@ -1,4 +1,4 @@
-# [Phenomic](https://github.com/MoOx/phenomic) phenomic-theme-base
+# My static website
 
 ## Install dependencies
 

deploy.cmd

@@ -0,0 +1,18 @@
+ECHO OFF
+
+FOR /F "tokens=* USEBACKQ" %%F ^
+IN (`node -e "process.stdout.write(require('./package.json').repository)"`) ^
+DO SET GIT_DEPLOY_REPO=%%F
+
+IF NOT EXIST dist (
+  ECHO Build is necessary before deploying
+  EXIT /B 1
+)
+
+CD dist
+IF EXIST .git (RMDIR .git /s /q)
+
+git init && ^
+git add . && ^
+git commit -m "Deploy of GitHub Pages" && ^
+git push --force "%GIT_DEPLOY_REPO%" master

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "aharshac-web",
-  "homepage": "https://aharshac.github.io",
+  "homepage": "https://alvaharsha.me/",
   "repository": "https://github.com/aharshac/aharshac.github.io.git",
   "scripts": {
     "lint:js": "eslint --ignore-path .gitignore --fix .",
@@ -10,10 +10,12 @@
     "start": "phenomic start",
     "build": "phenomic build",
     "pretest": "npm run lint",
-    "test": "npm run build"
+    "test": "npm run build",
+    "predeploy": "npm run build",
+    "deploy": "deploy.cmd"
   },
   "phenomic": {
-    "CNAME": false
+    "CNAME": true
   },
   "#babel": "webpack-(development|production) are useful for webpack 2, otherwise use development|production",
   "babel": {

src/components/Footer/index.css

@@ -1,7 +1,8 @@
 .footer {
   text-align: center;
-  padding: 0px 20px 40px 20px;
-  opacity: 0.8;
+  padding: 0px 20px 10px 20px;
+  opacity: 0.7;
+  font-size: 0.85rem;
 }
 
 .phenomicReference {

src/components/PagePreview/index.css

@@ -77,4 +77,5 @@
   border-bottom: 0 !important;
   text-decoration: none !important;
   opacity: 0.7;
+  padding-bottom: 2px;
 }

src/components/Tag/index.css

@@ -1,15 +1,16 @@
 .tag {
   display: inline-flex;
-  background-color: #eee;
+  background-color: #efefef;
   border-radius: 830726em;
   padding: 0 0.9em;
   justify-content: space-around;
   align-items: center;
   height: 2.5em;
   line-height: 1.6em;
   font-size: 0.8em;
-  margin: 0.3em 0;
+  margin: 0.3em 0 0.3em 0.5em;
   white-space: nowrap;
+  box-shadow: 1px 1px 2px #bbb;
 
   & > span {
     margin-right: 0.5em;

src/layouts/Homepage/About.js

@@ -34,7 +34,7 @@ const About = () => (
     <p>
       My short term goal is to do Master's <Emoji text="school"/> in Mechatronics from a reputed university <Emoji text="mag"/>.
       In the long term, I'd like to start my own precision manufacturing company <Emoji text="factory"/> and
-      provide employment to many people <Emoji text="family_man_woman_girl_boy"/>.
+      provide employment to many people. <Emoji text="fast_forward"/>
     </p>
   </section>
 );

src/layouts/Homepage/Interests.js

@@ -6,12 +6,12 @@ import Tag from '../../components/Tag';
 const Interests = () => (
   <section>
     <ColoredH2>Interests</ColoredH2>
-    <Tag text="aeromodelling" emoji="airplane"/>{', '}
-    <Tag text="blood donation" emoji="syringe"/>{', '}
-    <Tag text="battlefield gamer" emoji="video_game"/>{', '}
-    <Tag text="programming" emoji="computer"/>{', '}
-    <Tag text="reading" emoji="books"/>{', '}
-    <Tag text="swimming" emoji="swimming_man"/>{', '}
+    <Tag text="aeromodelling" emoji="airplane"/>
+    <Tag text="blood donation" emoji="syringe"/>
+    <Tag text="battlefield" emoji="video_game"/>
+    <Tag text="programming" emoji="computer"/>
+    <Tag text="reading" emoji="books"/>
+    <Tag text="swimming" emoji="swimming_man"/>
     <Tag text="tv series" emoji="tv"/>
   </section>
 );

src/layouts/Page/index.js

@@ -22,6 +22,7 @@ const Page = (
     header,
     footer,
     children,
+    noHero,
   },
   {
     metadata: { networks: { twitter_id } },
@@ -34,6 +35,8 @@ const Page = (
 
   const metaTitle = head.metaTitle ? head.metaTitle : head.title
 
+  const showHeader = !(head.noHero || noHero);
+
   const socialImage = head.hero && head.hero.match("://") ? head.hero
     : joinUri(process.env.PHENOMIC_USER_URL, head.hero)
 
@@ -66,7 +69,7 @@ const Page = (
             background: `#111 url(${ head.hero }) 50% 50% / cover`,
           }}
         >*/}
-      { !head.noHero &&
+      { showHeader &&
         <ProgressiveImage
           src={head.hero || cover}
           responsive={head.hero ? undefined : coverResponsive}
@@ -113,6 +116,7 @@ Page.propTypes = {
   body: PropTypes.string,
   header: PropTypes.element,
   footer: PropTypes.element,
+  noHero: PropTypes.bool,
 }
 
 Page.contextTypes = {

src/layouts/Post/index.css

@@ -1,7 +1,88 @@
-.header {
+.page {
+  display: flex;
+  flex-direction: column;
+}
+
+.wrapper {
   display: flex;
-  justify-content: center;
-  opacity: 0.6;
-  font-size: 0.8rem;
-  margin-bottom: 1rem;
+  flex-direction: column;
+  align-self: center;
+  width: 100%;
+  max-width: var(--maxWidth);
+  padding: 1rem 0.75rem;
+
+  @media (--mobile) {
+    padding-top: 0;
+  }
+}
+
+.header {
+  display: block;
+  font-size: 1em;
+  margin-bottom: 2.5em;
+  text-align: center;
+  border-bottom: 1px solid #ccc;
+  padding-bottom: 1em;
+
+  @media (--mobile) {
+    margin-bottom: 1.5em;
+    padding-bottom: 0.5em;
+  }
+}
+
+.heading {
+  color: var(--colorText);
+  letter-spacing: 1px;
+  margin: 0.2em 0;
+  border-bottom: 0;
+
+  @media (--mobile) {
+    line-height: 1.4em;
+    margin-top: 0;
+  }
+}
+
+.date {
+  font-size: 0.8em;
+  color: var(--colorNeutral);
+  display: block;
+  /*letter-spacing: 0.2em;*/
+}
+
+
+.pageContent {
+  margin: 1rem 0;
+}
+
+.body {
+  & a {
+    color: var(--colorPrimary);
+    transition: all 0.2s;
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+
+    &:hover {
+      opacity: 1;
+      color: color(var(--colorPrimary) l(- 5%));
+      border-bottom-color: var(--colorPrimary);
+    }
+  }
+
+  /* handy for content */
+  & img {
+    max-width: 100%;
+  }
+}
+
+.hero {
+  max-width: 90% !important;
+  display: block;
+  margin: 0 auto 2.5em auto;
+  width: auto;
+  height: auto;
+
+  @media (--mobile) {
+    max-width: 100% !important;
+    margin-bottom: 0.2em;
+  }
 }