Subject Name and Code: Academic Year:

Client Side Scripting 2023-24

Course Name: IF5I Semester: Fifth

A STUDY ON
Portfolio
MICRO PROJECT REPORT

Roll No. Name of Student Enrollment no Seat no

01 Roshni Manoj Yadav 2109350130

22 Shruti Deepak Gupta 2109350167

24 Shamik Vivek Jadhav 2109350170

Under the Guidance of

Prof. Shruthi Nandargi

In
3 Years of Diploma Programme in Engineering & Technology of Maharashtra State Board

of Technical Education,
ISO 9001:2008 (ISO/IEC-27001:2013)
SHIVAJIRAO S. JONDHLE POLYTECHNIC, ASANGAON.
 MAHARASHTRA STATE BOARD OF TECHNICALEDUCATION,
MUMBAI

CERTIFICATE
This is to certify that Mrs. Roshni Manoj Yadav Roll No.01 Of Fifth Semester of
INFORMATION TECHNOLOGY Diploma Programme in Informatiom Technology at
Shivajirao S. Jondhle Polytechnic Asangaon, Shahapur-421601 has completed the
Micro Project Satisfactorily in Subject–Client Side Scripting(22519). In the
academic year 2023-2024 as prescribed curriculum of I Scheme.

Place: Asangaon Enrollment No:2109350130

Mrs. Shruthi Nandargi Mrs. Shweta Chanchlani Dr. Sneha H. Jondhle

Seal of
Institute
 MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION,
MUMBAI

CERTIFICATE

This is to certify that Mrs. Shruti Deepak Gupta Roll No.22 Of Fifth Semester of
INFORMATION TECHNOLOGY Diploma Programme in Information
Technology at Shivajirao S. Jondhle Polytechnic Asangaon, Shahapur-421601 has
completed the Micro Project Satisfactorily in Subject–Client Side Scripting(22519).
In the academic year 2023-2024 as prescribed curriculum of I Scheme.

Place: Asangaon Enrollment No:2109350167

Date: / /2023 Exam Seat No:

Mrs. Shruthi Nandargi Mrs. Shweta Chanchlani Dr. Sneha H. Jondhle

Project Guide Head of the Department Principal

Seal of
Institute
 MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION,
MUMBAI

CERTIFICATE

This is to certify that Mr. Shamik Vivek Jadhav.Roll No.24 Of Fifth Semester of
INFORMATION TECHNOLOGY Diploma Programme in Information
Technology at Shivajirao S. Jondhle Polytechnic Asangaon, Shahapur-421601 has
completed the Micro Project Satisfactorily in Subject–Client Side Scripting(22519).
In the academic year 2023-2024 as prescribed curriculum of I Scheme.

Place: Asangaon Enrollment No:2109350170

Date: / /2023 Exam Seat No:

Mrs. Shruthi Nandargi Mrs. Shweta Chanchlani Dr. Sneha H. Jondhle

Seal of
Institute
 Index

Sr.No Title Page No

Abstract 1

1 Introduction 2

2 Source code 3-8

3 OutPut 9

4 Future Scope 10

5 Conclusion 11

6 Reference 12
 ABSTRACT

This project report presents the design, development, and launch of a personal
portfolio website, serving as a digital showcase of my professional journey and
creative accomplishments. The portfolio website encapsulates my commitment to
excellence, innovation, and growth in both web development and design. We explore
the conceptualization and objectives behind the project, outlining the technical
aspects, including the utilization of various tools and technologies, responsive design
considerations, and the integration of dynamic content.

We explore the conceptualization and objectives behind the project, outlining the
technical aspects, including the utilization of various tools and technologies,
responsive design considerations, and the integration of dynamic content. Challenges
encountered during development are discussed alongside the strategies employed to
address them. Moreover, the report delves into the website’s potential for future
enhancements and its role in fostering professional advancement. As we navigate this
report, we unveil the thought process, coding intricacies, and the aspirations that
propel the ongoing evolution of the portfolio website.
 1. INTRODUCTION
