SUMMER INTERNSHIP REPORT

on

“Personel Portfolio Website”

submitted in the partial fulfillment of the requirement for the award of the degree of

Bachelor of Technology
In
Computer Science & Engineering
Submitted by:

LOVISH BANSAL

A5010221065

Under the guidance of

Dr. SHWETA SINHA

Professor, CSE, ASET

Department of Computer Science & Engineering

Amity School of Engineering & Technology
Amity University, Haryana Gurugram, India
April 2024
Department of Computer Science and Engineering
Amity School of Engineering and Technology

DECLARATION

We are student of Bachelor & Master of Technology in Computer Science and Engineering, Amity
School of Engineering and Technology, Amity University Haryana, hereby declare that I am fully
responsible for the information and results provided in this project report titled “Personel Portfolio
Website” submitted to the Department of Computer Science and Engineering, Amity School of
Engineering and Technology, Amity University Haryana, Gurgaon for the partial fulfilment of the
requirement for the award of the degree of Bachelor of Technology in Computer Science and
Engineering. I have taken care in all respects to honor intellectual property rights and have
acknowledged the contributions of others for using them. I further declare that in case of any violation
of intellectual property rights or copyrights, I as a candidate will be fully responsible for the same. My
supervisor should not be held for full or partial violation of copyrights if found at any stage of my
degree.

Date: April 2024 Lovish

i
Department of Computer Science and Engineering
Amity School of Engineering and Technology

CERTIFICATE

This is to certify that the work in the project report entitled “Personel portfolio Website” by Lovish
Bansal bearing A50105221065 is a bonafide record of project work carried out by him under my
supervision and guidance in partial fulfilment of the requirements for the award of the degree of
Bachelor of Technology in Computer Science and Engineering in the Department of Computer Science
and Engineering, Amity School of Engineering and Technology, Amity University Haryana, Gurgaon.
Neither this project nor any part of it has been submitted for any degree or academic award elsewhere.

Date: April 2024 Dr. Shweta Sinha

Professor
CSE, ASET

ii
ACKNOWLEDGEMENT

This Project has been a wonderful experience, which consumed hard work and pure dedication. The
successful completion and compilation of this report would not have been possible if I didn’t have the
support of some very important people, who have been a constant source of guidance and supervision.
Therefore, I would like to extend my sincere gratitude to each one of them.

It’s my radiant sentiments to place on record my best regards and express my sincere thanks to
Professor Dr. Surjeet Dalal my Supervisor for providing me with this opportunity to gain practical
field knowledge through this project.

I would like to thank the organization Technovale Prakriti Group and Mr. Tanmay Mukherjee, CEO,
Technovale Prakriti Global Innovations PVT. LTD. to give me the opportunity to intern and provide
training in the field of python for computer vision. I had a great experience and learnt a lot from the
faculties. I would also like to thank my faculty for giving me this auspicious opportunity.

iii
ABSTRACT

This report presents the development of a responsive Personal Portfolio Website, designed to showcase
professional skills, academic projects, and personal branding in a modern, web-accessible format. The
project employed a mobile-first responsive web design approach, utilizing fluid grid layouts, CSS3 media
queries, and flexible images to ensure optimal display across devices from smartphones to desktops. Initial
wireframes and high-fidelity mockups were crafted in Figma, providing a blueprint for intuitive navigation,
consistent visual hierarchy, and streamlined user experience Semantic HTML5 elements and modern CSS3
techniques were implemented to maintain code clarity, support accessibility standards, and enhance search
engine visibility. Interactive features such as smooth scrolling, dynamic project filtering, and contact form
validation were integrated using vanilla JavaScript to augment user engagement without over-reliance on
external libraries. Performance optimizations, including responsive image techniques and asset
minification, were implemented to reduce load times and conserve bandwidth on mobile networks.
Usability and accessibility were evaluated through cross-browser testing and adherence to WCAG
guidelines, leveraging semantic HTML to assist screen readers and improve overall accessibility. The
website is deployed on GitHub Pages, providing free, continuous hosting directly from the project
repository with support for custom domains and HTTPS encryption Future enhancements will focus on
backend integration for form submissions, SEO optimization, and potential progressive web app
capabilities to enable offline access and push notifications. Through this project, fundamental best practices
in modern web development were explored, highlighting the importance of responsive design, semantic
coding, and user-centric feature implementation in creating a professional digital presence.

