Personal Portfolio Website

Sinhgad Technical Education Society,
SinhgadCollege of Engineering , Pune-41

Department of Computer Engineering
Date:
“Web Technology”
Submitted by
Name Roll No. PRN No.
DARSHAN JADHAV T190574264 71916686B
LAVESH MAHALE T190574302 71916716H
Prof.Vidya Shinde
Guide
Department of Computer Engineering
WTL Mini Project
Project Problem statement:-

Currently the professional workers, content creator, freelancer not able to express their work
effective. So, to fulfill their need and to express/show their skill to client in better ways we have
made the professional portfolio.About page give personal information and CV is also attached in
about page which can be downloaded by any user who wants to look for CV. Contact page provides
personal contact information and services page gives services related information for website.
Objective:-To learn web technology like HTML,CSS,JS,REACT JS, Emailjs(Backend) etc. to

implement dynamic web application.
Technologies Used:-
Software:-Windows 7,8 or 10, Any Web Browser.
Hardware:-i5 or above processor

Introduction:-
A web application or "web app" is a software program that runs on a web server. Unlike traditional
desktop applications, which are launched by our operating system, web apps must be accessed
through a web browser. Web apps have several advantages over desktop applications. Since they
run inside web browsers, developers do not need to develop web apps for multiple platforms.On
this project I developed a Personal Portfolio website which provides my own information. This
website gives all my professional and some personal information. This website is developed to solve
the problem that arrives while gathering the personal information and services. The main objectives
of this project are to provide information about services provided by individuals.
Features:-
SYSTEM ANALYSIS AND DESIGN
NAVIGATION BAR
Functional requirements are the main functions which the system is supposed to have. The
functional requirements of the developed website are:
Home Page
It is the first page of this website. It is simply a first page it does not provide any personal
information but have a personal name and a profession only.
About page
provides some personal information and it also contain personal CV which can be downloaded by
the viewer.
Services
Services page provides information related to my own services.
Contact
Contact page provides my personal contact information like address, phone number and email
address and there is a contact form. Using that form any user can be able to contact me. Submitted
details will be store in database and will be receive it via mail. Non-Functional Requirements of this
website are:
Flowchart:-
Home Page Service
Experience
Skill Section
TESTIMONIAL
Contact
YES NO
DISPLAY THE SENT DISPLAY NULL

