“PORTFOLIO WEBSITE”

MCA213-MINI PROJECT

By
“Khushi Sanjay Kesarkar”“3123015010299”

Mini Project work carried out at

Department of Management

Faculty of Commerce and Management

VISHWAKARMA UNIVERSITYPUNE

Third Semester 2023-202

 Vishwakarma University

Third Semester 2023-2024

31232083: Dissertation

ABSTRACT

SRN No. : 31232071

NAME OF THE STUDENT : Khushi Sanjay Kesarkar

EMAIL ADDRESS : [email protected]

STUDENT’S EMPLOYING : Vishwakarma University, Pune

ORGANIZATION & LOCATION

SUPERVISOR’S NAME : Dr. Yogesh Desale

SUPERVISOR’S EMPLOYING : Vishwakarma University, Pune

ORGANIZATION & LOCATION

SUPERVISOR’S EMAIL ADDRESS: [email protected]

DISSERTATION TITLE : PORTFOLIO WEBSITE

 ABSTRACT

In the digital age, a personal Portfolio Website has become an essential tool for professionals to
showcase their skills, experience, and accomplishments. This project focuses on developing a
portfolio website that highlights individual achievements, projects, and qualifications in a visually
appealing and interactive format.

The Portfolio Website aims to transform how professionals present their skills and accomplishments
by offering an interactive and visually engaging platform. Through an intuitive and modern design,
the website provides User with a comprehensive framework to showcase their projects, expertise,
and experience.

Broad Area of Work: Web Development.

Key words: Professional Identity, Showcase, Creative Expression, Skills and Expertise, Dynamic
Presentation, Digital Presence, Innovative Design, User Engagement, Responsiveness, Interactive
Interface, Career Highlights, Achievements, Customizable, Seamless Navigation, Project Portfolio,
Personal Branding, Visually Appealing, Content Management, Modern Aesthetics, Future-ready
Platform.

Signature of the Student Signature of the Supervisor

Name: Khushi Sanjay Kesarkar Name: Dr. Yogesh Desale

Date: 22nd Nov. 2024 Date: 22nd Nov. 2024

Place: Pune Place: Pune

 ACKNOWLEDGEMENTS

This project would not have been possible without the support of many people. I would like to
acknowledge and extend my heartfelt gratitude to the following persons who have made the
completion of this project possible.

My Supervisor, Dr. Yogesh Desale for his full support and guidance throughout this project.
My Dean Dr. Pooja Agarwal for encouraging and supporting me to pursue the project.

I also thank to Vishwakarma University team for step by step updating regarding project with
nice Taxila support.

My team members who have helped me during various phases of the project. Last but not the

least; I would like to express my love and gratitude to my beloved family, for them

understanding & motivation, through the duration of this project.

 Table of Contents

Chapter 1: Introduction ......................................................................................................... 1

1.1 What is Portfolio Website: ................................................................................ 1
1.1.1 Infrastructure as a service (IAAS) ..................................................................... 1
1.1.2 Platform as a service (PAAS) ........................................................................... 1
1.1.3 Software as a service (SAAS) ........................................................................... 2
1.2 Why do we need What is Portfolio Website ...................................................... 2
1.2.1 Life before Portfolio Website ........................................................................... 2
1.2.2 What is Portfolio Website a better way: ........................................................... 2
1.3 Types Of Portfolio Website: ............................................................................. 3
1.3.1 What is Portfolio Website ................................................................................ 3
1.3.2 Community Portfolio Website .......................................................................... 3
1.3.3 Hybrid Portfolio Website .................................................................................. 3
Chapter 2: System Analysis ................................................................................................... 4
2.1 Existing System................................................................................................ 4
2.2 Proposed system ............................................................................................... 5
2.1.1 Advantages from Proposed System: .................................................................. 6
Chapter 3: Software and Hardware Requirements ................................................................. 8
3.1 Hardware Requirements ............................................................................................... 8
3.2 Software Requirements ................................................................................................ 8
Chapter 4: Selected Software ................................................................................................ 9
4.1 Python .............................................................................................................. 9
4.1.1 Advantages Of Python: ................................................................................... 10
4.2 HTML ............................................................................................................ 12
4.2.1 ORIGINS of HTML .................................................................................................. 12
4.3 MYSQL .................................................................................................................... 13
4.3.1 Advantages of MySQL ................................................................................... 14
4.4 Flask ......................................................................................................................... 14
4.4.1 Requirements and features .............................................................................. 15
4.4.2 Components: .................................................................................................. 15
4.5 Flask ......................................................................................................................... 16
Chapter 5: System Design ................................................................................................... 18
5.1 UML Diagrams: ........................................................................................................ 18
5.1.1 Use case diagram: ........................................................................................... 18
5.1.2 Architecture Diagram................................................................................................ 19
5.1.3 Workflow Diagram ................................................................................................... 20
 5.1.4 Sequence Diagram .................................................................................................... 21
Chapter 6: System Implementation...................................................................................... 22
6.1 Plan Of Implementation ............................................................................................ 22
6.2 Python SAMPLE SOURCE CODE ........................................................................... 23
6.3 Using Of Flask: ......................................................................................................... 28
Chapter 7: System Testing ................................................................................................... 29
7.1 Unit Testing .............................................................................................................. 29
7.2 Integration Testing .................................................................................................... 29
Chapter 8: Sample Screen ................................................................................................... 30
8.1 Home ........................................................................................................................ 30
8.2 Skills ....................................................................................................................... 30
8.3 Projects .................................................................................................................... 31
8.4 Contact ..................................................................................................................... 31
8.5 Resume ..................................................................................................................... 32
8.6 Email received .......................................................................................................... 32
8.7 Night Mode .............................................................................................................. 33
Conclusion & Future Enhancement ..................................................................................... 33
Bibliography ....................................................................................................................... 36
Checklist of items for the Mini Project Report ..................................................................... 38

