Design and Development of a Personal Portfolio Website

An Internship Report submitted to the partial fullfillment of the requirement for

the award of the degree of
BACHELOR OF COMPUTER SCIENCE
Submitted by
BLESSIN V
[Link]. 23083211802111013
Under the guidance of
[Link] RANI [Link].,[Link].,Ph.D
(Assistant Professor, Department of Computer Science)

DEPARTMENT OF COMPUTER SCIENCE

ST. JEROME’S COLLEGE

(Affiliated to Manonmaniam Sundaranar University, Tirunelveli)

Anandhanadarkudy, Nagercoil- 629201

NOVEMBER – 2025
 ST. JEROME’S COLLEGE
(Affiliated to Manonmaniam Sundaranar University, Tirunelveli)
Anandhanadarkudy, Nagercoil- 629201

DEPARTMENT OF COMPUTER SCIENCE

BONAFIDE CERTIFICATE

This is to certify that the Internship project report entitled “Design and
Development of a Personal Portfolio Website” is the bonafide record of the
project work done BLESSIN V [Link]. 23083211802111013 inpartial
fulfillment of the requirements for the award of the degree of Bachelor of
Science in Computer Science of Manonmaniam Sundaranar University,
Tirunelveli during the academic year 2025-2026

[Link] RANI [Link].,[Link].,Ph.D [Link] RANI [Link].,[Link].,Ph.D

(Project Guide) (Head of the Department)

This Internship project is submitted for the Viva-Voce Examination held at

St. Jerome’s College, Anandhanadarkudy on _________________.

External Examiner(s)
 COMPANY CERTIFICATE

Students Details

Name of the student : V BLESSIN

Register no: 23083211802111013
Department: Department of Computer Science
Year & Class : III [Link]. Computer Science

Industry Details

Industry Name : SKILLDUX EDUTECH PRIVATE LIMITED,

3rd floor, SkillDux Edutech Private Limited, Rathi plaza, opp. Govt Hospital,
Thuckalay, Nagercoil, Tamil Nadu 629175,
NAGERCOIL 629002,

CERTIFICATE (SOFT COPY)

 DECLARATION

I, BLESSIN V, hereby declare that the internship report titled as “Design and
Development of a Personal Portfolio Website” , submitted to [Link]’s College
as part of the requirements for the Degree of Bachelor of Computer Science,
the work done under the guidance of Assistant Professor, Department of
Computer Science, St. Jerome’s college and SKILLDUX EDUTECH
PRIVATE LIMITED The report is submitted in partial fulfillment of the
requirement for the internship

Place:Anandhanadarkudy Submitted By
Date: Blessin V
 ABSTRACT

Web development is the process of designing, building, and maintaining websites

and web applications that function effectively across various platforms. It plays a
vital role in today’s digital world, where businesses, educational institutions, and
individuals rely heavily on online presence for communication, promotion, and
service delivery. The goal of web development is to create dynamic, user-friendly,
and visually appealing websites that provide meaningful interaction between users
and technology.

This project focuses on developing a fully functional and responsive website using
modern web technologies such as HTML, CSS, JavaScript, and [Link] for the
frontend, and optionally [Link] or PHP for backend operations. The website is
designed to deliver an engaging user experience with easy navigation, optimized
performance, and accessibility on all devices, including desktops, tablets, and
smartphones. The use of responsive design ensures that the layout automatically
adapts to different screen sizes, providing a consistent look and feel across
platforms.

In conclusion, this web development project demonstrates the integration of design

and technology to produce a professional, efficient, and user-centered website. It
showcases how web technologies can be leveraged to build digital solutions that
meet real-world needs. The skills and experience obtained from this project
contribute significantly to professional growth in the field of software and web
application development. As the internet continues to evolve, web development
remains an essential and ever-growing domain offering vast opportunities for
innovation and creativity.
 ACKNOWLEDGEMENT

First, I convey my heart full thanks to almighty God for this countless blessing
shown on me for this academic project work. He let me in every event.

I wish to convey my heart full thanks to Dear [Link]. Hirudhaya raju vendi crs,
Correspondent St. Jerome’s college for his timely help to do my project.

I wish to convey my heart full thanks to eminent person Dr. C. James

[Link].,[Link].,Ph.D., Principal of St. Jerome’s college for giving me an
opportunity to do this work.

I also wish to extend my thanks to [Link] RANI [Link].,[Link].,Ph.D Head

of the department of Computer Science and Wice principal of St. Jerome’s
college. He gave full support and guidance to complete this project work in a
perfect manner.

Also, I extend my profound thanks to my project guide [Link] Rani

[Link],Ph.D., for his valuable guidance, encouragement and immense help in

making the project successful one.

I wish to convey my thanks to all the staff of Computer Science department,

who helped me in completing the project.

BY,
BLESSIN V
SL..NO TITLE PAGE NO

1. INTRODUCTION 1
1.1 Overview 1
1.2 Objective 2
1.3 Scope 3
1.4 Need for a Personal Portfolio 4
1.5 Overview of the Internship 5
2. COMPANY PROFILE 6
2.1 About Skilldux private Limited 7
2.2 vision and mission 7

