Priyadharsan_Official_Web
My site : https://priyadharsan.netlify.app
<!DOCTYPE html> <html lang="en"> <head> <meta property="og:title" content="Priyadharsan - AI and Full-Stack Developer"> <meta property="og:description" content="Explore my skills, projects, and achievements in AI, data science, and development."> <meta property="og:image" content="https://i.postimg.cc/zLsXb8YM/IMG-20250110-093720.jpg"> <meta property="og:url" content="https://priyadharsan.netlify.app"> <meta property="og:type" content="website"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Priyadharsan</title> <link rel="icon" type="image/*" href="https://i.postimg.cc/zLsXb8YM/IMG-20250110-093720.jpg"> <style> body {
margin: 0;
font-family: Arial, sans-serif;
background:linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
color: #333;
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
padding: 80px 20px 20px;
}
footer {
background: #ff5f2b;
width: 100%;
color: white;
text-align: center;
padding: 10px 0;
}
header {
background: #158cff;
color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
position: sticky ;
top: 0;
backdrop-filter:blur(20px;)
width: 90%;
z-index: 1000;
box-shadow: 0 4px 10px #158cff89;
}
header h2 {
margin: 0;
color:#bfeaff ;
font-size: 24px;
padding-left: 10px;
}
header button {
font-size: 20px;
border: none;
background: none;
color: white;
cursor: pointer;
transition: transform 0.3s ease, color 0.3s ease;
}
header button:hover {
transform: scale(1.2);
color: #ff6347;
}
main {
padding: 80px 20px 20px;
}
section {
margin-bottom: 40px;
background: #ffffff88;
backdrop-filter:blur(10px);
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
}
section h2 {
font-size: 28px;
text-align: left;
padding-left: 20px;
color:#ff9d00 ;
opacity: 0;
animation: fadeIn 1s forwards;
}
h2::selection{
background-color:#ff9d00;
color :white ;
}
a {
text-decoration: none;
color: inherit;
transition: color 0.3s ease;
}
a:hover {
color: #ff6347;
}
section p {
text-align: center;
opacity: 0;
animation: fadeIn 1.5s forwards;
}
p::selection{
Background-color:#3cff2b;
color : white ;
}
header h2::selection{
background-color :white;
color :#158cff ;
}
footer p::selection{
background-color :white;
color : #ff5f2b;
}
.skill {
background: #333;
color: white;
flex-grow: 2;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
padding: 15px;
text-align: center;
width: 150px;
transform: translateY(20px);
opacity: 0;
animation: slideUp 0.5s forwards;
transition: background-color 0.3s ease, color 0.3s ease;
}
#skills {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px; /* Space between skills */
opacity: 0;
animation: fadeIn 2.5s forwards;
}
#skills h2 {
flex-basis: 80%; /* Makes the title occupy the full width /
text-align: center; / Centers the title text /
margin-bottom: 20px; / Adds spacing below the title */
}
.skills h2{
flex-basic :100%;
}
.skill:nth-child(1) {
animation-delay: 0.2s;
}
.skill:nth-child(2) {
animation-delay: 0.4s;
}
.skill:nth-child(3) {
animation-delay: 0.6s;
}
.skill:nth-child(4) {
animation-delay: 0.8s;
}
.skill:nth-child(5) {
animation-delay: 1s;
}
.skill:hover {
background-color: #ff6347;
color: white;
padding : 20px;
}
#projects {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
opacity: 0;
animation: fadeIn 3s forwards;
}
.project {
background: #ffffffd0;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
padding: 15px;
text-align: center;
width: 250px;
transition: transform 0.3s ease;
}
.project:hover {
transform: scale(1.05);
}
.project h3 {
margin: 10px 0;
}
.social-links {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 20px;
}
.social-links img {
width: 40px;
height: 40px;
filter: grayscale(100%);
transition: filter 0.3s, transform 0.3s;
}
.social-links img:hover {
filter: grayscale(0%);
transform: scale(1.2);
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 12px; /* Increase width for better visibility */
}
::-webkit-scrollbar-track {
background: #e0c3fc; /* Light color to blend with background */
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%); /* Matching gradient */
border-radius: 10px;
transition: background 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%); /* Hover effect */
}
::-webkit-scrollbar-button {
background: #158cff; /* Buttons on the scrollbar */
border-radius: 5px;
}
::-webkit-scrollbar-corner {
background: #8EC5FC; /* Corner of the scrollbar */
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
@keyframes slideUp {
to {
transform: translateY(0);
opacity: 1;
}
}
</style>
<main>
<section id="about">
<h2>About Me</h2>
<p>Hello! I am Priyadharsan, a passionate developer specializing in AI, data science, and full-stack development. I am dedicated to building solutions that make a difference!</p>
</section>
<section id="skills">
<h2 style="display:block ; ">My Skills</h2>
<br>
<div class="skill">Python</div>
<div class="skill">C</div>
<div class="skill">Javascript</div>
<div class="skill">HTML</div>
<div class="skill">CSS</div>
</section>
<section id="projects">
<h2>My Projects</h2>
<a href="asuran.html">
<div class="project">
<h3>KMV ASURAN</h3>
<p>Website for gaming YouTuber</p>
</div>
</a>
<a href="cal.html">
<div class="project">
<h3>Simple Calculator</h3>
<p>Simple mathematical function website </p>
</div>
</a>
</section>
<section>
<h2>Connect with Me</h2>
<div class="social-links">
<a href="https://github.com/Priyadharsan852484" target="_blank">
<img src="https://img.icons8.com/ios-filled/50/github.png" alt="GitHub">
</a>
<a href="https://in.linkedin.com/in/priyadharsan-t-2b5810327" target="_blank">
<img src="https://img.icons8.com/ios-filled/50/linkedin.png" alt="LinkedIn">
</a>
<a href="https://onecompiler.com/users/42j8ym45r" target="_blank">
<img src="https://img.icons8.com/ios-filled/50/code.png" alt="OneCompiler">
</a>
</div>
</section>
</main>
<select id="eng" style="display:none;">
<option value="0">0</option>
</select>
<p id="en" ></p>
<footer>
<p>© 2025 Priyadharsan. All rights not reserved.</p>
</footer>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "Priyadharsan",
"url": "https://priyadharsan.netlify.app",
"sameAs": [
"https://github.com/Priyadharsan852484",
"https://in.linkedin.com/in/priyadharsan-t-2b5810327",
"https://onecompiler.com/users/42j8ym45r"
],
"jobTitle": "AI Developer and Full-Stack Developer",
"description": "Passionate about AI, data science, and building impactful solutions.",
"image": "https://i.postimg.cc/zLsXb8YM/IMG-20250110-093720.jpg"
}
</script>
<script>
var f = 1;
function change_theme() {
const body = document.body;
const header = document.querySelector('header');
const tt=document.getElementById('tt');
const h2 = header.querySelector('h2'); // Targeting h2 inside header specifically
const sections = document.querySelectorAll('section');
const footer = document.querySelector('footer');
const title = document.querySelector('title');
const h2Elements = document.querySelectorAll('h2');
const pElements = document.querySelectorAll('p');
if (f % 4 == 0) {
// Default theme
body.style.background = 'linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%)';
header.style.background = '#158cff';
footer.style.background = '#ff5f2b';
sections.forEach(section => section.style.background = '#ffffff88');
title.style.color = '#158cff';
h2.style.color = '#fff'; // White color for h2 in header
h2Elements.forEach(h2 => h2.style.color = '#ff9d00');
pElements.forEach(p => p.style.color = '#333');
tt.style.color = '#bfeaff';
f += 1;
} else if (f % 4 == 1) {
// Dark theme
body.style.background = '#121212';
header.style.background = '#333333';
footer.style.background = '#1f1f1f';
sections.forEach(section => section.style.background = 'rgba(255, 255, 255, 0.1)');
title.style.color = '#fff';
h2.style.color = '#ff9d00'; // Gold color for h2 in header
h2Elements.forEach(h2 => h2.style.color = '#ff9d00');
pElements.forEach(p => p.style.color = '#fff');
// tt.style.color = '';
f += 1;
} else if (f % 4 == 2) {
// Gradient theme 1
body.style.background = 'linear-gradient(19deg, #FAACA8 0%, #DDD6F3 100%)';
header.style.background = '#ff6347';
footer.style.background = '#fa8072';
sections.forEach(section => section.style.background = '#ffffffb3');
title.style.color = '#ff6347';
h2.style.color = '#fff'; // White color for h2 in header
h2Elements.forEach(h2 => h2.style.color = '#ff6347');
pElements.forEach(p => p.style.color = '#333');
tt.style.color = '#ffd5bf';
f += 1;
} else if (f % 4 == 3) {
// Gradient theme 2
body.style.background = 'linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%)';
header.style.background = '#3cb371';
footer.style.background = '#228b22';
sections.forEach(section => section.style.background = '#ffffffcc');
title.style.color = '#3cb371';
h2.style.color = '#fff'; // White color for h2 in header
h2Elements.forEach(h2 => h2.style.color = '#3cb371');
pElements.forEach(p => p.style.color = '#333');
tt.style.color = '#d5ffdf';
f += 1;
}
}