Table of Figures

Figure 1 Use Case Diagram ................................................................................................. 18

Figure 2 Architecture Diagram ............................................................................................ 19
Figure 3 Workflow Diagram................................................................................................ 20
Figure 4 Sequence Diagram ................................................................................................ 21
Figure 5 Home Page ............................................................................................................ 30
Figure 6 Skills ................................................................................................................... 30
Figure 7 Projects ................................................................................................................. 31
Figure 8 Contact .................................................................................................................. 31
Figure 9 Resume ................................................................................................................. 32
Figure 10 Email Received ................................................................................................... 32
Figure 11 Night Mode ......................................................................................................... 33
 Chapter 1: Introduction

1.1 What is Portfolio Website:

A portfolio website is a personal digital platform designed to showcase an

individual's skills, achievements, experiences, and projects in an engaging and
interactive way. It serves as a dynamic resume, providing visitors with a
comprehensive overview of the creator’s expertise and background while reflecting
their personal brand. Key features typically include an "About Me" section, a
project showcase, a detailed summary of skills and certifications, and interactive
elements like contact forms or downloadable resumes. Unlike static resumes,
portfolio websites use visuals and interactivity to tell a story, making them an
effective tool for networking, job applications, and personal branding.

1.1.1 Infrastructure as a service (IAAS)

A portfolio website can benefit significantly from Infrastructure as a Service (IaaS)

technology to ensure a robust, scalable, and efficient online presence. IaaS provides
the flexibility to dynamically scale resources, handle traffic surges, and maintain high
performance, making it ideal for hosting a professional and responsive portfolio. This
technology supports essential backend services, ensuring the website remains reliable
and secure.

Examples of IaaS applications for a portfolio website include: scalable server

infrastructure to handle varying visitor loads, high availability architecture to
minimize downtime, content delivery networks (CDNs) for faster loading times, data
backup and disaster recovery solutions, strong security measures to protect user data,
scalable storage for multimedia files, and isolated development and testing
environments for continuous improvement. By leveraging IaaS, a portfolio website
can deliver a seamless and professional user experience.

1.1.2 Platform as a service (PAAS)

Platform as a Service (PaaS) is a valuable technology for developing and managing

portfolio websites with enhanced efficiency and flexibility. PaaS provides an
integrated environment that simplifies website development, customization, and
maintenance, allowing individuals to focus on content and user experience rather than
underlying infrastructure. It enables seamless deployment, scalability, and integration
with other tools or platforms.

Examples of PaaS for portfolio websites include application hosting platforms for
streamlined deployment, content management systems (CMS) for effortless content
updates, analytics platforms for tracking visitor engagement, and tools for managing
user interactions, such as contact forms and comments. By utilizing PaaS, creators
can build professional, responsive, and feature-rich portfolio websites

Page 1 of 39
1.1.3 Software as a service (SAAS)

Software as a Service (SaaS) plays a crucial role in enhancing the functionality and user
experience of a portfolio website. By leveraging SaaS solutions, creators can integrate
advanced features and tools that improve efficiency, accessibility, and engagement without
the need for extensive technical expertise or infrastructure management. SaaS platforms
offer ready-to-use applications that can be easily customized and scaled to meet the unique
needs of a portfolio website.

Examples of SaaS solutions for a portfolio website include website-building platforms with
drag-and-drop interfaces, analytics tools to monitor visitor traffic and behavior, email
marketing tools for audience engagement, design platforms for creating visually appealing
content, and cloud-based storage solutions for hosting media files. Integrating SaaS into a
portfolio website ensures a streamlined and professional online presence while simplifying
ongoing management and updates.

1.2 Why do we need Portfolio Website:

1.2.1 Life before Portfolio Website:

Before portfolio websites became common, showcasing skills and achievements was a labor-
intensive process reliant on physical resources and in-person interactions. Professionals had
to use printed resumes and portfolios, attend networking events, or schedule face-to-face
meetings to present their work, limiting their reach and scalability. Sharing work globally
was challenging, updates were costly and time-consuming, and presentations lacked the
dynamic features of modern digital platforms. This made the process less efficient and
accessible. The advent of portfolio websites has transformed this, enabling professionals to
showcase their achievements interactively and reach a global audience with ease and
efficiency.
1.2.2 Portfolio Website: A Better Way
A portfolio website offers a modern, efficient, and impactful way to showcase your skills,
achievements, and unique personal brand. It serves as a dynamic digital platform where you
can present your work to a global audience, highlight your expertise through tailored
pathways, and engage with visitors in an interactive and visually appealing way. By offering
personalized sections, cutting-edge design features, and the ability to integrate multimedia,
a portfolio website ensures a professional yet creative representation of your journey. It
enables you to share your story, demonstrate innovation, and connect with opportunities
worldwide. Embark on your digital journey with a portfolio website today and unlock the
potential to stand out in a competitive world.

Page 2 of 39
1.3 Types Of Clouds:

1.3.1 Public Portfolio Website

A public portfolio website is a digital platform designed to showcase an individual's
work, achievements, and personal brand to a broad audience. It emphasizes
accessibility, creativity, and inclusivity, appealing to diverse viewers across various
industries. These websites often feature accessible designs to ensure usability for all,
including those with disabilities, and present a diverse range of projects that
demonstrate versatility. Community engagement is encouraged through blogs or
collaborative projects, while sustainability practices, such as eco-friendly hosting,
reflect social responsibility. Designed for a global audience, these websites highlight
work that contributes to community or global initiatives, creating a comprehensive
and impactful representation of the individual’s vision in an interconnected world.

