Building a Dynamic Resume Portfolio with Angular and Json Data

by

Creating a dynamic resume portfolio can significantly enhance how you showcase your skills and experience. Using Angular and JSON data allows for a flexible and interactive presentation that can be easily updated and maintained. This guide will walk you through the essential steps to build such a portfolio.

Understanding the Basics

Angular is a popular framework for building dynamic web applications. It allows you to create components that can fetch and display data seamlessly. JSON (JavaScript Object Notation) is a lightweight format for storing and exchanging data, making it ideal for your resume information.

Setting Up Your Angular Project

Begin by installing Angular CLI with the command: npm install -g @angular/cli. Then, create a new project using ng new resume-portfolio. Navigate into your project directory with cd resume-portfolio.

Next, generate a component for your resume: ng generate component resume. This component will display your data dynamically.

Preparing Your JSON Data

Create a file named assets/data/resume.json and structure your resume data as follows:

{ “name”: “Jane Doe”, “title”: “Web Developer”, “skills”: [“Angular”, “JavaScript”, “CSS”, “HTML”], “experience”: [ { “company”: “Tech Solutions”, “role”: “Frontend Developer”, “duration”: “2019 – Present”, “details”: “Developed and maintained web applications using Angular.” }, { “company”: “Web Creators”, “role”: “Junior Developer”, “duration”: “2017 – 2019”, “details”: “Assisted in building responsive websites.” } ], “education”: [ { “institution”: “State University”, “degree”: “B.Sc. in Computer Science”, “year”: “2017” } ] }

Fetching Data in Angular

In your resume.component.ts, import the HttpClient module and fetch your JSON data:

import { HttpClient } from ‘@angular/common/http’;

Inject HttpClient into your constructor:

constructor(private http: HttpClient) { }

Fetch data in ngOnInit:

this.http.get(‘assets/data/resume.json’).subscribe(data => { this.resume = data; });

Displaying Your Resume

Use Angular’s template syntax to display your data:

<h1>{{ resume.name }}</h1>

<h2>{{ resume.title }}</h2>

List skills:

  • {{ skill }}

Display experience and education similarly, using *ngFor directives.

Enhancing Your Portfolio

Consider adding sections like projects, certifications, or contact information. Use Angular components to organize your content and CSS for styling. You can also incorporate animations for a more engaging experience.

Conclusion

Building a dynamic resume portfolio with Angular and JSON data offers flexibility and ease of updates. It allows you to create a professional and interactive presentation of your skills and experience that can grow with your career.