iv
TABLE OF CONTENTS

DECLARATION i

CERTIFICATE ii

INTERNSHIP CERTIFICATE iii

ACKNOWLEDGEMENT iv

ABSTRACT v

CHAPTER 1 - INTRODUCTION 1

CHAPTER 2 - BACKGROUND STUDY 3

2.1 Personel Portfolio 3
2.2 Advantages of Personel Portfolio 5
2.3 Challenges faced during programming 6

CHAPTER 3 - DESIGN OF PROJECTS 9

3.1 Minimum Hardware Requirements 9
3.2 Software Requirements 10

CHAPTER 4 - PROJECT IMPLEMENTATION 11

4.1 Steps for Implementation 11
4.2 Output Screenshots 14

CHAPTER 5 - CONCLUSION AND FUTURE SCOPE 15

5.1 Conclusion of the program 15
5.2 Future scope of program 15

CHAPTER 6 - REFERENCE 17

v
CHAPTER 1
INTRODUCTION
In today’s digitally driven world, a personal portfolio website has become an essential tool for
professionals, especially in creative and technical fields. It serves as a central platform to showcase one's
work, skills, achievements, and personal brand to potential employers, clients, and collaborators. The
development of a personal portfolio website for Lovish Bansal is aimed at enhancing his professional
visibility by providing an interactive and responsive digital presence. This project emphasizes modern web
development practices such as semantic HTML5 for structured content, CSS3 with Flexbox and Grid for
responsive layouts, and JavaScript for interactivity and form validation. The website features sections like
Home, About Me, Skills, Projects, Education, and Contact, each designed with a user-friendly interface and
consistent visual hierarchy. Special attention has been given to ensuring mobile-first responsiveness,
accessibility, and search engine optimization. Hosting is implemented using GitHub Pages to ensure a
secure and cost-effective deployment with version control support. Overall, the project not only
demonstrates front-end development skills but also reflects the importance of self-presentation in the
evolving job market and the broader web development ecosystem.

6
CHAPTER 2
BACKGROUND STUDY

A personal portfolio website represents a powerful medium for self-promotion, especially for individuals in
technology, design, media, and related fields. In contrast to traditional resumes or printed portfolios, an
online portfolio provides a dynamic and interactive way to exhibit one’s skills, accomplishments, and
projects, while allowing for real-time updates and accessibility from anywhere in the world. The increasing
reliance on digital recruitment platforms and the shift toward remote work have further emphasized the
importance of having a personalized online presence. With recruiters and clients often conducting initial
evaluations through online research, a well-structured, visually appealing, and responsive portfolio can
serve as a first impression that distinguishes an individual in a competitive job market.

The foundation of this project lies in modern web development practices, particularly Responsive Web
Design (RWD), which ensures that websites adapt seamlessly across devices including smartphones,
tablets, laptops, and desktops. This is achieved through fluid grid layouts, flexible images, and media
queries, allowing content to scale proportionately across different screen sizes. A mobile-first approach is
adopted to prioritize functionality and performance on smaller screens, followed by progressive
enhancement for larger viewports. This strategy not only improves usability but also aligns with search
engine optimization (SEO) practices.

The project also emphasizes the use of semantic HTML5 to structure content meaningfully, aiding both
accessibility and search engine visibility. Coupled with CSS3 Flexbox and Grid, the layout becomes both
flexible and maintainable. Interactive elements such as project filtering, scroll animations, and form
validation are handled using vanilla JavaScript to ensure lightweight and efficient user experience. The
development process includes wireframing and visual prototyping using tools like Figma, which help
define the structure, user journey, and visual hierarchy before implementation.

The need for an accessible and responsive portfolio is particularly critical given the wide range of devices
and browsers used today. Inconsistencies in browser rendering, screen resolutions, and internet speeds pose
technical challenges that must be addressed through meticulous testing and optimization. Best practices,
including the use of compressed images, lazy loading, and asynchronous JavaScript execution, are
employed to ensure fast loading times and smooth performance.

This background study supports the rationale behind building a personalized portfolio website as not just a
technical project, but also a strategic tool for career advancement. It highlights the convergence of design,
technology, and branding in creating a compelling online identity that reflects the developer’s capabilities
and professionalism.

7
CHAPTER 3
DESIGN OF PROJECT

3.1 Minimum Hardware Requirements