1.3.2 Community Portfolio Website

A community portfolio website goes beyond simply showcasing an individual’s work by

fostering connections and collaboration with a broader audience. It serves as an interactive
platform where visitors can engage with the creator’s journey, share feedback, and
participate in ongoing projects. Key features might include interactive forums for idea
exchange, personal stories and testimonials that highlight the creator's experiences, an event
calendar featuring community-driven initiatives, and virtual tours that offer an immersive
view of their work. The site may also showcase collaborative projects, offer resources for
personal and professional growth, and provide opportunities for visitors to contribute.
Ultimately, a community portfolio website cultivates a sense of belonging and shared
responsibility, encouraging engagement and collaboration within a larger ecosystem of like-
minded individuals.

1.3.3 Hybrid Portfolio Website

A hybrid portfolio website combines the convenience of online accessibility with

personalized engagement, offering visitors a dynamic and interactive experience. It features
virtual tours with live interactions, allowing visitors to explore the creator's work in an
engaging way, along with interactive workshops and webinars for deeper learning.

Page 3 of 39
Personalized chatbot assistance provides instant responses to inquiries, while virtual or
augmented reality experiences offer immersive views of projects. One-on-one consultation
sessions enable direct communication, and gamified features make the browsing experience
fun and engaging. Additionally, peer networking platforms connect visitors with other
professionals. This approach creates an innovative space where visitors can explore, interact,
and connect with the creator in a meaningful way.

Page 4 of 39
 Chapter 2: System Analysis

2.1 Existing System:

A portfolio website typically includes various features that help creators showcase their work
while enhancing the visitor experience. One of the core features is a Personalized Portfolio
Dashboard, where the creator can easily manage and update their projects, monitor visitor
interactions, and track engagement metrics. This dashboard serves as a central hub for
content management and provides insights into which projects are receiving the most
attention.

Many portfolio websites offer Interactive Project Galleries and Case Studies, allowing
visitors to explore the creator's work in detail. These sections may feature high-quality
images, videos, or even 3D models, providing a dynamic experience. Interactive elements
such as hover effects, animations, and clickable prototypes help to engage users and
showcase work in an immersive way.

Customized Portfolio Pathways might be used to guide visitors based on their interests. For
example, a creator could highlight specific work relevant to a particular industry or client,
ensuring that visitors see the most relevant content first. This personalized experience
ensures users are efficiently guided through the creator’s body of work and can find specific
examples that meet their needs.

Many portfolio websites incorporate Testimonials or Client Success Stories to build trust and
credibility. These sections feature feedback from past clients or collaborators, showcasing
the value of the creator's work and its impact. Testimonials and case studies can inspire
potential clients or employers to reach out.

Interactive Chatbots powered by AI can assist visitors in real-time, answering questions or

providing more information about specific projects, services, or availability. This enhances
the accessibility of the website and ensures visitors can get instant responses to their
inquiries.

To engage visitors and provide additional value, portfolio websites may host Virtual
Information Sessions or Webinars where the creator shares insights, behind-the-scenes looks
at their process, or industry knowledge. These virtual events allow the creator to engage with
their audience in real-time, fostering a deeper connection.

Finally, some portfolio websites feature Resource Databases or Links to Free Tools, offering
valuable content such as downloadable guides, templates, or instructional videos that help
visitors enhance their skills or get more from the creator's expertise.

Overall, the existing system of a portfolio website provides a dynamic, interactive space for
creators to present their work, engage with visitors, and streamline communication, offering
a seamless user experience

Page 5 of 39
2.2 Proposed system:

The proposed system for a portfolio website aims to provide a comprehensive, interactive,
and personalized experience for visitors, offering both functionality and engagement. Key
features of the proposed system include:

Personalized Portfolio Dashboard: Upon visiting the portfolio website, users are provided
with a personalized dashboard that allows them to track interactions with the creator’s work,
save favorite projects, and receive notifications for new updates or content. This dashboard
serves as a central hub for exploring various portfolio sections, including case studies,
services offered, and client testimonials.

Interactive Project Galleries: The portfolio website features interactive project galleries,
where visitors can explore the creator's work through detailed, multimedia-rich
presentations. These galleries may include high-quality images, videos, 3D models, or virtual
tours to showcase the depth and versatility of the creator's portfolio. Interactive elements
such as hover effects, clickable prototypes, and zoom-in options provide an engaging
experience.

AI-Powered Chatbot Assistance: The website integrates an AI-powered chatbot to assist

visitors with real-time inquiries. Whether visitors are interested in learning more about a
specific project, the creator’s process, or potential collaboration opportunities, the chatbot
provides instant, accurate responses. Using natural language processing (NLP), the chatbot
is available 24/7, offering personalized assistance that enhances user experience.

Interactive Service Finder: A service finder tool allows potential clients or collaborators to
explore the creator’s services based on their specific needs, such as web design, branding, or
content creation. The tool provides detailed descriptions of each service, along with
examples of past work and client testimonials, helping visitors make informed decisions
about potential partnerships.

Real-Time Updates and Notifications: The portfolio website includes a notification system
to keep visitors informed about new content, upcoming events, or collaborations. Visitors
can subscribe to updates, and they will receive email or SMS notifications when new projects
are added to the portfolio or when the creator announces availability for new work or
projects.

Client Success Stories and Testimonials: To build credibility and showcase the impact of
their work, the portfolio website includes a section dedicated to client success stories and
testimonials. These narratives highlight successful projects, client feedback, and the creator’s

