Front End Development (Personal Portfolio Documentation)

SHORT-TERM
INTERNSHIP
(Onsite / Virtual)
ANDHRA PRADESH
STATE COUNCIL OF HIGHER EDUCATION
An Internship Report
On
PERSONAL TECHNICAL PORTIFOLIO DOCUMENTATION

USING Front-End Development
Submitted in accordance with the requirement for the degree of
Under the Faculty Guide ship of
Mr. K.MANOJ PAVAN KUMAR M.Tech

Assistant Professor
Department of Electronics And Communication Engineering
CHEBROLU ENGINEERING COLLEGE
Submitted by:
CHINNAPUREDDY ANJIREDDY - 20HU1A0418

MAGHAM SAIAMAR - 20HU1A0428
MANDE RAMOHANREDDY - 20HU1A0429
LAKKAM CHADRASEKARREDDY - 20HU1A0427
Department of Electronics And Communication Engineering
CHEBROLU ENGINEERING COLLEGE

(Approved by AICTE, New Delhi & Affiliated to JNTU Kakinada, A.P) CHEBROLU, GUNTUR
(DIST)-522212
Student’s Declaration
WeCHINNAPUREDDY ANJI REDDY,MAGHAM SAI AMAR,MANDE

RAMAMOHAN REDDY,LAKKAM CHANDRSEKHAR REDDY are students of
CHEBROLU ENGINEERING COLLEGE Program, Reg. No. 20HU1A0418,
20HU1A0428, 20HU1A0429, 20HU1A0427 of the Department of Electronics And
Communication Engineering. College do hereby declare that we have completed the mandatory
internship from: 30 MAY to 4 AUGUST in SMART INTERNZ under the Faculty Guideship of
Mr.K.MANOJ PAVAN KUMAR,M.Tech. Department of Electronics And Communication
Engineering, CHEBROLU ENGINEERING COLLEGE.
(Signature and Date)

Official Certification
This is to certify that CHINNAPUREDDY ANJIREDDY, MAGHAM SAIAMAR, MANDE
RAMOHANREDDY,LAKKAM CHADRASEKARREDDY are students of CHEBROLU
ENGINEERING COLLEGE Program, Reg. No. 20HU1A0418, 20HU1A0428,
20HU1A0429,20HU1A0427 has completed his/her Internship in SMART INTERNZ on
PERSONAL TECHNICAL PORTIFOLIO DOCUMENTATION using Front-End Development under
my supervision as a part of partial fulfillment of the requirement for the Degree of
BACHELORS OF TECHNOLOGY in the College of CHEBROLU ENGINEERING COLLEGE.
This is accepted for evaluation.
Faculty Guide
Head of the Department
Principal
Certificate from Intern Organization
ACKNOWLEDGEMENT
We are thankful to our Director M.SRINIVASRAO, Msc, MPhil for providing on facilities and
for his cooperation completing our project.
We highly thankful to our beloved principal Dr.R.V.KRISHNIAH, M.Tech,PhD for his
cooperation in completing our project.
We are also grateful to our beloved head of Electronics and Communication Engineering
Department Mr.CH.HARI BABU,PhDfor his cooperation and encouragement in successfully
completing this project.
We are also grateful to our beloved guide Mr. K. MANOJ PAVAN KUMAR, MTech for his
active participation and excellence guidance at every stage and high dynamic encouragement in
successfully completing this project.
Place: CHEBROLU
Date:
CONTENTS
CHAPTERS Pg. No.
CHAPTER 1: EXECUTIVE SUMMARY 1-2
CHAPTER 2: LITERATURE SURVEY 3-4
CHAPTER 3: INTERNSHIP PART 5-16
CHAPTER 4: THEORETICAL ANALYSIS 17-19
CHAPTER 5: OUTCOMES DESCRIPTION 20-65
CHAPTER 6: PHOTOS & VIDEO LINKS 66-68
STUDENT SELF-EVALUATION OF THE SHORT-TERM INTERNSHIP&
EVALUATION BY THE GUIDE OF THE INTERN ORGANIZATION 69-76