2.3 Services provided 8

3. PROJECT OVERVIEW: DESIGIN AND 9
DEVELOPMENT OF A PERSONAL
PORTFOLIO WEBSITE
3.1 Website development 9
3.2 Front-End Development (HTML, CSS) 10
3.3 Implementation of Sections 11
3.4 Home Section / About Section 12
3.5 Services Section / Contact Section 14
3.6 CSS Styling (Animations, Buttons, Layouts) 16
3.7 Debugging and Error Fixing 17
3.8 Deployment and Hosting 18
3.9 Hosting on Netlify 20
3.10 Version Control using Git/GitHub 21
4. Conclusion 23
5. Future Enhancement 25
6. APPENDICES 26
6.1 Code Snippets 26
7. References 34
 LIST OF FIGURES

Figure No. Title Page No.

Figure 1 CERTIFICATE III

Figure 3.4 Home Page Design of the Portfolio Website 12

Figure 3.4.1 About Section Layout 13

Figure 3.5 Services Section Interface 14

Figure 3.5.1 Contact Form Design 15

 LIST OF ABBRIEVIATION

HTML : HyperText Markup Language

CSS : Cascading Style Sheets

URL : Uniform Resource Locator

ERD : Entity Relationship Diagram

DBMS : Database Management System

DNS : Domain Name System

OS : Operating System

VS Code : Visual Studio Code

API : Application Programming Interface

FTP : File Transfer Protocol

SQL : Structured Query Language

PNG : Portable Network Graphics

JPG : Joint Photographic Experts Group

 CHAPTER I
INTRODUCTION

1.1 Overview of the Project

The project titled “Design and Development of a Personal Portfolio Website”

focuses on creating a digital platform that showcases an individual’s professional
identity, skills, and accomplishments. In the modern digital era, a personal
portfolio serves as an essential tool for students and professionals to represent
their talents and experiences in a structured and visually appealing format. This
project aims to design and develop a responsive and user-friendly website using
HTML5, CSS3, and responsive design principles.

The portfolio website includes sections such as Home, About, Services, Portfolio,
and Contact, allowing visitors to learn about the individual’s background,
technical skills, and projects. The design emphasizes both User Interface (UI)
and User Experience (UX), ensuring smooth navigation and accessibility across
all devices. The website also integrates interactive elements and aesthetic layouts
to enhance engagement.

Through this project, the intern gained practical exposure to front-end web
development, version control (Git/GitHub), and deployment using Netlify.
The portfolio not only demonstrates technical expertise but also acts as a
professional online resume that supports career growth and personal branding in
the field of web development. as confirmed cases, active cases, recoveries, and
deaths. The project explores temporal trends to observe fluctuations in case
numbers over time and geographical distributions to identify countries or regions
most affected by the pandemic.

1
1.2 Objective of the Project

The main objective of this project, “Design and Development of a Personal

Portfolio Website,” is to create a responsive, visually appealing, and interactive
platform that highlights an individual’s personal and professional achievements
in an organized and accessible manner. The portfolio website acts as a digital
identity, showcasing skills, educational background, certifications, and project
works, making it easier for recruiters and organizations to evaluate the
candidate’s capabilities.

The project aims to enhance the understanding of front-end web development

technologies such as HTML5, CSS3, and JavaScript, focusing on clean design,
user experience (UX), and responsive layouts. It provides hands-on experience in
using design tools, writing structured code, managing files, and implementing
web design principles. The inclusion of different sections like Home, About,
Services, Portfolio, and Contact ensures that users can easily navigate and access
the required information.

Another important objective is to understand modern web deployment

techniques using platforms such as Netlify and GitHub, enabling the developer
to publish and maintain the website online. The project also aims to improve
technical problem-solving, creativity, and adaptability in a real-time development
environment.

Overall, this project’s objective is not only to build a functional portfolio website
but also to strengthen the intern’s technical foundation in web development,
enhance personal branding, and prepare for future opportunities in the software
and IT industries.

2
1.3 Scope

The scope of the project “Design and Development of a Personal Portfolio

Website” extends to the complete design, development, testing, and
deployment of a personalized web platform that serves as an online
professional identity for the developer. The portfolio website is designed to
highlight the user’s skills, educational qualifications, certifications,
achievements, and projects in an organized and visually appealing manner.

This project focuses primarily on front-end web development using

technologies such as HTML5, CSS3, and JavaScript, ensuring a responsive
and user-friendly design. The portfolio incorporates multiple sections such
as Home, About, Services, Portfolio, and Contact, each serving a specific
purpose to enhance user engagement and interactivity. It is also developed
to adapt seamlessly across various devices, including desktops, tablets, and
mobile phones, ensuring a consistent experience for all users.

In addition to design and development, the project also covers web hosting
and deployment using platforms like Netlify, making the portfolio publicly
accessible. The integration of GitHub allows for version control and
efficient project management throughout the development process.

The scope also includes understanding UI/UX design principles,

