A
Project Report
On
Personal Portfolio Website
Submitted in partial fulfilment of the requirement for the V semester
Bachelor of Technology (CSE)
By
Mayank Kumar (2061862)
Rajat Bisht(2061904)
Sanjay Singh Mehara(2061945)
Bharat Kandpal(2118031)
Under the Guidance of
Mr. Lalit Kumar
Assistant Professor
Department of CSE
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING
GRAPHIC ERA HILL UNIVERSITY, BHIMTAL CAMPUS
SATTAL ROAD, P.O. BHOWALI
DISTRICT- NAINITAL-263132
2022-2023
STUDENT’S DECLARATION
Mayank Kumar, Sanjay Singh Mehara, Bharat Kandpal, Rajat Bisht hereby declare the work,
which is being presented in the project, entitled “Personal Portfolio Website “in partial fulfilment
of the requirement for the award of the degree (B. Tech CSE) in the session 2022-2023, is an authentic
record of my own work carried out under the supervision of Graphic Era Hill University college.
The matter embodied in this project has not been submitted by me for the award of any other degree.
Date: ……………….
(Full signature of student)
CERTIFICATE
The project report entitled “Personal Portfolio Website” being submitted by Mayank Kumar
S/o Mr. Naveen Chandra Arya Enrollment No. 200111161 Roll no 2061862 to Graphic Era Hill
University Bhimtal Campus for the award of Bonafede work carried out by him. He has worked
under my guidance and supervision and fulfilled the requirement for the submission of report.
(…………………)
(……………………)
Project Guide
(HOD, CSE Dept.)
CERTIFICATE
The project report entitled “Personal Portfolio Website” being submitted by Sanjay Singh
Mehara S/o Mr. Deewan Singh Mehara Enrollment No. 20011926 Roll no 2061922 to Graphic
Era Hill University Bhimtal Campus for the award of Bonafede work carried out by him. He
has worked under my guidance and supervision and fulfilled the requirement for the
submission of report.
(…………………)
Project Guide
(……………………)
(HOD, CSE Dept.)
CERTIFICATE
The project report entitled “Personal Portfolio Website” being submitted by Rajat Bisht S/o
Mr. D S Bisht Enrollment No. 200111165 Roll no 2061922 to Graphic Era Hill University
Bhimtal Campus for the award of Bonafede work carried out by him. He has worked under my
guidance and supervision and fulfilled the requirement for the submission of report.
(…………………)
Project Guide
(……………………)
(HOD, CSE Dept.)
ACKNOWLEDGEMENT
We take immense pleasure in thanking “Mr. Lalit Mohan” (Designation, CSE, GEHU Bhimtal
Campus) to permit me and carry out this project work with his excellent and optimistic supervision.
This has all been possible due to his novel inspiration, able guidance and useful suggestions that helped
me to develop as a creative researcher and complete the research work, in time.
Words are inadequate in offering my thanks to GOD for providing me everything that I need. I
again want to extend thanks to our President “Prof. (Dr.) Kamal Ghanshala” for providing us all
infrastructure and facilities to work in need without which this work could not be possible.
Many thanks to Professor “Prof (Dr.) Manoj Chandra Lohani” (Director, GEHU Bhimtal), “Mr.
XYZ” (Designation, CSE, GEHU), “Mrs. XYZ” and “Ms. XYZ” (Designation, CSE, GEHU) and
other faculties for their insightful comments, constructive suggestions, valuable advice, and time in
reviewing this thesis.
We would also like to pay my sincere thanks to all my friends and well-wishers for their help and
wishes for the successful completion of this research.
3070mayankukgmail.com
Surend0409@gmail.com
Mehrasanjay619@gmail.com
TABLE OF CONTENTS
CHAPTER 1: Introduction ......................................................................... 7
1.1
Objectives........................................................................................... 1
1.2
Home Section………………............................................................ 1
1.3
About Section………........................................................................ 4
1.4
Skills Section……………………….……........................................ 4
1.5
Project Section………....................................................................... 5
1.6
Contact Detail Section………………………………………………6
CHAPTER 2: Software Used…................................................................... 7
2.1
HTML ............................................................................................. 7
2.2
CSS……………………………………………….......................... 31
2.3
JavaScript…….…….…………………………….......................... 31
CHAPTER 3: Significance…........................................................................ 7
CHAPTER 4: Challenges………................................................................... 7
CHAPTER 5: Conclusion………................................................................... 7
CHAPTER 6: References…….…................................................................... 7
Abstract
This personal portfolio is based on Web Development. This is developed using HTML 5, CSS 3,
and JS. Code Editor used for this project is VS Code. It displays the professional background of an
individual. It displays brief information about project till date , skills, education and contact details
along with social media links. All the elements are rendered distinctively on the website.
List Of Figures
1. Home Section
2. About Section
3. Skills Section
4. Project Section
5. Contact Details Section
List Of Symbols , Abbreviations And
Nomenclature
1. IDE : Integrated Development Environment
2. P
3. CSS : Cascading Style Sheets
4. JS : JavaScript
5. VS Code : Visual Studio Code
Introduction
Personal Portfolio Website provides brief information about the professional background of an
individual. This project comprises of three files. First is an HTML file for creating markup of
the application on the web. Then CSS file is used to provide more styles to the website. Then
JS file is used to give a proper functionality to the application through JavaScript.
1.1 Objectives
1.1.1. Elements rendered distinctly
1.1.2. Brief information about
Projects
Education
Skills
Contacting Ways
1.2 Home Section
It displays my name, my current work status and where I am from. On the top it also
has navigation bar which scrolls us to the corresponding section on the page where we
have to visit. The navigation bar has the fixed position on the whole page.
1.3 About Section
It displays a quick introduction for me a button also provided to download /view my
resume. It is a small introduction of mine in this section there is a information about
my academics also. The navigation bar has sticky property which is visible even after
scrolling down.
1.4 Skills Section
It displays my technical skills, most of these technical skills has been learned through online
certified courses.
1.5 Project Section
In this section there is a detail about my projects when anyone will click on the info button
then the page will be redirected to the github profile where there will be the full details of the
projects.
1.6 Contact Detail Section
The section has all the links listed below:
a) WhatsApp
b) Email
c) Telegram
d) Facebook
e) Instagram
f) LinkedIn
g) GitHub
Software Used
Code editor I 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 foe this project are HTML 5,
CSS 3 & JavaScript.
2.1 HTML5
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.
2.2 CSS 3
CSS is a language for describing the presentation of Web Pages, including colours layouts and
fonts.
2.3 JavaScript
JavaScript is a text-based programming language used both on the client – side and server –
side that allows you to make web pages interactive. It gives web pages interactive elements
that engage a user.
HTML CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="1.js" defer></script>
<script src="https://smtpjs.com/v3/smtp.js" defer></script>
<title>DrAx</title>
</head>
<body>
<div id="preLoader"></div>
<div class="imp">
<header class="main">
<div class="topnav">
<h3>Mayank</h3>
<nav>
<ul>
<li class="active" data-intro="section1">Home</li>
<li data-intro="section2">About</li>
<li data-intro="section3">Skills</li>
<li data-intro="section4">Projects</li>
<li data-intro="section5">Contact Me</li>
</ul>
</nav>
</div>
<div class="Container" id="section1">
<dvi class="insi">
<img src="./kisspng-software-developer-web-developer-curriculum-vitae-aboutme-cartoon-clipart-full-size-clipart-3-5d12fc42d28d62.4318072815615253148624.png"
alt="Mayank Kumar">
</dvi>
<div class="hi">Hi,</div>
<div class="intro">My name is <span>Mayank Kumar</span></div>
<div class="future">upcoming Software Engineer</div>
<div class="btn">
<a href="./resume.pdf" target="_blank"><button>Download CV</button></a>
<a href="#"><button>Connect</button></a>
</div>
</div>
</header>
<section class="about" id="section2">
<div class="headline">
<h1>About Me</h1>
</div>
<article class="start">
<p class="say">
HI! I am a third year undergrad at Graphic Era Hill University pursuing a
Bachelor of Technology
majoring in Computer Science and Engineering. I am a passionate Competitive
Programmer and love
giving structure to my ideas using coding. Currently, I am 5 star at HackerRank,
specialist at
Codeforces and Knight at Leetcode.
</p>
<div class="acad">
<ul class="acad1">
<li class="ac">ACADEMICS</li>
<li>High School | Sanwal School | Nainital </li>
<li>73%</li>
<li>Intermediate | S.t Xavier's School | Nainital</li>
<li>85%</li>
<li>B.Tech | Graphic Era Hill University | Bhimtal </li>
<li>(8.23 / 10) CGPA</li>
</ul>
</div>
</article>
</section>
<section class="skill" id="section3">
<div class="headline">
<h1>My Skills</h1>
</div>
<div class="info">
<ul class="symbol">
<li>HTML <img src="./html-5.png" alt="Reload"></li>
<li>Css <img src="./css-3.png" alt="Reload"></li>
<li>JavaScript <img src="./js.png" alt="Reload"></li>
<li>NodeJs <img src="./nodejs.png" alt="Reload"></li>
<li>React <img src="./react(1).png" alt="Reload"></li>
<li>MySQL <img src="./mysql.png" alt="Reload"></li>
<li>C++ <img src="./c.png" alt=""></li>
</ul>
</div>
</section>
<section class="proj" id="section4">
<div class="headline">
<h1>Projects</h1>
</div>
<div class="portfolio">
<h2>
<ul>
<li> Personal Portfolio Website </li>
</ul>
</h2>
<img src="./myppn.png" alt="Reload">
<div class="bbt">
<button>INFO</button>
</div>
</div>
<div class="portfolio">
<h2>
<ul>
<li>Pathfinding Visualizer</li>
</ul>
</h2>
<img src="./ppv.png" alt="Reload">
<div class="bbt">
<button>INFO</button>
</div>
</div>
</section>
<section class="chat" id="section5">
<div class="headline">
<h1> Let's Talk</h1>
</div>
<div class="group">
<div class="connect">
<div class="cd">
<a href="https://wa.me/6397126579" target="_blank" class="no1"><img
src="./whatsapp.png"
alt="Error"></a>
</div>
<div class="cd">
<a href="mailto:3070mayankuk@gmail.com" target="_blank"
class="no"><img src="./email.png" alt="Error"></a>
</div>
<div class="cd">
<a href="https://telegram.org/dl" target="_blank" class="no"><img
src="./telegram.png"
alt="Error"></a>
</div>
</div>
<form id="form" class="conn">
<div class="form">
<input type="text" autocomplete="off" required id="name" placeholder="Your
Full Name">
</div>
<div class="form">
<input type="email" autocomplete="off" required id="mail" placeholder="Your
Email">
</div>
<div class="form">
<textarea name="" autocomplete="off" required id="msg" placeholder="Your
Message" cols="30" rows="10"></textarea>
</div>
<div class="bbt" id="btn">
<button>Send</button>
</div>
</form>
</div>
</section>
<footer class="end">
<a href="https://www.facebook.com/mayank.kumararya.71?mibextid=ZbWKwL"
target="_blank"><img src="./facebook.png" alt="Reload"></a>
<a
href="https://www.instagram.com/invites/contact/?i=1n9qnvvxltfmw&utm_content=2u95wdt"
target="_blank"><img src="./instagram.png" alt="Reload"></a>
<a href="Github"><img src="./github.png" alt="Reload"></a>
<a href="https://www.linkedin.com/in/mayank-kumar-83a32b204"
target="_blank"><img src="./linkedin.png" alt="Reload"></a>
<div class="nme">
<H2>MAYANK KUMAR</H2>
</div>
<div class="cpy">
<H2>Copyright © 2022|All Rights Reserved</H2>
</div>
<div class="apr">
<H2>This Website Is Designed And Developed By Mayank Kumar</H2>
</div>
</footer>
</div>
</body>
</html>
CSS CODE :
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&family=Varel
a+Round&display=swap');
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;800&family=
Varela+Round&display=swap');
@import
url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Poppins:wght@200
;300;400;500&family=Varela+Round&display=swap');
@import
url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Libre+Baskerville&
family=Poppins:wght@200;300;400;500&family=Solway:wght@400;500;700&family=Varel
a+Round&display=swap');
*{
margin: 0;
padding: 0;
}
.imp {
background-image: url("./wall-wallpaper-concrete-colored-painted-textured-concept.jpg");
}
.main {
color: white;
font-family: 'Poppins', sans-serif;
}
.hi {
font-size: 3rem;
padding-top: 161px;
padding-left: 120px;
color: #E6E8FA;
}
.intro {
font-size: 3.5rem;
padding-left: 120px;
color: #E6E8FA;
font-weight: bold;
}
.intro span {
color: #d5e8eb;
animation: animate 1s ease-in-out infinite alternate;
}
@keyframes animate {
form {
text-shadow: 0 0 20px #289aab;
}
to {
text-shadow: 0 0 30px #289aab,
0 0 10px #289aab;
}
}
.future {
font-size: 3rem;
padding-left: 120px;
color: #E6E8FA;
}
.Container {
background-image: url("./n.jpeg");
background-repeat: no-repeat;
background-size: cover;
padding-top: 40px;
height: 100vh;
text-align: left;
}
.insi img {
float: right;
height: 231px;
padding: 41px;
margin-top: 150px;
}
.topnav {
background-color: #FAF0E6;
color: #191970;
top: 0%;
width: 100%;
overflow: hidden;
position: fixed;
}
.topnav h3 {
float: left;
text-align: center;
padding: 6px 23px;
font-family: 'Caveat', cursive;
font-size: 28px;
margin-right: 20px;
}
.topnav li {
float: left;
color: #191970;
text-align: center;
padding: 13px 36px;
list-style: none;
text-decoration: none;
font-size: 17px;
font-weight: bold;
}
.topnav li:hover {
background-color: #191970;
color: #FAF0E6;
cursor: pointer;
}
.about {
height: fit-content;
}
.about div {
text-align: center;
color: white;
}
.headline h1 {
text-align: center;
margin-top: 2rem;
font-family: 'Varela Round', sans-serif;
font-size: 70px;
text-decoration: underline;
color: #E6E8FA;
}
.start {
margin-top: 2rem;
margin-left: 120px;
margin-right: 120px;
}
.say {
font-family: 'Poppins', sans-serif;
font-size: 34px;
text-align: center;
color: #E6E8FA;
}
.acad {
margin-top: 3rem;
padding: 1rem;
border: 4px solid white;
border-radius: 18px;
margin-left: 190px;
margin-right: 190px;
box-shadow: 0 5px 50px 0 white inset,
0 5px 50px 0 white;
background-color: #18559b;
}
.acad1 li {
list-style: none;
color: white;
font-size: 35px;
font-family: 'Libre Baskerville', serif;
padding: 20px;
border-radius: 3px;
}
.ac {
font-weight: bold;
text-decoration: underline;
}
.btn {
margin-top: 25px;
margin-left: 120px;
}
.btn button {
padding: 12px 14px;
border-radius: 5px;
border: 3px solid white;
color: white;
font-weight: 400;
font-size: 19px;
margin: 0 6px;
cursor: pointer;
background-image: url("./n.jpeg");
background-size: cover;
background-repeat: no-repeat;
}
.btn button:hover {
box-shadow: 0 5px 50px 0 white inset,
0 5px 50px 0 white;
color: #000;
}
.symbol li img {
height: 60px;
margin-left: 30px;
}
.symbol {
font-size: 40px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.symbol li {
float: left;
display: block;
text-align: center;
padding: 74px;
text-decoration: none;
font-weight: bold;
color: #d5e8eb;
animation: animate 1s ease-in-out infinite alternate;
}
.portfolio img {
height: 350px;
padding: 25px;
margin-left: 100px;
}
.portfolio {
margin-top: 2rem;
border: 6px solid white;
border-radius: 9px;
margin-left: 280px;
margin-right: 280px;
box-shadow: 0 5px 50px 0 white inset,
0 5px 50px 0 white;
background-color: #18559b;
}
.portfolio:hover {
background-color: black;
color: white;
border: 6px solid white;
}
.portfolio:hover button {
color: black;
background-color: white;
border: 4px solid white;
}
.portfolio:hover h2 {
color: white;
}
.portfolio h2 {
margin-top: 1rem;
margin-left: 120px;
text-decoration: underline;
color: white;
font-weight: bold;
margin-bottom: 1rem;
}
.bbt button {
padding: 12px 14px;
border-radius: 9px;
border: solid black;
color: white;
background-color: black;
font-weight: bold;
font-size: 15px;
cursor: pointer;
margin-bottom: 1rem;
}
.bbt {
text-align: center;
}
.conn {
margin-top: 4rem;
background-color: #18559b;
border: 6px solid white;
box-shadow: 0 5px 50px 0 white inset,
0 5px 50px 0 white;
border-radius: 9px;
width: 95%;
margin-left: 106px;
margin-right: 280px;
}
.group {
display: flex;
}
.cd {
padding: 20px;
margin-top: 46px;
margin-left: 46px;
background-image: url("./wall-wallpaper-concrete-colored-painted-textured-concept.jpg");
border-radius: 19px;
}
.form {
margin-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
}
.form input {
width: 95%;
padding: 1rem;
font-size: 1rem;
font-weight: 400;
background-color: #000;
border-radius: 25px;
border: solid white;
color: white;
}
.form textarea {
width: 95%;
padding: 1rem;
font-size: 1rem;
font-weight: 400;
background-color: #000;
border-radius: 25px;
border: solid white;
color: white
}
.end {
background-color: #FAF0E6;
margin-top: 4rem;
text-align: center;
}
.end a img {
height: 40px;
padding: 1rem;
}
.end div {
color: #191970;
}
.apr {
padding-bottom: 20px;
}
.cd:hover {
background-image: url("./n.jpeg");
}
.no1 {
margin-top: 20px;
}
#preLoader {
background: #000 url("./fly-car-logo.gif") no-repeat center;
background-size: 15%;
height: 100vh;
width: 100%;
position: fixed;
z-index: 100;
}
JavaScript :
var loader = document.getElementById("preLoader")
window.addEventListener("load", function () {
loader.style.display = "none";
})
document.querySelectorAll('nav li').forEach(function (listItem) {
listItem.addEventListener('click', function () {
var topPos = document.getElementById(listItem.dataset.intro).offsetTop - 80;
console.log(topPos);
window.scrollTo({
top: topPos,
left: 0,
behavior: 'smooth'
})
})
})
var btn = document.getElementById('btn');
btn.addEventListener('click',function(e){
e.preventDefault()
var name = document.getElementById('name').value;
var email = document.getElementById('mail').value;
var message = document.getElementById('msg').value;
var body = 'Name: '+name +'<br/> Email: ' + email + '<br/> Message :' + message;
Email.send({
Host : "smtp.elasticemail.com",
Username : "3070mayankuk@gmail.com",
Password : "CF12C612BD8CA3A8FE42093B6403E5AD8841",
To : '3070mayankuk@gmail.com',
From : email,
Subject : "Message for you",
Body : body,
}).then(
message => alert(message)
);
})
SIGNIFICANCE
Significance of personal portfolio is that it presents your work that represents your
performance and skills as well as strengths and weaknesses. The culmination of work that is
represented in a portfolio allows peers, mentors, and potential employers to get an
understanding of you as a student, your passions, and your work.
CHALLENGES
Challenges faced during this project were:
1. Linking Google drive files like my images and my documents.
2. Spacing out the elements properly using CSS.
3. Choosing background was a major challenge as it had to be both formal and
soothing to eyes.
CONCLUSION
At last, to conclude, I have developed a simple and basic Personal Portfolio Website using
HTML5, CSS, JavaScript using VS Code as IDE which I would continue to maintain in future
too.
REFFERENCES
Coursera Course: Introduction to Web Development, UC Davis by Daniel Randall - It taught
all the three languages HTML5, CSS and JS thoroughly.
Stack Overflow: How to modify Google drive links to embed in anchor tag in HTML.
W3 Schools: How to give all social media and contacting links.