Page 6 of 39
ability to meet client needs, reinforcing the portfolio’s value and establishing trust with
prospective clients.

Accessible Design and Multilingual Support: The portfolio website is designed with
accessibility in mind, ensuring that all users, including those with disabilities, can easily
navigate the site and view content. Multilingual support is also offered to accommodate a
global audience, providing translations of key content in multiple languages to cater to
diverse linguistic backgrounds.

The proposed system for a portfolio website aims to create an immersive and engaging
experience for visitors while offering a user-friendly platform that enhances the creator's
visibility, facilitates interaction, and promotes collaboration.

2.1.1 Advantages from Proposed System:

The proposed system for a portfolio website offers several significant advantages,
enhancing both the user experience and the creator’s ability to manage and showcase
their work effectively. Key benefits include:
Personalized User Experience: By incorporating advanced user profiling, the
proposed system delivers personalized content tailored to visitors’ interests, such as
specific projects or services relevant to their needs. This customization not only
enhances engagement but also encourages deeper exploration of the portfolio, leading
to a more satisfying and immersive experience for visitors.
Streamlined Project Presentation: The integration of intelligent features, such as
automated project categorization and advanced search filters, makes it easier for
visitors to navigate and find relevant work. Whether by industry, project type, or skill
set, these tools ensure that visitors can quickly find what they are looking for,
simplifying the user journey.
Enhanced Communication Channels: With the inclusion of AI-powered chatbots and
virtual assistants, the proposed system ensures that visitors can receive instant
assistance and personalized guidance. This reduces wait times and improves overall
communication between the portfolio creator and potential clients, collaborators, or
employers, making interactions more efficient and seamless.
Data-Driven Insights: The system’s integration of analytics tools empowers creators

Page 7 of 39
to track user interactions, identify popular projects, and gather valuable insights on
visitor behavior. This data can help refine content, optimize the portfolio, and make
informed decisions regarding future projects and marketing strategies.
Seamless Integration with External Platforms: The proposed portfolio website can be
seamlessly integrated with third-party platforms such as social media, content
management systems (CMS), and client relationship management (CRM) tools. This
allows for smooth synchronization of content and provides a unified platform for
managing all aspects of a creator’s digital presence.
Continuous Improvement and Adaptability: The flexible and scalable design of the
system ensures it can evolve with changing trends, technologies, and user feedback.
Regular updates and enhancements ensure that the portfolio website remains fresh,
functional, and aligned with the creator’s goals and audience needs.
Accessibility and Inclusivity: Accessibility features are prioritized, ensuring
compliance with web accessibility standards like WCAG (Web Content Accessibility
Guidelines). The website design accommodates users with disabilities, providing
equal access to the portfolio and making the content available to a wider, more diverse
audience.

Page 8 of 39
 Chapter 3: Software and Hardware Requirements

3.1 Hardware Requirements

 Processor: Intel 5 and AMD Opteron.
 Motherboard: Intel mother board – VTx Enabled and Network Cards.
 Ram: 16 GB.
 Hard disk drive: 120 GB.

3.2 Software Requirements

 Operating System: Linux or Windows (Ubuntu).

 Front-end: HTML5, CSS3, JavaScript.
 Back-end: Python (Flask).
 Database: MySQL.
 Development Tools: Visual Studio Code, PyCharm.
 Version Control: Git.

Page 9 of 39
 Chapter 4: Selected Software

4.1 Python:

Python, created by Guido van Rossum and first released in 1991, is a high-level,
interpreted, and general-purpose programming language. Known for its simplicity and
readability, Python is often chosen by both beginner and experienced programmers for a
variety of applications, ranging from web development to scientific computing.

Python is an open-source language, meaning anyone can use, modify, and distribute it
freely. The language emphasizes code readability with its use of significant indentation,
which helps developers write clean and maintainable code. Python is dynamically typed,
which allows variables to change types at runtime, and it supports multiple programming
paradigms, including object-oriented, imperative, and functional programming.

Python is well-suited for web development with frameworks such as Django and Flask,
providing tools for building robust web applications. It also has extensive support for
libraries and modules, making it a popular choice for data analysis, machine learning,
automation, scripting, and more.

In Python, code is executed through an interpreter, which reads and executes the code line
by line. This makes it a good choice for rapid development and prototyping. Python's large
standard library provides modules for interacting with various types of data, systems, and
services, including web services, databases, and file systems.

Python is cross-platform and can run on various operating systems such as Linux,
Windows, and macOS. Additionally, Python can integrate with other languages and
systems, making it highly versatile for a wide range of applications.

One of the key strengths of Python is its supportive and active community, which
continually develops new libraries, frameworks, and tools to extend its capabilities. The
language's focus on simplicity and readability, coupled with its powerful ecosystem, has
made it one of the most popular programming languages in the world today.

4.1.1 Advantages Of PHP:

A. Free and Open-Source

Python is free to use and is open-source, meaning its source code is publicly available for
modification and redistribution. The Python Software Foundation (PSF) actively maintains
and supports Python, ensuring that it remains a reliable, cost-effective solution for
developers.

B. Easy to Learn and Use

Python’s syntax is designed to be simple and readable, which makes it accessible to
beginners. The language is built around a philosophy of readability and conciseness,
making it easier for developers to write and maintain code. This simplicity also allows
developers to focus on problem-solving rather than language intricacies.

Page 10 of 39
C. Cross-Platform Compatibility
Python is platform-independent, meaning it can run on any major operating system,
including Windows, Linux, and macOS. Python programs written on one platform can be
easily transferred and executed on another without modification, enhancing its versatility
across different environments.

D. Comprehensive Standard Library