implementing responsive layouts, and improving coding practices for
maintainability and scalability. Furthermore, this project provides hands-on
experience in real-time web development, testing, and debugging to ensure
performance optimization and compatibility across browsers.

3
1.3 Need for a Personal Portfolio

In today’s digital era, having a personal portfolio website has become an

essential part of professional identity and career growth. A personal portfolio
serves as a digital resume that not only presents an individual’s academic
background and technical skills but also demonstrates creativity, design sense,
and technical capability. Unlike a traditional resume, a portfolio website provides
an interactive and dynamic platform where potential employers, clients, or
collaborators can easily explore a person’s work and achievements in detail.

For students and professionals in the field of computer science and web
development, a portfolio is a crucial medium to showcase projects, coding
skills, and web design abilities. It reflects both technical knowledge and
personal branding. Employers often look for individuals who can practically
demonstrate their skills rather than only listing them on paper, and a well-
designed portfolio fulfills that need effectively.

A personal portfolio also helps build online visibility and credibility, allowing
others to connect through integrated links like LinkedIn, GitHub, or email. It
demonstrates professional presentation, attention to detail, and communication
skills.

Moreover, developing a personal portfolio enhances learning by providing

hands-on experience in web design, development, and deployment. It
encourages continuous improvement and creativity while staying updated with
modern web technologies. Hence, the creation of a personal portfolio is not just
a presentation tool but also a career-building asset that represents one’s
professional identity in the competitive digital world.

4
1.5 Overview of the Internship

The internship was undertaken at Skilldux Edutech Private Limited, a reputed

company specializing in software development, IT training, and educational
technology solutions. The training period provided a valuable opportunity to
gain practical exposure to real-world web development environments and apply
the theoretical knowledge acquired during academic studies.

During the internship, the focus was primarily on the design and development
of a personal portfolio website under the domain of Web Development. The
training involved learning the essential tools and technologies such as HTML5,
CSS3, and responsive design principles for building modern, interactive, and
user-friendly websites. Interns were guided by experienced mentors who
provided insights into UI/UX design, responsive layout creation, and website
deployment using hosting platforms like Netlify.

The internship also emphasized version control and collaboration using Git
and GitHub, enabling participants to manage their code efficiently and
understand industry-standard project workflows. Weekly tasks and evaluations
were conducted to assess progress and ensure continuous learning.

The training experience helped in improving both technical and professional

skills, including problem-solving, time management, creativity, and teamwork. It
also provided an understanding of how front-end development integrates with
overall web solutions, preparing the intern for future professional challenges in
the IT industry.
By the end of the internship, the personal portfolio website was successfully
designed, developed, and deployed online.
5
 CHAPTER 2
COMPANY PROFILE

Name of the Firm : SkillDux Edutech Private Limited

Industry Type : SkillDux operates in the EdTech (Educational Technology)

sector, specializing in online professional development
History : Established on December 13, 2018, in Nagercoil, Tamil
Nadu, SkillDux Edutech Private Limited was incorporated as
a private limited company under the Corporate Identification
Number (CIN) U72900TN2018PTC126311. The company is
actively engaged in providing online education and training
services, focusing on emerging technologies and professional
development.

projects :  Generative Adversarial Networks (GANs)

 Generative Artificial Intelligence
 Deep LSTM Networks
 Deep Recurrent Neural Networks
 NARX Neural Networks
 Convolutional Neural Networks

Official Website : [Link]

6
2.1 About Skilldux private Limited

SkillDux Edutech is a prominent EdTech company based in Nagercoil, Tamil

Nadu, specializing in advanced online training for professionals. The company
offers a diverse range of courses in emerging technologies such as Machine
Learning, Deep Learning, Artificial Intelligence, and Generative AI. Their
programs are designed to provide in-depth theoretical knowledge complemented
by practical case studies and numerical examples. SkillDux aims to empower
learners with the skills necessary to excel in the rapidly evolving tech landscape

2.2 vision and mission

Vision:
To become a leading global platform for professional and technology education,
empowering learners with advanced skills in Artificial Intelligence, Machine
Learning, and emerging technologies, enabling them to excel in the digital era.

Mission:
Deliver high-quality, practical, and industry-relevant training programs that
bridge the gap between academic knowledge and professional requirements.
Foster a culture of continuous learning, innovation, and skill development for
students, professionals, and organizations.
Leverage modern technologies to provide accessible and interactive learning
experiences for learners worldwide.
Support learners in achieving career growth, technological proficiency, and
real-world problem-solving capabilities.

7
2.3 Services provided

 Online Training Programs – Comprehensive courses in Artificial

Intelligence (AI), Machine Learning (ML), Deep Learning, and Data
Science.
 Generative AI & Neural Networks Courses – Training on GANs, LSTM,
RNN, NARX, CNN, and other advanced neural network models.
 Corporate Training & Upskilling – Customized programs for companies
to enhance employees’ technical skills and productivity.
 Project-Based Learning – Hands-on projects and case studies to bridge
theory with practical application.
 Career Support & Mentorship – Guidance for students and professionals