CHAPTER 1: EXECUTIVE SUMMARY
The personal portfolio project is a showcase of an individual's skills, accomplishments and projects. It
serves as a professional online presence that can be shared with potential employers, clients, or
collaborators. The primary goal of this project is to create a visually appealing and user-friendly
website that effectively represents the portfolio owner and highlight their achievements.
Overview:
A portfolio website is a digital platform where individuals or professionals showcase their work,
skills, and accomplishments to potential employers, clients, or collaborators. It serves as an online
resume and a visual representation of their abilities, experiences and expertise. Whether you are a
graphic designer, photographer, web developer, writer or any other creative or professional, a portfolio
website can be an essential tool for establishing your online presence and building credibility in your
field.
Purpose:
If you plan to continue working on the project. The purpose of creating documentation for a personal
portfolio project is to provide a comprehensive and organized record of the project's development
process, design decisions, features, and functionalities. Documentation serves several crucial purposes:
Communication:
It allows you to effectively communicate your project to others, whether it's potential employers,
clients, collaborators, or other developers. Clear and well-structured documentation helps others
understand your project quickly and easily.
Showcase our skills:
Your personal portfolio project serves as a showcase of your technical skills and abilities.
Documentation complements the actual project by providing insights into your thought process,
development methodologies and problem-solving approaches.
Reflection and improvement:
While documenting, you may reflect on your project's strengths and weaknesses, areas of
improvement, and lessons learned during the development process. This reflection can help you grow
as a developer and make future projects even better.
Demonstration and experience:
Through documentation, you can demonstrate your experience in working on a real-world project.
1|P a g e
This is especially valuable if you are seeking employment or internships, as it shows that you can
apply your knowledge to practical projects.
Community contribution:
Sharing your project and its documentation can contribute to the developer community by providing
insights, solutions, or inspiration for others who might be working on similar projects.
2|P a g e
CHAPTER 2: LITERATURE SURVEY
Before embarking on the development of the personal portfolio project, a literature survey was
conducted to gather insights into best practices, design trends, and technologies commonly used in
portfolio websites. The survey included the study of articles, blogs, and existing portfolio websites of
professionals from various fields. Key findings from the literature survey are as follows:
Existing a problem:
When explaining the existing problem that led to the creation of a portfolio website, you might want to
consider the following scenarios:
Lack of visibility:
Before having a portfolio website, the individual or company may have struggled to gain visibility for
their work. Without a centralized platform to display their projects and achievements, potential clients
or employers might not have been aware of the scope and quality of their work.
Limited reach:
Without an online presence, the person or organization might have faced difficulties reaching a broader
audience. Traditional methods of sharing a physical portfolio or relying on word-of-mouth may not
have been sufficient to reach people beyond their immediate network.
Professional credibility:
Building credibility and establishing a professional image can be challenging without a portfolio
website. Trust and confidence in one's capabilities are crucial factors when trying to attract clients or
secure employment opportunities, and a well-designed website can enhance that perception.
Disorganized presentation:
Perhaps there was a problem of disorganization when showcasing their work through different
channels such as social media, email attachments, or printed materials. A portfolio website provides a
structured and easily navigable platform to present their work in a cohesive manner.
Difficulty and demonstrating skills:
Without a dedicated space to showcase their projects and skills, potential clients or employers might
not have been able to assess the individual's capabilities comprehensively. A portfolio website can
offer detailed case studies, testimonials, and explanations, making it easier to demonstrate expertise.
Proposed solution
Portfolio showcase:
3|P a g e
This section will be the heart of the website, displaying a selection of the person's or company's best
projects and works. Each project should have a brief description, high quality images, and possibly
links to live versions or additional details. Consider organizing the portfolio in A portfolio website is a
digital platform that showcases a person's or a company's work, skills, accomplishments, and projects.
It serves as a central hub to present their expertise and talents to potential clients, employers, or
collaborators. The purpose of a portfolio website is to make a strong first impression, demonstrate
credibility, and provide evidence of past successes or capabilities.
Clean purpose and target audience:
Define a clear purpose for the portfolio website, whether it's to attract potential clients, showcase work
to potential employers, or collaborate with other professionals. Understand the target audience and
tailor the content and design to cater to their interests and needs.
Design and layout:
The website's design should be clean, modern, and visually appealing. Use a consistent color scheme
and typography to maintain a professional look. Ensure that the layout is user-friendly, with easy
navigation and intuitive organization.
Home page:
The homepage should make a strong impression and provide a brief overview of the individual or
company's main strengths and areas of expertise. It can include a captivating introduction, a
professional profile picture, and a call-to-action to encourage visitors to explore further. categories for
easier navigation.
About me/us page:
Offer a detailed and personable 'About Me' (for individuals) or 'About Us' (for companies) page. This
should include background information, qualifications, experience, and any other relevant details that
add credibility and build trust.
Testimonials and reviews:

Incorporate testimonials from previous clients, employers, or colleagues to showcase positive
feedback and build trust with visitors. Include their names and affiliations (with their consent) to add
authenticity.
Contact information:
4|P a g e
Make it easy for visitors to get in touch. Provide contact information such as an email address or
contact form. Consider adding links to social media profiles and professional networking sites.
5|P a g e
CHAPTER 3: INTERNSHIP PART
ACTIVITY LOG FOR THE FIRST WEEK
Day & Brief description of the daily activity Person In-

Date Learning Outcome Charge
Signature
Learned the languages and
Day – 1 Discussed about Web development frameworks that are using in
i.e., Front-end and Back-end. Web development.
Day - 2 Discussed HTML basic tags. Gained hands-on experience
on HTML tags.
Day – 3 Practical Session on HTML attributes and Gained hands-on experience
Lists. on HTML attributes and Lists.
Day – 4 Inserting images into HTML codes. Learned how to use “img, src”
tags.
Day – 5 Usage of “Style” attribute. Learned styling the web page
using “Style” attribute.
Day –6 Usage of “Form” tag html Learned how to take user input
6|P a g e
WEEKLY REPORT
WEEK – 1 (From Dt 29-05-2023to Dt 03-06-2023)
Objective of the Activity Done:

This week focused on HTML skeletal structure, tags, attributes and Lists. Gained hands-on
experience on HTML.
Detailed Report:
In the first week discussion on web development, we delved into both the front-end and back-
end aspects of building websites. We explored various languages and frameworks integral to web
development, providing a comprehensive understanding of the tools used in this field. A substantial
portion of our session focused on HTML, where we covered the fundamental tags essential for
structuring web content. This included a hands-on experience, allowing us to practice and solidify our
understanding of HTML tags. The practical session extended to HTML attributes and lists, where we
gained valuable hands-on experience manipulating attributes and creating lists within HTML.
Furthermore, we delved into the insertion of images into HTML codes, mastering the utilization of
"img" and "src" tags for seamless integration. The use of the "Style" attribute was another key topic,
where we learned the art of styling web pages effectively. This involved hands-on exercises to
understand how to apply styles to enhance the visual appeal of a webpage. Additionally, we explored
the functionality of the "Form" tag and the intricacies of the "Options" tag, focusing on capturing user
input through HTML forms. This practical insight provided a solid foundation for understanding how
to create interactive and user-friendly web pages. Overall, our discussion and practical sessions
equipped us with a well-rounded comprehension of web development, covering HTML basics,
attributes, styling and user input mechanisms.
7|P a g e
ACTIVITY LOG FOR THE SECOND WEEK
Person In-
Day & Date Brief description of the daily Learning Outcome
Charge
activity
Signature
Day – 1 Discussed about web page designing. Learned about Cascading

Style Sheets and its
elements.
Day - 2 Usage of CSS containers i.e., Gained hands-on

Margins, Padding, Alignments and experience in CSS
blurring background. Containers and Blur
element.
Day – 3 Practical session on CSS selectors, Gained hands-on

borders and comments. experience in using CSS
selectors.
Day – 4 Usage of CSS “Math functions”. Learned to make device-