1. CPU:
• Multi-core CPU is required.
• Recommended: Intel Core i5 or better for real-time processing.
2. GPU (Graphics Processing Unit):
• Dedicated GPU for faster training and real-time detection.
• NVIDIA GPUs are commonly used for deep learning tasks.
• Recommended: NVIDIA GeForce GTX 1060 or better.
3. Memory (RAM):
• Minimum of 8GB RAM recommended.
• Larger datasets and complex models may require 16GB or more.
4. Storage:
• SSD for faster data access preferred, but HDD can suffice.
5. Operating System:
• Object detection programs can run on Windows, macOS, or Linux.
• Ensure compatibility with necessary drivers and software.
6. CUDA Support:
• Important if using NVIDIA GPUs.
• CUDA allows GPU acceleration for deep learning tasks.
• Install required CUDA drivers.
7. HTML Environment:
• Object detection typically uses Python.
• Python environment (e.g., Anaconda) required.
• Install necessary libraries such as TensorFlow, PyTorch, etc.
8. Internet Connection:
• Required for downloading pre-trained models, datasets, and library updates.

8
3.2 Software Requirements
1. HTML:
A versatile and widely-used programming language, serves as the foundational
requirement for object detection. With Python 3.x as the recommended version, it
provides a robust environment for implementing and running object detection code,
offering support for numerous libraries and packages tailored to deep learning.
2. Bootstrap Framework:
Selecting a Bootstrap framework, such as MaterialUI, or Figma, is pivotal in shaping
the development of object detection models. These frameworks equip developers
with the tools and resources needed to build and train neural networks for object
recognition tasks.
3. Javascript
javascript is a critical component for image and video processing in projects. Its
capabilities span image manipulation, feature extraction, and real-time video
analysis, making it indispensable for preprocessing and post-processing tasks in
object detection pipelines.
4. Version Control (e.g., Git):
Version control tools like Git provide a structured approach to managing the
codebase of your object detection project. They enable collaborative development,
code tracking, and easy rollback to previous versions, enhancing project organization.
5. IDE(e.g., Visual Studio Code):
Visual Studio Code, also commonly referred to as VS Code, is a source-code editor
made by Microsoft with the Electron Framework, for Windows, Linux and macOS.

Figure 3.1: VS Studio Code

9
CHAPTER 4
PROJECT IMPLEMENTATION

4.1 Steps for Implementation

The implementation of the personal portfolio website involved a systematic, step-by-step approach, starting
from ideation and planning, moving through design and development, and concluding with deployment and
testing. Each phase was critical in ensuring that the final product was both technically sound and visually
compelling.

Step 1: Requirement Gathering and Planning

The first phase involved identifying the objectives of the portfolio website—namely, to showcase projects,
skills, education, and contact information in a clean, professional layout. Planning also involved deciding
the site structure (Home, About, Skills, Projects, Education, Contact), selecting appropriate tools (HTML5,
CSS3, JavaScript, Figma, and GitHub Pages), and setting milestones for development.

Step 2: Wireframing and UI/UX Design

Using Figma, wireframes were created for both desktop and mobile layouts to visualize the structure,
navigation, and user journey. The designs focused on maintaining a clean interface, consistent typography,
and a clear visual hierarchy. Feedback was incorporated to finalize a responsive and user-friendly design.

Step 3: Setting Up the Project Environment

A new project directory was initialized using a basic file structure:
index.html for the homepage
style.css for styling
script.js for interactivity
images/ for media assets
Version control was established using Git, and the project was hosted on GitHub for easy collaboration and
deployment.

Step 4: HTML Structure (Semantic Markup)

HTML5 was used to build a semantic structure for each section of the site:
<header> for the navigation bar
<main> for main content (About, Skills, Projects, Education)
<footer> for contact details and links
This improves both accessibility and SEO, while ensuring cleaner code.

Step 5: Styling with CSS (Responsive Design)

The site was styled using CSS3 with a mobile-first approach. Responsive design was achieved using:
Flexbox and CSS Grid for layout alignment
Media queries for device adaptability
Custom fonts, color palette, and hover animations for visual appeal
Special care was taken to optimize styling for mobile, tablet, and desktop views.

Step 6: Adding Interactivity with JavaScript

JavaScript was used to:
Enable smooth scrolling between sections
Validate the contact form
Add interactive animations (e.g., reveal on scroll, back-to-top button)
This enhanced user experience without introducing unnecessary dependencies.