to build strong portfolios and excel in the tech industry.
 Workshops & Seminars – Specialized sessions on emerging technologies,
trends, and industry best practices.
 E-Learning Resources – Access to tutorials, notes, and online materials to
support self-paced learning.

8
 CHAPTER 3

PROJECT OVERVIEW: DESIGIN AND DEVELOPMENT OF A

PERSONAL PORTFOLIO WEBSITE

3.1 Website development

Website development is the process of creating, designing, and maintaining

websites to provide an engaging online presence for individuals, businesses, and
organizations. It involves both frontend development, which focuses on the
visual interface and user experience, and backend development, which handles
server-side logic, databases, and functionality. A well-developed website ensures
smooth navigation, fast loading speed, responsiveness across devices, and secure
data handling.
Modern website development leverages technologies such as HTML, CSS,
JavaScript, [Link], [Link], PHP, and databases to build dynamic,
interactive, and visually appealing web applications. Developers also implement
features like forms, e-commerce platforms, content management systems, and
API integrations to enhance functionality and meet user requirements.
The process begins with understanding client needs, followed by planning,
designing wireframes, coding, testing, and deploying the website. Continuous
maintenance and updates ensure that the website remains secure, functional, and
aligned with evolving business goals.
Website development plays a crucial role in today’s digital era, as it helps
businesses establish credibility, reach a wider audience, and drive engagement.
By combining technical expertise with creativity, developers create websites that
are not only visually appealing but also optimized for performance, usability, and
search engine visibility, ultimately contributing to business growth and customer
satisfaction.

9
3.2 Front-End Development (HTML, CSS)

Front-end development is the process of creating the visual and interactive

aspects of a website that users directly interact with. It involves designing the
layout, structure, and styling of web pages using technologies like HTML
(HyperText Markup Language) and CSS (Cascading Style Sheets).

HTML provides the basic structure of a website by defining elements such as

headings, paragraphs, images, links, tables, and forms. It ensures that the
content is organized and accessible across different browsers. CSS is used to
enhance the visual appearance by applying styles such as colors, fonts, spacing,
positioning, and responsiveness. CSS also enables developers to create
modern, visually appealing, and consistent designs across various devices,
including desktops, tablets, and smartphones.

Front-end development focuses on delivering a user-friendly interface,

ensuring smooth navigation and an engaging user experience. Techniques like
flexbox, grid layout, media queries, and transitions are used to make
websites responsive and interactive. By combining HTML and CSS effectively,
developers can create professional websites that are both functional and
aesthetically pleasing, forming the foundation for dynamic and modern web
applications.

Developers use semantic HTML elements to make websites readable by screen

readers and accessible to users with disabilities. CSS techniques such as
minification, efficient selectors, and optimized animations help reduce page
load times and improve overall performance. By focusing on these aspects,
front-end development not only ensures a visually appealing and interactive
website but also provides an inclusive and smooth experience for all users,
which is essential in modern web design standards.
10
3.3 Implementation of Sections

The implementation of sections is a crucial step in web development, where the

website’s layout is structured into distinct, functional areas to improve
readability, navigation, and user experience. Each section of a website serves a
specific purpose, such as showcasing the header, navigation menu, about
section, services, portfolio, contact form, and footer.

During implementation, developers use HTML to define the structural elements

of each section. For instance, <header> is used for the top navigation and
branding, <section> for content divisions like services or portfolio, <article>
for blog content, and <footer> for contact information and social links. CSS is
then applied to style these sections, ensuring consistency in color schemes,
typography, spacing, and alignment. Developers often use Flexbox and Grid
layouts to make sections responsive and adaptable to various screen sizes,
creating a seamless experience across devices.

Additionally, the use of class and ID selectors allows for targeted styling and
interaction, while media queries help adjust the layout dynamically for mobile,
tablet, and desktop views. The implementation process also includes embedding
interactive elements such as buttons, forms, sliders, and links within each
section to enhance functionality.

By systematically implementing sections, developers can create a well-

organized and visually appealing website that guides users intuitively through
the content, improves engagement, and reflects the website’s overall purpose
and branding effectively.

11
3.4 Home Section / About Section

Figure 3.4 Home Page Design of the Portfolio Website

The Home Section serves as the first point of interaction for users visiting a
website. It is designed to provide a welcoming and informative introduction,
highlighting the key purpose, services, or offerings of the website. Typically, it
includes elements such as the logo, navigation menu, hero banner, call-to-action
buttons, and brief introductory text. In the development of this section, HTML is
used to structure the content, while CSS ensures visually appealing layouts,
typography, and responsive design. Interactive elements such as sliders,
animations, or hover effects can be incorporated to enhance user engagement and
provide a modern, professional appearance.

Developers often use HTML semantic elements like <section> and <article> to
organize content and CSS styling to differentiate headings, paragraphs, a images,

12
 Figure 3.4.1 About Section Layout