width web pages using
Math functions.
Day – 5 Making responsive web pages using Learned how to use media
“Media Queries”. queries and aside tag.
Day –6 Creating header and footer of web Gained hands-on

page using CSS. experience in styling web
page using CSS.
8|P a g e
WEEKLY REPORT
WEEK – 2 (From Dt 05-06-2023 to Dt 10-06-2023)

This week we focused on styling of web page using CSS.
Detailed Report:
In the second week session, we extensively covered Cascading Style Sheets (CSS) and its elements. Our
focus included the effective utilization of CSS containers, involving margins, paddings, alignments, and the
incorporation of blurring backgrounds. Through practical exercises, participants gained hands-on experience
with CSS containers and the blur element. A dedicated session on CSS selectors, borders, and comments was
conducted, providing participants with practical insights and proficiency in using CSS selectors. Additionally,
the training included the application of CSS "Math functions" to create web pages with specified device-widths.
The course delved into making responsive web pages through the implementation of "Media Queries" and the
utilization of the <aside> tag. Participants were equipped with the knowledge and skills required to craft
responsive designs that adapt to various devices. Furthermore, the training covered the creation of webpage
headers and footers using CSS, offering participants a comprehensive understanding of styling web pages
effectively. The combination of theoretical concepts and hands-on experience has prepared participants for
proficient web page design using CSS.
9|P a g e
ACTIVITY LOG FOR THE THIRD WEEK
Person In-
Day & Brief description of the daily Learning Outcome Charge
Date activity Signature
Day – 1 Discussed overview of JavaScript. Learned the syntax of JavaScript

and its part in creating web page.
Day - 2 Practical session on JS variables, Data Gained hands-on experience in

types and conditional statements. JavaScript “Let and Const”
keywords.
Day – 3 Practical session on JavaScript Learned how to give properties

Objects and Dates. for objects and different date
formats in JavaScript.
Day – 4 Explored Arrays and its methods in Gained insight into creating array
JavaScript. methods like push, pop etc.,
Day – 5 Practical Session on Functions in Learned Function Syntax and

JavaScript. usage of functions in JavaScript.
10 | P a g e
Day –6 Explored Scope and Math functions in Learned Block Scope and
JavaScript. Function Scope.
11 | P a g e
WEEKLY REPORT
WEEK – 3 (From Dt 12-06-2023to Dt 17-06-2023)
This week we focused on JavaScript to create dynamic web page.
Detailed Report:
During Week 3, In the JavaScript overview, we delved into its fundamental role in web
page creation, emphasizing syntax comprehension. A practical session ensued, covering JS
variables, data types, and conditional statements, providing participants with hands-on
experience with the "let" and "const" keywords. The subsequent session focused on JavaScript
objects and dates, educating participants on property assignment for objects and diverse date
formats. A thorough exploration of arrays and their methods, such as push and pop, was
undertaken, offering insights into effective array manipulation. Dedicated to functions in
JavaScript, a practical session elucidated function syntax and its application, ensuring
participants gained practical proficiency. The training also covered scope, distinguishing
between block and function scope, and introduced mathematical functions in JavaScript. By
combining theoretical knowledge with practical exercises, participants acquired a
comprehensive understanding of JavaScript, enhancing their ability to contribute effectively to
web page development.
12 | P a g e
ACTIVITY LOG FOR THE FORTH WEEK
Day & Brief description of the daily Learning Outcome Person In-
Date activity Charge
Signature
Day – 1 Discussed overview of Bootstrap. Learned Bootstrap framework

is used for making responsive
web pages.
Day - 2 Practical sessions on Bootstrap Gained hands-on experience in

grids and buttons. maintaining the size of the
grids.
Day – 3 Practical sessions on Bootstrap Learned how to use bootstrap to

typography and default bootstrap create more responsive web
settings. page.
Day – 4 Formed into a group of 4 Learned how to handle the

members. work in a team.
Day – 5 Selected project – “Personal Developed team work and

technical portfolio communication skills.
documentation”.
Day –6 Project Mentoring session i.e., Developed strategic planning

guided us on how to complete the and goal-setting skills.
project.
13 | P a g e
WEEKLY REPORT
WEEK – 4 (From Dt 19-06-2023 to Dt 24-06-2023)

This week we focused on Bootstrap and deciding a project.
Detailed Report:
During Week 4 the Bootstrap overview, we explored the framework's significance in crafting
responsive web pages. Practical sessions on Bootstrap grids and buttons followed, allowing
participants to gain hands-on experience in effectively managing grid sizes. The training extended to
Bootstrap typography and default settings, providing insights into leveraging Bootstrap for enhanced
responsiveness. As a strategic approach, participants formed groups of four, fostering teamwork skills
and learning effective collaboration in a project setting. The selected project, "Personal Technical
Portfolio Documentation," served as a practical application of the acquired skills, facilitating the
development of teamwork and communication skills. A dedicated project mentoring session equipped
participants with guidance on project completion, honing strategic planning and goal-setting abilities.
This comprehensive training in Bootstrap not only enhanced technical proficiency but also
emphasized the importance of collaborative work and strategic planning in achieving project goals.
14 | P a g e
ACTIVITY LOG FOR THE FIFTH WEEK
Day & Brief description of the daily Learning Outcome Person In-
Date activity Charge
Signature
Day – 1 Designed a layout for our webpage. Learned the prerequisites in

developing a web page.
Day - 2 Decided the colors, font and started Learned how to make the
working on building our web page. web page attractive.
Day – 3 Started coding the layout as “index” Gained hands-on experience

HTML file. in HTML tags.
Day – 4 We gave appropriate information in the Improved the experience by