One of Python’s strongest features is its extensive standard library, which includes modules
for handling common programming tasks such as file I/O, regular expressions, and web
services. The Python standard library reduces the need for developers to write code from
scratch and accelerates development.

E. Large Community and Ecosystem

Python has a vibrant and active community, which contributes to a vast ecosystem of
libraries, frameworks, and tools. This community-driven development ensures that
developers have access to a wide range of resources, tutorials, and support, which
simplifies the learning process and enhances productivity.

F. Versatility
Python is highly versatile and is used in a variety of domains, including web development,
data analysis, artificial intelligence, automation, and scientific computing. Popular
frameworks like Django and Flask make web development with Python highly efficient,
while libraries such as Pandas, NumPy, and TensorFlow cater to data science and machine
learning applications.

G. Strong Integration Capabilities

Python can integrate with other programming languages and technologies, allowing
developers to use it in multi-language projects. It can interface with C, C++, and Java code,
making it ideal for projects that require combining different language capabilities or
extending existing systems.

H. Support for Object-Oriented Programming (OOP)

Python supports object-oriented programming, enabling developers to build applications
using classes and objects. OOP principles help developers organize their code efficiently,
improve code reusability, and manage complex systems more easily.

I. Scalable and Flexible

Python can handle both small scripts and large-scale applications. It’s used by startups to
build quick prototypes as well as by large companies to develop complex systems, making
it a flexible choice for projects of any size or complexity.

J. Proven and Trusted

Python has been in use for over two decades and is trusted by many leading organizations
and companies. Some of the world's most popular websites and applications, including
YouTube, Instagram, and Google, use Python as part of their technology stack,
demonstrating its reliability and effectiveness across diverse use cases.

Page 11 of 39
4.2 HTML:

Hyper Text Markup Language (HTML) is the main markup language for displaying
web pages and other information that can be displayed in a web browser.

HTML is written in the form of HTML elements consisting of tags enclosed in angle
brackets(like <html>), within the web page content. HTML tags most commonly
come in pairs like
<h1> and </h1>, although some tags, known as empty elements, are unpaired, for example
<img>. The first tag in a pair is the start tag, the second tag is the end tag (they are
also calledopening tags and closing tags). In between these tags web designers can
add text, tags, comments and other types of text-based content.The purpose of a
webbrowser is to read HTML documents and compose them into visible or
audibleweb pages. The browser does notdisplay the HTML tags, but uses the tags
tointerpret the content of the page.

HTML elements form the building blocks of all websites. HTML allows images and
objectsto be embedded and can be used to create interactive forms. It provides a
means to create structured documents by denoting structural semantics for text such
as headings, paragraphs, lists, links, quotes and otheritems. It can embed scripts in
languages such as JavaScript whichaffect the behavior of HTML webpages.

Web browsers can also refer to Cascading Style Sheets (CSS) to define the
appearance and layout of text and other material. The W3C, maintainer of both the
HTML and the CSS standards, encourages the use of CSS over explicitly
presentational HTML markup.

Page 12 of 39
4.2.1 ORIGINS of HTML.

HTML and wrote the browser and server software in the last part of 1990. In that year,
Berners-Lee and CERN

data systems engineer Robert Cailliau collaborated on a joint request for funding,
but the project was not formally adopted by CERN. In his personal notes from 1990
he lists"some of the many areas in which hypertext is used"and puts an encyclopedia
first.

Page 13 of 39
4.3 MYSQL:

MySQL "My S-Q-L", officially, but also called "My Sequel") is the world's
mostused open source relational database management system (RDBMS) that runsas
a server providing multi- user access to a number of databases. It is namedafter co-
founder Michael Widenius' daughter, My. The SQL phrase stands for Structured
Query Language.

The MySQL development project has made its source code available under theterms
of the GNU General Public License, as well as under a variety of proprietary
agreements. MySQL was owned and sponsored by a single for- profit firm, the
Swedish company MySQL AB, now owned by Oracle Corporation. Free-software-
open source projects that require a full- featured database management system often
use MySQL. For commercial use, severalpaid editions are available, and offer
additional functionality.

MySQL is primarily an RDBMS and ships with no GUI tools to administer

MySQLdatabasesor manage data contained within the databases. Users may use
theincluded command line tools, or use MySQL "front-ends", desktop software and
web applications that create and manage MySQL databases, build database
structures, back up data, inspect status, and workwith data records.The official set
of MySQL front-end tools, MySQL Workbench is activelydeveloped by Oracle, and
is freely available for use. Third-party command- line tools are also available, such
as Percona Toolkit.

Page 14 of 39
  Database design & modeling

 SQL development – replacing MySQL Query Browser

 Database administration – replacing MySQL Administrator

MySQL Workbench is available in two editions, the regular free and open source
CommunityEdition which may be downloaded from the MySQL website, and the
proprietary Standard Edition which extends and improves the feature set of the
Community Edition.

4.3.1 Advantages of MySQL:

 It’s Easy to Use: MySQL is very easy to install, and thanks to a bevy ofthird-
party tools that can be added to the database, setting up an implementation
is a relatively simple task. In addition, it’s also an easydatabase to work
with. So long as you understand the language, you shouldn’t run into too
many problems.
 It’s Open-Source: Oracle’s purchase of Sun Microsystems (and by
association, MySQL) was met with some contention from the development
community. The general fear was that Oracle wouldtransform the tool into
a closed, proprietary ecosystem.
 It's secure: MySQL includes solid data security layers that protect sensitive
data from intruders. Rights can be set to allow some or all privileges to
individuals. Passwordsare encrypted.

 It's scalable: MySQL can handle almost any amount of data, up to as much