The About Section is intended to give users insight into the individual,
organization, or company behind the website. It usually contains a short
biography or company profile, vision and mission statements, skills, and
achievements. This section builds credibility and helps establish a connection
with the audience. Developers often use HTML semantic elements like
<section> and <article> to organize content and CSS styling to differentiate
headings, paragraphs, and images, ensuring readability and aesthetic appeal.
Responsive design techniques such as flexbox, grid layout, and media queries
ensure that the About Section displays correctly on all devices, providing a
consistent and professional user experience.

13
3.5. Services Section

Figure 3.5 Services Section Interface

The Services Section is designed to showcase the offerings or expertise of

an individual or organization in a clear and organized manner. In a website,
this section provides visitors with a quick overview of the core services,
helping them understand what the website or business provides. Typically,
services are displayed using cards, icons, headings, and short descriptions
to make the content visually appealing and easy to scan. In development,
HTML is used to structure each service item, while CSS is applied to style
cards, add hover effects, and maintain a consistent color scheme.
Responsive design techniques, including Flexbox and Grid, ensure that the
services are displayed properly on all devices, from desktops to mobile
screens.

14
3.5.1 Contact Section

Figure 3.5.1 Contact Form Design

The Contact Section allows users to communicate with the website owner
or organization. It usually contains contact forms, email addresses, phone
numbers, physical addresses, and social media links. This section is
crucial for generating leads, inquiries, or feedback. Implementation involves
using HTML forms for input fields, CSS for styling, and optional
JavaScript for form validation. Embedded maps or interactive elements
can enhance user experience and provide additional guidance.

In my portfolio project, the Services Section highlights my web

development, UI/UX design, and project work, while the Contact Section
includes a form for visitors to send messages directly, along with social
media icons for quick connection. Both sections are responsive, interactive,
and visually aligned with the overall website design, ensuring a
professional and user-friendly interface that encourages engagement.

15
3.6 CSS Styling (Animations, Buttons, Layouts)

CSS (Cascading Style Sheets) plays a vital role in enhancing the visual
presentation, interactivity, and user experience of a website. It allows
developers to control the layout, color, typography, spacing, and
responsiveness of web pages. In this project, CSS was extensively used to
style various sections, making the website look attractive, modern, and
professional.

Layouts were designed using Flexbox and CSS Grid, which helped in
aligning elements efficiently and maintaining consistency across devices.
These layout techniques ensure that all components, such as images, text,
and buttons, are well-structured and adapt smoothly to different screen sizes.
Proper use of margins, paddings, and positioning provided a clean and
organized appearance.

Buttons were styled with custom colors, rounded corners, hover effects, and
transitions to make them visually appealing and interactive. CSS pseudo-
classes such as :hover, :active, and :focus were used to enhance user
interaction. This added a dynamic feel to the website and encouraged visitors
to explore different sections easily.

Animations and transitions were implemented to create smooth effects,

such as fading, sliding, and scaling, which improved the overall user
experience. Keyframe animations were used to animate elements like
headings, icons, and images, giving the website a modern and engaging
look. Subtle animations also helped draw attention to important sections
without distracting the user.

By effectively using CSS for animations, buttons, and layouts, the website
achieved a visually appealing, interactive, and responsive design .

16
3.7 Debugging and Error Fixing

Debugging and error fixing are essential stages in the web development
process, ensuring that the website functions smoothly and efficiently.
During the development of my project, several issues related to layout
alignment, responsiveness, and code functionality were encountered. The
debugging process involved identifying, analyzing, and resolving these
errors to improve both the performance and user experience of the website.

The first step in debugging involved code validation and inspection. Tools
such as browser developer consoles (Google Chrome DevTools) were
used to check for HTML, CSS, and JavaScript errors. Console logs helped
identify missing tags, incorrect syntax, and broken links. CSS issues such as
improper alignment, margin inconsistencies, and overlapping elements were
fixed using real-time style inspection. The responsiveness of the layout was
tested across different screen sizes to ensure that all sections displayed
correctly on mobile, tablet, and desktop devices.

For functionality-related issues, JavaScript debugging techniques were

applied to identify and resolve errors in interactive components like buttons,
animations, and form validation. Errors such as event misfires or
unresponsive elements were rectified through careful review and testing.
Code editors like Visual Studio Code provided integrated linting features,
which automatically detected syntax and formatting issues, making the
process faster and more efficient.

Additionally, cross-browser compatibility testing was performed to ensure

consistent performance across browsers like Chrome, Firefox, and Edge.
Minor performance optimizations, including image compression and code
minification, were also implemented to enhance page loading speed.

17
Through continuous debugging and testing, the final website became
error-free, responsive, and user-friendly. This phase not only improved
the technical quality of the project but also enhanced my problem-solving
and analytical skills as a web developer, providing valuable experience in
handling real-world development challenges.

3.8 Deployment and Hosting

Deployment and hosting are the final and most important stages in the web
development process, where the completed website is made available to
users on the internet. After the design and development phases were
completed, the project was carefully tested for functionality, responsiveness,
and performance before being deployed to a hosting platform.

Deployment involves transferring the website files — including HTML,