layout by adding some text and buttons. adding HTML buttons.
Day – 5 Added some reference and path links to Gained knowledge in adding
the respected buttons. paths and organizing files.
Day –6 Designed sub web pages in the portfolio Learned how to link multiple
web page. web pages.
15 | P a g e
WEEKLY REPORT
WEEK – 5 (From Dt 26-06-2023 to Dt 01-07-2023)
Designed a “Technical Portfolio” web page using HTML.
Detailed Report:
During Week 5, The web development project commenced with designing the layout for our
webpage, accompanied by a comprehensive exploration of the prerequisites in web page development.
Selections of colors and fonts were made to enhance the visual appeal, emphasizing the importance of
creating an attractive webpage. The coding phase initiated with the creation of the "index" HTML file,
providing participants with hands-on experience in utilizing HTML tags. Information was
incorporated into the layout through the addition of text and buttons, with a focus on improving user
experience through the integration of HTML buttons. To enhance navigation, reference and path links
were added to the buttons, providing participants with valuable insights into path management and file
organization. The development process expanded to include the design of sub web pages within the
portfolio, offering participants the opportunity to learn how to link multiple web pages seamlessly.
Through this hands-on experience and practical application of web development concepts, participants
not only gained proficiency in HTML but also acquired valuable skills in creating visually appealing,
interactive, and well-organized web pages.
16 | P a g e
ACTIVITY LOG FOR THE SIXTH WEEK
Learning Outcome Person In-

Day & Brief description of the daily Charge
Date activity Signature
Day – 1 Styled the web page using CSS Gained hands-on experience
elements and made that web page and good knowledge on CSS.
attractive and responsive.
Day - 2 Participated in a team discussion to Improved teamwork and

finalize project recommendations. consensus-building skills.
Day – 3 Finalized a web page with actionable Improved web page creation
recommendations. and recommendations skills.
Day – 4 Summarized the key takeaways from Enhanced ability to reflect on

the internship experience. and distill key learning's.
Day – 5 Concluded the internship with a team Improved teamwork and

reflection session. communication skills.
Day –6 Prepared a final report summarizing the Developed report-writing and

entire internship experience. reflection skills.
17 | P a g e
WEEKLY REPORT
WEEK – 6 (From Dt 03-07-2023 to Dt 08-07-2023)

Added styling to the web page using CSS and prepared a final report summarizing the entire internship
experience.
Detailed Report:
During Week 6, The web page underwent significant improvement as CSS elements were applied to
enhance aesthetics and responsiveness, providing participants with hands-on experience and a profound
understanding of CSS. Team collaboration played a crucial role as we engaged in discussions to finalize project
recommendations, refining teamwork and consensus-building skills. The project reached its culmination with the
completion of a web page featuring actionable recommendations, showcasing improved web page creation and
recommendation skills. The internship experience was concluded by summarizing key takeaways, enhancing the
ability to reflect on and distill key learning. A team reflection session marked the end of the internship, further
improving teamwork and communication skills through shared insights and feedback. Lastly, a comprehensive
final report was prepared, encapsulating the entire internship experience, fostering skills in report writing and
reflection. This holistic internship journey not only advanced technical skills but also nurtured essential soft skills
vital for professional growth.
18 | P a g e
CHAPTER 4: THEORETICAL ANALYSIS
Portfolio page: This section will showcase the owner's projects, with each project presented in a
visually appealing manner. It will include project descriptions, images, and possibly links to live
demos or GitHub repositories.
Home page: This page will introduce the portfolio owner with a brief bio and a professional profile
picture. It may also include an eye-catching tagline or headline that reflects their expertise. This
section also consist of persons contact details which placed in a icons.
Tech Stack: This section consists of persons technical skills. In this sections we will clearly
understands the persons skills. In this portfolio person is a web developer according to his field all the
skills are represented.
Projects Section: The projects consists of all the projects done by the persons. In Portfolio person
need to provide his previous works or projects he done in the past so this section all those previous
works of person.
BLOCK DIAGRAM
While there are innumerable benefits to launching your online portfolio, a few stand out from the rest.
These benefits might be exactly what you’re looking for if you’re in the middle of a job hunt, are
coming up on graduation, or are considering a competitive career.
Hardware and software requirements of the project:
Designing a portfolio website requires a combination of hardware. Let's break down the process into
two parts: hardware requirements.
19 | P a g e
Hardware Requirements:
The hardware you'll need for designing a portfolio website is relatively standard and can be found in
most modern computers. Here are the essential hardware components:
Computer:
A reliable and modern computer or laptop is essential. Ensure it has sufficient processing power,
RAM, and storage to run web development software smoothly.
Monitor:
An additional monitor or a larger screen can enhance your productivity, allowing you to see your code
and design layout simultaneously.
Input Devices:
A keyboard and a mouse (or trackpad) are essential for web development.
Internet Connection:
A stable and fast internet connection is crucial for accessing online resources, libraries, and hosting the
website during development and deployment.
SOFTWARE USED:
HTML:
It is the code for creating web pages, using tags and other commands that a browser reads and converts
into the normal web pages that people see.
CSS:
CSS is the language for describing the presentation of Web pages, including colours, layout, and fonts.
For local Systems

