Thank you very much for your purchase!

If you have any questions that are beyond the scope of this documentation, please feel free to email or contact us via our Support Page : Support

Introduction

Elvish is a Creative & Modern Parallax Personal One Page Portfolio Template is a perfect template for Business Portfolio, web studio and creative agencies. Responsive based on Angular 17. This is one page for placing your information. All files and code has been well organized and nicely commented for easy to customize.

You are important for us and so please feel free to get back to me with any question or feedback.

Installation

Please follow the below steps to install and setup all prerequisites:

  • Nodejs

    Make sure to have Node.js installed & running on your computer. If you already have installed Node on your computer, you can skip this step if your existing node version is greater than 18. We suggest you to use LTS version of Node.js.

  • NPM

    Make sure to have the NPM installed & running on your computer. If you already have installed NPM on your computer, you can skip this step.

  • Angular CLI

    Make sure to have the Angular cli installed & running on your computer. Install it before start with the Angular app

      npm install --global @angular/cli@latest
    Warning: If you have Angular CLI installed previously, update it to the latest Angular CLI. Remove the older version and re-install it. 
      npm uninstall --global @angular/cli
      npm install --global @angular/cli@latest
  • Git

    Make sure to have Git installed globally & running on your computer. If you already have installed git on your computer, you can skip this step.
    To install in Linux OS please run the below commands.

      sudo apt-get update
  sudo apt-get install git

After you finished with the above steps, you can run the following commands into the terminal/command prompt from the root directory (Hiresy/Angular/ ) of the project to run the project locally or build for production use:

Install the Angular local project dependencies by executing following commands:

This command will clear your old cached node_modules.

  npm clear cache --force

This command will install the dependencies in the local node_modules folder. By default, npm install --legacy-peer-deps will install all modules listed as dependencies in package.json.

  npm install --legacy-peer-deps

This command launches the server, watches your files, and rebuilds the app as you make changes to those files. Using the --open (or use -o) option will automatically open your browser on http://localhost:4200/. This command will take some time to finsh. Please wait for it to complete.

  ng serve

For more detailed information to install the Angular application, visit this official Angular documentation website.

Folder Structure

I have tried to follow the standards and modular structure while developing the theme. Let's take a look at the package structure: 


Elvish/
├── src/
│   ├── app/
│   │   └── All pages and All Layouts
│   ├── assets/
│   │   ├── Client_images/
│   │   │   └── Use client images
│   │   ├── css/
│   │   │   └── All css files
│   │   ├── images/
│   │   │   └── All images files
│   │   └──  fonts
│   │       └── All fonts files
│   ├── favicon.ico
│   ├── index.html
│   ├── main.server.ts
│   ├── main.ts
│   └── styles.css
├── .editorconfig
├── .gitignore
├── angular.json
├── package.json
├── README.md
├── server.ts
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json

HTML Structure

<!doctype html>
<html lang="en">
             
<head>

<meta charset="utf-8">        
<title> Elvish </body>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="icon" type="image/x-icon"href="assets/images/favicon.ico">
        
<!--Bootstrap Css-->

<link rel="stylesheet" href="assets/images/favicon.ico">        
        
<!--Materialdesign icons Css-->

<link rel="stylesheet" href="assets/css/materialdesignicons.min.css">        
        
<!--Mobirise icons Css-->

<link rel="stylesheet" href="assets/css/mobiriseicons.css">        
        
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css">        

<!--Custom style Css-->

<link rel="stylesheet" href="assets/css/mobiriseicons.css">        

</head>

<body>
</app-root></app-root>
</body>

</html>

CSS

Files are explained below:

File Description
bootstrap.min.css Elvish uses the bootstrap v5.3.3 The core bootstrap file is being used in all the pages.
materialdesignicons.min.css Materialdesign icon css file
mobiriseicons.css Mobiriseicons icon css file
magnific-popup.css Magnific popup css file
animate.min.css Animate css file
style.css This file is containing all common styles for all the pages.

Credits & Official Documentation

I've used the following resources as listed. These are some awesome creation and I am really thankful to the respective community.

Support

Once again thank you for purchasing the theme. I am always avaialble to help you. If you have any suggestion or feature to make it more better, I am requesting you to contact me, I'll try my best to add them in future updates.

Best Regards,

- ThemesBoss

Version 1.0.0 - 30 July 2024

  • Initial released

Copyright © 2023 Elvish-Theme.