CSS, JavaScript, and media resources — from the local development
environment to a live web server. This ensures that the site can be accessed
using a domain name or URL. In this project, the deployment process was
carried out using GitHub Pages, a free and reliable hosting service ideal for
static websites. The files were uploaded to a GitHub repository, and the
project was published directly through the platform’s built-in deployment
feature.

Hosting ensures that the website remains accessible to users at all times. A
good hosting platform provides high uptime, fast loading speeds, and data
security. GitHub Pages automatically handles these aspects, offering smooth
hosting with global content delivery and version control integration.
Additionally, the website was tested post-deployment to verify that all links,
forms, and media files functioned correctly.

18
Before hosting, the project files were optimized by compressing images,
minifying CSS and JavaScript, and removing unnecessary code to
improve speed and performance. Version control through Git was used to
manage updates and maintain backup copies efficiently.

Overall, the deployment and hosting process ensured that the website was
fully functional, accessible, and ready for public use. This phase not only
marked the successful completion of the project but also provided hands-on
experience with modern deployment tools and web hosting techniques
essential for any professional web developer.

After deployment, the website was tested on multiple browsers — including

Chrome, Edge, and Firefox — and across various devices to confirm that
the layout, animations, and interactive elements worked consistently. The
hosting configuration also ensured automatic updates whenever new
commits were pushed to the GitHub repository.

The successful deployment and hosting of the portfolio website

demonstrated practical knowledge of real-world hosting environments and
version control systems. This process provided valuable experience in
managing website performance, ensuring reliability, and maintaining a
professional online presence accessible to potential users, clients, or
employers.

19
3.9 Hosting on Netlify

Hosting on Netlify is one of the most efficient and modern ways to deploy
and manage websites. It provides an automated platform that simplifies the
process of taking a project live directly from a Git repository. For this
project, the portfolio website was deployed using Netlify, which offered
high performance, security, and continuous integration features — all
essential for a professional-grade web application.

The deployment process began by building and testing the website locally
to ensure that all components, such as navigation, animations, and form
submissions, worked perfectly. Once verified, the project files were
uploaded to a GitHub repository. Netlify was then connected to the
repository, allowing for automatic deployment whenever new updates
were committed. This feature ensured that every change made in the project
was instantly reflected on the live website without manual intervention.

Netlify’s drag-and-drop deployment option also provides a simple way to

host static sites directly from local files. The platform automatically
configures the domain and generates a secure HTTPS link using SSL
encryption, ensuring that the hosted site is safe and trusted.

To improve website performance, optimization steps were performed before

hosting — including minifying CSS and JavaScript, compressing images,
and cleaning unnecessary code. Netlify’s global Content Delivery Network
(CDN) distributed the site’s content across multiple servers, ensuring faster
loading times for users from different geographical regions.

20
3.10 Version Control using Git/GitHub

Version control is a fundamental aspect of modern web development that

allows developers to manage changes in their codebase efficiently. It
provides a system for tracking revisions, maintaining project history, and
collaborating effectively with multiple contributors. In this project, Git and
GitHub were used as version control tools to manage the entire lifecycle of
the portfolio website — from initial setup to deployment.

Git is a distributed version control system created by Linus Torvalds in

2005. It allows developers to record changes in their source code, revert to
previous versions when necessary, and work on multiple features
simultaneously using branches. Git ensures that every modification made to
a file is documented with a timestamp and author information, making it
easier to understand the project’s evolution. This helps maintain the integrity
of the project and reduces the risk of losing important work.

During the development of the personal portfolio website, Git was used to
initialize a local repository using the command git init. Each update made to
the project was tracked using git add and git commit commands, ensuring
that all progress was saved systematically. These commits served as
checkpoints, allowing the project to be rolled back or reviewed at any stage
of development. Branching features were utilized to experiment with
different layouts, color schemes, and animations without affecting the main
version of the site.

GitHub, an online platform built on top of Git, was used to host the
repository and facilitate cloud-based collaboration and backup. It provides
a user-friendly interface for managing repositories, visualizing changes, and
deploying web applications.

21
Once the local repository was set up, it was connected to GitHub using the
command git remote add origin. The project files were then uploaded using
git push, making them accessible online.

GitHub also provided version tracking, issue management, and pull

request features that are essential for collaborative development. Even
though this was an individual project, these features simulated a professional
team environment. If errors occurred or new features were added, changes
could be reviewed, merged, or reverted easily.

One of the most useful integrations was between GitHub and Netlify,
which allowed for continuous deployment (CI/CD). Every time a new
commit was pushed to the GitHub repository, Netlify automatically detected
the update, built the project, and deployed the new version live. This
integration streamlined the development process, ensuring that the latest
version of the portfolio website was always accessible online.

Using Git and GitHub also enhanced productivity and provided a clear
record of the project’s progress. The ability to view commit history helped
track the evolution of the website, making debugging and maintenance much
easier. Additionally, GitHub’s collaborative features, such as forking and
cloning, provided valuable experience with industry-standard practices used
in professional development environments.

