Creating your personal web portfolio with no back-end service | Part 2 - Development

#tutorial #angular #firebase

Here's the second part of my blog series, where I delve into the step-by-step process of creating and deploying my personal web portfolio—for free! Don't forget to catch up on the first part to ensure you don't miss any details! Happy reading! 😉

Development

Create a new Angular application and integrate Bootstrap into your Angular project. You can achieve this either by using the Angular CLI, as described in this guide, or by directly linking the Bootstrap CDN to your project, as explained here.

Database-less strategy

In typical applications, databases are commonly employed to facilitate data storage for read and write operations. However, in our case, where we are developing a static web portfolio, there is no need for a database. Instead, we can opt for a simpler approach and utilize JSON files to store the static data.

Using JSON to store data

To organize our data efficiently, we can generate individual JSON files dedicated to storing the content of each page. This ensures simplicity by maintaining a one-to-one correspondence between a data file and the contents of a specific page. Accessing data for a particular portfolio page is streamlined by referencing the data within its corresponding file.

To implement this structure, initiate the process by creating a new directory named data within the /assets folder. Subsequently, save your JSON data files inside the /data folder. This organized arrangement facilitates easy management and retrieval of specific page data within your project.

{
  "profileImageGoogleDriveId": "${image_id}",
  "header": "Hello, I'm Irvin Gil",
  "roleSubHeader": "Associate Software Engineer",
  "companySubHeader": "${company_name}",
  "introductoryDescription": "${introduction_description}"
}

Sample contents of data stored inside a JSON file.

Retrieving data from JSON file

In your application, create a new Angular service dedicated to data retrieval. Utilize the Angular HTTP client to efficiently fetch data from JSON files. This approach enhances the functionality and allows seamless integration of data fetching mechanisms into your application.

import {HttpClient} from "@angular/common/http";

export class DataService {

  constructor(private httpClient: HttpClient) {
  }

  public async getData(dataUrl: string): Promise<any> {
    return this.httpClient.get<any>(dataUrl).toPromise();
  }
}

To utilize the DataService, we need to inject it into the controller class of the page component. You can do this approach with the other pages of your web portfolio and separate their data with their respective individual JSON files.


export class AboutPageComponent implements OnInit {
  public aboutPageData: AboutPageData = <AboutPageData>{};
  private dataUrl = "/assets/data/about-page-data.json";

  constructor(private dataService: DataService) {
  }

  ngOnInit(): void {
    this.getAboutPageData().then(() => {
      console.log("About page data fetched successfully!");
    }, error => {
      console.error(error);
    });
  }

  private async getAboutPageData(): Promise<void> {
    this.aboutPageData = await this.dataService.getData(this.dataUrl);
  }

Using google drive as storage for image

Given our database-less approach in developing the web portfolio, a challenge arises regarding the storage of image assets. A viable solution to this challenge is to leverage our personal Google Drive.

To implement this solution, begin by uploading the images to your Google Drive. Access the detailed settings of each image file, and set the file access to "Anyone with the link," specifying the access level as "Viewer." This configuration grants view access to the image files within our Google Drive.

Next, retrieve the ID of the image. Locate the ID by examining the link you've copied; it is positioned next to /file/d/ in the URL. This ID serves as a distinctive marker for each image in our Google Drive.

https://drive.google.com/file/d/${image_id}/view?usp=sharing

To incorporate the image into your project, assign the source of the image element to https://drive.google.com/uc?export=view&id=${image_id}. Substitute ${image_id} with the specific image ID acquired earlier. This URL structure will enable integration of the images hosted on Google Drive into your project.

<img src="https://drive.google.com/uc?export=view&id=${image_id}">

Push angular project on Github

Make it a habit of making frequent, small commits while actively developing your application. Create a repository on GitHub under your personal account, serving as a remote backup for your application's codebase. Ensure the repository's visibility is set to private, given the sensitive nature of your personal portfolio's code.

Registering for a GitHub account is free, which means incurring hosting fees for your application's codebase is the least of your worries. This practice not only ensures version control and also safeguards the confidentiality of your project.

Summary

To develop a database-less web portfolio using Angular, you can store each page's data in a separate JSON file. This will keep the data organized and distinct. You can then store all of the JSON files within your project directory. To access the data inside the JSON files, use Angular's built-in HTTP client. Create a dedicated service to handle the process of fetching the data.

For image storage, use your personal Google Drive account, which offers free hosting. Change the access permissions of the images so that anyone with a copy of the image share URL can access them. Then, use the image ID to create a reference to the image element in your Angular project. This will allow you to access the image hosted on Google Drive.

Finally, make a habit of making small commits and pushing your codebase to a private GitHub repository under your personal account. This will ensure that you have version control of your project, as well as portability and backup.