Mwa Report

PERSONAL PORTFOLIO
CB19P45 - MODERN WEB APPLICATION
submitted by
APARNA V - 201401006
in partial fulfillment for the award of the degree
of
BACHELOR OF TECHNOLOGY
IN
COMPUTER SCIENCE AND BUSINESS SYSTEMS
RAJALAKSHMI ENGINEERING COLLEGE
CHENNAI – 602 105.
NOV 2022
1
BONAFIDE CERTIFICATE
Certified that this CB19P45 - MODERN WEB APPLICATION PROJECT

REPORT on “PERSONAL PORTFOLIO” is the bonafide work of “APARNA
V(201401006)" who carried out the project work under my supervision.
SIGNATURE SIGNATURE
Mrs. M.MAHARASI, M.E., Dr. K. DEVAKI, M.E., Ph.D.,
SUPERVISOR HEAD OF THE DEPARTMENT
ASSISTANT PROFESSOR(SG) PROFESSOR
Department of Computer Science and Department of Computer Science and
Business Systems Business Systems
Rajalakshmi Engineering College Rajalakshmi Engineering College
Thandalam, Chennai. Thandalam, Chennai.
Submitted to Project and Viva-Voce Examination held on _________________
INTERNAL EXAMINER EXTERNAL EXAMINER
2
ACKNOWLEDGEMENT
I wish to express my gratitude to the Chairperson Dr. THANGAM
MEGANATHAN and the Principal Dr. S.N. MURUGESAN, Rajalakshmi
Engineering College, who have enlightened my life quality and discipline along
with academic focus.
I express my earnest and deep sense of gratitude to Dr. K. DEVAKI, Professor and
Head, Department of Computer Science and Business Systems, who had always
stood as a moral support and guided me tirelessly with their valuable ideas along
with constant encouragement to shine as a good technologist throughout the period
of study.
I owe my sincere regards to my project guide, Mrs. M.MAHARASI, Assistant

Professor (SG), Rajalakshmi Engineering College, for his complete support,
guidance, and encouragement throughout the process of carrying out this
internship.
I sincerely thank my project supervisor Mrs. M.MAHARASI, Assistant Professor

(SG), Rajalakshmi Engineering College, for allowing me to work in the lab and
providing all facilities to complete the project. I am grateful to him for his able
guidance, timely suggestions, and instructive supervision. It would have been
impossible to complete the project without her guidance and support. The sincere
cooperation of the whole lab was invaluable.
I wish to avail myself of this opportunity to thank my beloved parents and friends
for their continuous interest in my progress and constant support.
Above all, my prayers to Lord Almighty for having showered his blessings on me
to make all my endeavors.
3
ABSTRACT
PERSONAL PORTFOLIO is a website which is used to expose our talent to the
audiences when they visit the site. It is an alternative to a resume which has high
level features to showcase our talents. Personal Portfolio generally tells us about
ourselves on a website. This website allows users to communicate with people,
share ideas, events, and activities. Portfolio sites can be defined as web-based
services that allow individuals to; Construct a public or semi-public profile within
a bounded system, articulate a list of photos and videos within Portfolio, and be
used to contact the user.
Portfolios strictly aim to market your skills and talents to others. If you’re in a field
like photography, design, writing, or other creative work — a portfolio is essential.
Your personal portfolio brings awareness to your expertise, builds your personal
brand, and helps your land new clients.
A portfolio has more elements to manage than a simple blog or one page website.
But even for web designer beginners, there are easy ways to build one.
4
TABLE OF CONTENT
CHAPTER NO. TITLE PAGE NO.
1. INTRODUCTION 7
1.1 DEFINITION OF THE 7

SYSTEM
1.2 OBJECTIVE AND 7

PURPOSE
1.3 MOTIVATION 7
2 SYSTEM ANALYSIS 8
2.1 INTRODUCTION 8
2.2 PROBLEM 8
DESCRIPTION
2.3 ADVANTAGES 9
2.4 DISADVANTAGES 9
3 SYSTEM DESIGN 10
3.1 INTRODUCTION 10
3.2 OVERVIEW OF THE 10

