Frederick-88/vue-personal-web-2021

Beautiful VueJS Responsive Personal Web with Dark Mode Feature & WebAnimations. Here, i also create a staging web for exploration & testing before deploy the changes to the live site -> https://staging.chenfrederick.com

vue-responsive-personal-web-2021

Production URL -> https://www.chenfrederick.com/

Staging URL -> http://staging.chenfrederick.com/

---

References :

• Sections :

1. Profile

2. My Portofolio - Recent Works

• http://kos45.netlify.app/
• https://dribbble.com/shots/16991520-Adams-Personal-Portfolio-Website

3. Experience - Awesome Journey, reference :

• https://dribbble.com/shots/11235233-Personal-Website
• Carousel Presentation Structure = https://dribbble.com/shots/14943796-Personal-portfolio-website

4. My Intro - About Me

• https://dribbble.com/shots/10735824-Hardy-Personal-Portfolio-UI/attachments/2403413?mode=media

5. Skills - Specialization

• https://dribbble.com/shots/14624614-Dreams-l-Landing-page-Design/attachments/6318025?mode=media

6. Let's get connected & ending

• https://dribbble.com/shots/7662998/attachments/412970?mode=media
• https://dribbble.com/shots/11172881-Website-Redesign-for-a-Freelance-Marketer-UX-UI-Designer/attachments/2776907?mode=media
• https://dribbble.com/shots/16826954-Portoplay-Portofolio-Landing-Page-UI-KIT

---

1. Dark Mode, reference :

• https://medium.com/swlh/dark-mode-using-css-variables-cf065a7fa133
• https://dev.to/lindaojo/dark-mode-using-css-variables-vue-js-37il
• https://www.instagram.com/p/CLHZVdeAYyR/

2. Gradient & Color Palette, reference :

• https://codepen.io/taylorvowell/pen/BkxbC
• https://colorhunt.co/palettes/dark

3. Setups :

• Pug = https://dev.to/reiallenramos/vue-pug-and-scss-27pl
• SCSS = https://www.npmjs.com/package/global-ui
• Icomoon = https://www.npmjs.com/package/global-ui

4. Design :

• https://dribbble.com/search/personal%20web
• https://dribbble.com/shots/10077547/attachments/2093788?mode=media

5. Carousel :

• https://www.npmjs.com/package/vue-slick-carousel

6. SEO :

• https://stackoverflow.com/questions/1092329/what-are-the-important-meta-tags-i-must-put-in-my-website
• https://search.google.com/search-console/about
• https://clutch.co/seo-firms/resources/meta-tags-that-improve-seo
• https://www.digitalocean.com/community/tutorials/vuejs-vue-meta

7. Subdomain Configuration Reference :

• https://docs.netlify.com/domains-https/custom-domains/configure-external-dns/#configure-a-subdomain

---

Web Performance Improvements Useful Link / References :

• https://www.webtips.dev/10-critical-performance-optimization-steps-you-should-take
• https://github.com/flowforfrank/performance-checklist
• https://blog.logrocket.com/methods-optimizing-vue-js-applications/
• https://www.bacancytechnology.com/blog/vuejs-app-performance-optimization
• https://www.youtube.com/watch?v=OmyL0nSmXmw
• explanation of vue prefetch to avoid bad UX of lazy load, without affecting web performance https://vueschool.io/articles/vuejs-tutorials/lazy-loading-individual-vue-components-and-prefetching/
• https://web.dev/minify-css/
• from google chrome developers if curious -> https://www.youtube.com/watch?v=5fLW5Q5ODiE
• about do we need to add width & height attribute in html tags, does it affect web performance? -> https://stackoverflow.com/questions/32719345/performance-wise-do-or-dont-add-width-and-height-to-an-img-tag

---

Web Performance Methods Done in The Process :

• Decrease the Usage / Dependence on Plugins or Third Party Libraries that are not mandatary or necessary ✔️
• Lazy Loadings of Image ✔️
• Lazy Loadings of Vue Component ✔️
• Optimize/Compress Images ✔️
• Minify CSS by Removing Repetitive CSS or Unused CSS ✔️
• Serve images in new gen formats (webp) + reduce size of image. Since for mobile they also dont need a big or HD image ( 1920 x 1080 ) ✔️
• If dont want to use webp, rather than use png, can use jpg images since most of jpg filesize are smaller ✔️
• Remove Unused Code Sections on Files (Minification)
• Chunks Code-Splitting