Code Editor used for this project is VS Code. It is used to code complex piece of programs and to
develop complex projects. Further technologies I used for this project are HTML, CSS.
For global access
GITHUB
It is used for this project to access the application dynamically throughout world anywhere by using
git repository link.
Github link:
20 | P a g e
https://github.com/AnjiReddy12345/Portfolio.git
21 | P a g e
22 | P a g e
CHAPTER 5: OUTCOMES DESCRIPTION
Source code:
CODE -1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>AnjiReddy Portfolio Website</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0o
wXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-
icon.png">
23 | P a g e
<link rel="icon" type="image/png" sizes="32x32" href="favicon.png">
<script src="https://kit.fontawesome.com/c8bad82e18.js"
crossorigin="anonymous"></script>
<link rel="manifest" href="/site.webmanifest">
</head>
<body text ="white">
<fontcolour : #fff ;>
<header >
<h1 class="center-heading"><p style="color :#ff004f;" >AnjiReddy
Chinnapureddy </p></h1>
</header>
24 | P a g e
<nav class="index">
<div class="index">
<ul id="sidemenu">
<li><a href="#about">About</a></li>
<li><a href="#education">Education</a></li>
<li><a href="#internships">Internships</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#Projects">Projects</a></li>
<li><a href="#Testimonials">Testimonials</a></li>
<li><a href="#resume">Resume</a></li>
<li><a href="#contact">Contact </a></li>
<li><a href="#Social connect">Social connect</a></li>
<i class="fa-solid fa-xmark" onclick="closemenu()"></i>
</ul>
<i class="fa-solid fa-bars" onclick="openmenu()"></i>
</div>
25 | P a g e
</nav>
<marquee >I am an engineer made this website to display my
portfolio.you can Follow me in social media through FOLLOW me
section </marquee>
<main>
<section id="photo">
<h2></h2>
<div class="wrapper">
<img src="photo_6221917134154479890_y.jpg" alt="Profile
Photo"></br>
</div>
</section>
<div class="header-text">
<P> An Engineer</P>
<h1> Hi, I'am<span> AnjiReddy</span></h1>
</div>
26 | P a g e
<section id="about">
<h2>About</h2>
<p>Hello, I am an engineering student with a passion for solving
problems and creating innovative solutions. I have a strong
foundation in various engineering principles and am constantly
seeking opportunities to learn and grow.</p>
</section>
<section id="education">
<div class="container"></div>
<h2>Education</h2>
<div class="edu-list">
<div>
<i class="fa-solid fa-graduation-cap"></i>
<h3>B-TECH</h3>
<p>College Name:Chebrolu Engineering College,Guntur</BR>
</br>
27 | P a g e
BRANCH:ECE</p>
</div>
<div><i class="fa-solid fa-school"></i>
<h3>HIGH SCHOOL</h3>
<p>College Name:Sri Chaitanya Junior College,Guntur</BR>
</BR>
STREAM:MPC</BR>
CGPA :9.44</p>
</div>
<div>
<i class="fa-solid fa-building-columns"></i>
<h3>SSC</h3>
<p>School Name :Chimakurthy High School,Chimakurthy</BR>
</BR>
CGPA :9.7</p>
</div>
28 | P a g e
</div>
</div>
</section>
<section id="internships">
<h2>Internships</h2>
<div class="inti">
<div class="card" style="width: 18rem;">
<img src="STEEL.PNG.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">IP BASED CCTV SURVEILLANCE
SYSTEM</h5>
<p class="card-text">I had completed this internship from RINL
vishakapatanam for a period of 4weeks</p>
<a href="Anjireddysteel.pdf" class="btn btn-
primary">CERTIFICATE<i class="fa-solid fa-up-right-from-
square"></i></a>
</div>
</div>
29 | P a g e
<img src="anjiPY.jpg" class="card-img-top" alt="...">
<h5 class="card-title">MACHINE LEARNING USING
PYTHON</pre></h5>
<p class="card-text">I had completed this internship from SRI
SHASHA PRAYATHI TECHNOLOGIES for a period of 6weeks.</p>
<a href="Anjireddypython.pdf" class="btn btn-
primary">CERTIFICATE<i class="fa-solid fa-up-right-from-
square"></i></i></a>
</div>
</div>
<img src="fed.jpg" class="card-img-top" alt="...">
<h5 class="card-title">FRONT END DEVELOPMENT</h5>
<p class="card-text">I had completed this internship from SRI
SHASHA PRAYATHI TECHNOLOGIES for a period of 4weeks.</p>
30 | P a g e
<a href="" class="btn btn-primary"></a>
</div>
</div>
</div>
</section>
<section id="skills">
<div class="skill">
<h2>Skills</h2>
<ul>
<li>Programming Languages: <i class="fa-brands fa-html5"></i>
HTML,<i class="fa-brands fa-css3-alt"></i> CSS, <i class="fa-brands
fa-python"></i> Python</p> </li>
<li>Software proficiency: <i class="fa-brands fa-microsoft"></i>
MS office,<i class="fa-solid fa-code"></i> Visual studio code,<i
class="fa-brands fa-github"></i> Github </p> </li>
</ul>
</div>
31 | P a g e
</section>
<section id="Projects">
<h2>Projects</h2>
<div class="web">
<p><p style="color :rgb(240, 227, 227);">Developed PORTFOILIO
website using HTML,CSS </br>MY WEBSITE
<a href="
https://anjireddy12345.github.io/Portfolio/"><i class="fa-solid fa-
square-arrow-up-right"></i></a> </br>
</p>
</div>
</section>
<body style = "background-color: rgb(6, 7, 7);">
</body>

