This is my personal portfolio showing my front-end development skills.
See actual website : http://masa.works
Notice ** This portfolio is only for author’s use and is NOT allow for reuse any users. This repository is only open for refering and trying on users LOCAL computers. Change, modify, redistribution and so on are NOT allow. If you want to do that, you must contact to autor. Otherwase, autor may take an regal action to the user.
- HTML5
- CSS3
- SASS - Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
- Typescript - TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
- Vue.js - The Progressive JavaScript Framework
- Nuxt.js - The Progressive Vue.js Framework.
- Vue Composition API RFC -
@vue/composition-apiprovides a way to useVue 3.0's Composition api inVue 2.x. - Vuex - Centralized State Management for Vue.js.
- Node.js - A JavaScript runtime built on Chrome's V8 JavaScript engine for a back-end.
- Express.js - Fast, unopinionated, minimalist web framework for node.
- Pug - Pug – robust, elegant, feature rich template engine for Node.js.
- axios - Promise based HTTP client for the browser and node.js.
- babel - The compiler for writing next generation JavaScript.
- ESlint - Find and fix problems in your JavaScript code.
- GraphQL - GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data
- AJAX / JSON - It is used getting blog post data from my personal blog with GraphQL. Anonymous Front-end Developer in Vancouver
- IntelliJ (JetBrains)
- Sketch
- Photoshop
- illustrator
- Ubuntu 16.04 on VPS.
- Running with docker-compose
- Node.js - Web server.
- Nginx - For reverse proxy.
- TLS 1.2
- Let's Encrypt
Thinking what should I exhibit my skills in this website. Also planning and choosing what technology I'll use.
As a main colour, I've chosen Ivory colour because it gives chic impression. For the sub colour, I've chosen dark gray (it's almost black but not). It gives calm impression that is combined with Ivory colour.
I usually use paper and pen to make wireframe, sometimes use Tablet(iPad) and Stylus pen. Because it can make wireframe more quickly than applications before my inspiration and passion is vanished.
Made by SVG with Adobe illustrator.
Using Sketch App.
I haven't used a library like GSAP because I've wanted to code from scratch in order to improve my javascript skills. Also I haven't used Fullpage.js.
I've used IntelliJ.
Why Vue.js ? - These days, Javascript framework demand is increasing and javascript developers are required knowledge and experience them. The typical frameworks are Angular and React but Vue is getting more and more popular moreover Vue is getting Star and Watch more than Angular in Github. Vue is simpler than React and Angular and very light weight and fast and it's easier to learn than another framework. Actually, I had no experience and knowledge of JS framework, so I have needed to learn them and I've chosen Vue to my first time JS framework.
Why Node.js ? - Almost Node user would say that "Node.js is faster than another server". But I reckon it isn't a strong motive to choose Node. So why have I chosen Node? Of course, one of the reasons is that it's fast but it's not only. Because Node is built by Javascript, so we are possible to make apps with only using one programming language although front-end or back-end. And then, Javascript developer can work in both fields and It would make communication smooth between developers. Finally, It would lead to reducing labor cost.
BEM(http://getbem.com/naming/)
OOCSS(http://oocss.org/)
- Images - Compressed and responsive image size. Also, use webp format.
- CSS - Combined to one file and minified.
- Gzip - Compressed website's data before sending those data from server.
- Server Location - Located in Oregon, US which is physically close to my target users living in Vancouver, BC Canada.