This file is the final report for the course Digital Content Retrieval (DCR) presented at Pavia University as Computer Engineering Master's course. The report explains the procedure for the development of a personal website and a video curriculum describing its development aspects using proper project management techniques. The source of the personal website and the video curriculum are available at https://github.com/kooroshsajadi/personal-website and https://vimeo.com/843032358?share=copy respectively.

1. Pavia University
Digital Content Retrieval
Professor: Maria Grazia Albanesi

2. Final Project
Seyedkourosh Sajjadi
July 7, 2023
Abstract
In this report, I investigate the work done in order to prepare the final project of the course Digital
Content Retrieval at Pavia University which includes the data on developing a PWS and capturing a video
curriculum. During the report, I have explained the tools and technologies that I used to prepare the website
and the video alongside with the details of optimization, filtering, and compression jobs done. After that,
I have focused on the project management approach which was done for delivering the final project in a
good quality and on schedule. The website and the recorded video curriculum are available at https://
kouroshsajjadi-001-site1.ftempurl.com and https://vimeo.com/843032358?share=copy respectively.
2

3. Contents
1 Project Scope 2
2 Tools and Technologies 2
2.1 Physical Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2.2 ASP.NET MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2.3 Programming Languages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2.3.1 C# . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2.3.2 JavaScript (JS) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.3.3 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.3.4 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.4 .NET 6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.5 Responsive Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.6 Version Control and Repository Hosting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.7 LaTeX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.8 Video Curriculum Modality . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.8.1 Video Hosting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.8.2 Editing and Filtering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
3 Multimedia Data Objects and Optimization 4
3.1 Multimedia Data Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
3.2 Compression Settings for Video Curriculum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
3.3 Search Engine Optimization (SEO) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
3.4 Accessibility and Website Optimization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
3.4.1 Semantic Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
3.4.2 ARIA Labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
4 Production Test Results 6
5 Project Management and Analysis 8
5.1 Work Breakdown Structure (WBS) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
5.2 Gantt Chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
5.3 SWOT Analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
5.4 Risk Analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
6 Conclusion 10
1

4. 1 Project Scope
Before starting a project, it is necessary to define its scope in order for everyone involved to have a clear
understanding of what is expected, and that the project stays on track and within budget. As for this project,
the data is as below.
ˆ Project title: Kourosh Sajjadi PWS & Video Curriculum
ˆ Project objects: The project consists of two multimedia digital contents which are my personal website
and my video curriculum and also a final report which is the current document.
ˆ Project goal: The main objective of this project is that I represent my CV in a more creative way
using a PWS and a video curriculum in order to create my chance of recruitment as a software developer
or a data science intern alongside a report on the whole work done and the project management steps
taken. Furthermore, I can enhance my web development skills and also video recording and mounting
skills throughout completing this project.
ˆ Constraints: The limit for the website is that it must contain at least 4 pages and for the video curriculum
is that it must be at most 180 seconds in length. Moreover, the website must be responsive and contain
the video itself or a link to it and the video curriculum must contain a live performance of myself. Plus,
works done for SEO and website optimization are appreciated and the language used in the project must
be English and no political, religious, sexual, or illegal messages are allowed. In addition, the project must
be delivered at least 3 days before the selected exam date.
ˆ Financial resources: none
ˆ Hardware resources: One laptop, one cell phone
ˆ Human resources: 1 person
ˆ Time: 49 working days
2 Tools and Technologies
In the development of the website, video curriculum, and the report, I have employed a variety of tools and
technologies to ensure a high-quality video and website. The following subsections provide an overview of the
key tools and technologies used for the project.
2.1 Physical Tools
The physical device that I used for the development of the website was my personal laptop with ASUS as its
brand and X55VD as its model. The video was recorded with my Redmi Note 8 Pro cell phone having a 64MP
main camera.
2.2 ASP.NET MVC
The website is built using the ASP.NET MVC framework. ASP.NET MVC is a powerful web application
framework that implements the Model-View-Controller (MVC) architectural pattern. This pattern promotes a
clean separation of concerns, allowing developers to manage the data (Model), presentation (View), and user
input handling (Controller) independently. This separation enables more efficient parallel development and
enhances maintainability of the code base.
2.3 Programming Languages
In this project, I employed a variety of programming languages to develop the ASP .NET MVC application.
Each language played a crucial role in different aspects of the project. The following explains the programming
languages used and their respective roles in the project.
2.3.1 C#
C# is the primary language used for developing ASP .NET MVC applications. In this project, C# was utilized
to develop the back-end logic, controllers, and models as well as implementing various business rules and
validation.
2