In conclusion, Version Control using Git and GitHub played a crucial role
in maintaining the structure, safety, and reliability of the project. It ensured
smooth workflow management, simplified updates, and enabled continuous
improvement of the portfolio website — demonstrating professional skills
essential for any modern web developer.

22
 CHAPTER 4

CONCLUSION

The internship project titled “Design and Development of a Personal

Portfolio Website” has been a highly valuable and enriching learning
experience. It provided an excellent opportunity to apply the theoretical
concepts of web design and development into a real-time practical project.
Throughout the internship, each phase — from initial design to final
deployment — enhanced both technical and creative skills, strengthening
the understanding of how modern websites are structured, designed, and
maintained.

The project aimed to create a professional and responsive personal

portfolio website that showcases an individual’s skills, educational
qualifications, projects, and achievements. Using core web technologies
such as HTML, CSS, and JavaScript, the website was designed with a
user-friendly interface and visually appealing layout. The project
emphasized the importance of UI (User Interface) and UX (User
Experience) design principles, ensuring that the website not only looked
attractive but also offered smooth navigation and interactivity.

The development process involved creating multiple sections like Home,

About, Services, and Contact, each carefully structured to represent
personal and professional details clearly. Special focus was given to CSS
styling, animations, and responsive layouts to enhance the overall look
and performance of the site across devices. Debugging and testing were
integral parts of the project, ensuring that all features functioned properly
and that the design was free of errors.

23
The use of Git and GitHub for version control played a crucial role in
managing project updates efficiently. It helped in tracking progress,
reverting unwanted changes, and maintaining a clean project history.
Furthermore, Netlify hosting provided exposure to real-world deployment
practices, allowing the website to be accessible online with features like
continuous integration and automatic updates.

Through this internship, practical skills in front-end development,

problem-solving, and debugging were significantly improved. It also
encouraged independent learning, creativity, and attention to detail —
qualities that are essential for any aspiring web developer. Working on this
project enhanced confidence in handling real-world web technologies and
understanding the workflow followed in professional software development
environments.

In conclusion, the successful completion of this project marks a major

milestone in both academic and professional growth. The portfolio website
stands as a testament to the technical knowledge, creativity, and dedication
applied throughout the internship. It serves as a foundation for future
learning and can be further enhanced by integrating advanced technologies
like [Link], [Link], and databases to create a more dynamic and feature-
rich version in the future.

24
 CHAPTER 5

Future Enhancement

The project “Design and Development of a Personal Portfolio Website” has

been successfully completed with all the planned features and functionalities.
However, there is always scope for further improvement and enhancement to
meet the evolving needs of users and to align with modern web development
standards. Future enhancements will focus on improving performance, adding
dynamic features, and enhancing the overall user experience.

One of the key improvements planned for the future is to convert the static
portfolio website into a fully dynamic and database-driven application. By
integrating backend technologies such as [Link], [Link], and MongoDB,
the website can store and manage data dynamically. This will allow features
like an admin dashboard for updating portfolio content such as projects, skills,
and achievements without manually editing the code.

Another major enhancement is to develop the project using a modern frontend

framework like [Link] or [Link]. These frameworks will provide
component-based architecture, improve performance, and make the application
more interactive and scalable. They also support features like routing, API
integration, and real-time updates, which will give the portfolio a more
professional touch.

The website can also be enhanced by implementing dark/light mode toggling,

multi-language support, and advanced animation effects using CSS libraries
or GSAP (GreenSock Animation Platform). This will help improve visual
appeal and accessibility for users with different preferences.

25
 CHAPTER 6

APPENDICES
6.1 Code Snippets
HTML Snippets

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>blessin - Frontend Developer Portfolio</title>

<link rel="stylesheet" href="[Link]

awesome/6.0.0-beta3/css/[Link]">

<link rel="stylesheet" href="css/[Link]">

<script src="js/[Link]"></script>

</head>

<body>

<header class="header">

<a href="#home" class="logo">Portfolio.</a>

<nav class="navbar">

<a href="#home" class="active">Home</a>

<a href="#about">About</a>

<a href="#services">Services</a>

<a href="#portfolio">Portfolio</a>

<a href="#contact">Contact</a>

</nav>

26
 </header>

<section class="home" id="home">

<div class="home-content">

<p class="greeting">Hello, It's Me</p>

<h1>Blessin</h1>

<h3>And I'm a <span class="text-accent">Frontend Developer</span></h3>

<p>Building delightful web experiences with modern HTML, CSS, and

JavaScript

</p>

<div class="social-media">

<ahref="[Link] class="fab fa-facebook-

f"></i></a>

<a href="[Link] class="fab fa-twitter"></i></a>

<a href="[Link] class="fab fa-

instagram"></i></a>

<a href="[Link] class="fab fa-linkedin-

in"></i></a>

</div>

<a href="assets/[Link]" class="btn">Download CV</a>

</div>

<div class="home-img">

<img src="img/[Link]" alt="BLESSIN Profile">

</div>

</section>
27
 <section class="about" id="about">

<div class="about-img">

<img src="img/[Link]" alt="blessin">