PROPOSED SYSTEM
3.3 DETAILED 11
DESCRIPTION OF THE
PROPOSED SYSTEM
5
3.4 ARCHITECTURAL 12
DIAGRAM
3.5 UML DIAGRAM 13
3.5.1 USE CASE DIAGRAM 14
3.5.2 SEQUENCE DIAGRAM 15
3.5.3 FLOW CHART 16
3.5.4 COMPONENT 17
DIAGRAM
4 SYSTEM 18
IMPLEMENTATION
4.1 SYSTEM 18
CONFIGURATION
4.1.1 SOFTWARE 18
REQUIREMENTS
4.1.2 HARDWARE 22
REQUIREMENTS
4.2 SAMPLE CODE 23
4.3 OUTPUT 60
5 CONCLUSION 65
6 REFERENCES 65
6
CHAPTER 1
INTRODUCTION
1.1.DEFINITION OF THE SYSTEM
Online Portfolio System allows users to communicate with people, share ideas,
events, and activities within the portfolio system network.
1.2.OBJECTIVE AND PURPOSE
Portfolio sites as web-based services that allow individuals to: (1) Construct a
public or semi-public profile within a bounded system, (2) articulate a list of
photos and videos within Portfolio, (3) and be used to contact the user.
1.3.MOTIVATION
With the modern lifestyle, people feel bored looking onto a long resume. Instead
PERSONAL PORTFOLIO is used to showcase the person's talent with various
pictures and colors that attracts the people's attention. As the goal of the research,
the motivation is to build up a system for myself to showcase my skills using
HTML, CSS AND JAVASCRIPT with a contact form connected to PHP AND
MYSQL.
7
CHAPTER 2
SYSTEM ANALYSIS
2.1 INTRODUCTION
The purpose of the System Analysis is to produce the brief analysis task and also to
establish complete information about the concept, behavior and other constraints
such as performance measure and system optimization. The goal of System
Analysis is to completely specify the technical details for the main concept in a
concise and unambiguous manner.
2.2 PROBLEM DESCRIPTION
● Handling thousands of long resumes is a challenging task.
● Interacting with every individual face is quite a difficult activity.
● creating a portfolio, which will give a worldwide exposure to users and will
be browsed regularly by casting agents.
● A personal portfolio website is a professional website that provides
information about what you do, what services you may offer, and how to
contact you or your company.
● Portfolio websites are an easy way to promote yourself, your brand, or your
business.
8
● The system will also provide a platform for models, actors, child talent and
photographers to display their portfolios on and get job offers from.
2.3 ADVANTAGES
● An Online Portfolio Provides a Platform to Highlight Your Best Work.
● It Boosts Your Online Presence.
● An Online Portfolio is a Business Card for Future Clients and Potential
Employers.
● A Digital Portfolio Reflects Your Personality and Creativity.
● Online Portfolios Establish and Strengthen Your Brand.
● An Online Portfolio Exudes Consistency and Professionalism.
● A Picture is Still Worth a Thousand Words.
2.4 DISADVANTAGES
● An online portfolio can become expensive.
● If a company you interview with does not have Internet access, your
portfolio would not be seen by a hiring manager.
● You have less ability to monitor who views your personal information.
9
CHAPTER 3
SYSTEM DESIGN
3.1 INTRODUCTION
Design is a meaningful engineering representation of something that is to be built.
System Design is a process through which the requirements are translated into a
representation of the software. Design provides us with representations of software
that can be assessed for quality. System architecture is primarily concerned with
the internal interfaces among the system components or subsystems, and the
interface between the system and its external environment, especially the user. It
alludes to the overall structure of the software and the ways in which that structure
provides conceptual integrity for a system. The main objective is the techniques
that can stealthily acquire group dynamic information from key management. We
show that insiders and outsiders can successfully obtain group membership
information in many popular key management schemes. In secure group
communications, users of a group share a common group key.
3.2 OVERVIEW OF THE PROPOSED SYSTEM
If you want to create a stunning resume, showcase your creative portfolio, or gain
new clientele, making a personal portfolio website is a great idea.
10
3.3 DETAILED DESCRIPTION OF THE PROPOSED SYSTEM
I. HOME PAGE
This page displays the image and introduction which shows the name and
description of myself using HTMLand CSS.
II. ABOUT PAGE
The About page in this system contains a biography which includes name, email,
address, phone number, etc and it contains skills and education qualifications. It is
designed using HTML and CSS.
III. ACHIEVEMENT PAGE
The About page in this system contains my achievements and my participation in
events to showcase my talent. It is designed using HTML and CSS.
IV. CONTACT PAGE
This is designed using html and css where when the viewer wants to contact me
they have to give input which will be stored in the database.
11
3.4 ARCHITECTURAL DIAGRAM
12
3.5 UML DIAGRAMS
A UML diagram is a partial graphical representation (view) of a model of a system
under design, implementation, or already in existence. The UML diagram contains
graphical elements (symbols) - UML nodes connected with edges (also known as
paths or flows) - that represent elements in the UML model of the designed system.
The UML model of the system might also contain other documentation such as use
cases written as templated texts.
3.5.1 USE CASE DIAGRAM:
In the Unified Modelling Language (UML), a use case diagram can summarize the
details of your system's users (also known as actors) and their interactions with the
system. To build one, you'll use a set of specialized symbols and connectors. An
effective use case diagram can help your team discuss and represent:
• Scenarios in which your system or application interacts with people,
organizations, or external system
• Goals that your system or application helps those entities (known as actors)
achieve.
• The scope of your system.
13
3.5.2 SEQUENCE DIAGRAM:
In the Unified Modelling Language (UML), A sequence diagram is a type of
interaction diagram because it describes how and in what order a group of objects
works together. These diagrams are used by software developers and business
professionals to understand requirements for a new system or to document an
existing process. Sequence diagrams are sometimes known as event diagrams or
event scenarios. Sequence diagrams can be useful references for businesses and
other organizations. Try drawing a sequence diagram to:
14
• Represent the details of a UML use case.
• Model the logic of a sophisticated procedure, function, or operation.
• See how objects and components interact with each other to complete a process.
• Plan and understand the detailed functionality of an existing or future scenario.
15
3.5.3 FLOW CHART:
A flowchart is a type of diagram that represents a workflow or process. A
flowchart can also be defined as a diagrammatic representation of an algorithm, a
step-by-step approach to solving a task. The flowchart shows the steps as boxes of
various kinds, and their order by connecting the boxes with arrows.
16
3.5.4 COMPONENT DIAGRAM:
Component diagram is a special kind of diagram in UML. The purpose is also
different from all other diagrams discussed so far. It does not describe the
functionality of the system but it describes the components used to make those
functionalities. Component diagrams are used in modelling the physical aspects of
object-oriented systems that are used for visualizing, specifying, and documenting
component-based systems and also for constructing executable systems through
forward and reverse engineering. Component diagrams are essentially class
diagrams that focus on a system's components that are often used to model the
static implementation view of a system.
17
CHAPTER 4
SYSTEM IMPLEMENTATION
4.1 SYSTEM CONFIGURATION
4.1.1 SOFTWARE REQUIREMENTS
● PHP version 5.4.3
● My SQL Database 5.5.24
● Visual Studio Code
WEB DESIGN AND DEVELOPMENT
Web design is a broad term covering many different skills and disciplines that are
used in the production and maintenance of websites. The different areas of web
design include; web graphic design, interface design, authoring; including
standardized code and proprietary software, user experience design and search
engine optimization. Often many individuals will work in teams covering different
aspects of the design process, although some designers will cover them all.
Web development is a term for the work involved in developing a web site for the
Internet (World Wide Web) or an intranet (a private network). However, among
web professionals, "web development" usually refers to the main non-design
aspects of building web sites: writing markup and coding. Web development can
range from developing the simplest static single page of plain text to the most
18
complex web-based internet applications, electronic businesses, or social network
services.
PHP development began in 1994 when the programmer Rasmus Lerdorf initially
created a set of Perl scripts he called "Personal Home Page Tools" to maintain his
personal homepage. The scripts performed tasks such as displaying his resume and
recording his web-page traffic. Lerdorf initially announced the release of PHP on
the Usenet discussion group on June 8, 1995. On July 13, 2004, PHP 5 was
released, powered by the new Zend Engine II. PHP 5 included new features such as
improved support for object-oriented programming, the PHP Data Objects (PDO)
extension (which defines a lightweight and consistent interface for accessing
databases), and numerous performance enhancements. In 2008, PHP 5 became the
only stable version under development. Late static binding had been missing from
PHP and was added in version 5.3. Some important features of PHP are listed here:
• PHP is a general-purpose scripting language that is especially suited to
server-side web development where PHP generally runs on a web server. Any PHP
code in a requested file is executed by the PHP runtime, usually to create dynamic
web page content or dynamic images used on Web sites or elsewhere.
• PHP is a powerful tool for making dynamic and interactive Web pages.
19
• PHP combined with MySQL are cross-platform (you can develop in Windows
and serve on a Unix platform)
• PHP runs on different platforms (Windows, Linux, Unix, etc.)
• PHP is compatible with almost all servers used today (Apache, IIS, etc.)
• PHP supports many databases (MySQL, Informix, Oracle, Sybase, Solid,
PostgreSQL, Generic ODBC, etc.)
• PHP is an open source software. Security in PHP:
• PHPIDS (PHP Intrusion Detection System) detects attacks based on cross-site
scripting (XSS), SQL injection, header injection, directory traversal, remote file
execution, remote file inclusion, and denial-of-service (DoS).
• The algorithm we have used in designing our system known as Salt Algorithm, is
typically used for password authentication, the salt is stored along with the output
of the one way function, sometimes along with the number of iterations to be used
in generating the output (for key stretching).
MySQL It is named after co-founder Michael Widenius' daughter, My. The SQL
phrase stands for Structured Query Language.
20
On 15 June 2001, NuSphere sued MySQL AB, TcX DataKonsult AB and its
original authors Michael ("Monty") Widenius and David Axmark in U.S District
Court in Boston.
In October 2005, Oracle Corporation acquired Innobase OY, the Finnish company
that developed the third-party InnoDB storage engine that allows MySQL to
provide such functionality as transactions and foreign keys. After the acquisition,
an Oracle press release mentioned that the contracts that make the company's
software available to MySQL AB would be due for renewal (and presumably
renegotiation) some time in 2006. During the MySQL Users Conference in April
2006, MySQL issued a press release that confirmed that MySQL and Innobase OY
agreed to a "multi-year" extension of their licensing agreement. In October 2005,
Oracle Corporation acquired Innobase OY, the Finnish company that developed the
third-party InnoDB storage engine that allows MySQL to provide such
functionality as transactions and foreign keys. After the acquisition, an Oracle
press release mentioned that the contracts that make the company's software
available to MySQL AB would be due for renewal (and presumably renegotiation)
some time in 2006. During the MySQL Users Conference in April 2006, MySQL
issued a press release that confirmed that MySQL and Innobase OY agreed to a
"multi-year" extension of their licensing agreement.
In January 2009, Oracle bought MySQL.
21
Usage of MySQL
• MySQL is a database management system & relational database system.
• MySQL software is Open Source and can be used under GPL.
• The MySQL Database Server is very fast, reliable, and easy to use.
• MySQL Server works in client/server or embedded systems.
• It implements SQL functions using a highly optimized class library that should be
as fast as possible. Usually there is no memory allocation at all after query
initialization.
• It is designed to be fully multi-threaded using kernel threads, to easily use
multiple CPUs if they are available.
4.1.2 HARDWARE REQUIREMENTS
● Processor: Pentium 4 or higher
● RAM: 512 MB or more
● Memory Space 80 GB or higher.
22
4.2 SAMPLE CODE
index.php
<?php
$conn = mysqli_connect('localhost','root','','contact_db') or die('connection failed');
if(isset($_POST['send'])){
$name = mysqli_real_escape_string($conn, $_POST['name']);
$email = mysqli_real_escape_string($conn, $_POST['email']);
$number = mysqli_real_escape_string($conn, $_POST['number']);
$msg = mysqli_real_escape_string($conn, $_POST['message']);
$select_message = mysqli_query($conn, "SELECT * FROM `contact_form`

WHERE name = '$name' AND email = '$email' AND number = '$number' AND
message = '$msg'") or die('query failed');
if(mysqli_num_rows($select_message) > 0){
$message[] = 'message sent already!';
}else{
mysqli_query($conn, "INSERT INTO `contact_form`(name, email, number,

message) VALUES('$name', '$email', '$number', '$msg')") or die('query failed');
$message[] = 'message sent successfully!';
23
}
?>
<!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">
<title>Complete Responsive Personal Portfolio Website Design</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
<link rel="stylesheet" href="css/style.css">
24
</head>
<body>
<?php
if(isset($message)){
foreach($message as $message){
echo '
<div class="message" data-aos="zoom-out">
<span>'.$message.'</span>
<i class="fas fa-times" onclick="this.parentElement.remove();"></i>
</div>
';
?>
<header class="header">
<div id="menu-btn" class="fas fa-bars"></div>
25
<a href="#home" class="logo">Portfolio</a>
<nav class="navbar">
<a href="#home" class="active">Home</a>
<a href="#about">About</a>
<a href="#services">Achievements</a>
<a href="#portfolio">ALL I Need :</a>
<a href="#contact">Contact</a>
</nav>
<div class="follow">
<a href="#" class="fab fa-facebook-f"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-linkedin"></a>
<a href="#" class="fab fa-github"></a>
</div>
</header>
<section class="home" id="home">
<div class="image" data-aos="fade-right">
26
<img src="images/i1.jpg" alt="">
</div>
<div class="content">
<h3 data-aos="fade-up">Heyyy, I am Aparna Vinoraj</h3>
<span data-aos="fade-up">Student</span>
<p data-aos="fade-up">In pursuit of a dream :)))</p>
<a data-aos="fade-up" href="#about" class="btn">about me</a>
</div>
</section>
<section class="about" id="about">
<h1 class="heading" data-aos="fade-up"> <span>biography</span> </h1>
<div class="biography">
<p data-aos="fade-up">Doing my 3rd year in btech computer science and

business systems</p>
<div class="bio">
<h3 data-aos="zoom-in"> <span>name : </span> APARNA V </h3>
27
<h3 data-aos="zoom-in"> <span>email : </span> aparnavinoraj@gmail.com
</h3>
<h3 data-aos="zoom-in"> <span>address : </span> TamilNadu, india </h3>
<h3 data-aos="zoom-in"> <span>phone : </span> 7358746968 </h3>
<h3 data-aos="zoom-in"> <span>age : </span> 20 years </h3>
</div>
<a href="#" class="btn" data-aos="fade-up">download CV</a>
</div>
<div class="skills" data-aos="fade-up">
<h1 class="heading"> <span>skills</span> </h1>
<div class="progress">
<div class="bar" data-aos="fade-left"> <h3><span>C Prgramming

Language</span> <span>95%</span></h3> </div>
<div class="bar" data-aos="fade-right"> <h3><span>UI/UX</span>

<span>80%</span></h3> </div>
<div class="bar" data-aos="fade-left"> <h3><span>Data Science</span>

<span>30%</span></h3> </div>
</div>
28
</div>
<div class="edu-exp">
<h1 class="heading" data-aos="fade-up"> <span>education &

experience</span> </h1>
<div class="row">
<div class="box-container">
<h3 class="title" data-aos="fade-right">education</h3>
<div class="box" data-aos="fade-right">
<span>( 2017 - 2018 )</span>
<h3>10th grade</h3>
<p>SBOA School and Junior College</p>
</div>
<span>( 2019 - 2020 )</span>
<h3>12th grade</h3>
<p>Velammal Matriculation Higher Secondary School</p>
29
</div>
<span>( 2020 - 2024 )</span>
<h3>Btech CSBS</h3>
<p>Rajalakshmi Engineering College</p>
</div>
</div>
</div>
</div>
</section>
<section class="services" id="services">
<h1 class="heading" data-aos="fade-up"> <span>Achievements</span> </h1>
<div class="box" data-aos="zoom-in">
30
<i class="fas fa-code"></i>
<h3>C Programming Language</h3>
<p>Successfully completed C programming language on udemy </p>
</div>
<i class="fas fa-paint-brush"></i>
<h3>UI/UX Design</h3>
<p>Successfully completed workshop on ui/ux design </p>
</div>
<i class="fab fa-bootstrap"></i>
<h3>Campus Ambassador</h3>
<p>worked as Campus Ambassador for RineX representing REC</p>
</div>
<i class="fas fa-chart-line"></i>
<h3>SQL</h3>
<p>Successfully completed a course on database programming with sql

</p>
</div>
31
<i class="fas fa-bullhorn"></i>
<h3>LOGO Design</h3>
<p>won 3rd prize of FOKA Tech logo designing Contest. </p>
</div>
</div>
</section>
<section class="portfolio" id="portfolio">
<h1 class="heading" data-aos="fade-up"> <span>All I need is :</span> </h1>
</div>
32
<img src="images/aero.jpg" alt="">
</div>
<img src="images/coffee.jpg" alt="">
</div>
</div>
<img src="images/dior.jpg" alt="">
</div>
<img src="images/paris.jpg" alt="">
</div>
</div>
</section>
<section class="contact" id="contact">
33
<h1 class="heading" data-aos="fade-up"> <span>contact me</span> </h1>
<form action="" method="post">
<div class="flex">
<input data-aos="fade-right" type="text" name="name" placeholder="enter

your name" class="box" required>
<input data-aos="fade-left" type="email" name="email" placeholder="enter

your email" class="box" required>
</div>
<input data-aos="fade-up" type="number" min="0" name="number"

placeholder="enter your number" class="box" required>
<textarea data-aos="fade-up" name="message" class="box" required

placeholder="enter your message" cols="30" rows="10"></textarea>
<input type="submit" data-aos="zoom-in" value="send message" name="send"

class="btn">
</form>
<i class="fas fa-phone"></i>
<h3>phone</h3>
<p>7358746968</p>
34
</div>
<i class="fas fa-envelope"></i>
<h3>email</h3>
<p>aparnavinoraj@gmail.com</p>
</div>
<i class="fas fa-map-marker-alt"></i>
<h3>address</h3>
<p>TamilNadu, india - 600023</p>
</div>
</div>
</section>
<div class="credit"> © copyright @ <?php echo date('Y'); ?> by

<span>MONEY</span> </div>
<script src="js/script.js"></script>
35
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<script>
AOS.init({
duration:800,
delay:300
});
</script>
</body>
</html>
script.js
let menu = document.querySelector('#menu-btn');
let header = document.querySelector('.header');
menu.onclick = () =>{
menu.classList.toggle('fa-times');
header.classList.toggle('active');
document.body.classList.toggle('active');
36
window.onscroll = () =>{
if(window.innerWidth < 991){
menu.classList.remove('fa-times');
header.classList.remove('active');
document.body.classList.remove('active');
document.querySelectorAll('section').forEach(sec =>{
let top = window.scrollY;
let offset = sec.offsetTop - 150;
let height = sec.offsetHeight;
let id = sec.getAttribute('id');
if(top >= offset && top < offset + height){
document.querySelectorAll('.header .navbar a').forEach(links =>{
links.classList.remove('active');
document.querySelector('.header .navbar a[href*='+ id

+']').classList.add('active')
});
};
});
37
style.css
@import
url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600&dis
play=swap');
:root{
--yellow:#ffcc0d;
--black:#000;
--white:#fff;
--light-bg:#eee;
--border-bold:.5rem solid var(--black);
--border-light:.2rem solid var(--black);
*{
font-family: 'Rubik', sans-serif;
margin:0; padding:0;
box-sizing: border-box;
outline: none; border:none;
text-decoration: none;
text-transform: capitalize;
color:var(--black);
38
*::selection{
background-color: var(--black);
color:var(--yellow);
*::-webkit-scrollbar{
height: .5rem;
width: 1rem;
*::-webkit-scrollbar-track{
background-color: transparent;
*::-webkit-scrollbar-thumb{
background-color: var(--yellow);
html{
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth;
39
}
body{
overflow: hidden;
transition: .2s linear !important;
body.active{
padding-left: 35rem;
section{
padding:3rem 2rem;
margin: 0 auto;
max-width: 1200px;
text-align: center;
.heading{
margin-bottom: 3rem;
text-align: center;
40
.heading span{
text-transform: uppercase;
font-size: 6.5rem;
border-bottom: var(--border-bold);
.message{
position: sticky;
top:2rem;
max-width: 1200px;
margin:0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding:2rem;
font-size: 2rem;
.message i{
cursor: pointer;
41
.btn{
display: inline-block;
margin-top: 1rem;
cursor: pointer;
padding:1rem 3rem;
border:var(--border-light);
font-size: 2rem;
background: none;
.btn:hover{
color:var(--white);
.header{
position: fixed;
top:0; left:-35rem;
height: 100vh;
background-color: var(--white);
border-right: var(--border-bold);
width: 35rem;
padding:3rem 2rem;
42
text-align: center;
display: flex;
flex-flow: column;
text-align: center;
z-index: 1000;
.header .logo{
border-bottom: var(--border-bold);
font-weight: bolder;
font-size: 4.5rem;
.header .navbar{
width: 100%;
.header .navbar a{
display: block;
43
font-size: 2.5rem;
padding:1.5rem;
margin:.5rem;
.header .navbar a.active,
.header .navbar a:hover{
.header .follow a{
font-size: 3rem;
margin:0 1rem;
cursor: pointer;
.header .follow a:hover{
transform: rotate(360deg);
#menu-btn{
position: absolute;
44
top:0; right:-5.5rem;
height: 4.5rem;
line-height: 4.5rem;
width: 5rem;
font-size: 2.5rem;
cursor: pointer;
color:var(--white);
.header.active{
left: 0;
.home{
display: flex;
flex-wrap: wrap;
gap:2rem;
min-height: 100vh;
.home .image{
45
flex:1 1 40rem;
.home .image img{
height: 40rem;
padding:1rem;
border:var(--border-bold);
.home .content{
flex:1 1 40rem;
.home .content h3{
font-size: 3rem;
margin-bottom: .5rem;
.home .content span{
padding:1rem 2rem;
46
font-size: 2rem;
margin:1rem 0;
.home .content p{
font-size: 1.5rem;
line-height: 2;
padding:1rem 0;
.about .biography p{
margin:2rem auto;
max-width: 70rem;
line-height: 2;
font-size: 1.8rem;
.about .biography .bio{
margin: 1rem 0;
.about .biography .bio h3{
padding:1rem 2rem;
47
margin:1rem;
background-color: var(--light-bg);
word-break: break-all;
font-size: 2.5rem;
font-weight: normal;
text-transform: none;
.about .biography .bio h3 span{
font-weight: lighter;
.about .skills{
margin:3rem 0;
.about .skills .progress{
margin-top: 1rem;
.about .skills .progress .bar{
48
margin:1rem auto;
max-width: 70rem;
border:var(--border-bold);
padding:1rem;
.about .skills .progress .bar h3{
display: flex;
font-size: 2rem;
padding:1rem 2rem;
.about .skills .progress .bar span{
.about .skills .progress .bar:nth-child(1) h3{
width: 95%;
49
width: 80%;
width: 30%;
.about .edu-exp .row{
display: flex;
flex-wrap: wrap;
gap:1.5rem;
.about .edu-exp .row .box-container{
flex:1 1 40rem;
.about .edu-exp .row .box-container .title{
padding:1.5rem;
font-size: 3rem;
50
.about .edu-exp .row .box-container .box{
text-align: left;
margin:1.5rem 0;
background-color: var(--light-bg);
padding:2rem;
.about .edu-exp .row .box-container .box span{
font-size: 1.5rem;
.about .edu-exp .row .box-container .box h3{
font-size: 2.5rem;
margin-top: 1.5rem;
.about .edu-exp .row .box-container .box p{
line-height: 1.5;
font-size: 1.7rem;
line-height: 2;
51
}
.services .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap:1.5rem;
align-items: flex-start;
.services .box-container .box{
padding:3rem 2rem;
.services .box-container .box i{
font-size: 4rem;
.services .box-container .box h3{
margin:1rem 0;
font-size: 2rem;
52
padding:1.5rem;
.services .box-container .box p{
line-height: 2;
font-size: 1.7rem;
.services .box-container .box:hover{
.services .box-container .box:hover i{
color:var(--white);
.services .box-container .box:hover p{
color:var(--white);
.portfolio .box-container{
53
display: grid;
gap:1.5rem;
.portfolio .box-container .box img{
height: 30rem;
width: 100%;
object-fit: cover;
.portfolio .box-container .box h3{
margin:1rem 0;
font-size: 2rem;
.portfolio .box-container .box span{
font-size: 1.7rem;
.contact form{
54
max-width: 70rem;
margin:0 auto;
.contact form .box{
width: 100%;
padding:1.4rem;
font-size: 2rem;
margin:1rem 0;
.contact form textarea{
height: 20rem;
resize: none;
.contact form .flex{
display: flex;
flex-wrap: wrap;
55
.contact form .flex .box{
width: 49%;
.contact .box-container{
display: grid;
gap:1.5rem;
margin-top: 3rem;
.contact .box-container .box{
padding:3rem 2rem;
.contact .box-container .box i{
font-size: 3rem;
height: 7rem;
width: 7rem;
line-height: 7rem;
56
color:var(--white);
margin-bottom: .5rem;
.contact .box-container .box h3{
margin:1.5rem 0;
font-size: 2.5rem;
.contact .box-container .box p{
font-size: 2rem;
.credit{
text-align: center;
padding:3rem;
font-size: 2rem;
color:var(--white);
57
.credit span{
color:var(--yellow);
@media (max-width:991px){
html{
font-size: 55%;
body.active{
padding-left: 0;
@media (max-width:450px){
html{
font-size: 50%;
.header.active{
padding-top: 7rem;
#menu-btn.fa-times{
right:0;
58
.home .image img{
height: auto;
width: 100%;
.heading span{
font-size: 4rem;
.about .biography .bio h3{
font-size: 2rem;
.contact form .flex .box{
width: 100%;
CONNECT AN HTML FORM TO A MYSQL DATABASE IN PHP
1. Set up XAMPP and configure a PHP development environment
2. Create an HTML form
3. Create a MySQL database
4. Create a PHP file
5. Create a connection
59
4.3 OUTPUT
60
61
62
63
64
CHAPTER 5
CONCLUSION
The implemented system can be a personal portfolio that is a platform to showcase
your talent, skills,etc. Personal portfolio is a compilation of relevant work samples
and documents gathered during your school years and presented in a structured
manner. It profiles your goals, progress, achievements and competencies in an
organized, accessible and purposeful format, without overwhelming prospective
employers.
REFERENCES
● http://www.123seminarsonly.com/Seminar-Reports/2013-02/124302235-Co
ntent-Management-System-Project-Report.pdf
● https://kinsta.com/blog/portfolio-website/
● Luke Welling, Laura Thomson (2008), ‘PHP and MySQL Web
Development’, ISBN: 978-0672329166
● Seyed M.M, Tahaghoghi, Hugh Williams (2006), ‘Learning MySQL’, ISBN:
978-0596008642
65

Mwa Report

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

Mwa Report

Uploaded by

Copyright:

Available Formats

PERSONAL PORTFOLIO

CB19P45 - MODERN WEB APPLICATION

in partial fulfillment for the award of the degree

COMPUTER SCIENCE AND BUSINESS SYSTEMS

RAJALAKSHMI ENGINEERING COLLEGE

CHENNAI – 602 105.

Certified that this CB19P45 - MODERN WEB APPLICATION PROJECT

Submitted to Project and Viva-Voce Examination held on _________________

INTERNAL EXAMINER EXTERNAL EXAMINER

I owe my sincere regards to my project guide, Mrs. M.MAHARASI, Assistant

I sincerely thank my project supervisor Mrs. M.MAHARASI, Assistant Professor

ourselves on a website. This website allows users to communicate with people,

used to contact the user.

like photography, design, writing, or other creative work — a portfolio is essential.

brand, and helps your land new clients.

CHAPTER NO. TITLE PAGE NO.

1.1 DEFINITION OF THE 7

1.2 OBJECTIVE AND 7

3.2 OVERVIEW OF THE 10

3.5 UML DIAGRAM 13

3.5.1 USE CASE DIAGRAM 14

3.5.2 SEQUENCE DIAGRAM 15

3.5.3 FLOW CHART 16

4.2 SAMPLE CODE 23

1.1.DEFINITION OF THE SYSTEM

events, and activities within the portfolio system network.

1.2.OBJECTIVE AND PURPOSE

public or semi-public profile within a bounded system, (2) articulate a list of

PERSONAL PORTFOLIO is used to showcase the person's talent with various

the motivation is to build up a system for myself to showcase my skills using

such as performance measure and system optimization. The goal of System

concise and unambiguous manner.

2.2 PROBLEM DESCRIPTION

● Handling thousands of long resumes is a challenging task.

● Interacting with every individual face is quite a difficult activity.

be browsed regularly by casting agents.

● A personal portfolio website is a professional website that provides

contact you or your company.

photographers to display their portfolios on and get job offers from.

● An Online Portfolio Provides a Platform to Highlight Your Best Work.

● It Boosts Your Online Presence.

● An Online Portfolio is a Business Card for Future Clients and Potential

● A Digital Portfolio Reflects Your Personality and Creativity.

● Online Portfolios Establish and Strengthen Your Brand.

● An Online Portfolio Exudes Consistency and Professionalism.

● A Picture is Still Worth a Thousand Words.

● An online portfolio can become expensive.

portfolio would not be seen by a hiring manager.

Design is a meaningful engineering representation of something that is to be built.

representation of the software. Design provides us with representations of software

information in many popular key management schemes. In secure group

communications, users of a group share a common group key.

3.2 OVERVIEW OF THE PROPOSED SYSTEM

new clientele, making a personal portfolio website is a great idea.

description of myself using HTMLand CSS.

II. ABOUT PAGE

designed using HTML and CSS.

III. ACHIEVEMENT PAGE

The About page in this system contains my achievements and my participation in

events to showcase my talent. It is designed using HTML and CSS.

IV. CONTACT PAGE

they have to give input which will be stored in the database.

A UML diagram is a partial graphical representation (view) of a model of a system