MESSAGE
Conclusion:
The purpose and objective of Web page is achieved. By providing extremely rich graphical
user interface, web page designing is easy and aesthetic form. The overall design and
development were however done as follows. At first different cases were studied as well as
feasibility studies are undertaken.
Source Code:-
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link href="https://fonts.cdnfonts.com/css/gumela" rel="stylesheet">
<link rel="stylesheet" href="/src/App.css">
<style>
@font-face {
font-family: Gumela;
src: url('../src/fonts/*');
*{
font-family: 'Gumela', sans-serif;
font-weight: normal;
font-size: 20px;
}
</style>
<title>React App</title>
</head>
<body>
<div class="cursor"></div>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="main">
<div class="buttons">
<button class="next" onclick="go(-1)"></button>
<button class="prev" onclick="go(1)"></button>
</div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js'></script>
<scriptsrc="./script.js"></script>

<script>
const cursor =document.querySelector('.cursor');
document.addEventListener('mousemove', e=> {
// cursor.setAttribute("style", "top: " +(e.pageY -10)+"px; left:" +(e.pageX -10)+"px;" )
cursor.setAttribute("style","top: "+(e.pageY -10- scrollY)+"px; left: "+(e.pageX-10)+"px")
})
document.addEventListener('click', () => {
cursor.classList.add("expand");
setTimeout(() =>{
cursor.classList.remove("expand");
},500)
})
</script>




</body>
</html>
APP.css
:root
--yellow: #F5C32C;
--blue: #2c87ff;
--orange : #2c87ff;
--black : #000000;
--gray : #000000;
--blueCard : #DDF8FE;
--purple: rgb(238 210 255);
--boxShadow : 0px 19px 60px rgba(101, 26, 26, 0.08);
--orangeCard: rgba(31, 149, 252, 0.45);
--smboxShadow: -79px 51px 60px rgba(0, 0, 0, 0.08);

}
.cursor{
width: 20px;
height: 20px;
border: 1px solid gray;
border-radius: 50%;
position: absolute;
/* transition-duration: 10ms; */
transition-timing-function: ease-out;
animation: cursorAnim .5s infinite alternate;
transform: translate(-50%, -50%);position: fixed;
/* z-index: ; */
.cursor::after{
content:"";
width: 20px;
height: 20px;
position: absolute;
border: 8px solid gray;
border-radius: 50%;
opacity: .5;
top: -8px;
left: -8px;
animation: cursorAnim2 .5s infinite alternate;
}
@keyframescursorAnim {
from {
transform: scale(1.5);
to {
transform: scale(.7);
@keyframes cursorAnim2 {
from {
to {
@keyframes cursorAnim3 {
0% {
transform: scale(1);
50% {
100% {
opacity: 0;
.expand {
animation: cursorAnim3 .5s forwards;
border: 1px solid rgb(80, 141, 255);
body{
margin: 0;
height: 100vh;
/* cursor: none; */
/* background: rgb(64, 64, 64); */
.App{
padding: 0.5rem 3.5rem;
overflow: hidden;
color: var(--black);
.button {
background: linear-gradient(180deg, #5fccff 26.71%, #4487df 99.36%);

box-shadow: 0px 20px 24px 3px rgba(38, 67, 163, 0.42);
border-radius: 34px;
border: none;
color: white;
font-size: 16px;
font-family: 'Gumela', sans-serif;
padding: 11px 26px 11px 26px;
.button:hover {
background: white;
cursor: pointer;
border: 1px solid var(--blue);
color: var(--blue);
/* music */
.right-col{
position: relative;
top: -2950px;
left: 400px;
/* cursor: pointer; */
#icon{
cursor: pointer;
position: relative;
top: -2905px;
left: 1200px;
padding-top: 1px;
z-index: 1;
opacity: 0.1;
transform:scale(1.5) ;
z-index: 1;
/* animation-duration: 10ms; */
/* animation-delay: 10ms; */
#icon:hover{
transition: 200ms ;
@media screen and (max-width: 480px) {
.App {
padding: 0.5rem 1rem;
#icon{
cursor: pointer;
position: relative;
top: -2755px;
left: 75px;
z-index: 9;
APP.js
importNavbar from "./components/Navbar/Navbar";
import Intro from "./components/Intro/Intro";
import Services from "./components/Services/Services";
import "./App.css";
import Experience from "./components/Experience/Experience";
import Works from "./components/Works/Works";
import Portfolio from "./components/Portfolio/Portfolio";
import Testimonial from "./components/Testimonials/Testimonial";
import Contact from "./components/Contact/Contact";
import Footer from "./components/Footer/Footer";
import { useContext } from "react";
import { themeContext } from "./Context";
function App() {
const theme = useContext(themeContext);
constdarkMode = theme.state.darkMode;
return (
<div
className="App"
style={{
background: darkMode ? "black" : "",
color: darkMode ? "white" : "",
}}
>
<Navbar />
<Intro />
<Services />
<Experience />
<Works />
<Portfolio />
<Testimonial />
<Contact />
<Footer />
</div>
);
export default App;
Context.js
import { createContext, useReducer } from "react";
exportconstthemeContext = createContext();
constinitialState = { darkMode: false };

constthemeReducer = (state, action) => {
switch (action.type) {
case "toggle":
return { darkMode: !state.darkMode };
default:
return state;
};
exportconstThemeProvider = (props) => {
const [state, dispatch] = useReducer(themeReducer, initialState);
return (
<themeContext.Provider value={{state,
dispatch}}>{props.children}</themeContext.Provider>
);
};
Index.js:
import React from 'react';
importReactDOM from 'react-dom';
import { Scrollbar } from 'swiper';
import App from './App';
import { ThemeProvider } from './Context';
// Scrollbar.init(document.querySelector('#my-scrollbar'));
ReactDOM.render(
<ThemeProvider>
<App />
</ThemeProvider>,
document.getElementById('root')
);
Package.json
{
"name": "portofolio",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emailjs/browser": "^3.4.0",
"@iconscout/react-unicons": "^1.1.6",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.0.0",
"@testing-library/user-event": "^13.2.1",
"framer-motion": "^6.2.8",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"react-scroll": "^1.8.6",
"smooth-scrollbar": "^8.7.4",
"swiper": "^8.0.7",
"web-vitals": "^2.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"notop_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
}
}
Output:-
Home:
Service/academic:
Cursor animation:
RESPONSIVE
RESPONSIVE
RESPONSIVE
DARK THEME:

Personal Portfolio Website

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

Personal Portfolio Website

Uploaded by

Copyright:

Available Formats

Sinhgad Technical Education Society,

SinhgadCollege of Engineering , Pune-41

Name Roll No. PRN No.

DARSHAN JADHAV T190574264 71916686B

LAVESH MAHALE T190574302 71916716H

Project Problem statement:-

Objective:-To learn web technology like HTML,CSS,JS,REACT JS, Emailjs(Backend) etc. to

Hardware:-i5 or above processor

Home Page Service

DISPLAY THE SENT DISPLAY NULL

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

<meta name="theme-color" content="#000000" />

<meta name="description" content="Web site created using create-react-app" />

<link href="https://fonts.cdnfonts.com/css/gumela" rel="stylesheet">

<link rel="stylesheet" href="/src/App.css">

font-family: 'Gumela', sans-serif;

<noscript>You need to enable JavaScript to run this app.</noscript>

<button class="next" onclick="go(-1)"></button>

<button class="prev" onclick="go(1)"></button>

const cursor =document.querySelector('.cursor');

// cursor.setAttribute("style", "top: " +(e.pageY -10)+"px; left:" +(e.pageX -10)+"px;" )

cursor.setAttribute("style","top: "+(e.pageY -10- scrollY)+"px; left: "+(e.pageX-10)+"px")

<source src="SUS.mp3" type="audio/mp3">

var icon = document.getElementById("icon");

--purple: rgb(238 210 255);

--boxShadow : 0px 19px 60px rgba(101, 26, 26, 0.08);

--orangeCard: rgba(31, 149, 252, 0.45);

--smboxShadow: -79px 51px 60px rgba(0, 0, 0, 0.08);

border: 1px solid gray;

animation: cursorAnim .5s infinite alternate;

transform: translate(-50%, -50%);position: fixed;

border: 8px solid gray;

animation: cursorAnim2 .5s infinite alternate;

animation: cursorAnim3 .5s forwards;

border: 1px solid rgb(80, 141, 255);

/* background: rgb(64, 64, 64); */

padding: 0.5rem 3.5rem;

background: linear-gradient(180deg, #5fccff 26.71%, #4487df 99.36%);

font-family: 'Gumela', sans-serif;

padding: 11px 26px 11px 26px;

border: 1px solid var(--blue);

@media screen and (max-width: 480px) {

padding: 0.5rem 1rem;

import Intro from "./components/Intro/Intro";

import Services from "./components/Services/Services";

import Experience from "./components/Experience/Experience";

import Works from "./components/Works/Works";

import Portfolio from "./components/Portfolio/Portfolio";

import Testimonial from "./components/Testimonials/Testimonial";

import Contact from "./components/Contact/Contact";

import Footer from "./components/Footer/Footer";

import { useContext } from "react";

import { themeContext } from "./Context";

const theme = useContext(themeContext);

background: darkMode ? "black" : "",

color: darkMode ? "white" : "",

export default App;

constinitialState = { darkMode: false };

return { darkMode: !state.darkMode };