5. 2.3.2 JavaScript (JS)
JavaScript is a scripting language that enables the creation of interactive web applications. In this project,
JavaScript was employed to provide dynamic behavior on the client-side, such as DOM manipulation and
asynchronous communication with the server.
2.3.3 HTML
HTML is the standard markup language used for creating the structure and layout of web pages. In this project,
HTML was used to create the basic structure of the views, including headers, footers, navigation menus, and
other UI elements.
2.3.4 CSS
CSS is a style sheet language used for describing the look and formatting of HTML documents. In this project,
CSS was used to style the HTML elements, ensuring a consistent and attractive design across the entire appli-
cation.
2.4 .NET 6
The target framework for the project is .NET 6, a high-performance, cross-platform framework developed by
Microsoft. It is designed to be used in a wide range of application types, including web, mobile, desktop, and
IoT. By targeting .NET 6, we benefit from its improved performance, enhanced security features, and support
for modern development practices.
2.5 Responsive Template
For the responsive UI, I utilized and customized the free template provided by https://bootstrapmade.com/,
which is built on top of the popular Bootstrap framework. The version of Bootstrap used in the project is 5.2.3.
Bootstrap is a widely used, open-source HTML, CSS, and JavaScript framework for developing responsive,
mobile-first websites. It offers a collection of pre-designed components, such as buttons, navigation bars, and
forms, that can be easily customized to create a modern, professional-looking website.
2.6 Version Control and Repository Hosting
For this project, Git was used as the version control system to manage and track changes in the source code. Git
is a widely-used distributed version control system that facilitates collaboration among developers and ensures
the integrity of the code base. The code for the website is hosted on GitHub, a web-based platform for version
control and collaboration, at the following URL: https://github.com/kooroshsajadi/personal-website.
GitHub provides features such as issue tracking, code review, and project management tools to help streamline
the development process and maintain the code base effectively. Moreover, as the website development frame-
work is ASP.NET Framework, I chose MyASP which is a popular hosting provider among .NET developers
which also provided a free domain for my website.
2.7 LaTeX
For the preparation of the report, I used LaTeX. LaTeX is a document preparation system and markup language
that is used to create high-quality documents, particularly in the fields of mathematics, science, and engineering.
2.8 Video Curriculum Modality
In this project, I have incorporated a video curriculum, which is an innovative and effective way to showcase
one’s skills, experience, and personality to potential employers. The video curriculum offers a more engaging
and interactive experience compared to traditional text-based resumes, allowing the candidate to better connect
with their audience. The video curriculum is available at https://vimeo.com/843032358?share=copy
2.8.1 Video Hosting
In order to host the video curriculum, I chose Vimeo as my video hosting platform. There are several reasons
for this decision:
ˆ Design Integration: Vimeo’s embeddable video player can be easily integrated into the website’s design,
aligning with the overall aesthetic of the site and providing a seamless user experience.
3