</div>

<div class="about-content">

<h2>About Me</h2>

<h3>Frontend Developer!</h3>

<p>I am Blessin, a Frontend Developer passionate about building modern,

responsive, and user-friendly websites.

I specialize in HTML, CSS, and JavaScript, and I’m currently learning React to create
dynamic web applications.

My focus is on delivering clean code, attractive designs, and seamless user

experiences.</p>

<a href="#" class="btn">Read More</a>

</div>

</section>

<section class="services" id="services">

<h2 class="heading">Our Services</h2>

<div class="services-container">

<div class="services-box">

<i class="fa-solid fa-code"></i>

<h3>Web Development</h3>

<p>Responsive websites using semantic HTML, modern CSS, and JS

frameworks.</p>

<a href="#" class="btn">Read More</a>

28
 </div>

<div class="services-box">

<i class="fa-solid fa-pencil-ruler"></i>

<h3>ἱ Network Testing</h3>

<p>Testing networks for performance and security. Ensuring smooth and

reliable connectivity.</p>

<a href="#" class="btn">Read More</a>

</div>

<div class="services-box">

<i class="fa-solid fa-chart-line"></i>

<h3>Project Collaboration</h3>

<p>Working in teams to deliver projects efficiently with proper workflow

management.</p>

<a href="#" class="btn">Read More</a>

</div>

</div>

</section>

<section class="portfolio" id="portfolio">

<h2 class="heading">Latest Project</h2>

<div class="portfolio-container">

<div class="portfolio-box"><img src="[Link]" alt="Project 1"></div>

<div class="portfolio-box"><img src="[Link]" alt="Project 2"></div>

<div class="portfolio-box"><img src="[Link]" alt="Project 3"></div>

29
 <div class="portfolio-box"><img src="[Link]" alt="Project 4"></div>

</div>

</section>

<section class="contact" id="contact">

<h2 class="heading">Contact Me!</h2>

<form action="#">

<div class="input-box">

<input type="text" placeholder="Full Name">

<input type="email" placeholder="Email Address">

</div>

<div class="input-box">

<input type="text" placeholder="Mobile Number">

<input type="text" placeholder="Email Subject">

</div>

<input type="submit" value="Send Message" class="btn">

</form>

</section>

<footer class="footer">

<p>Copyright &copy; 2025 by blessin | All Rights Reserved.</p>

</footer>

<script src="js/[Link]"></script>

</body>

</html>

30
CSS Snippets

*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
outline: none;
border: none;
scroll-behavior: smooth;
}
Button Styling
.btn {

background-color: #007bff;

color: #fff;

padding: 10px 20px;

border-radius: 8px;

text-decoration: none;

transition: background 0.3s ease;

.btn:hover {

background-color: #0056b3;

31
Responsive Layout (Flexbox)

.services-container {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

.service-card {

flex: 1 1 30%;

margin: 10px;

Animations

@keyframes fadeIn {

from {opacity: 0;}

to {opacity: 1;}

.hero-text {

animation: fadeIn 2s ease-in-out;

JavaScript Snippets

Form Validation

function validateForm() {

var name = [Link]["contactForm"]["name"].value;

var email = [Link]["contactForm"]["email"].value;

if (name == "" || email == "") {

alert("All fields are required.");

return false;

32
 }

Scroll to Section

[Link]('a[href^="#"]').forEach(anchor => {

[Link]('click', function(e) {

[Link]();

[Link]([Link]('href')).scrollIntoView({

behavior: 'smooth'

});

});

});

Toggle Mobile Menu

const menuBtn = [Link]('.menu-btn');

const navMenu = [Link]('.nav-menu');

[Link]('click', () => {

[Link]('active');

});

33
 CHAPTER 7

References

1. W3Schools. HTML Tutorial. Available at: [Link]

2. W3Schools. CSS Tutorial. Available at: [Link]

3. W3Schools. JavaScript Tutorial. Available at: [Link]

4. Mozilla Developer Network (MDN). Web Docs on HTML, CSS, and

JavaScript. Available at: [Link]

5. GitHub Documentation. Understanding Version Control with Git. Available at:

[Link]

6. Netlify Documentation. Deploying Websites and Continuous Integration.

Available at: [Link]

7. Skilldux Private Limited. Company Overview and Internship Guidelines.

Available at: [Link]

8. GeeksforGeeks. Web Development Tutorials and Practice Projects. Available

at: [Link]

9. FreeCodeCamp. Responsive Web Design Certification. Available at:

[Link]

10. Coursera. Front-End Web Development Specialization. University of London,

2024.

11. Traversy Media. Modern HTML & CSS Crash Course (YouTube Tutorial),
2024.

12. CodeWithHarry. Web Development Full Course (YouTube Tutorial), 2024.

13. Stack Overflow. Web Development Community Discussions. Available at:

[Link]

14. TutorialsPoint. Web Technologies and Frameworks Overview. Available at:

[Link]

15. CSS-Tricks. Tips and Best Practices for Modern CSS Design. Available at:
[Link]

34