In this project, we dive deep into the conceptualization, design, development,
and deployment of my personal portfolio website. I explore the rationale
behind its creation and its alignment with my career objectives. This report
encapsulates the technical aspects, including the tools and technologies
employed, user experience considerations, responsive design elements, and the
incorporation of dynamic content. Additionally, it outlines the challenges
faced during the development phase and the strategies used to overcome them.
The journey doesn’t end with the launch; we will also discuss future
enhancements and how this digital platform contributes to my professional
growth. As we navigate through this project report, you’ll gain insights into
the thought process, the coding behind the scenes, and the aspirations that fuel
the continued evolution of my portfolio website.
 2. Source Code

<!DOCTYPE html>
<html lang=”en”>

<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Portfolio</title>
<link rel=”preconnect” href=https://fonts.googleapis.com>
<link rel=”preconnect” href=https://fonts.gstatic.com crossorigin>
<link
href=https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swa
p rel=”stylesheet”>
<link rel=”stylesheet” href=”style.css”>
</head>
<style>

• {
Margin: 0px;
Padding: 0;
}
Body {
Background-color: rgb(0, 0, 33);
Color: white;
}

Nav {
Display: flex;
Justify-content: space-around;
Align-items: center;
Height:80px;
Background-color: rgb(18, 18, 62);
}
Nav ul{
Display: flex;
Justify-content: center;
}
Nav ul li{
List-style: none;
Margin: 0px 23px;
}
Nav ul li a{
Text-decoration: none;
Color:aliceblue;
}
Nav ul li a:hover{
Color:rgb(142, 142, 222);
Font-size:1.4rem
}
.left{
Font-size: 1.5rem;
}
.firstsection{
Display:flex;
 Justify-content: space-around;
Margin: 80px 0px;
}
.firstsection > div{
Width:30%;
}
.leftsection{
Font-size:3rem;
}
.rightsection img{
Width:80%;
Margin:50px 0px;
}
.purple{
Color:blueviolet;
}
#element{
Color:blueviolet;
}

</style>

<body>
<header>
<nav>
<div class=”left”>Roshni’s Portfolio</div>
<div class=”right”>
<ul>
<li><a href=”/”>Home</a></li>
<li><a href=”/”>About</a></li>
<li><a href=”/”>Services</a></li>
<li><a href=”/”>Projects</a></li>
<li><a href=”/”>Contact me</a></li>
</ul>
 </div>
</nav>
</header>
<main>
<section class=”firstsection”>
<div class=”leftsection”>
Hiee I am <span class=”purple”>Roshni</span>
And I am a passionate
<span id=”element”></span>
</div>
<div class=”rightsection”>
<img src=”header_img.jpg.png” alt=””>
</div>
</section>
</main>
<!—Setup and start animation! →

<script src=https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js></script>
<script>
Var typed = new Typed(‘#element’, {
Strings: [‘Web Developer,’, ‘MERN Stack Developer.’],
typeSpeed: 50,
});
</script>
</body>
</html>
 3. Output

6. FUTURE SCOPE
In the future, this portfolio website offers exciting prospects for expansion and
refinement. To further enhance user engagement, interactive features like feedback
forms and live chat support can be introduced, fostering a dynamic visitor
experience. Additionally, the inclusion of a blog section will enable the sharing of
insights and expertise, while the implementation of advanced analytics tools will
provide deeper user behavior insights. Expanding the website to support multiple
languages will extend its global reach, opening doors to international
collaborations. Furthermore, the website’s potential growth includes a mobile
application for on-the-go accessibility, networking opportunities for professional
connections, and the incorporation of AI-driven personalization. As the journey
continues, ongoing additions to the portfolio and accessibility enhancements will
keep the website’s content fresh, inclusive, and aligned with evolving objectives.
 7. CONCLUSION
In conclusion, this portfolio website has been a dynamic canvas for not only
showcasing my professional journey and creative accomplishments but also a
testament to my commitment to growth and innovation. It has successfully bridged
the gap between my skills, aspirations, and the global audience, serving as a digital
representation of my identity and expertise. The journey from inception to
deployment has been a transformative one, marked by challenges met with
determination and accomplishments celebrated with humility. As this website
continues to evolve, it stands as a testament to the unending pursuit of excellence and
the power of digital presence in today’s interconnected world. It is not merely a static
display of my work; it’s an open invitation to connect, collaborate, and explore
together. The journey is ongoing, and the possibilities are limitless.
 8. REFERENCES
• www.google.com
• www.itvoyagers.com
• www.subcrib.com