6. ˆ Video Quality: Vimeo is known for its high-quality video playback, which ensures that the video cur-
riculum is presented in the best possible format for viewers.
ˆ Privacy Controls: Vimeo offers a range of privacy settings, allowing the website owner to control who
can view the video curriculum and share it with others. This is particularly useful for maintaining a
professional online presence.
ˆ Analytics: Vimeo provides valuable analytics tools, enabling the website owner to track the performance
of the video curriculum, such as the number of views, engagement, and demographics of the viewers.
These insights can be used to improve the content and reach of the video curriculum.
ˆ Ad-free Experience: Unlike some other video hosting platforms, https://vimeo.com/Vimeo does not
display ads on the videos, ensuring a distraction-free viewing experience for the audience.
By hosting the video curriculum on Vimeo and referencing its link on the website, I have preserved the UI
design of the website.
2.8.2 Editing and Filtering
As for the editing and filtering the video curriculum, I chose Microsoft Clipchamp and used its free member-
ship. Microsoft Clipchamp is an online video editing and conversion platform that allows users to create, edit,
compress, and convert video files easily and quickly. I used it to apply a filter on the whole video, to add objects
to the video, and manage sounds and volumes.
3 Multimedia Data Objects and Optimization
This section covers various aspects of the project related to multimedia data objects, video compression settings,
search engine optimization (SEO), and website optimization for improved ranking.
3.1 Multimedia Data Objects
In the project, I have incorporated different multimedia data objects, including logos, images, and PDF files.
These objects are either stored locally within the project or externally referenced through URLs.
ˆ Logos: Several logos are embedded in the website using external links to their respective SVG files. By
referencing these links, I can ensure that the logos are displayed in high quality and with minimal impact
on the website’s loading time. The following free logos are used in the website:
– IELTS logo
– Duolingo logo
– Sololearn logo
ˆ Photos: Some personal photos are used in the website and are stored locally in the img path of the
project. For compressing the large photos, online free tools were used.
ˆ PDF Files: Most of the PDF files referenced in the website are accessible through external links. However,
one PDF file is stored locally within the project. For compressing the PDF file, an online free tool was
used.
3.2 Compression Settings for Video Curriculum
Vimeo automatically compresses and optimizes uploaded videos for the best possible balance between file size
and video quality. By hosting the video curriculum on Vimeo, we can ensure that the video is properly
compressed and optimized for efficient streaming, without compromising the visual quality.
3.3 Search Engine Optimization (SEO)
To improve the visibility of the website in search engine results, I have implemented some SEO strategies. These
include ensuring a proper heading structure and incorporating relevant keywords, HTML tags and attributes in
the content. One of the good traits in the development of a website is using meta description tags. Although
they are not direct ranking factors for SEO, but they can still be very useful for improving the click-through rate
(CTR) and overall visibility of a web page. In the line below, there is a demonstration of the meta description
tag which is used for the home page of the PWS.
4

7. <meta name="description" content="Home page of Kourosh Sajjadi personal
website." />
3.4 Accessibility and Website Optimization
I have made several improvements to the website’s code to ensure a more accessible and user-friendly experience.
These improvements include using descriptive headings, using semantic markup such as using proper article and
heading tags instead of generic div elements, adding appropriate alternative text for images, and providing clear
and concise labels for elements elements. By incorporating these accessibility features, I developed the website
more inclusive.
3.4.1 Semantic Markup
In the project, I have used a semantic markup. Semantic markup refers to the use of HTML elements that convey
meaning about the structure and purpose of the content within a web page. It involves using appropriate HTML
tags to describe the content’s meaning, rather than just its appearance. By using semantic markup, developers
can create more accessible and maintainable web pages, improve search engine optimization (SEO), and make it
easier for other developers to understand the structure of the code. Below are the examples of semantic HTML
elements used in the website if not all of them; for each of the elements, a part of the implemented code in the
project is provided.
1. Header Element: Represents the header of a document or a section.
<header class="section -title"><h2>About </h2></header >
2. Nav Element: Represents a navigation menu or links to other pages within a website.
<nav id="navbar" class="navbar nav -menu">...</nav>
3. Article Element: Represents a self-contained piece of content that could be distributed and reused
independently, such as a news article or blog post.
<article class="resume -item" aria -labelledby="experience -heading">...</
article >
4. Section Element: Represents a distinct section or grouping of content with a thematic purpose.
<section id="skills" class="skills section -bg">...</section >
5. Footer Element: Represents the footer of a document or a section, typically containing metadata,
copyright information, or contact details.
<footer id="footer">...</footer >
3.4.2 ARIA Labels
In my project, I have implemented ARIA (Accessible Rich Internet Applications) labels to enhance the acces-
sibility of the web content for users with disabilities. ARIA labels are essential in providing a more inclusive
and user-friendly experience for a diverse audience. ARIA labels are a set of attributes that can be added to
HTML elements to improve the accessibility of web content. They define additional semantics and behaviors
for elements that might not have a native, built-in meaning or functionality. These labels make it easier for
assistive technologies, such as screen readers, to provide meaningful information to users who rely on these tools
to interact with web content. ARIA labels are used to:
1. Improve accessibility: They help bridge the gap between the markup used by developers and the
information needed by assistive technologies. This ensures that users with disabilities can access and
interact with web content efficiently.
2. Provide better context: ARIA labels offer additional context to elements, allowing screen readers and
other assistive technologies to convey the purpose and functionality of an element more accurately. This
ensures that users can understand and interact with elements as intended.
3. Enhance keyboard navigation: ARIA roles can be used to indicate the expected keyboard interaction
for an element, making it easier for users who rely on keyboard navigation to interact with the content.
5