10
Step 7: Performance Optimization
Images were compressed, CSS and JS files were minified, and lazy loading was implemented where
applicable. These steps reduced page load times and improved the site’s overall performance on slower
networks.

Step 8: Accessibility Improvements

ARIA labels and keyboard navigation were added to ensure the website was usable by individuals relying
on assistive technologies. Alt tags were used for all images to enhance accessibility and SEO.

Step 9: Cross-Browser and Device Testing

The website was tested on major browsers (Chrome, Firefox, Safari, Edge) and devices (laptop, tablet,
mobile) to ensure consistent behaviour across platforms. Bugs and layout shifts were fixed during this
phase.

Step 10: Deployment on GitHub Pages

After final testing, the project was pushed to GitHub, and GitHub Pages was configured for free hosting. A
custom domain was linked, and HTTPS was enabled to ensure secure access.

11
4.1 Output Screenshots:

Figure 4.9: About Me Section

Figure 4.10: Testimonials

12
CHAPTER – 5
CONCLUSION AND FUTURE SCOPE

5.1 Conclusion of the Program

The development of the personal portfolio website successfully achieved its objective of creating a
responsive, interactive, and professional digital platform to showcase the skills, projects, and academic
background of Lovish Bansal. Through the application of modern web technologies such as HTML5,
CSS3, and JavaScript, the website delivers a clean and user-friendly interface across all screen sizes,
ensuring accessibility and performance. The use of semantic HTML elements improved both SEO and
accessibility, while CSS Flexbox and Grid ensured layout responsiveness. JavaScript enhanced user
interaction, offering features such as smooth navigation, form validation, and animated transitions.

The project followed a structured implementation approach, beginning with research and requirement
gathering, followed by wireframing, development, testing, and deployment using GitHub Pages. As a
result, the final product is not only technically robust but also aesthetically aligned with modern web design
principles. This project has reinforced the importance of UI/UX design, responsive layouts, and clean code
practices in front-end development. Overall, the portfolio website serves as an essential tool for personal
branding and professional networking in a highly competitive digital environment.

5.2 Future Scope of the Program

While the current implementation of the personal portfolio website is fully functional, several
enhancements can be considered in future versions to extend its utility and performance:
Backend Integration: Incorporating a backend (using PHP, Node.js, or Firebase) can enable dynamic
features like storing form submissions, visitor analytics, or even a content management system (CMS) for
easier updates.

Blog Section: Adding a blog module can allow for the publication of technical articles, case studies, and
tutorials, improving engagement and search engine visibility.

Progressive Web App (PWA): Transforming the website into a PWA would allow users to install it as an
app on their devices and access content offline, improving accessibility and user retention.
Dark Mode Support: Offering light and dark themes can improve user comfort, especially in low-light
environments, while also reflecting modern UI trends.

Accessibility Optimization: Further refinements like keyboard navigation enhancements, contrast

adjustments, and ARIA support can improve the experience for users with disabilities.
Multilingual Support: Implementing multiple language options can increase reach and make the portfolio
accessible to a wider audience across regions.

Database-Driven Project Section: Dynamically loading project details from a JSON file or a real-time
database would reduce the need to manually edit the HTML whenever a new project is added.
These future improvements would not only enhance the website's functionality and user experience but also
expand its potential to serve as a dynamic and scalable personal branding platform.

13
CHAPTER – 6
REFERENCE
• Mozilla Developer Network (MDN). HTML: Hypertext Markup Language.
https://developer.mozilla.org/en-US/docs/Web/HTML

• Mozilla Developer Network (MDN). CSS: Cascading Style Sheets.

https://developer.mozilla.org/en-US/docs/Web/CSS

• Mozilla Developer Network (MDN). JavaScript Guide.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

• Mozilla Developer Network (MDN). Using media queries.

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries

• Mozilla Developer Network (MDN). Responsive Web Design Basics.

https://developer.mozilla.org/en-

• GitHub Docs. GitHub Pages Basics.

https://docs.github.com/en/pages/getting-started-with-github-pages

• Figma. The Collaborative Interface Design Tool.

https://www.figma.com

• W3C. Web Content Accessibility Guidelines (WCAG) Overview.

https://www.w3.org/WAI/standards-guidelines/wcag/

• Smashing Magazine. Best Practices for Designing a Portfolio Website.

https://www.smashingmagazine.com/

14