Portfolio-Application

• Welcome to my portfolio! This collection showcase my work in web development, showcasing a variety of projects that demonstrate my skills in front-end and back-end development. Each project reflect my passion for creating responsive, user-friendly websites and web application.

• This software built with Angular using HTML, CSS, BootStrap.

• This project was generated with Angular CLI version 18.2.3.

Prerequisites

• Active internet connection :)
• Basic knowledge of Angular CLI :)
• NodeJs (20.18.0) and NPM (10.9.0) - NodeJS Install
• Git bash (for Windows users)
• The ports 4200, 5200, 8080, 8081 must be avaialable at the host machine.

How-to run (in project root folder)

• Install frontend dependencies

  npm install

• Configure custom port in angular.json

{
  "projects": {
    "portfolio-app": {
      "architect": {
        "serve": {
          "options": {
            "port": 4201
          }
        }
      }
    }
  }
}

• Remove package lock json

rm -rf node_modules package-lock.json
npm cache clean --force
npm install

// to check version
npm list ngx-bootstrap 

• Build project. The build artifacts will be stored in the dist/ directory.

  ng build

VS Code Extensions

	1. Code runner ( Optional)
	2. Tabnine
	3. Live server
	4. Excel viewer
	5. Codetour
	6. Todo highlight By wayou liu
	7. Drawio By henning dieterichs
	8. Polacode 2022 -> code snippet tool
	9. Spell checker
	10. Prettier -> GO to settings -> formatonsave -> ON
          [
              Cmd + Shift + P -> Open user settings json
              Paste it in settings.json file

		 {
                    "editor.defaultFormatter": "esbenp.prettier-vscode",
                    "[javascript]": {
                      "editor.defaultFormatter": "esbenp.prettier-vscode"
                  }
            ]
	11. Indent rainbow
	12. Autoclose tag
	13. REST client
	15. Material icon theme
	16. Angular language service
	17. Angular Snippets version 18

Installation

Development Server

• Open Terminal and clone the repo

  git clone https://github.com/SharmaRajan/portfolio-app.git

• Go to the portfolio-app directory and start the environment

  > cd portfolio-app
  > ng serve --o

• This --o will navigate to http://localhost:4200/ as port 4200 is set default for this repo. The application will automatically reload if you change any of the source files.

Code scaffolding

• Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Running unit tests

• Run ng test to execute the unit tests via Karma.

Running end-to-end tests

• Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

• To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

---

Deploy to GitHub Pages

Step 1: Install GitHub Pages Globally

    > npm install -g angular-cli-ghpages

Step 2: Add GitHub Pages in your Project

    > ng add angular-cli-ghpages

Step 3: Go to package.json file and paste just above name key

   "homepage": "https://{github-user-name}.github.io/{github-repo-name}",

Step 4: In package.json file paste the command inside script (This is optional)

    "predeploy" : "npm run build",
    "deploy": "gh-pages -d build"

Step 5: build the project using GitHub Repo Name

   > ng build --output-path=dist --base-href=/{github-repo-name}/
   > ng build --output-path=dist --base-href=/iAngular-portfolio/

Step 6: Deploy local folder dist/browser to GitHub Pages

   > ngh --dir=dist/browser

Step 7: Push Code to GitHub Repo

---

• ✅ Step 1: Configure angular.json for GitHub Pages

{
  ...
  "projects": {
    "YOUR_PROJECT_NAME": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/YOUR_PROJECT_NAME",
            "baseHref": "/REPOSITORY_NAME/"
          }
        }
      }
    }
  }
}

• ✅ Step 2: Build the Angular Project

ng build --configuration production --base-href "/REPOSITORY_NAME/"
ng build --configuration production --base-href "/iAngular-portfolio/"

• ✅ Step 3: Install angular-cli-ghpages

npm install -g angular-cli-ghpages

• ✅ Step 4: Deploy to GitHub Pages

npx angular-cli-ghpages --dir=dist/YOUR_PROJECT_NAME
npx angular-cli-ghpages --dir=dist/portfolio-app

Hey there, I'm Rajan - A curious engineer tinkerer at heart

👨‍💻 Technical Skills & Expertise

• Development of Web Applications.
• Web Scraping, Browser Automation, Python Scripting

🌐 Connect

Contributing

If you find any bug in the code or have any improvements in mind then feel free to generate a pull request.

Contributions are very welcome!

You can also ask for problem solving ideas and discuss in GitHub issues directly.

Issues

If you face any issue, you can create a new issue in the Issues Tab and I will be glad to help you out.

Need help?

if (needHelp === true) {
  var emailId = "mr.sharmajeerajan@gmail.com";
  // email is the best way to reach out to me.
  sendEmail(emailId);
}

• Feel free to reach out if you're looking for a dedicated and collaborative partner!

Share your story(mr.sharmajeerajan@gmail.com) if you're using this repo for your mini/course project. I will be more than happy to know how does this project helped you.

License

MIT © Rajan Sharma

Oh, Thanks!

Thank you for being here! This project has saved me and my friends for many times in college.

   ____ _           _    _
  / ___| | __ _  __| |  | |_ ___
 | |  _| |/ _` |/ _` |  | __/ _ \
 | |_| | | (_| | (_| |  | || (_) |
  \____|_|\__,_|\__,_|   \__\___/

  ___  ___  ___
 / __|/ _ \/ _ \
 \__ \  __/  __/
 |___/\___|\___|

                      _                  _
  _   _  ___  _   _  | |__   ___ _ __ ___| |
 | | | |/ _ \| | | | | '_ \ / _ \ '__/ _ \ |
 | |_| | (_) | |_| | | | | |  __/ | |  __/_|
  \__, |\___/ \__,_| |_| |_|\___|_|  \___(_)
  |___/

---

if (isAwesome) {
  // thanks in advance :p
  starThisRepository();
}

---

• ↑↑↑ GO TO TOP ↑↑↑