8. In the project, I have used ARIA labels to improve the accessibility of various div elements. For example:
<div class="container" data -aos="fade -up" aria -label="Certifications section
">...</div>
In this example, the aria-label attribute provides a more descriptive label for the div element. Instead of only
announcing the div to assistive technology users as only a container, it will now announce it as a Certifications
section, making it clearer for users to understand the element’s purpose. By incorporating ARIA labels into the
project, I have made a conscious effort to create an inclusive user experience that caters to a diverse audience,
including those with disabilities.
4 Production Test Results
Upon deploying the website, I conducted an online evaluation to assess its performance, accessibility, adherence
to best practices, and SEO measures on the website https://pagespeed.web.dev. Based on the feedback
received, I took steps to improve these aspects. Notably, I compressed a large image used in the website and
refactored the project based on more suggestions found. The test results measured by the given website are
compared for mobile and desktop platforms. It is notable that the website tends to show slightly different test
results in various test executions.
(a) Three out of four of the items are fully satisfied. (b) The website shows a better performance for desktop
platforms than mobile platforms.
Figure 1: A comparison of the website quality between mobile and desktop platforms.
As suggested by the website, the issue with the poorer performance of my PWS for mobile platforms is due
to loading time for some of the JS and CSS files. For the other three test elements, the enhancement effort
which was done was explained in the previous sections. The test audits of each of them are shown in below
figures.
6

9. Figure 2: Accessibility test audits.
From figure 2, it is obvious that the endeavors for enhancing accessibility have shown good results. Most of
the ticked items are related to the proper usages of ARIA labels.
Figure 3: Best practices test audits.
In figure 3, the test audits related to best practices are shown. One of them is related to the act of showing
different images for mobile and desktop screens. This way, an image with a proper aspect ratio would be shown
to the user based on the screen size that he/he is using. This behavior is handled in the CSS code of the website.
Figure 4: SEO test audits.
7

