| # rohanverma.net | |||||
| My little personal homepage. | |||||
| ## Project setup | |||||
| ``` | |||||
| npm install | |||||
| ``` | |||||
| ### Compiles and hot-reloads for development | |||||
| ``` | |||||
| npm run serve | |||||
| ``` | |||||
| ### Compiles and minifies for production | |||||
| ``` | |||||
| npm run build | |||||
| ``` | |||||
| ### Lints and fixes files | |||||
| ``` | |||||
| npm run lint | |||||
| ``` | |||||
| ## Deploying | |||||
| ```sh | |||||
| sshfs -p <port> user@host:/www/rohanverma.net host_server | |||||
| cp -r dist/* host_server | |||||
| fusermount -u host_server | |||||
| ``` |
| module.exports = { | |||||
| "presets": [ | |||||
| [ | |||||
| "@vue/app", | |||||
| { | |||||
| "useBuiltIns": "entry" | |||||
| } | |||||
| ] | |||||
| ] | |||||
| } |
| { | |||||
| "name": "rohanverma.net", | |||||
| "version": "0.1.0", | |||||
| "private": true, | |||||
| "scripts": { | |||||
| "serve": "vue-cli-service serve", | |||||
| "build": "vue-cli-service build", | |||||
| "lint": "vue-cli-service lint" | |||||
| }, | |||||
| "dependencies": { | |||||
| "@fortawesome/fontawesome-svg-core": "^1.2.0", | |||||
| "@fortawesome/free-brands-svg-icons": "^5.1.1", | |||||
| "@fortawesome/free-solid-svg-icons": "^5.1.0", | |||||
| "@fortawesome/vue-fontawesome": "^0.1.1", | |||||
| "axios": "^0.18.0", | |||||
| "flexitgrid": "0.0.5", | |||||
| "i": "^0.3.6", | |||||
| "npm": "^6.2.0", | |||||
| "vue": "^2.5.16", | |||||
| "vue-axios": "^2.1.2", | |||||
| "vuetify": "^1.1.9" | |||||
| }, | |||||
| "devDependencies": { | |||||
| "@babel/polyfill": "^7.0.0-beta.49", | |||||
| "@fortawesome/fontawesome-free": "^5.1.1", | |||||
| "@vue/cli-plugin-babel": "^3.0.0-rc.5", | |||||
| "@vue/cli-plugin-eslint": "^3.0.0-rc.5", | |||||
| "@vue/cli-service": "^3.0.0-rc.5", | |||||
| "font-awesome": "^4.7.0", | |||||
| "vue-cli-plugin-vuetify": "^0.1.6", | |||||
| "vue-template-compiler": "^2.5.16" | |||||
| }, | |||||
| "eslintConfig": { | |||||
| "root": true, | |||||
| "env": { | |||||
| "node": true | |||||
| }, | |||||
| "extends": [ | |||||
| "plugin:vue/essential", | |||||
| "eslint:recommended" | |||||
| ], | |||||
| "rules": {}, | |||||
| "parserOptions": { | |||||
| "parser": "babel-eslint" | |||||
| } | |||||
| }, | |||||
| "postcss": { | |||||
| "plugins": { | |||||
| "autoprefixer": {} | |||||
| } | |||||
| }, | |||||
| "browserslist": [ | |||||
| "> 1%", | |||||
| "last 2 versions", | |||||
| "not ie <= 8" | |||||
| ] | |||||
| } |
| <!DOCTYPE html> | |||||
| <html> | |||||
| <head> | |||||
| <meta charset="utf-8"> | |||||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||||
| <meta name="viewport" content="width=device-width,initial-scale=1.0"> | |||||
| <link rel="icon" href="<%= BASE_URL %>favicon.ico"> | |||||
| <link href="https://fonts.googleapis.com/css?family=Roboto:100:300,400,500,700,900|Material+Icons" rel="stylesheet"> | |||||
| <title>rohanverma.net</title> | |||||
| </head> | |||||
| <body> | |||||
| <noscript> | |||||
| <strong>We're sorry but rohanverma.net doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> | |||||
| </noscript> | |||||
| <div id="app"></div> | |||||
| <!-- built files will be auto injected --> | |||||
| </body> | |||||
| </html> |
| <template> | |||||
| <v-app> | |||||
| <v-content> | |||||
| <MainPage/> | |||||
| </v-content> | |||||
| </v-app> | |||||
| </template> | |||||
| <script> | |||||
| import MainPage from './components/MainPage' | |||||
| import 'flexitgrid/dist/flexit.css' | |||||
| import '@/assets/css/style.css' | |||||
| export default { | |||||
| name: 'App', | |||||
| components: { | |||||
| MainPage | |||||
| }, | |||||
| data () { | |||||
| return { | |||||
| title: 'Rohan Verma' | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| .v-card{ | |||||
| border-radius: 0px; | |||||
| margin: 5px; | |||||
| } | |||||
| .card_heading{ | |||||
| padding: 10px; | |||||
| background: #667db6; /* fallback for old browsers */ | |||||
| background: -webkit-linear-gradient(to left, #667db6, #0082c8, #0082c8, #667db6); /* Chrome 10-25, Safari 5.1-6 */ | |||||
| background: linear-gradient(to left, #667db6, #0082c8, #0082c8, #667db6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ | |||||
| } | |||||
| .shadow{ | |||||
| text-shadow: 2px 2px 1px rgba(150, 150, 150, 0.5); | |||||
| } | |||||
| #app{ | |||||
| background: linear-gradient(270deg, #00b7af, #3c67bd, #5d88df); | |||||
| background-size: 600% 600%; | |||||
| -webkit-animation: Gradient 15s ease infinite; | |||||
| -moz-animation: Gradient 15s ease infinite; | |||||
| animation: Gradient 15s ease infinite; | |||||
| } | |||||
| @-webkit-keyframes Gradient { | |||||
| 0% { | |||||
| background-position: 0% 50% | |||||
| } | |||||
| 50% { | |||||
| background-position: 100% 50% | |||||
| } | |||||
| 100% { | |||||
| background-position: 0% 50% | |||||
| } | |||||
| } | |||||
| @-moz-keyframes Gradient { | |||||
| 0% { | |||||
| background-position: 0% 50% | |||||
| } | |||||
| 50% { | |||||
| background-position: 100% 50% | |||||
| } | |||||
| 100% { | |||||
| background-position: 0% 50% | |||||
| } | |||||
| } | |||||
| @keyframes Gradient { | |||||
| 0% { | |||||
| background-position: 0% 50% | |||||
| } | |||||
| 50% { | |||||
| background-position: 100% 50% | |||||
| } | |||||
| 100% { | |||||
| background-position: 0% 50% | |||||
| } | |||||
| } |
| <template> | |||||
| <v-card> | |||||
| <div class="card_heading white--text"> | |||||
| <div class="row"> | |||||
| <div class="6 columns"> | |||||
| <div class="row end"> | |||||
| <v-avatar | |||||
| :tile= false | |||||
| :size= 128 | |||||
| > | |||||
| <img src="//avatars2.githubusercontent.com/u/952036?s=512" alt="Profile"> | |||||
| </v-avatar> | |||||
| </div> | |||||
| </div> | |||||
| <div class="6 columns"> | |||||
| <div class="headline shadow">Rohan Verma</div> | |||||
| <div class="shadow">Software Developer</div> | |||||
| <div class="shadow">@rhnvrm</div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <v-card-title primary-title > | |||||
| Hello, I'm a hobby programmer currently located in Bengaluru, India. I chronicle my | |||||
| (not so important) journey on these webpages. | |||||
| </v-card-title> | |||||
| <v-card-actions> | |||||
| <v-btn flat color="blue">Get In Touch</v-btn> | |||||
| <v-btn flat color="blue">Share</v-btn> | |||||
| </v-card-actions> | |||||
| </v-card> | |||||
| </template> |
| <template> | |||||
| <div class="container"> | |||||
| <div class="row"> | |||||
| <div class="five columns"> | |||||
| <contact-card></contact-card> | |||||
| <profile-list></profile-list> | |||||
| </div> | |||||
| <div class="seven columns"> | |||||
| <project-list></project-list> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import ContactCard from './ContactCard' | |||||
| import ProfileList from './ProfileList' | |||||
| import ProjectList from './ProjectList' | |||||
| export default { | |||||
| name: 'MainPage', | |||||
| props: { | |||||
| msg: String | |||||
| }, | |||||
| components:{ | |||||
| ContactCard, | |||||
| ProfileList, | |||||
| ProjectList | |||||
| }, | |||||
| data(){ | |||||
| return { | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <template> | |||||
| <v-card> | |||||
| <div class="card_heading white--text"> | |||||
| <v-container fill-height> | |||||
| <v-layout fill-height> | |||||
| <v-flex xs12 align-end flexbox> | |||||
| <span class="headline shadow">Profiles</span> | |||||
| </v-flex> | |||||
| </v-layout> | |||||
| </v-container> | |||||
| </div> | |||||
| <v-list> | |||||
| <v-list-tile @click="redirect_href('linkedin')"> | |||||
| <v-list-tile-content> | |||||
| <v-list-tile-title>Linkedin</v-list-tile-title> | |||||
| </v-list-tile-content> | |||||
| <v-list-tile-action> | |||||
| <v-icon>fab fa-linkedin</v-icon> | |||||
| </v-list-tile-action> | |||||
| </v-list-tile> | |||||
| <v-list-tile @click="redirect_href('github')"> | |||||
| <v-list-tile-content> | |||||
| <v-list-tile-title>Github</v-list-tile-title> | |||||
| </v-list-tile-content> | |||||
| <v-list-tile-action> | |||||
| <v-icon>fab fa-github-square</v-icon> | |||||
| </v-list-tile-action> | |||||
| </v-list-tile> | |||||
| <v-list-tile @click="redirect_href('github')"> | |||||
| <v-list-tile-content> | |||||
| <v-list-tile-title>Twitter</v-list-tile-title> | |||||
| </v-list-tile-content> | |||||
| <v-list-tile-action> | |||||
| <v-icon>fab fa-twitter</v-icon> | |||||
| </v-list-tile-action> | |||||
| </v-list-tile> | |||||
| <v-list-tile @click="redirect_href('blog')"> | |||||
| <v-list-tile-content> | |||||
| <v-list-tile-title>Blog</v-list-tile-title> | |||||
| </v-list-tile-content> | |||||
| <v-list-tile-action> | |||||
| <v-icon>fab fa-wordpress</v-icon> | |||||
| </v-list-tile-action> | |||||
| </v-list-tile> | |||||
| </v-list> | |||||
| </v-card> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| methods: { | |||||
| redirect_href (profile) { | |||||
| switch (profile) { | |||||
| case "linkedin": | |||||
| window.location.href = "http://www.linkedin.com/in/rhnvrm/" | |||||
| break; | |||||
| case "twitter": | |||||
| window.location.href = "http://twitter.com/rhnvrm" | |||||
| break; | |||||
| case "github": | |||||
| window.location.href = "http://github.com/rhnvrm" | |||||
| break; | |||||
| case "blog": | |||||
| window.location.href = "http://rohanverma.net/blog" | |||||
| break; | |||||
| default: | |||||
| break; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> |
| <template> | |||||
| <v-card > | |||||
| <div class="card_heading white--text"> | |||||
| <v-container fill-height> | |||||
| <v-layout fill-height> | |||||
| <v-flex xs12 align-end flexbox> | |||||
| <span class="headline shadow" >Projects</span> | |||||
| </v-flex> | |||||
| </v-layout> | |||||
| </v-container> | |||||
| </div> | |||||
| <v-list v-for="project in projects" v-bind:key="project.id"> | |||||
| <v-list-tile @click ='redirect_url(project.link)'> | |||||
| <v-list-tile-content> | |||||
| <v-list-tile-title v-html="project.title.rendered"></v-list-tile-title> | |||||
| <v-list-tile-sub-title v-html="project.date"></v-list-tile-sub-title> | |||||
| </v-list-tile-content> | |||||
| <v-list-tile-action> | |||||
| <v-icon>fas fa-arrow-circle-right</v-icon> | |||||
| </v-list-tile-action> | |||||
| </v-list-tile> | |||||
| </v-list> | |||||
| </v-card> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| data () { | |||||
| return { | |||||
| projects: [] | |||||
| } | |||||
| }, | |||||
| mounted: function() { | |||||
| this.getProjects().then(res => { | |||||
| for (var i = 0; i < res.data.length; i++) { | |||||
| var dateObject = new Date(res.data[i].date); | |||||
| res.data[i].date = dateObject.toDateString(); | |||||
| } | |||||
| this.projects = res.data; | |||||
| }); | |||||
| }, | |||||
| methods: { | |||||
| getProjects: function(){ | |||||
| return this.$http.get("//rohanverma.net/blog/wp-json/wp/v2/posts?categories=21") | |||||
| }, | |||||
| redirect_url: function(url){ | |||||
| window.location.href = url | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> |
| import '@babel/polyfill' | |||||
| import Vue from 'vue' | |||||
| import './plugins/vuetify' | |||||
| import App from './App.vue' | |||||
| Vue.config.productionTip = false | |||||
| new Vue({ | |||||
| render: h => h(App) | |||||
| }).$mount('#app') |
| import Vue from 'vue' | |||||
| import Vuetify from 'vuetify' | |||||
| import 'vuetify/dist/vuetify.min.css' | |||||
| import '@fortawesome/fontawesome-free/css/all.css' | |||||
| import axios from 'axios' | |||||
| import VueAxios from 'vue-axios' | |||||
| Vue.use(VueAxios, axios) | |||||
| Vue.use(Vuetify, { | |||||
| iconfont: 'fa' | |||||
| }) |