as 50 million rows or more. The default file size limit is about 4 GB.
However, you can increase this number to a theoretical limit of 8 TB of data.
 It runs on many operating systems: MySQL runs on many operating
systems, including Novell NetWare, Windows* Linux*, many varieties
ofUNIX* (such as Sun* Solaris*, AIX, and DEC* UNIX), OS/2,
FreeBSD*,and others

Page 15 of 39
 4.4 Docker:
Docker simplifies the process of setting up applications by encapsulating the entire
runtime environment into a single container. These containers can be run on any
system that supports Docker, making it platform-agnostic. It provides a lightweight
and portable alternative to traditional virtual machines, with faster start-up times and
lower resource usage. Docker’s efficiency in managing isolated environments makes
it particularly valuable for microservices architectures, where applications are broken
down into smaller, independently scalable services.

4.4.1 Requirements and features

Docker can be installed on various operating systems, including Linux, Windows, and
macOS. It requires a Docker engine to be installed, which can be easily set up using
the Docker Desktop or Docker Toolbox for different platforms. Docker's system
requirements vary depending on the platform but generally require 64-bit architecture
and sufficient RAM and CPU resources to run containers efficiently.

Some key features of Docker include:

Containerization: Docker encapsulates applications and their dependencies into

containers, providing portability across environments.
Isolation: Each container runs independently, ensuring that applications do not
interfere with one another, even when running on the same machine.
Resource Efficiency: Unlike virtual machines, Docker containers share the host
system’s kernel, which leads to lower overhead and faster performance.
Versioning and Reusability: Docker images can be versioned, enabling developers to
roll back to previous versions or quickly recreate environments.

4.4.2 Docker Components:

Docker consists of several key components that make it a powerful tool for containerization:

Docker Engine: The core component responsible for running and managing containers. It
consists of a server-side daemon, REST API, and command-line interface (CLI).
Docker Images: Read-only templates used to create containers. Images contain the
application and all necessary libraries and dependencies to run the application.
Docker Containers: Instances of Docker images that run applications. Containers are
lightweight and portable, making it easy to deploy applications across different environments.
Docker Hub: A cloud-based registry service for sharing and storing Docker images. It
provides both public and private repositories for images.
Docker Compose: A tool for defining and managing multi-container applications, which
allows developers to configure and run complex applications with multiple interacting
containers.

Page 16 of 39
 4.5 FLASK:

Flask is a micro web framework written in Python. It is designed to be lightweight and

modular, providing the essential tools and components for building web applications
while allowing developers to add extensions as needed. Flask is classified as a micro-
framework because it doesn't include certain features such as form validation,
database abstraction, or authentication support out of the box, relying instead on third-
party extensions to add these capabilities.

Flask's simplicity and flexibility have made it popular for developing both small and
large-scale web applications. It is built on the WSGI (Web Server Gateway Interface)
standard, which allows it to run on most web servers. Flask uses Jinja2 templating for
rendering HTML pages and Werkzeug as the underlying WSGI utility library.

Flask is a lightweight and flexible web framework for Python, designed to make web
development simple and efficient. Its minimalistic approach provides only the essential
tools for building web applications, giving developers full control over the components
they use. This flexibility makes Flask ideal for small to medium-sized projects or
applications that require a custom architecture.

One of Flask's key features is its built-in development server, which allows developers
to test and develop their applications locally without the need for additional
configurations or third-party tools. This simplifies the development process and speeds
up testing. Additionally, Flask is integrated with Jinja2, a powerful template engine that
makes it easy to create dynamic HTML pages. Jinja2 supports features like template
inheritance, which ensures consistency across different pages in an application.

Flask also offers extensive documentation that is clear and concise, making it accessible
for both beginners and experienced developers. The documentation covers a wide range
of topics, from basic application setup to more advanced techniques, helping developers
at all levels. Furthermore, Flask is highly modular and extensible. Through the use of
extensions, developers can easily add functionalities such as form validation, database
integration, and authentication, making Flask adaptable to a wide variety of application
needs.

Another significant advantage of Flask is its support for RESTful request handling,
which simplifies the development of APIs. This feature is particularly useful for
developers building web services or mobile applications that require seamless
communication with a backend server. Overall, Flask provides a flexible, simple, and
scalable solution for web development, allowing developers to build applications with
ease and efficiency.

Page 17 of 39
 Chapter 5: System Design

5.1 UML Diagrams:

Unified Modeling Language or UML Diagrams are used to represent the system
diagrammatically.

5.1.1 Use case diagram:

Use case diagrams a r e drawn to represent the functionality of the system.

Figure 1 Use Case Diagram

Page 18 of 39
5.1.2 Workflow Diagram:

Figure 2 Workflow Diagram

Page 19 of 39
5.1.3 Architecture Diagram:

Figure 3 Architecture Diagram

Page 20 of 39
5.1.4 Sequence Diagram:

A sequence diagram (Fig 6) in a Unified Modelling Language (UML) is a kind of

interactiondiagram that shows how processes operate with one another and in what
order. It is a constructof a Message Sequence Chart. A sequencediagram shows object
interactions arranged in timesequence. It depicts the objects and classes involved in
the scenario and the sequence of messages

exchanged between the objects needed to carry out the functionality of the scenario.
Sequence diagrams typically are associated with use case realizations in the Logical
View ofthe system under development. Sequence diagrams are sometimes called
event diagrams, event scenarios, and timing diagrams.

Figure 4 Sequence Diagram

Page 21 of 39
 Chapter 6: System Implementation

6.1 Plan Of Implementation

System Development Life Cycle (SDLC) Model

This is also known as Classic Life Cycle Model (or) Linear Sequential Model (or)
WaterfallMethod. This model has the following activities.

