Full Stack 1
Full Stack 1
953624205021
Experiment-1
Develop a portfolio website
[Link] <a href="#internship">Internship</a>
<!DOCTYPE html> <a href="#projects">Projects</a>
<html lang="en"> <a href="#certificate">Certificates</a>
<head> <a href="#contact">Contact</a>
<meta charset="UTF-8"> </nav>
<meta name="viewport" </header>
content="width=device-width, initial-
<section class="home" id="home">
scale=1.0">
<div class="home-content">
<title>Kaviya | Portfolio</title>
<h4>Hello, I'm</h4>
<link rel="stylesheet" href="[Link]">
<h1>Kaviya</h1>
<!-- Google Font -->
<h2>Full Stack Developer</h2>
<link href="[Link]
family=Poppins:wght@300;400;500;600;700;80 <p>
0&display=swap" rel="stylesheet"> Passionate developer interested in Web
<!-- Font Awesome --> Development,
</head> </p>
</div> Contact Me
<nav> </a>
</div> </section>
<p> <span>HTML</span>
</div> </div>
KAVIYA K
953624205021
</div> </button>
<button> <footer>
</button> <p>
[Link]([Link]); "node_modules/@types/webidl-conversions": {
} "version": "7.0.3",
catch(error){ "resolved":
"[Link]
[Link](error); conversions/-/[Link]",
} "integrity": "sha512-
finally{ CiJJvcRtIgzadHCYXw7dqEnMNRjhGZlYK05
Mj9OyktqV8uVT8fD2BFOB7S1uwBE3Kj2Z+
await [Link](); 4UyPmFw/Ixgw/LAlA==",
} "license": "MIT" },
} "node_modules/@types/whatwg-url": {
insertData(); "version": "13.0.0",
"resolved":
"[Link]
[Link]:
url/-/[Link]",
{
KAVIYA K
953624205021
behavior:"smooth" count=0;
}); }
}); setTimeout(typing,300); }
}); [Link]="";
const text = [ typing();
"Full Stack Developer", const
revealElements=[Link](
"UI / UX Designer",
".card,.box,.skill-box span,.image-box"
"Python Developer",
);
"Web Designer" ];
function reveal(){
let count = 0;
[Link](item=>{
let index = 0;
const top=[Link]().top;
const title = [Link](".home-
content h2"); if(top<[Link]-80){
function typing(){ [Link]="1";
if(index < text[count].length){ [Link]="translateY(0)";
[Link] += text[count].charAt(index); } }); }
index++; [Link](item=>{
setTimeout(typing,120); [Link]="0";
} [Link]="translateY(60px)";
else{ [Link]=".7s";
setTimeout(erase,1500); } } });
function erase(){ [Link]("scroll",reveal);
if(index>0){ reveal();
[Link]=text[count].substring(0,index- const
1); header=[Link]("header");
index--; [Link]("scroll",()=>{
setTimeout(erase,60); if([Link]>50){
} [Link]="0 8px 25px
rgba(124,58,237,.25)"; }
else{
else{
count++;
if(count>=[Link]){
KAVIYA K
953624205021
}); }
nav{
}); display:flex;
[Link]("Welcome to Kaviya Portfolio"); gap:35px;
}
[Link]: nav a{
@import url('[Link] text-decoration:none;
family=Poppins:wght@300;400;500;600;700;80 color:#333;
0&display=swap'); font-weight:500;
*{ transition:.4s;
margin:0; position:relative;
padding:0; }
box-sizing:border-box; nav a:hover{
scroll-behavior:smooth; color:var(--primary);
font-family:'Poppins',sans-serif; }
} nav a::after{
body{ content:"";
background:#f6f1ff; position:absolute;
color:#222; left:0;
overflow-x:hidden; bottom:-5px;
} width:0;
:root{ height:3px;
--primary:#7c3aed; border-radius:10px;
--secondary:#9d4edd; background:var(--primary);
--light:#ffffff; transition:.4s;
--dark:#222; }
--text:#555; nav a:hover::after{
--shadow:0 10px 25px rgba(124,58,237,.18); width:100%;
} }
header{ .home{
width:100%; width:100%;
height:80px; min-height:100vh;
position:fixed; display:flex;
top:0; justify-content:space-between;
left:0; align-items:center;
background:white; padding:140px 8% 60px;
display:flex; position:relative;
}
justify-content:space-between; home-content{
align-items:center; width:55%;
padding:0 8%; }
z-index:1000; .home-content h4{
box-shadow:0 2px 20px rgba(0,0,0,.08); font-size:28px
} color:#555;
.logo{ }
font-size:32px; .home-content h1{
font-weight:700; font-size:70px;
color:var(--primary); color:var(--primary);
letter-spacing:1px; margin:10px 0;
KAVIYA K
953624205021
} background:linear-
.home-content h2{ gradient(135deg,#7c3aed,#b5179e);
font-size:38px; padding:12px;
margin-bottom:20px; box-shadow:
color:#333; 0 0 40px rgba(124,58,237,.35);
} animation:float 4s ease-in-out infinite;
.home-content p{ }
color:#666; .image-box img{
line-height:30px; width:100%;
font-size:17px; height:100%;
width:90%; object-fit:cover;
} border-radius:50%;
.buttons{ border:6px solid white;
margin-top:40px; @keyframes float{
} 0%{
.btn{ transform:translateY(0);
display:inline-block; }
padding:14px 35px; 50%{
background:linear- transform:translateY(-15px);
gradient(45deg,#7c3aed,#9d4edd); }
color:white; 100%{
text-decoration:none; transform:translateY(0);
border-radius:50px; }
margin-right:20px; }.heading{
transition:.4s; text-align:center;
box-shadow:var(--shadow); font-size:42px;
} color:var(--primary);
.btn:hover{ margin-bottom:60px;
transform:translateY(-6px); }
} section{
.btn2{ padding:100px 8%;
background:white; }
color:var(--primary); .card{
border:2px solid var(--primary); background:white;
} padding:40px;
.btn2:hover{ border-radius:20px;
background:var(--primary); box-shadow:var(--shadow);
color:white; line-height:30px;
} color:#555;
.home-image{ }.cards{
width:45%; display:grid;
display:flex; grid-template-columns:repeat(auto-
justify-content:flex-end; fit,minmax(280px,1fr));
align-items:flex-start; gap:30px;
} margin-top:40px;
.image-box{ }
width:32px; .box{
height:320px; background:#fff;
border-radius:50%; padding:35px;
KAVIYA K
953624205021
border-radius:20px; color:white;
text-align:center; cursor:pointer;
box-shadow:0 12px 30px rgba(0,0,0,.08); transition:.4s;
transition:.4s; font-size:15px;
border:2px solid transparent; }
} .box button:hover{
.box:hover{ background:#5b21b6;
transform:translateY(-10px); transform:translateY(-4px)
border-color:#7c3aed; #contact .box{
box-shadow:0 20px 40px padding:40px 20px;
rgba(124,58,237,.25); }
} #contact i{
.box h3{ font-size:45px;
color:#7c3aed; color:#7c3aed;
font-size:24px; margin-bottom:20px;
margin-bottom:15px; }
} #contact p{
.box p{ word-break:break-word;
color:#666; color:#555;
line-height:28px; }
} footer{
.skill-box{ background:#7c3aed;
display:flex; color:white;
flex-wrap:wrap; text-align:center;
justify-content:center; padding:30px;
gap:20px; margin-top:80px;
margin-top:40px; }
} footer p{
.skill-box span{ letter-spacing:1px;
padding:14px 30px; }
border-radius:50px; .box{
background:linear- opacity:0;
gradient(135deg,#7c3aed,#9d4edd); transform:translateY(60px);
color:white; animation:showUp .8s forwards;
font-weight:600; }
transition:.4s; .box:nth-child(2){
cursor:pointer; animation-delay:.2s;
box-shadow:0 10px 25px }
rgba(124,58,237,.25); .box:nth-child(3)
} animation-delay:.4s;
.skill-box span:hover{ }
transform:scale(1.1); .box:nth-child(4){
} animation-delay:.6s;
.box button{ }
margin-top:20px; @keyframes showUp{
padding:12px 28px; to{
border:none; opacity:1;
border-radius:40px; transform:translateY(0);
background:#7c3aed; }
KAVIYA K
953624205021
} }.image-box:hover{
::-webkit-scrollbar{ transform:scale(1.05);
width:10px; transition:.5s;
} }
::-webkit-scrollbar-thumb{ @media(max-width:991px){
background:#7c3aed; header{
border-radius:20px; padding:20px 5%;
::-webkit-scrollbar-track{ }
background:#ece7ff; .home{
flex-direction:column-reverse;
.home::before{ text-align:center;
content:"" padding-top:140px;
position:absolute; }
width:350px; .home-content{
height:350px; width:100%
background:#b794f4; }
border-radius:50%; .home-content p{
right:-120px; width:100%;
top:-120px; }
opacity:.18; .home-image{
z-index:-1; width:100%;
} justify-content:center;
.home::after{ margin-bottom:60px
content:""; }
position:absolute; .image-box{
width:250px; width:260px;
height:250px; height:260px;
background:#9d4edd; }
border-radius:50%; nav{
left:-80px; gap:20px;
bottom:-80px; flex-wrap:wrap;
opacity:.12; justify-content:center;
z-index:-1; }
} @media(max-width:768px){
.heading{ .logo{
position:relative; font-size:28px;
display:inline-block; }
left:50%; .home-content h1{
transform:translateX(-50%); font-size:50px;
} }
.heading::after{ .home-content h2{
content:""; font-size:28px;
position:absolute; }
width:60%; .heading{
height:4px; font-size:34px;
background:#7c3aed; }
left:20%; .btn{
bottom:-12px; display:block;
border-radius:20px; margin:15px auto;
KAVIYA K
953624205021
width:220px; resize:none;
} }
} .contact-form button{
@media(max-width:500px){ width:100%;
.image-box{ }
width:220px; const contactForm =
height:220px; [Link](".contact-form");
.home-content h1{ [Link]("submit",
font-size:40px; function(e){
} [Link]();
.home-content h2{ alert("Thank You! Your message has been
font-size:24px; sent successfully.");
} [Link]();
.home-content h4{ });
font-size:22px; [Link] :
} const EventEmitter = require('events');
.box{
paddng:25px; const event = new EventEmitter();
} [Link]("portfolio",()=>{
.contact-container{
display:flex; [Link]("Welcome to Kaviya Portfolio");
justify-content:center;
align-items:center; });
margin-top:40px; [Link]("portfolio");
}
.contact-form{ [Link]("welcome",()=>{
width:100%;
max-width:700px; [Link]("This message appears only once.");
background:#fff; });
padding:40px;
border-radius:20px; [Link]("welcome");
box-shadow:0 15px 35px
[Link]("welcome");
rgba(124,58,237,.2);
} [Link]("project",()=>{
.contact-form input,
.contact-form textarea{ [Link]("Project 1 Loaded");
width:100%;
});
padding:15px;
margin-bottom:20px; [Link]("project",()=>{
border:2px solid #ddd;
border-radius:10px; [Link]("Project 2 Loaded");
font-size:16px;
});
outline:none;
transition:.3s; [Link](
}
.contact-form input:focus, "Number of listeners :",
.contact-form textarea:focus{
[Link]("project")
border-color:#7c3aed;
.contact-form textarea{ );
KAVIYA K
953624205021
[Link]("project");
const timeout = setTimeout(()=>{ });
[Link]("Portfolio Loaded Successfully"); [Link]("skills");
},3000); setTimeout(()=>{
let count = 0; [Link]("Thank You for Visiting Portfolio");
const interval = setInterval(()=>{ },7000);
count++; [Link]:
const { MongoClient } = require("mongodb");
[Link]("Visitor Count :",count);
const url = "mongodb://[Link]:27017";
if(count==5){
const client = new MongoClient(url);
clearInterval(interval);
async function connectDB(){
[Link]("Interval Stopped");
try{
}
await [Link]();
},1000);
[Link]("✅ MongoDB Connected");
[Link]("contact",(name)=>{
const db = [Link]("portfolio");
[Link](name + " sent a message.");
return db;
});
}
[Link]("contact","Kaviya");
catch(error){
[Link]("skills",()=>{
[Link](error);
[Link]("HTML CSS JS");
}
});
}
[Link]("skills",()=>{
[Link] = connectDB;
[Link]("Python Django");
KAVIYA K
953624205021
OUTPUT:
KAVIYA K
953624205021
KAVIYA K
953624205021