32 | P a g e
<section id="Testimonials" class="testimonials section-bg">
<div class="container">
<div class="section-title">
<h2>Testimonials</h2>
<p>A testimonial is a statement from a past customer that
describes how a product or service helped them. Testimonials are often
written by the business based on specific questions they ask satisfied
customers. They usually show impact through before-and-after
comparisons or provide specific improvement statistics.</p>
</div>
<div class="testimonials-slider swiper" data-aos="fade-up" data-
aos-delay="100">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="testimonial-item" data-aos="fade-up">
<p>
33 | P a g e
<i class="bx bxs-quote-alt-left quote-icon-left"></i>
Anjireddy Portfolio help has been a key factor in my
company’s success. The monthly promotional materials he designs have
noticeably influenced my number of new and returning customers.
<i class="bx bxs-quote-alt-right quote-icon-right"></i>
</p>
<img src="test-1.jpg" class="testimonial-img" alt="">
<h3>Jean-Michel Balensi</h3>
<h4>CEO - Balensi's Spa</h4>
</div>
</div>
<div class="testimonial-item" data-aos="fade-up" data-aos-
delay="100">
<p>
I hired Anjireddy from his Portfolio to create my new
corporate website. Anji was great to work with. Every phase of the
website was completed on time. His communication regarding project
34 | P a g e
requirements was also excellent, as well as his follow up.
I would highly recommend Anji from his Portfolio. Anji is an expert in
his field, and his pricing is very reasonable. I will definitely be using
Anji for additional website and marketing projects.
</p>
<h3>Larry Kantor</h3>
<h4>President - Synergy World</h4>
</div>
<div class="testimonial-item" data-aos="fade-up" data-aos-
delay="200">
<p>
Web design is not my forte but porfolio outstanding team
35 | P a g e
helped me every step of the way and design my business web page.
They helped me strategize ideas, concepts, content and delivered
incredible results. What’s great is they were reasonably priced too. My
overall experience with Portfolio was exceptional, I highly recommend
them.
</p>
<h3>Cristina Rangel</h3>
<h4>CEO - Houston Selfie Co</h4>
</div>
<section id="resume">
<h2>Resume</h2>
<a href="CH.ANJIREDDY..RESUME_compressed.pdf" class="btn
btn2" target="_blank" <p style="color :rgb(233, 238, 232);" >Download
resume</p></a>
36 | P a g e
</section>
<p style="background-image: url('qw.jpg');"></p>
</main>
<footer>
<nav class="footer"> <div class="footer-content">
<div class="main">
<section id="contact">
<h3 <p style="color :#f20202;" ></p>Contact Me</h3>
<a href="#contact"> </a>
</section>
<p><i class="fa-solid fa-envelope"></i> Email:
Chinnapureddyanjireddy2@gmail.com</p>
<p><i class="fa-solid fa-square-phone"></i> Phone:
9505855422</p>
</div>
<div class="main" >
<section id="Social connect">
37 | P a g e
<h3 <p style="color :#f20202;" ></p>Follow Me</h3>
<a href="#Social connect"> </a>
</section>
<div class="row social" >
<a target = "blank" href = 'https://github.com/AnjiReddy12345'><i
class="fab fa-github"></i></a>
<a target = "blank" href = 'https://www.linkedin.com/in/anjireddy-
chinnapureddy-6ba5051b4'><i class="fab fa-linkedin"></i></a>
<a target = "blank" href='https://twitter.com/i/flow/login?
redirect_after_login=%2FAnjireddyChinn3' ><i class="fab fa-
twitter"></i></a>
<a target = "blank"
href='https://www.facebook.com/reddys.chinnapureddy?
mibextid=ZbWKwL'><i class='fab fa-facebook'></i></a>
<a target = "blank" href='https://instagram.com/__anji__reddy?
utm_source=qr&igshid=ZDc4ODBmNjlmNQ%3D%3D'><i class='fab
fa-instagram'></i></a></section>
</div>
38 | P a g e
<script>
var sidemeu = document.getElementById("sidemenu");
function openmenu(){
sidemeu.style.right="0";
function closemenu(){
sidemeu.style.right="-200px";
</script>
</html>
</body>
CODE-2
body {
font-family: Arial, sans-serif;
font-display: rgb(171, 150, 148);
center-heading {
color: BLUE(200, 255, 0);
margin: 100 600;
39 | P a g e
padding: 10px 10%;
header {
background-color: #9f2e2e;
color: #fff;
text-align: center;
padding: 20px;
width: 100%;
background-size: cover;
background-position: center;
align-items: center;
.index {
40 | P a g e
background-color: #191515;
width: 100%;
position:relative ;
overflow: auto;
left: 0;
right: 0;
z-index: 100000;
box-sizing: border-box;
display: flex;
justify-content: space-between;
flex-wrap:wrap ;
41 | P a g e
padding: 0;
nav.index ul li{
display: inline-block;
list-style: none;
margin: 10px 20px;
nav.index ul a{
color: #fff;
text-decoration: none;
font-size: 18px;
display: flex;
position: relative;
nav.index li a::after{
42 | P a g e
content: '';
width: 100;
height: 3px;
background:#9f2e2e ;
position:absolute;
left: 0;
bottom: -6px;
transition: 0.5s;
nav.index li a:hover::after{
width: 100%;
nav.index li {
43 | P a g e
margin: 0 10px;
nav.index a {
text-decoration: none;
color: #ab851d;
main {
padding: 20px;
section {
margin-bottom: 30px;
section h2 {
color: rgb(203, 43, 8);
44 | P a g e
footer {
color: #fff;
padding: 20px;
footer .footer-content {
display: flex;
justify-content: space-between;
footer .contact {
margin-right: 20px;
footer h3 {
color: #fff;
45 | P a g e
}
footer .social-links a {
color: #e7e0e011;
margin-right: 10px;
footer p {
margin: 5px 0;
footer p:last-child {
margin-bottom: 0;
section#photo {
display: flex;
justify-content: flex-end;
flex-direction: column;
46 | P a g e
}
section#photo {
display: flex;
section#photo {
display: flex;
float:right;
justify-content: flex-end;
align-items: left;
flex-direction: row;
section#photo img {
max-width: 100%;
max-height: 400px;
object-fit: cover;
47 | P a g e
.social {
padding: 15px;
margin: 5px;
border-radius: 6px;
position: relative;
overflow: hidden;
.social a{
font-size: 30px;
color: #F4FFFE;
border-style: groove;
border-color: grey;
padding: 10px;
margin: 10px;
border-radius: 6px;
display: inline-block
/* Social Media Links on mouse hover */
.social a:hover {
48 | P a g e
background-color: darkred;
color: rgb(205, 73, 73);
-webkit-transition: background-color 0.6s ease-out, color 0.6s ease-
out;
-moz-transition: background-color 0.6s ease-out, color 0.6s ease-out;
-o-transition: background-color 0.6s ease-out, color 0.6s ease-out;
transition: background-color 0.6s ease-out, color 0.6s ease-out;
/* CSS styles for the portfolio website */
@keyframes fadeIn {
from {
opacity: 0;
to {
opacity: 1;
49 | P a g e
@keyframes slideInFromLeft {
from {
transform: translateX(-100%);
to {
transform: translateX(0);
@keyframes slideInFromRight {
from {
transform: translateX(100%);
to {
transform: translateX(0);
section {
50 | P a g e
animation-duration: 1s;
animation-fill-mode: forwards;
opacity: 0;
section:nth-child(odd) {
animation-name: slideInFromLeft, fadeIn;
section:nth-child(even) {
animation-name: slideInFromRight, fadeIn;
section:first-child {
animation-delay: 0.5s;
section:nth-child(2) {
animation-delay: 1s;
51 | P a g e
}
animation-delay: 2s;
body header {
background-image: url('bg.jpj.jpg');
background-repeat: no-repeat;
color: #fff;
52 | P a g e
text-align: center;
margin: 100 600;
padding: 20px;
body
header {
color: #fff;
text-align: center;
padding: 20px;
animation-name: fadeIn;
animation-duration: 1s;
}body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-image: url('f.jpeg');
background-repeat: no-repeat;
53 | P a g e
@keyframes fadeIn {
from {
opacity: 0;
to {
opacity: 1;
.header-text{
margin-top: 0;
font-size: 30px;
.header-text h1{
font-size: 80px;
margin-top: 40px;
54 | P a g e
}
.header-text h1 span{
color: red;
.header-text{
padding: 20px 10%;
.wrapper {
overflow: hidden;
.wrapper{
width: 100%;
height: 100%;
transition: SCALE 400ms;
.wrapper:hover img{
55 | P a g e
scale: 120%;
#education{
padding: 30px 0;
.edu-list{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
grid-gap:40px;
margin-top: 50px;
.edu-list div{
background: #262626;
padding: 40px;
font-size: 15px;
font-weight: 300;
border-radius: 10px;
transition: background 0.5s, transform 0.5s ;
56 | P a g e
.edu-list div i{
font-size: 50px;
.edu-list div:hover {
background: #ff004f;
transform: translate(-10px);
.inti{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
grid-gap:40px;
margin-top: 50px;
width: 100%;
57 | P a g e
}
.int{
position: relative;
overflow: hidden;
.int img {
width: 100%;
height: auto;
display: block;
.inti{
display: grid;
.card img {
58 | P a g e
width: 100%;
height: auto;
.main p i{
color: #ff004f;
font-size: 25px;
.main {
font-size: px;
.skill ul li i{
color:#ff004f;
font-size: 25px;
.web p a i{
color:#194886;
font-size: 25px;
59 | P a g e
.card-body h5{
color:#6fb2a3;
font-size: 15px;
.card-body a{
color: #8f516d;
.index ul i{
display: none;
.index i{
display: none;
.btn.btn2{
60 | P a g e
@media only screen and (max-width: 600px) {
.hearder-text{
margin-top: 100%;
font-size: 16px;
.header-text h1{
font-size: 40px;
.index ul i{
display: block;
font-size:25px
.index ul {
61 | P a g e
position: fixed;
top: 0;
right: -2000px;
width: 150px;
height: 100vh;
padding-top:50px;
z-index: 2;
.index ul li {
display: block;
margin: 25px;
.index ul i{
position: absolute;
top: 25px;
left: 25px;
cursor: pointer;
62 | P a g e
}
.index i{
display: block;
font-size: 30px;
footer .footer-content {
display:block;
/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
overflow: hidden;
63 | P a g e
.testimonials .testimonial-item {
box-sizing: content-box;
text-align: center;
min-height: 320px;
.testimonials .testimonial-item .testimonial-img {
width: 90px;
border-radius: 50%;
margin: 0 auto;
.testimonials .testimonial-item h3 {
font-size: 18px;
font-weight: bold;
margin: 10px 0 5px 0;
color: #19e151;
64 | P a g e
.testimonials .testimonial-item h4 {
font-size: 14px;
color: #e91717;
margin: 0;
.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
color: #1ac637;
font-size: 26px;
.testimonials .testimonial-item .quote-icon-left {
left: -5px;
position: relative;
.testimonials .testimonial-item .quote-icon-right {
65 | P a g e
right: -5px;
position: relative;
top: 10px;
.testimonials .testimonial-item p {
font-style: italic;
margin: 0 15px 15px 15px;
padding: 20px;
background: #d40d0d;
position: relative;
margin-bottom: 35px;
border-radius: 6px;
box-shadow: 0px 2px 15px rgba(33, 227, 8, 0.1);
.testimonials .testimonial-item p::after {
content: "";
66 | P a g e
width: 0;
height: 0;
border-top: 20px solid #e41010;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
position: absolute;
bottom: -20px;
left: calc(50% - 20px);
.testimonials .swiper-pagination {
margin-top: 20px;
position: relative;
.testimonials .swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: #ea1818;
67 | P a g e
opacity: 1;
border: 1px solid #0be73a;
.testimonials .swiper-pagination .swiper-pagination-bullet-active {
background-color: #e15e0c;
68 | P a g e
CHAPTER 6: PHOTOS & VIDEOS
After applying css to html source codes
Index.html
69 | P a g e
70 | P a g e
If you want to create an android app for your portfolio, you can use Portfolio App Maker. The first
step is to go to the Easy Start section and select a pre-set template for the mobile application. The
creator can later change the components of the template.
Customize it, add Content, make monetization settings.
If you want to learn more about how to create a digital portfolio, you can check out Canva’s guide on
how to create a digital portfolio. Start designing your portfolio by looking at all the work you’ve done,
then choose your favorite pieces and the work you’ve gotten the most positive feedback for. Next,
diversify your options and choose examples that show a full range of your abilities. This way, the
reader is able to see your adaptability and creativity.
Git hub link:-
https://github.com/AnjiReddy12345/Portfolio.git
71 | P a g e
Student Self Evaluation of the Short-Term Internship
Student Name: CHINNAPUREDDY ANJIREDDY Registration No: 20HU1A0418
Term of Internship: 2 MONTHS From: 30 MAY 2023 to: 4 AUGUST 2023
Date of Evaluation:
Organization Name & Address: Smartinternz, Hyderabad.
Please rate your performance in the following areas:
Rating Scale: Letter grade of CGPA calculation to be provided
1 Oral communication 1 2 3 4 5
2 Written communication 1 2 3 4 5
3 Pro activeness 1 2 3 4 5
4 Interaction ability with community 1 2 3 4 5
5 Positive Attitude 1 2 3 4 5
6 Self-confidence 1 2 3 4 5
7 Ability to learn 1 2 3 4 5
8 Work Plan and organization 1 2 3 4 5
9 Professionalism 1 2 3 4 5
10 Creativity 1 2 3 4 5
11 Quality of work done 1 2 3 4 5
12 Time Management 1 2 3 4 5
13 Understanding the Community 1 2 3 4 5
14 Achievement of Desired Outcomes 1 2 3 4 5
15 OVERALL PERFORMANCE 1 2 3 4 5
Date: Signature of the Student
72 | P a g e
Student Name: KADIMI
Evaluation MOUNIKAofRAM
by the Supervisor Registration No: 20T91A1209
the Intern Organization
Termrate
Please of Internship:
the student’s 2performance
MONTHSin the following
From: 30areas:
MAY To: 4 AUGUST
Date of
Please Evaluation:
note that your evaluation shall be done independent of the Student’s self evaluation
Rating Scale: 1 Name

Organization is lowest
& and 5 is highest rank
Address:
Name & Address of the Supervisor

with
1 Mobile Number
Oral communication 1 2 3 4 5
Date: Signature of the Supervisor
73 | P a g e
Student Name: MAGHAM SAIAMAR Registration No: 20HU1A0428
Date of Evaluation:
Organization Name & Address: Smartinternz, Hyderabad
74 | P a g e
Termrate
From: 30areas:
MAY To: 4 AUGUST
Date of
Please Evaluation:

Address:

with
1 Mobile Number
75 | P a g e
Student Name: MANDE RAMOHANREDDY Registration No: 20HU1A0429
Date of Evaluation:
76 | P a g e
Evaluation by the MOUNIKA RAM
Supervisor of Registration No: 20T91A1209
Termrate
From: 30areas:
MAY To: 4 AUGUST
Date of
Please Evaluation:

Address:

with
1 Mobile Number
77 | P a g e
Student Name: LAKKAM CHANDRASEKHAR REDDY Registration No:
20HU1A0427
Term of Internship: 2 MONTHS From: 30 MAY 2023 To: 4 AUGUST 2023
Date of Evaluation:
78 | P a g e
Termrate
From: 30areas:
MAY To: 4 AUGUST
Date of
Please Evaluation:

Address:

with
1 Mobile Number
79 | P a g e
80 | P a g e

Front End Development (Personal Portfolio Documentation)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Front End Development (Personal Portfolio Documentation)

Uploaded by

Copyright:

Available Formats

SHORT-TERM

PERSONAL TECHNICAL PORTIFOLIO DOCUMENTATION

Submitted in accordance with the requirement for the degree of

Under the Faculty Guide ship of

Mr. K.MANOJ PAVAN KUMAR M.Tech

Department of Electronics And Communication Engineering

CHEBROLU ENGINEERING COLLEGE

CHINNAPUREDDY ANJIREDDY - 20HU1A0418

Department of Electronics And Communication Engineering

CHEBROLU ENGINEERING COLLEGE

WeCHINNAPUREDDY ANJI REDDY,MAGHAM SAI AMAR,MANDE

(Signature and Date)

This is accepted for evaluation.

Head of the Department

CHAPTERS Pg. No.

CHAPTER 1: EXECUTIVE SUMMARY 1-2

CHAPTER 2: LITERATURE SURVEY 3-4

CHAPTER 3: INTERNSHIP PART 5-16

CHAPTER 4: THEORETICAL ANALYSIS 17-19

CHAPTER 5: OUTCOMES DESCRIPTION 20-65

CHAPTER 6: PHOTOS & VIDEO LINKS 66-68

STUDENT SELF-EVALUATION OF THE SHORT-TERM INTERNSHIP&

EVALUATION BY THE GUIDE OF THE INTERN ORGANIZATION 69-76

Showcase our skills:

Reflection and improvement:

Demonstration and experience:

Difficulty and demonstrating skills:

Design and layout:

About me/us page:

Testimonials and reviews:

ACTIVITY LOG FOR THE FIRST WEEK

Day & Brief description of the daily activity Person In-

Learned the languages and

Day – 1 Discussed about Web development frameworks that are using in

i.e., Front-end and Back-end. Web development.

Day - 2 Discussed HTML basic tags. Gained hands-on experience

Day – 3 Practical Session on HTML attributes and Gained hands-on experience

Lists. on HTML attributes and Lists.

Day – 5 Usage of “Style” attribute. Learned styling the web page

using “Style” attribute.

WEEK – 1 (From Dt 29-05-2023to Dt 03-06-2023)

Objective of the Activity Done:

Day – 1 Discussed about web page designing. Learned about Cascading

Day - 2 Usage of CSS containers i.e., Gained hands-on

Day – 3 Practical session on CSS selectors, Gained hands-on

Day – 4 Usage of CSS “Math functions”. Learned to make device-

Day –6 Creating header and footer of web Gained hands-on

WEEK – 2 (From Dt 05-06-2023 to Dt 10-06-2023)

Objective of the Activity Done:

Day – 1 Discussed overview of JavaScript. Learned the syntax of JavaScript

Day - 2 Practical session on JS variables, Data Gained hands-on experience in

Day – 3 Practical session on JavaScript Learned how to give properties

Day – 5 Practical Session on Functions in Learned Function Syntax and

WEEK – 3 (From Dt 12-06-2023to Dt 17-06-2023)

Objective of the Activity Done:

This week we focused on JavaScript to create dynamic web page.

Day – 1 Discussed overview of Bootstrap. Learned Bootstrap framework

Day - 2 Practical sessions on Bootstrap Gained hands-on experience in

Day – 3 Practical sessions on Bootstrap Learned how to use bootstrap to

Day – 4 Formed into a group of 4 Learned how to handle the

Day – 5 Selected project – “Personal Developed team work and

Day –6 Project Mentoring session i.e., Developed strategic planning

WEEK – 4 (From Dt 19-06-2023 to Dt 24-06-2023)