10. In figure 4, the test audits related to SEO are shown. Apart from using proper meta tags which was
mentioned earlier, using alt attributes for images and icons are good as they show a description for the icon or
the image used.
5 Project Management and Analysis
In this section, I will cover the Work Breakdown Structure (WBS), Gantt chart, SWOT analysis, and Risk
analysis charts for the project. In general, it is a good practice to create a WBS (Work Breakdown Structure),
Gantt chart, SWOT (Strengths, Weaknesses, Opportunities, and Threats) analysis, and Risk Analysis chart
before starting a project. These tools can help you plan and organize your project, identify potential risks and
opportunities, and allocate resources effectively. Therefore, I created a the four diagrams before starting the
project development.
5.1 Work Breakdown Structure (WBS)
A Work Breakdown Structure is a hierarchical decomposition of the project scope into manageable components.
The following is a visual representation of the WBS:
Figure 5: The first level of a WBS diagram is the highest level goal which is the final project in this case.
The levels in a WBS diagram represent a decomposition of the project scope into progressively smaller
and more detailed components. At the highest level, the WBS represents the entire project scope, which is
then broken down into major deliverables or phases in the next level. As shown in the figure above, each major
deliverable or phase is then further decomposed into smaller, more manageable components in subsequent levels.
5.2 Gantt Chart
A Gantt chart is a horizontal bar chart that represents the project schedule over time. For this project, I used
MindView, which is a software tool for mind mapping, project planning, and visualizing ideas. It allows users to
create visual diagrams that represent their thoughts, ideas, and plans in a clear and organized manner. Since I
am a student, I planned for the project to be completed within a long time span of about two months including
working days, which would provide enough time to manage this course project alongside my other obligations.
The following is a visual representation of my Gantt chart, which shows the time spans. As you can see, the
start date of my project was set to 05/01/2023 and the end date was set to 07/06/2023.
8

11. Figure 6: The tasks which were done in parallel during their periods are visible from the diagram.
5.3 SWOT Analysis
Using the SWOT analysis I identified the strengths, weaknesses, opportunities, and threats related to my
project. The following is a visual representation of my SWOT diagram:
SWOT Analysis
Strengths Weaknesses
- Already familiar with web development technolo-
gies
- Limited knowledge of PWS
- Proficient in using ASP .NET MVC framework for
web development
- I am slow in UI design
- Familiar with web hosting from EDI course - No professional experience in video editing
- Familiar with project management charts from
DCR course
- Not good in time management
- Familiar with LateX for writing reports DCR course - A few experience in professional writing
- Good English proficiency to talk in front of the
camera
No experience in self-recording
Opportunities Threats
- PWS is a great opportunity for personal branding - A poorly designed and low-performance website
may reduce popularity
- A video curriculum is a good addition to the tradi-
tional paper CV
- Sensitive data may be exposed publicly if not han-
dled with caution
- A link to my PWS is beneficial on social media
accounts
- Low quality delivery of the project would hurt my
score
- Accumulating 12 credits from the course - Late delivery of the project would hurt my schol-
arship
- Report writing would help me extend my profes-
sional writing skill
- Hardware failure
- PWS development would be an addition to my re-
sume as a software developer
- Enhancing skills in project management
5.4 Risk Analysis
Risk analysis involves identifying, assessing, and prioritizing the risks that may impact my project. I created a
risk analysis table for the project work as follows:
9

12. Risk Probability Impact Priority Mitigation Strategy
- Scope creep Moderate High High - Clear project requirements and
change management
- Website develop-
ment difficulties
Low High Moderate - Occasional UI enhancement during
development phase
- Report accuracy
difficulties
Moderate High High - Regular text review and continuous
writing
- Video Capturing,
editing, and hosting
difficulties
Low High Moderate - Starting the process on-time to avoid
time consuming obstacles
- Not optimized
website
Moderate Moderate Moderate - Perform production tests
- Sensitive data
may be exposed
publicly
High High High - Do not upload sensitive data to the
website or cover the sensitive sections
- Hardware failure Moderate High High - Backup your data regularly on the
cloud and use source control tools
6 Conclusion
To conclude, I delved into the preparation of the final project for the Digital Content Retrieval course at Pavia
University in this report. The report covered the development of a PWS and the creation of a video curriculum,
as well as the tools and technologies used in their preparation and the optimization work conducted on the
website. Additionally, the report explored the project management approach taken to ensure the successful
delivery of the final project. There are certain works to be done as future work on this project such as
recapturing the video curriculum in a more vibrant environment, adding the pictures of previous applications
developed by me after getting permission from my former employer, purchasing a shorter and more concise
domain name for the website, and considering to embed the video curriculum into the website rather than just
linking to it.
10