portfolio - My personal portfolio

Moltivation

• As a front-end dev, this project is a really good way to practice my skills and learn the creative process of a website.
• Github don't have a way to organize directory so this webpage is way for other people to see my works more easily.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Run my source code locally
• Author
• My recent works
• Acknowledgments

Overview

Screenshot

Desktop screenshot:

Mobile screenshot:

Links

• Source URL: See my source code
• Live Site URL: Visit my live site

My process

Built with

• HTML form elements
• CSS custom properties
• CSS Flexbox
• CSS Grid
• Responsive web design
• Vanilla Javascript
• VueJS (Component, Composable, View,...)
• Vue Router

What I learned

/* Styling scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  opacity: 0.1;
  transition: 0.5s ease;
  border-radius: 6px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb {
  background-color: gray;
  /* outline: 1px solid slategrey; */
  border-radius: 6px;
}

// Composable
export function useNewtonianPhysicPosition(acceleration = 0, velocity = 0, position = 0) {
  const _position = ref(position);
  let _velocity = velocity;
  const _acceleration = acceleration;

  function update(intervalInMilisecond: number) {
    _position.value += _velocity * intervalInMilisecond / 1000;
    _velocity += _acceleration * intervalInMilisecond / 1000;
  }

  return { _position, update };
}

Continued development

If I were to continue working on this project, I would try to:

• Make a blog template and add my blogs to it
• Add a form into ContactView
• Make a better footer

Useful resources

• VueJS - This helped me learn VueJS.
• Vue Router - This helped me learn Vue Router.
• Styling scrollbar - This help me see the bigger picture of styling scroll bar. This webpage doesn't contain much examples which is very unfortunate.

Run my source code locally

Clone my project to your local machine

git clone https://github.com/Binh2/portfolio.git

Project setup (Download JS dependencies)

yarn install

Compiles and hot-reloads for development

yarn develop

How to deploy to my Github Pages (btw, you can't do this without my permission unless you fork my project).

Compiles and minifies for production (Call npm run deploy will run this command automatically so you don't need to run this command).

yarn build

Need more info on customizing Vue CLI configuration

See Configuration Reference.

Author

• Frontend Mentor - @Binh2
• Twitter - @hgqbinh2002
• LinkedIn - hgqbinh2002

My recent works

A blog template

• The source code: Checkout my source code
• Live Site URL: My live webpage

Multi-step form

• Solution URL: My github multi-step-form repo
• Live Site URL: Visit my live site

News homepage

• Solution URL: Check out my solution
• Live Site URL: My live webpage

Acknowledgments

• Big thanks to myself for complete this project