iKhan - Personal

My personal website built using Angular to keep track of my projects and to showcase my work to the public.

Content

• Pages
  • Homepage
  • Profile
  • Projects
    • Language Filters
    • Projects List
    • Attach Photo Gallery to all Projects
  • Photography
    • Image Slider
    • Grid Layout for Images
    • Fetch Grid Layout Images Data from Firebase Storage API
    • Attach Photo Gallery to all Images
• Features
  • Light / Dark mode
  • Increase / Decrease font-size
  • Support Internationalization (i18n)
  • Notifications
    • Welcome Message
    • Internet Connection Failure
    • General Error Message
• SEO
  • Change HTML Tags based on language change
    • Add / Update meta tags
      • keywords
      • author
      • description
    • Set lang Attribute
    • Set Page Title
  • Add sitemap.xml
  • Add robots.txt

Libraries and Frameworks

Internal

• SCSS Framework

External

• Angular CLI
• Firebase
• i18n - NGX Translate
• RxJs
• HammerJS
• Moment
• FontAwesome

Environments

Serve	Script	Description
Development	yarn start	Serve the application @ localhost:1500
Next	yarn serve.app.next	Serve the application @ localhost:2000
Production	yarn serve.app.prod	Serve the application @ localhost:3000

Build	Script	Description
Development	yarn build	Build the application to ./dist directory
Next	yarn build.app.next	Build the application to ./dist directory
Production	yarn build.app.prod	Build the application to ./dist directory

Prettier & Linting

Prettier

Script	Description
yarn pretty:check	Check Typescript and Json
yarn pretty:apply	Apply Typescript and Json

Linting

Script	Description
yarn lint:es	Lint Typescript and Json
yarn lint:scss	Lint SCSS

SCSS

Include the following import in each component to get access to SCSS helpers and methods.

@import 'scss-methods';

Tools Configuration

Prettier & Linting

Prettier and Eslint

Pre-commit & Commitlint

• pre-commit: Husky and lint-staged
• commit-msg: commitlint checks if your commit messages meet the conventional commit format.

Automate Versioning

commitizen and standard-version

Continuous integration (CI) & continuous delivery (CD)

Husky and lint-staged

Releasing

A summary of development workflow with standard-version involving multiple git branches.

1. [feature-branch] Stage modified files using:

git add .

2. [feature-branch] Commit the files using git-cz package:

npm run commit

3. [feature-branch] Now that all files have been committed, they are ready to be pushed to the remote:

git push origin <feature-branch>

4. [Bitbucket] Create a Pull Request to master branch.

5. [master] After it is merged, the following steps are done within the master branch:

• Run the command npm run release (which will bump versions based on commit types, add commit descriptions to CHANGELOG.md, and create git tags according to the current version).
• Push changes and git tags to master branch using:

git push --follow-tags origin master