System/Information Engineering and Modeling

Software is perpetually of an outsized system or business, work starts by creating

the needs for all system elements and then allocating some subset of these
requirements to software.

Software Requirement Analysis

This process is also known as possibility study. In this phase, the development team
visits the customer and studies their system. They examine the requirement for
possible software automation in the given system. By the end of the possibility
study, the team provides a document that holds the diverse specific
recommendations for the candidate system.

System Analysis and Design

In this phase, the software development process, the software's general structure and
its gradations are defined. In terms of the client - server technology needed for the
package architecture, the database design, and thedata structure design etc. are all
helpful in this phase.

Code Generation

The design should be interpreting into a machine-readable form. The code

generation step achieves this task. If the design is executed in a detailed manner,
code generation can be accomplished without much complication.

Page 22 of 39
Testing

Once the code is generated, after that the software program testing starts. Different
testing methodologies are available to unravel the bugs that were committed during
the previous phase

Maintenance
The software will unquestionably experience change once it is delivered to the
customer. Therecan be many reasons for this change to occur. Change could happen
because of some surprising input values into the system.

Page 23 of 39
 6.2 Python SAMPLE SOURCE CODE

from datetime import datetime

from flask import Flask, render_template, request
from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate

import json
from datetime import datetime

with open('config.json', 'r') as c:

params = json.load(c)["params"]

local_server = True
app = Flask(__name__)
app.config.update(
MAIL_SERVER = 'smtp.gmail.com',
MAIL_PORT = '465',
MAIL_USE_SSL = True,
MAIL_USERNAME = params['kkhushiportfolio@gmail'],
MAIL_PASSWORD= params['JayGanesh&11']
)
mail = Mail(app)
if(local_server):
app.config['SQLALCHEMY_DATABASE_URI'] = params['local_uri']
else:
app.config['SQLALCHEMY_DATABASE_URI'] = params['prod_uri']

db = SQLAlchemy(app)

class Contacts(db.Model):
sno = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(80), nullable=False)
phone_num = db.Column(db.String(12), nullable=False)
msg = db.Column(db.String(120), nullable=False)
date = db.Column(db.String(12), nullable=True)
email = db.Column(db.String(20), nullable=False)

@app.route("/")
def home():

return render_template('index.html', params=params)

@app.route("/about")
def about():
return render_template('about.html', params=params)

Page 24 of 39
@app.route("/contact", methods = ['GET', 'POST'])
def contact():
if(request.method=='POST'):
name = request.form.get('name')
email = request.form.get('email')
phone = request.form.get('phone')
message = request.form.get('message')
entry = Contacts(name=name, phone_num = phone, msg = message, date= datetime.now(),email
= email )
db.session.add(entry)
db.session.commit()
mail.send_message('New message from ' + name,
sender=email,
recipients = [params['gmail-user']],
body = message + "\n" + phone
)
return render_template('contact.html', params=params)

# create flask app

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///db.sqlite3'

# sqlite3 database
db = SQLAlchemy(app)

# db migration conf
migrate = Migrate(app, db)

# Models
class Contact(db.Model):
no = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(80), unique=False, nullable=False)
phone = db.Column(db.String(13), unique=False, nullable=False)
email = db.Column(db.String(30), unique=False, nullable=False)
reason = db.Column(db.String(200), unique=True, nullable=False)
date = db.Column(db.String(12), unique=False, nullable=True)

def __init__(self, name:str, phone:str, email:str, reason:str) -> None:

self.name = name
self.phone = phone
self.email = email
self.reason = reason
self.date = datetime.now()

def __repr__(self) -> str:

return self.name

def get_projects():
api_url = f'https://api.github.com/users/dmdhrumilmistry/repos'
cards_list = requests.get(api_url).json()

Page 25 of 39
 return cards_list

@app.errorhandler(Exception)
def handle_exception(message):
return render_template('error.html', message="Bad Request"), 400

@app.errorhandler(404)
def err_404(message):
return render_template('error.html', message='404 Page Not Found'), 404

@app.route('/')
def main_page():
return render_template('index.html', title='Dhrumil Mistry - Homepage')

@app.route('/home')
def home():
return render_template('base.html', title='Base')

@app.route('/contact', methods=['GET', 'POST'])

def contact_page():
contact_info_included = None

if request.method == 'POST':
name = request.form.get('name', '').strip()
email = request.form.get('email', '').strip()
phone = request.form.get('phone', '').strip()
reason = request.form.get('reason', '').strip()

# check phone number

contact_info_included = False
if 10 <= len(phone) <= 13 and re.fullmatch(r'^([+]?[\s0-9]+)?(\d{3}|[(]?[0-9]+[)])?([-]?[\s]?[0-
9])+$', phone):
entry = Contact(name, phone, email, reason)
db.session.add(entry)
db.session.commit()
contact_info_included = True

return render_template('contact.html', title='Contact Page', contact_status=contact_info_included)

@app.route('/projects')
def projects_page():
return render_template('projects.html', title="Projects", cards=get_projects())

Page 26 of 39
6.3 Using Of FLASK:

Flask is used as the backend framework for our portfolio website to handle dynamic content
and ensure smooth interactions. Flask’s lightweight and flexible nature allows for easy
routing of different web pages, serving HTML templates, and handling HTTP requests
efficiently. By using Flask, we can create a clean and maintainable structure for the website
that is simple to extend and customize.

Page 27 of 39
 Chapter 7: System
Testing

Software testing forms an activity of software development. Software testing

identifies errorsat an early stage. A planned testing identifies the difference between
the expected results andthe actual results. The main objective of software testing is
to find errors. A successful testing is one that uncovers, asmany as yet undiscovered
errors, which helps to make the software more rugged and reliable.

Testing is applied at different levels in the software development life cycle, but the
testing done is different in nature and has different objective at eachlevel. The focus
of all testing is to find errors, but different type of error are looked for each level.
Software testing is done atdifferent levels. They are unit testing and system testing
which comprises of integration testing and acceptance testing.

7.1 Unit Testing:

At the level, the function of the basic unit of software is tested in isolation. This is
where the most detailed investigation of the internal working of individual units is
carried out. The programmer who wrote the code of then performs unit testing.

The purpose of unit testing is to find errors in the individual units, which couldbe
logic-relatederrors. The test case can be derived from their program specification or
design document. Units which cannot be tested in isolation may require the creation
of small test programs known as harness. Here in our Project, we have tested all
module individually like login, signup, encryption, storage, decryption.

7.2 Integration Testing:

At the level of develop mentation each and every module will be tested individually.
When coming to the integration testing, we have to integrate allmodules and test the
flow and working of modules together.

Page 28 of 39
 Chapter 8: Sample Screen

8.1 Home Page

Figure 5 Home Page

8.2 Skills

Figure 6 Skills

Page 29 of 39
8.3 Project Section Preview

Figure 7 Project Section

Preview

8.4 Contact Page

Figure 8 Contact Page

Page 30 of 39
8.5 Resume

Figure 9 Events

8.6 Email Received through Contact Form

Figure 10 Email Received through Contact form

Page 31 of 39
8.7 Website in Night Mode

Figure 11 Website in Night Mode

Page 32 of 39
 Conclusion & Future Enhancement

Conclusion:

The development of the portfolio website has successfully created a digital platform that
effectively showcases skills, projects, and professional achievements, aligning with the
needs of potential employers and clients. The website has achieved the following:

Improved Visibility: By presenting a clear and professional interface, the website enhances
the visibility of the creator’s talents, making it easier for recruiters or collaborators to assess
their capabilities.
User-Centric Design: The intuitive navigation and responsive layout ensure accessibility
across various devices, delivering a seamless user experience.
Effective Branding: The website acts as a personal brand ambassador, presenting a cohesive
narrative of skills, experiences, and professional values.
Interactivity: Features such as contact forms, embedded project demonstrations, and
downloadable resumes provide interactive touchpoints, increasing engagement and
connection with the audience.

Future Enhancements:

To maintain relevance and further improve functionality, the following enhancements can
be considered:

Dynamic Content Updates: Integrate a content management system (CMS) to allow easy
updates, enabling the addition of new projects, blog posts, or portfolio items without
requiring extensive technical expertise.

Personalization: Implement a recommendation engine to tailor project suggestions or display

content based on visitor preferences or browsing behavior.

Integration of Analytics: Utilize tools like Google Analytics or custom dashboards to track
visitor behavior, identify popular content, and optimize the website’s structure accordingly.

Interactive Elements: Add features like animations, hover effects, or interactive timelines to
make the portfolio more engaging and visually appealing.

Page 33 of 39
Enhanced Mobile Optimization: Emphasize a mobile-first design approach to ensure
exceptional usability on smartphones and tablets, reflecting modern user preferences.

SEO Optimization: Implement advanced search engine optimization strategies to improve

the website's discoverability on search engines, increasing traffic and visibility.

Accessibility Improvements: Adhere to Web Content Accessibility Guidelines (WCAG) to

ensure the website is inclusive for users with disabilities, such as providing alternative text
for images and keyboard navigability.

Client Testimonials and Reviews: Incorporate sections for client feedback or testimonials to
build trust and credibility.

Portfolio Expansion: Include multimedia such as videos, 3D models, or interactive project

previews to better showcase technical and creative capabilities.

Feedback Mechanism: Introduce a feedback form or rating system to gather insights from
visitors, enabling continuous improvement of the website.

By implementing these future enhancements, the portfolio website will remain a dynamic
and professional representation of its creator, effectively adapting to evolving industry trends
and audience expectations.

Page 34 of 39
 Bibliography

[1] Brian P. Hogan. Web Design for Developers: A Programmer's Guide to Design
Tools and Techniques. New York. Pragmatic Bookshelf, 2010

[2] Krug Steve. Don't Make Me Think: A Common-Sense Approach to Web Usability.
Berkeley: New Riders, 2000.

[3] Nielsen, Jakob. Designing Web Usability: The Practice of Simplicity.

Indianapolis: New Riders, 2000.

[4] Lidwell, WilliamHolden, Kritina; Butler, Jill. Universal Principles of Design.

Beverly: Rockport Publishers, 2003.

[5] Gothelf Jeff, Seiden, Josh. Lean UX: Designing Great Products with Agile Teams.
Sebastopol: O'Reilly Media, 2013.

Page 35 of 39
 References

[1] Sonti Rahul. "Rahul Sonti’s Portfolio Website." Available:

https://rahulsonti.pythonanywhere.com/ , [Accessed: November 20, 2024].

[2] Hallden. "Building My Portfolio Website Using Python Flask." YouTube, Available:
https://youtu.be/SSoJvyyvYpA?si=1TXoTaFiJtCYoNQ6 , [Accessed: November 20, 2024].

[3] Sharma, Abhishek. "Portfolio Website in Python using Flask – 2024." Machine Learning
Projects, Available: https://machinelearningprojects.net/portfolio-website-in-python/ ,
[Accessed: November 20, 2024].

[4] Surfside Media. "Building a Personal Portfolio with Flask." Surfside Media, Available:
https://www.surfsidemedia.in/post/building-a-personal-portfolio-with-flask#google_vignette ,
[Accessed: November 20, 2024].

Page 36 of 39