|
import gradio as gr |
|
import base64 |
|
import os |
|
import json |
|
|
|
|
|
def load_json(filename): |
|
"""Load JSON data from content folder""" |
|
try: |
|
with open(f"content/{filename}.json", "r", encoding="utf-8") as f: |
|
return json.load(f) |
|
except Exception as e: |
|
print(f"Error loading {filename}.json: {e}") |
|
return {} |
|
|
|
def file_to_data_uri(filepath, mime_type="application/pdf"): |
|
"""Convert file to data URI""" |
|
try: |
|
with open(filepath, "rb") as f: |
|
data = f.read() |
|
b64 = base64.b64encode(data).decode("utf-8") |
|
return f"data:{mime_type};base64,{b64}" |
|
except Exception as e: |
|
print(f"Error converting file to data URI: {e}") |
|
return None |
|
|
|
def image_to_data_uri(filepath, mime_type="image/jpeg"): |
|
"""Convert image to data URI""" |
|
try: |
|
with open(filepath, "rb") as f: |
|
data = f.read() |
|
b64 = base64.b64encode(data).decode("utf-8") |
|
return f"data:{mime_type};base64,{b64}" |
|
except Exception as e: |
|
print(f"Error converting image to data URI: {e}") |
|
return None |
|
|
|
|
|
def show_data_analytics(): |
|
return gr.update(visible=False), gr.update(visible=True), gr.update(visible=False), gr.update(visible=False) |
|
|
|
def show_machine_learning(): |
|
return gr.update(visible=False), gr.update(visible=False), gr.update(visible=True), gr.update(visible=False) |
|
|
|
def show_computer_vision(): |
|
return gr.update(visible=False), gr.update(visible=False), gr.update(visible=False), gr.update(visible=True) |
|
|
|
def go_home(): |
|
return gr.update(visible=True), gr.update(visible=False), gr.update(visible=False), gr.update(visible=False) |
|
|
|
def toggle_resume(is_visible): |
|
"""Toggle the visibility of the resume section.""" |
|
new_state = not is_visible |
|
new_label = "Hide Resume" if new_state else "View Resume" |
|
return new_state, gr.update(visible=new_state), gr.update(value=new_label) |
|
|
|
|
|
data_analytics_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path><path d="M8 10h.01"></path><path d="M12 10h.01"></path><path d="M16 10h.01"></path></svg>""" |
|
machine_learning_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>""" |
|
computer_vision_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>""" |
|
home_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>""" |
|
linkedin_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>""" |
|
github_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>""" |
|
mail_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>""" |
|
link_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>""" |
|
document_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><line x1="10" y1="9" x2="8" y2="9"></line></svg>""" |
|
|
|
|
|
icons = { |
|
"data_analytics_icon": data_analytics_icon, |
|
"machine_learning_icon": machine_learning_icon, |
|
"computer_vision_icon": computer_vision_icon, |
|
"home_icon": home_icon, |
|
"linkedin_icon": linkedin_icon, |
|
"github_icon": github_icon, |
|
"mail_icon": mail_icon, |
|
"link_icon": link_icon, |
|
"document_icon": document_icon |
|
} |
|
|
|
|
|
def generate_profile_html(): |
|
"""Generate HTML for the profile section""" |
|
try: |
|
profile_img_uri = image_to_data_uri(profile_data.get("photo", "data/My_photo.jpeg")) |
|
|
|
|
|
skills_html = "" |
|
for skill in profile_data.get("skills", []): |
|
skills_html += f'<div class="skill-pill">{skill}</div>\n' |
|
|
|
|
|
social_links_html = "" |
|
for link in profile_data.get("social_links", []): |
|
icon = icons.get(link.get("icon", ""), "") |
|
id_attr = f' id="{link["id"]}"' if "id" in link else "" |
|
social_links_html += f''' |
|
<a href="{link["url"]}" target="_blank" class="social-button social-{link["name"].lower()}" aria-label="{link.get("aria_label", link["name"])}"{ id_attr }> |
|
{ icon } |
|
</a> |
|
''' |
|
|
|
return f''' |
|
<div class="profile-container"> |
|
<div class="profile-pic"> |
|
<img src="{profile_img_uri}" alt="{profile_data.get("name", "Profile")}" /> |
|
</div> |
|
<div class="name-text">{profile_data.get("name", "")}</div> |
|
</div> |
|
<h2>{profile_data.get("title", "")}</h2> |
|
<div class="about-text"> |
|
{profile_data.get("about", "")} |
|
</div> |
|
|
|
<div class="skills-container"> |
|
{skills_html} |
|
</div> |
|
|
|
<div class="social-links"> |
|
{social_links_html} |
|
</div> |
|
''' |
|
except Exception as e: |
|
|
|
print(f"Error generating profile HTML: {e}") |
|
return f''' |
|
<div class="profile-container"> |
|
<div class="profile-pic"> |
|
<img src="/api/placeholder/400/400" alt="Profile" /> |
|
</div> |
|
<div class="name-text">{profile_data.get("name", "Name")}</div> |
|
</div> |
|
<h2>{profile_data.get("title", "Title")}</h2> |
|
<div class="about-text"> |
|
{profile_data.get("about", "About text")}</div> |
|
|
|
<div class="skills-container"> |
|
{', '.join(profile_data.get("skills", ["Skills"]))} |
|
</div> |
|
''' |
|
|
|
def generate_resume_html(): |
|
"""Generate HTML for the collapsible resume section""" |
|
return ''' |
|
<div class="resume-section glass-container"> |
|
<button class="resume-toggle-button" onclick="toggleResume()">View Resume</button> |
|
<div id="resume-content" class="resume-content" style="display: none;"> |
|
<p>Download my resume or view it below:</p> |
|
<a id="resume-download-link" class="resume-download-button" target="_blank">Download Resume</a> |
|
<div class="resume-preview"> |
|
<iframe id="resume-iframe" frameborder="0" class="resume-iframe"></iframe> |
|
</div> |
|
</div> |
|
</div> |
|
<script> |
|
function toggleResume() { |
|
const resumeContent = document.getElementById('resume-content'); |
|
const isHidden = resumeContent.style.display === 'none'; |
|
resumeContent.style.display = isHidden ? 'block' : 'none'; |
|
|
|
if (isHidden) { |
|
const resumeIframe = document.getElementById('resume-iframe'); |
|
const resumeDownloadLink = document.getElementById('resume-download-link'); |
|
fetch('/file/data/resume.pdf') |
|
.then(response => response.blob()) |
|
.then(blob => { |
|
const url = URL.createObjectURL(blob); |
|
resumeIframe.src = url; |
|
resumeDownloadLink.href = url; |
|
}) |
|
.catch(err => console.error('Error loading resume:', err)); |
|
} |
|
} |
|
</script> |
|
''' |
|
|
|
def generate_cards_html(): |
|
"""Generate HTML for the specialization cards""" |
|
cards_html = "" |
|
for card in sections_data.get("cards", []): |
|
icon = icons.get(card.get("icon", ""), "") |
|
cards_html += f''' |
|
<div class="card-container {card.get("class", "")}"> |
|
<div class="card-inner"> |
|
<div class="card-content"> |
|
{icon} |
|
<span>{card.get("title", "")}</span> |
|
</div> |
|
<div class="card-description"> |
|
{card.get("description", "")} |
|
</div> |
|
</div> |
|
</div> |
|
''' |
|
return cards_html |
|
|
|
def generate_contact_html(): |
|
"""Generate HTML for the contact section""" |
|
contact = profile_data.get("contact", {}) |
|
footer = profile_data.get("footer", {}) |
|
|
|
return f''' |
|
<!-- Contact section --> |
|
<div id="contact_section"> |
|
<h2>{contact.get("heading", "Contact Me")}</h2> |
|
<div class="contact-container"> |
|
<p>{contact.get("text", "")}</p> |
|
<a href="mailto:{contact.get("email", "")}" class="hire-me-button">{contact.get("button_text", "Contact")}</a> |
|
</div> |
|
</div> |
|
|
|
<!-- Footer --> |
|
<div class="footer"> |
|
<p>{footer.get("copyright", "")}</p> |
|
<p>{footer.get("credits", "")}</p> |
|
</div> |
|
''' |
|
|
|
def generate_skills_html(skills_data, section_class): |
|
"""Generate HTML for skills in a section""" |
|
skills_html = "" |
|
for skill_category in skills_data: |
|
items_html = "" |
|
for item in skill_category.get("items", []): |
|
items_html += f"<li>{item}</li>\n" |
|
|
|
skills_html += f''' |
|
<div class="skill-category"> |
|
<h4>{skill_category.get("category", "")}</h4> |
|
<ul> |
|
{items_html} |
|
</ul> |
|
</div> |
|
''' |
|
return skills_html |
|
|
|
def generate_projects_html(projects_data, section_class): |
|
"""Generate HTML for projects in a section""" |
|
projects_html = "" |
|
for project in projects_data: |
|
projects_html += f''' |
|
<div class="project-card"> |
|
<div class="project-title"> |
|
<span class="project-title-text">{project.get("title", "")}</span> |
|
<a href="{project.get("url", "#")}" target="_blank" class="project-link"> |
|
{icons.get("link_icon", "")} |
|
<span>View Project</span> |
|
</a> |
|
</div> |
|
<div class="project-description"> |
|
{project.get("description", "")} |
|
<span class="tech-stack"><strong>Tech Stack:</strong> {project.get("tech_stack", "")}</span> |
|
</div> |
|
</div> |
|
''' |
|
return projects_html |
|
|
|
def generate_section_html(section_data, section_class): |
|
"""Generate HTML for a complete section""" |
|
skills_html = generate_skills_html(section_data.get("skills", []), section_class) |
|
projects_html = generate_projects_html(section_data.get("projects", []), section_class) |
|
|
|
return f''' |
|
<h1 class="section-heading">{section_data.get("heading", "")}</h1> |
|
<div class="section-intro"> |
|
{section_data.get("intro", "")} |
|
</div> |
|
|
|
<h3 class="section-subheading {section_class}">Skills</h3> |
|
|
|
<div class="skills-list"> |
|
{skills_html} |
|
</div> |
|
|
|
<h3 class="section-subheading {section_class}">Projects</h3> |
|
|
|
{projects_html} |
|
''' |
|
|
|
|
|
portfolio_css = """ |
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Montserrat:wght@700;800&display=swap'); |
|
:root { |
|
--primary-da: #8a2be2; |
|
--secondary-da: #2575fc; |
|
--primary-ml: #00b4db; |
|
--secondary-ml: #0083b0; |
|
--primary-cv: #ff4d7e; |
|
--secondary-cv: #fd3e58; |
|
--dark-bg: #0f1118; |
|
--card-bg: #1a1d29; |
|
--text-primary: #ffffff; |
|
--text-secondary: #e0e0e0; |
|
--text-muted: #a0a0a0; |
|
--shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
--shadow-md: 0 8px 16px rgba(0, 0, 0, 0.2); |
|
--shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.2); |
|
--border-radius-sm: 8px; |
|
--border-radius-md: 12px; |
|
--border-radius-lg: 20px; |
|
--transition-fast: 0.2s ease; |
|
--transition-med: 0.3s ease; |
|
--transition-slow: 0.5s ease; |
|
} |
|
body { |
|
font-family: 'Poppins', sans-serif; |
|
background: var(--dark-bg); |
|
background-image: |
|
radial-gradient(circle at 25% 25%, rgba(53, 53, 113, 0.05) 0%, transparent 50%), |
|
radial-gradient(circle at 75% 75%, rgba(113, 53, 53, 0.05) 0%, transparent 50%); |
|
color: var(--text-primary); |
|
margin: 0; |
|
padding: 0; |
|
overflow-x: hidden; |
|
line-height: 1.6; |
|
letter-spacing: 0.5px; |
|
font-weight: 400; |
|
} |
|
.gr-container { |
|
max-width: 1200px; |
|
margin: 0 auto; |
|
padding: 20px; |
|
} |
|
/* Scrollbar styling */ |
|
::-webkit-scrollbar { |
|
width: 8px; |
|
height: 8px; |
|
} |
|
::-webkit-scrollbar-track { |
|
background: rgba(255, 255, 255, 0.05); |
|
border-radius: 4px; |
|
} |
|
::-webkit-scrollbar-thumb { |
|
background: rgba(255, 255, 255, 0.2); |
|
border-radius: 4px; |
|
} |
|
::-webkit-scrollbar-thumb:hover { |
|
background: rgba(255, 255, 255, 0.3); |
|
} |
|
/* Landing section */ |
|
.landing-section { |
|
text-align: center; |
|
margin-bottom: 60px; |
|
padding: 40px 20px; |
|
position: relative; |
|
} |
|
.landing-section:before { |
|
content: ''; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
height: 500px; |
|
background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 100%); |
|
z-index: -1; |
|
} |
|
.landing-section h1, .landing-section h2 { |
|
color: var(--text-primary) !important; |
|
margin-top: 0; |
|
} |
|
.landing-section h1 { |
|
font-family: 'Montserrat', sans-serif; |
|
font-size: 3.2rem; |
|
font-weight: 800; |
|
margin-bottom: 0.5rem; |
|
background: linear-gradient(90deg, var(--primary-da), var(--primary-ml), var(--primary-cv)); |
|
-webkit-background-clip: text; |
|
background-clip: text; |
|
color: transparent !important; |
|
letter-spacing: -0.5px; |
|
} |
|
.landing-section h2 { |
|
font-size: 2rem; |
|
font-weight: 600; |
|
margin-bottom: 1.5rem; |
|
} |
|
.profile-container { |
|
margin: 30px auto; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
flex-direction: column; |
|
} |
|
.profile-pic { |
|
width: 180px; |
|
height: 180px; |
|
border-radius: 50%; |
|
object-fit: cover; |
|
border: 4px solid rgba(255, 255, 255, 0.2); |
|
box-shadow: var(--shadow-md); |
|
margin-bottom: 20px; |
|
position: relative; |
|
background: linear-gradient(45deg, var(--primary-da), var(--primary-ml), var(--primary-cv)); |
|
padding: 4px; |
|
} |
|
.profile-pic img { |
|
border-radius: 50%; |
|
width: 100%; |
|
height: 100%; |
|
object-fit: cover; |
|
} |
|
.name-text { |
|
font-size: 2.6rem; |
|
font-weight: 700; |
|
margin-top: 10px; |
|
margin-bottom: 10px; |
|
} |
|
@keyframes float { |
|
0% { transform: translateY(0px) } |
|
50% { transform: translateY(-10px) } |
|
100% { transform: translateY(0px) } |
|
} |
|
@keyframes pulse { |
|
0% { transform: scale(1); } |
|
50% { transform: scale(1.05); } |
|
100% { transform: scale(1); } |
|
} |
|
.about-text { |
|
max-width: 800px; |
|
margin: 0 auto 40px; |
|
font-size: 1.25rem; |
|
line-height: 1.6; |
|
color: var(--text-secondary); |
|
} |
|
.skills-container { |
|
margin-top: 20px; |
|
display: flex; |
|
flex-wrap: wrap; |
|
justify-content: center; |
|
gap: 10px; |
|
margin-bottom: 40px; |
|
} |
|
.skill-pill { |
|
background: rgba(255, 255, 255, 0.1); |
|
padding: 8px 16px; |
|
border-radius: 30px; |
|
font-size: 0.9rem; |
|
font-weight: 500; |
|
color: var(--text-secondary); |
|
} |
|
.social-links { |
|
display: flex; |
|
justify-content: center; |
|
gap: 20px; |
|
margin: 30px 0; |
|
} |
|
.social-button { |
|
background: rgba(255, 255, 255, 0.1); |
|
border: none; |
|
border-radius: 50%; |
|
width: 50px; |
|
height: 50px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
transition: all var(--transition-med); |
|
color: var(--text-primary); |
|
font-size: 1.2rem; |
|
box-shadow: var(--shadow-sm); |
|
} |
|
.social-button:hover { |
|
transform: translateY(-5px); |
|
background: rgba(255, 255, 255, 0.2); |
|
box-shadow: var(--shadow-md); |
|
} |
|
.social-linkedin:hover { background: #0077b5; } |
|
.social-github:hover { background: #333; } |
|
.social-email:hover { background: #ea4335; } |
|
.social-button svg { |
|
width: 24px; |
|
height: 24px; |
|
} |
|
/* Card styling */ |
|
.cards-grid { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
gap: 30px; |
|
margin: 40px 0; |
|
} |
|
.card-container { |
|
position: relative; /* Important for button positioning */ |
|
margin-bottom: 20px; |
|
height: 100%; |
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); |
|
} |
|
.card-container.da:before { |
|
content: ''; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
height: 6px; |
|
background: linear-gradient(90deg, var(--primary-da), var(--secondary-da)); |
|
z-index: 5; |
|
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; |
|
} |
|
.card-container.ml:before { |
|
content: ''; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
height: 6px; |
|
background: linear-gradient(90deg, var(--primary-ml), var(--secondary-ml)); |
|
z-index: 5; |
|
transition: all var(--transition-med); |
|
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; |
|
} |
|
.card-container.cv:before { |
|
content: ''; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
height: 6px; |
|
background: linear-gradient(90deg, var(--primary-cv), var(--secondary-cv)); |
|
z-index: 5; |
|
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; |
|
} |
|
.card-content { |
|
padding: 30px; |
|
min-height: 200px; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
font-size: 26px; |
|
font-weight: 700; |
|
position: relative; |
|
z-index: 2; |
|
transition: all var(--transition-med); |
|
} |
|
.card-content svg { |
|
width: 60px; |
|
height: 60px; |
|
margin-bottom: 20px; |
|
opacity: 0.9; |
|
transition: all var(--transition-med); |
|
} |
|
.card-inner { |
|
transition: transform var(--transition-med), box-shadow var(--transition-med), background-color var(--transition-med); |
|
text-align: center; |
|
border-radius: var(--border-radius-md); |
|
background: var(--card-bg); |
|
overflow: hidden; |
|
box-shadow: var(--shadow-md); |
|
height: 100%; |
|
cursor: pointer; /* Indicates the card is clickable */ |
|
position: relative; /* Ensure child elements are positioned relative to the card */ |
|
} |
|
.card-inner:hover { |
|
transform: translateY(-10px) scale(1.05); /* Adds a slight zoom effect */ |
|
box-shadow: var(--shadow-lg); /* Increases shadow for emphasis */ |
|
background: rgba(255, 255, 255, 0.1); /* Subtle background change */ |
|
border: 2px solid var(--primary-da); /* Optional: Add a border to emphasize hover */ |
|
} |
|
.card-inner:hover .card-content svg { |
|
transform: scale(1.1); /* Slightly enlarges the icon */ |
|
opacity: 1; |
|
} |
|
.card-inner:hover .card-description { |
|
color: var(--text-primary); /* Optional: changes text color for emphasis */ |
|
} |
|
/* Add a subtle glow effect */ |
|
.card-inner:hover:before { |
|
content: ''; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
border-radius: var(--border-radius-md); |
|
box-shadow: 0 0 15px rgba(255, 255, 255, 0.3); |
|
z-index: -1; |
|
} |
|
.card-description { |
|
padding: 0 20px 20px; |
|
color: var(--text-secondary); |
|
font-size: 1.1rem; |
|
line-height: 1.5; |
|
} |
|
/* Card button styling - crucial for making cards clickable */ |
|
.card-button { |
|
position: absolute !important; |
|
top: 0 !important; |
|
left: 0 !important; |
|
width: 100% !important; |
|
height: 100% !important; |
|
opacity: 0 !important; |
|
z-index: 10 !important; |
|
cursor: pointer !important; |
|
margin: 0 !important; |
|
padding: 0 !important; |
|
border: none !important; |
|
transform: scale(1.05) !important; |
|
transition: transform 0.2s ease !important; |
|
background: none !important; |
|
} |
|
|
|
.click-to-view { |
|
margin-top: 15px; |
|
padding: 8px 15px; |
|
border-radius: 20px; |
|
display: inline-block; |
|
font-weight: 600; |
|
font-size: 0.9rem; |
|
transition: all var(--transition-med); |
|
background: rgba(255, 255, 255, 0.1); |
|
box-shadow: var(--shadow-sm); |
|
margin-left: auto; |
|
margin-right: auto; |
|
color: var(--text-primary); |
|
text-align: center; |
|
} |
|
|
|
/* Add glow effect */ |
|
.click-to-view:hover { |
|
transform: translateY(-2px); |
|
box-shadow: 0 0 15px rgba(255, 255, 255, 0.5), var(--shadow-md); |
|
background: rgba(255, 255, 255, 0.2); |
|
color: var(--text-primary); |
|
filter: brightness(1.2); |
|
} |
|
|
|
/* Add animation for subtle pulsing effect */ |
|
@keyframes glow-pulse { |
|
0% { |
|
box-shadow: 0 0 5px rgba(255, 255, 255, 0.2); |
|
} |
|
50% { |
|
box-shadow: 0 0 15px rgba(255, 255, 255, 0.4); |
|
} |
|
100% { |
|
box-shadow: 0 0 5px rgba(255, 255, 255, 0.2); |
|
} |
|
} |
|
|
|
.click-to-view { |
|
animation: glow-pulse 3s infinite; |
|
} |
|
|
|
.card-description p { |
|
margin-bottom: 15px; |
|
margin-top: 0; |
|
} |
|
|
|
.card-description { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: space-between; |
|
height: 100%; |
|
padding: 0 20px 20px; |
|
color: var(--text-secondary); |
|
font-size: 1.1rem; |
|
line-height: 1.5; |
|
} |
|
|
|
/* Different colors for each card type */ |
|
.da-click { |
|
color: var(--primary-da); |
|
border: 1px solid var(--primary-da); |
|
} |
|
|
|
.ml-click { |
|
color: var(--primary-ml); |
|
border: 1px solid var(--primary-ml); |
|
} |
|
|
|
.cv-click { |
|
color: var(--primary-cv); |
|
border: 1px solid var(--primary-cv); |
|
} |
|
|
|
/* Hover effects */ |
|
.click-to-view:hover { |
|
transform: translateY(-2px); |
|
box-shadow: var(--shadow-md); |
|
background: rgba(255, 255, 255, 0.15); |
|
} |
|
|
|
.card-inner:hover .click-to-view { |
|
transform: translateY(-2px); |
|
box-shadow: var(--shadow-md); |
|
} |
|
|
|
.card-inner:hover .da-click { |
|
background-color: rgba(138, 43, 226, 0.1); |
|
} |
|
|
|
.card-inner:hover .ml-click { |
|
background-color: rgba(0, 180, 219, 0.1); |
|
} |
|
|
|
.card-inner:hover .cv-click { |
|
background-color: rgba(255, 77, 126, 0.1); |
|
} |
|
|
|
.experience-timeline { |
|
margin: 80px 0 60px; |
|
padding: 20px; |
|
position: relative; |
|
} |
|
|
|
.experience-timeline h2 { |
|
text-align: center; |
|
margin-bottom: 60px; |
|
position: relative; |
|
display: inline-block; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
font-family: 'Montserrat', sans-serif; |
|
font-size: 2.5rem; |
|
font-weight: 700; |
|
background: linear-gradient(90deg, var(--primary-da), var(--primary-ml), var(--primary-cv)); |
|
-webkit-background-clip: text; |
|
background-clip: text; |
|
color: transparent; |
|
} |
|
|
|
.experience-timeline h2:after { |
|
content: ''; |
|
position: absolute; |
|
bottom: -10px; |
|
left: 0; |
|
width: 100%; |
|
height: 3px; |
|
border-radius: 3px; |
|
background: linear-gradient(90deg, var(--primary-da), var(--primary-ml), var(--primary-cv)); |
|
} |
|
|
|
/* Horizontal Timeline Styling */ |
|
.timeline-container { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: flex-start; |
|
position: relative; |
|
margin: 40px auto; |
|
max-width: 100%; |
|
overflow-x: auto; |
|
padding: 20px 0; |
|
} |
|
|
|
.timeline-track { |
|
position: absolute; |
|
top: 50%; |
|
left: 0; |
|
right: 0; |
|
height: 4px; |
|
background: linear-gradient(to right, var(--primary-da), var(--primary-ml), var(--primary-cv)); |
|
border-radius: 2px; |
|
z-index: 1; |
|
} |
|
|
|
.timeline-node { |
|
position: relative; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
width: 150px; |
|
margin: 0 20px; |
|
z-index: 2; |
|
} |
|
|
|
.timeline-dot { |
|
width: 20px; |
|
height: 20px; |
|
background: var(--primary-da); |
|
border-radius: 50%; |
|
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); |
|
margin-bottom: 10px; |
|
transition: transform 0.3s ease; |
|
} |
|
|
|
.timeline-year { |
|
font-size: 1rem; |
|
font-weight: 600; |
|
margin-bottom: 10px; |
|
color: var(--text-primary); |
|
} |
|
|
|
.timeline-content { |
|
background: var(--card-bg); |
|
border-radius: var(--border-radius-md); |
|
box-shadow: var(--shadow-sm); |
|
padding: 15px; |
|
text-align: center; |
|
width: 100%; |
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
} |
|
|
|
.timeline-node:hover .timeline-dot { |
|
transform: scale(1.3); |
|
} |
|
|
|
.timeline-node:hover .timeline-content { |
|
transform: translateY(-10px); |
|
box-shadow: var(--shadow-md); |
|
} |
|
|
|
/* Responsive adjustments for smaller screens */ |
|
@media (max-width: 768px) { |
|
.timeline-container { |
|
flex-direction: column; |
|
align-items: center; |
|
} |
|
|
|
.timeline-track { |
|
display: none; |
|
} |
|
|
|
.timeline-node { |
|
margin: 20px 0; |
|
} |
|
} |
|
|
|
/* Section styling */ |
|
.section-container { |
|
padding: 60px 20px; |
|
position: relative; |
|
} |
|
.section-container:before { |
|
content: ''; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 300px; |
|
background: radial-gradient(ellipse at top, rgba(255,255,255,0.05) 0%, transparent 70%); |
|
z-index: 0; |
|
} |
|
.da-section h1.section-heading { |
|
color: var(--primary-da); |
|
position: relative; |
|
display: inline-block; |
|
} |
|
.ml-section h1.section-heading { |
|
color: var(--primary-ml); |
|
position: relative; |
|
display: inline-block; |
|
} |
|
.cv-section h1.section-heading { |
|
color: var(--primary-cv); |
|
position: relative; |
|
display: inline-block; |
|
} |
|
.section-heading:after { |
|
content: ''; |
|
position: absolute; |
|
bottom: -10px; |
|
left: 0; |
|
width: 100%; |
|
height: 3px; |
|
border-radius: 3px; |
|
} |
|
.da-section .section-heading:after { background: var(--primary-da); } |
|
.ml-section .section-heading:after { background: var(--primary-ml); } |
|
.cv-section .section-heading:after { background: var(--primary-cv); } |
|
/* Subheadings color-coded */ |
|
.section-subheading.da { color: var(--primary-da); } |
|
.section-subheading.ml { color: var(--primary-ml); } |
|
.section-subheading.cv { color: var(--primary-cv); } |
|
/* Back buttons */ |
|
.back-button { |
|
border: none; |
|
border-radius: var(--border-radius-lg); |
|
padding: 10px 20px; |
|
font-size: 0.95rem; |
|
font-weight: 600; |
|
cursor: pointer; |
|
transition: transform var(--transition-fast), box-shadow var(--transition-fast); |
|
margin-bottom: 30px; |
|
display: flex; |
|
align-items: center; |
|
gap: 8px; |
|
} |
|
.back-button:hover { |
|
transform: translateY(-3px); |
|
box-shadow: var(--shadow-md); |
|
} |
|
.back-button-da { |
|
background: linear-gradient(45deg, var(--primary-da), var(--secondary-da)); |
|
color: #fff; |
|
} |
|
.back-button-ml { |
|
background: linear-gradient(45deg, var(--primary-ml), var(--secondary-ml)); |
|
color: #fff; |
|
} |
|
.back-button-cv { |
|
background: linear-gradient(45deg, var(--primary-cv), var(--secondary-cv)); |
|
color: #fff; |
|
} |
|
.back-button svg { |
|
width: 20px; |
|
height: 20px; |
|
} |
|
/* Contact form */ |
|
.contact-container { |
|
background: var(--card-bg); |
|
border-radius: var(--border-radius-md); |
|
padding: 30px; |
|
max-width: 600px; |
|
margin: 0 auto; |
|
box-shadow: var(--shadow-md); |
|
} |
|
.hire-me-button { |
|
background: linear-gradient(45deg, var(--primary-da), var(--primary-cv)); |
|
color: white; |
|
border: none; |
|
border-radius: var(--border-radius-lg); |
|
padding: 12px 25px; |
|
font-size: 1rem; |
|
font-weight: 600; |
|
cursor: pointer; |
|
transition: all var(--transition-med); |
|
box-shadow: var(--shadow-sm); |
|
display: inline-block; |
|
text-decoration: none; |
|
} |
|
.hire-me-button:hover { |
|
transform: translateY(-3px); |
|
box-shadow: var(--shadow-md); |
|
filter: brightness(1.1); |
|
} |
|
/* Project cards */ |
|
.project-card { |
|
background: var(--card-bg); |
|
border-radius: var(--border-radius-md); |
|
padding: 25px; |
|
margin-bottom: 20px; |
|
box-shadow: var(--shadow-sm); |
|
transition: all var(--transition-med); |
|
border-left: 4px solid transparent; |
|
} |
|
.da-section .project-card { border-left-color: var(--primary-da); } |
|
.ml-section .project-card { border-left-color: var(--primary-ml); } |
|
.cv-section .project-card { border-left-color: var(--primary-cv); } |
|
.project-card:hover { |
|
transform: translateX(5px); |
|
box-shadow: var(--shadow-md); |
|
} |
|
.project-title { |
|
font-size: 1.3rem; |
|
font-weight: 600; |
|
margin-bottom: 10px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
} |
|
.project-title-text { |
|
flex: 1; |
|
} |
|
.project-link { |
|
color: var(--text-secondary); |
|
transition: all var(--transition-med); |
|
text-decoration: none; |
|
display: inline-flex; |
|
align-items: center; |
|
margin-left: 10px; |
|
} |
|
.project-link svg { |
|
width: 16px; |
|
height: 16px; |
|
} |
|
.da-section .project-title-text { color: var(--primary-da); } |
|
.ml-section .project-title-text { color: var(--primary-ml); } |
|
.cv-section .project-title-text { color: var(--primary-cv); } |
|
.da-section .project-link:hover { color: var(--primary-da); } |
|
.ml-section .project-link:hover { color: var(--primary-ml); } |
|
.cv-section .project-link:hover { color: var(--primary-cv); } |
|
.project-description { |
|
color: var(--text-secondary); |
|
line-height: 1.5; |
|
} |
|
.tech-stack { |
|
display: block; |
|
margin-top: 10px; |
|
font-style: italic; |
|
color: var(--text-muted); |
|
} |
|
/* Skills list */ |
|
.skills-list { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); |
|
gap: 15px; |
|
margin-top: 20px; |
|
margin-bottom: 40px; /* Added margin to create space between skills and projects */ |
|
} |
|
.skill-category { |
|
background: rgba(255, 255, 255, 0.05); |
|
border-radius: var(--border-radius-sm); |
|
padding: 15px; |
|
transition: all var(--transition-med); |
|
} |
|
.skill-category:hover { |
|
background: rgba(255, 255, 255, 0.08); |
|
transform: translateY(-3px); |
|
} |
|
.skill-category h4 { |
|
margin-top: 0; |
|
margin-bottom: 10px; |
|
font-size: 1.1rem; |
|
} |
|
.da-section .skill-category h4 { color: var(--primary-da); } |
|
.ml-section .skill-category h4 { color: var(--primary-ml); } |
|
.cv-section .skill-category h4 { color: var(--primary-cv); } |
|
.skill-category ul { |
|
margin: 0; |
|
padding-left: 20px; |
|
color: var(--text-secondary); |
|
} |
|
.skill-category li { |
|
margin-bottom: 5px; |
|
} |
|
/* Section intro text */ |
|
.section-intro { |
|
max-width: 800px; |
|
margin-bottom: 30px; |
|
line-height: 1.6; |
|
color: var(--text-secondary); |
|
font-size: 1.1rem; |
|
} |
|
/* Footer */ |
|
.footer { |
|
text-align: center; |
|
padding: 40px 20px; |
|
margin-top: 60px; |
|
color: var(--text-muted); |
|
font-size: 0.9rem; |
|
} |
|
/* Animations for scroll */ |
|
.animate-on-scroll { |
|
opacity: 0; |
|
transform: translateY(20px); |
|
transition: opacity 0.6s ease, transform 0.6s ease; |
|
} |
|
|
|
.animate-on-scroll.show { |
|
animation: fadeInUp 0.6s ease forwards; |
|
} |
|
|
|
@keyframes fadeInUp { |
|
0% { |
|
opacity: 0; |
|
transform: translateY(20px); |
|
} |
|
100% { |
|
opacity: 1; |
|
transform: translateY(0); |
|
} |
|
} |
|
|
|
/* Loading states */ |
|
.loading-spinner { |
|
border: 4px solid rgba(255, 255, 255, 0.2); |
|
border-top: 4px solid var(--primary-da); |
|
border-radius: 50%; |
|
width: 40px; |
|
height: 40px; |
|
animation: spin 1s linear infinite; |
|
} |
|
|
|
@keyframes spin { |
|
0% { |
|
transform: rotate(0deg); |
|
} |
|
100% { |
|
transform: rotate(360deg); |
|
} |
|
} |
|
|
|
/* Glassmorphism effects */ |
|
.glass-container { |
|
background: rgba(255, 255, 255, 0.1); |
|
backdrop-filter: blur(10px); |
|
border: 1px solid rgba(255, 255, 255, 0.2); |
|
border-radius: var(--border-radius-md); |
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); |
|
} |
|
|
|
/* Subtle background patterns */ |
|
body { |
|
background-image: url('https://www.transparenttextures.com/patterns/noise.png'); |
|
} |
|
|
|
/* Gradient refinements */ |
|
button { |
|
background: linear-gradient(45deg, var(--primary-da), var(--primary-ml)); |
|
} |
|
|
|
/* Shadow depth variations */ |
|
.card-container:hover { |
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); |
|
} |
|
|
|
/* ARIA attributes */ |
|
button { |
|
aria-label: "Interactive button"; |
|
} |
|
|
|
/* Keyboard navigation */ |
|
button:focus { |
|
outline: 2px solid var(--primary-da); |
|
outline-offset: 2px; |
|
} |
|
|
|
/* Mobile-first refinements */ |
|
@media (max-width: 768px) { |
|
.cards-grid { |
|
grid-template-columns: 1fr; |
|
} |
|
} |
|
|
|
/* Touch-friendly targets */ |
|
button { |
|
padding: 12px 20px; |
|
} |
|
|
|
/* Responsive typography */ |
|
h1 { |
|
font-size: calc(2rem + 1vw); |
|
} |
|
|
|
/* Parallax scrolling effects */ |
|
.section-container:before { |
|
content: ''; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 300px; |
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent); |
|
transform: translateY(-50%); |
|
will-change: transform; |
|
transition: transform 0.3s ease; |
|
} |
|
|
|
body.onscroll .section-container:before { |
|
transform: translateY(0); |
|
} |
|
|
|
/* Mouse-follow glow effect */ |
|
.interactive:hover { |
|
box-shadow: 0 0 15px rgba(255, 255, 255, 0.5); |
|
} |
|
|
|
/* Staggered animation sequences */ |
|
@keyframes staggeredFadeIn { |
|
0% { |
|
opacity: 0; |
|
transform: translateY(20px); |
|
} |
|
100% { |
|
opacity: 1; |
|
transform: translateY(0); |
|
} |
|
} |
|
|
|
.list-item { |
|
opacity: 0; |
|
animation: staggeredFadeIn 0.6s ease forwards; |
|
} |
|
|
|
.list-item:nth-child(1) { |
|
animation-delay: 0.2s; |
|
} |
|
|
|
.list-item:nth-child(2) { |
|
animation-delay: 0.4s; |
|
} |
|
|
|
.list-item:nth-child(3) { |
|
animation-delay: 0.6s; |
|
} |
|
|
|
/* Interactive particles background */ |
|
.particles-bg { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
background: url('https://www.transparenttextures.com/patterns/cubes.png'); |
|
opacity: 0.1; |
|
} |
|
|
|
/* Smooth page section transitions */ |
|
html { |
|
scroll-behavior: smooth; |
|
} |
|
|
|
/* Custom cursor styles */ |
|
body { |
|
cursor: url('https://example.com/custom-cursor.png'), auto; |
|
} |
|
|
|
button:hover { |
|
cursor: pointer; |
|
} |
|
|
|
/* Resume Section */ |
|
.resume-section { |
|
margin: 40px auto; |
|
padding: 20px; |
|
text-align: center; |
|
max-width: 800px; |
|
box-shadow: var(--shadow-md); |
|
} |
|
|
|
.resume-toggle-button { |
|
background: linear-gradient(45deg, var(--primary-da), var(--primary-cv)); |
|
color: white; |
|
border: none; |
|
border-radius: var(--border-radius-lg); |
|
padding: 10px 20px; |
|
font-size: 1rem; |
|
font-weight: 600; |
|
cursor: pointer; |
|
transition: all var(--transition-med); |
|
box-shadow: var(--shadow-sm); |
|
width: auto; /* Adjust width to fit the text */ |
|
min-width: 150px; /* Optional: Set a minimum width for consistency */ |
|
} |
|
|
|
.resume-toggle-button:hover { |
|
transform: translateY(-3px); |
|
box-shadow: var(--shadow-md); |
|
filter: brightness(1.1); |
|
} |
|
|
|
.resume-content { |
|
margin-top: 20px; |
|
text-align: center; |
|
} |
|
|
|
.resume-download-button { |
|
display: inline-block; |
|
margin: 20px 0; |
|
padding: 10px 20px; |
|
font-size: 1rem; |
|
font-weight: 600; |
|
color: white; |
|
background: linear-gradient(45deg, var(--primary-da), var(--primary-cv)); |
|
border: none; |
|
border-radius: var(--border-radius-lg); |
|
text-decoration: none; |
|
transition: all var(--transition-med); |
|
box-shadow: var(--shadow-sm); |
|
} |
|
|
|
.resume-download-button:hover { |
|
transform: translateY(-3px); |
|
box-shadow: var(--shadow-md); |
|
filter: brightness(1.1); |
|
} |
|
|
|
.resume-preview { |
|
margin-top: 20px; |
|
border: 1px solid rgba(255, 255, 255, 0.2); |
|
border-radius: var(--border-radius-md); |
|
overflow: hidden; |
|
box-shadow: var(--shadow-sm); |
|
} |
|
|
|
.resume-iframe { |
|
width: 100%; |
|
height: 500px; |
|
border: none; |
|
} |
|
|
|
/* Performance optimizations */ |
|
img { |
|
loading: lazy; |
|
} |
|
|
|
/* Micro-interactions */ |
|
button:hover { |
|
transform: translateY(-3px); |
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); |
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
} |
|
|
|
button:active { |
|
transform: scale(0.95); |
|
transition: transform 0.1s ease; |
|
} |
|
|
|
/* Scroll to Top Button */ |
|
.scroll-to-top { |
|
position: fixed; |
|
bottom: 20px; |
|
right: 20px; |
|
background: linear-gradient(45deg, var(--primary-da), var(--primary-cv)); |
|
color: white; |
|
border: none; |
|
border-radius: 50%; |
|
width: 50px; |
|
height: 50px; |
|
font-size: 1.5rem; |
|
font-weight: bold; |
|
cursor: pointer; |
|
box-shadow: var(--shadow-md); |
|
display: none; /* Initially hidden */ |
|
align-items: center; |
|
justify-content: center; |
|
transition: all var(--transition-med); |
|
z-index: 1000; |
|
} |
|
|
|
.scroll-to-top:hover { |
|
transform: translateY(-3px); |
|
box-shadow: var(--shadow-lg); |
|
filter: brightness(1.1); |
|
} |
|
""" |
|
|
|
|
|
try: |
|
profile_data = load_json("profile") |
|
sections_data = load_json("sections") |
|
data_analytics_data = load_json("data_analytics") |
|
machine_learning_data = load_json("machine_learning") |
|
computer_vision_data = load_json("computer_vision") |
|
except Exception as e: |
|
print(f"Error loading content: {e}") |
|
|
|
profile_data = {} |
|
sections_data = {"cards": []} |
|
data_analytics_data = {} |
|
machine_learning_data = {} |
|
computer_vision_data = {} |
|
|
|
|
|
with gr.Blocks(title=f"{profile_data.get('name', 'Portfolio')}", css=portfolio_css) as demo: |
|
|
|
|
|
with gr.Row(visible=False, elem_classes="section-container da-section") as da_section: |
|
with gr.Column(): |
|
|
|
back_from_da = gr.Button("← Back to Home", elem_classes="back-button back-button-da") |
|
gr.HTML(generate_section_html(data_analytics_data, "da")) |
|
|
|
|
|
with gr.Row(visible=False, elem_classes="section-container ml-section") as ml_section: |
|
with gr.Column(): |
|
|
|
back_from_ml = gr.Button("← Back to Home", elem_classes="back-button back-button-ml") |
|
gr.HTML(generate_section_html(machine_learning_data, "ml")) |
|
|
|
|
|
with gr.Row(visible=False, elem_classes="section-container cv-section") as cv_section: |
|
with gr.Column(): |
|
|
|
back_from_cv = gr.Button("← Back to Home", elem_classes="back-button back-button-cv") |
|
gr.HTML(generate_section_html(computer_vision_data, "cv")) |
|
|
|
with gr.Row(visible=True, elem_classes="landing-section") as landing_section: |
|
with gr.Column(): |
|
|
|
gr.HTML(generate_profile_html()) |
|
|
|
|
|
resume_state = gr.State(value=False) |
|
with gr.Group(visible=False) as resume_container: |
|
gr.File(value="data/resume.pdf", label="Resume", interactive=False) |
|
resume_toggle_btn = gr.Button("View Resume") |
|
resume_toggle_btn.click(fn=toggle_resume, inputs=[resume_state], outputs=[resume_state, resume_container, resume_toggle_btn]) |
|
|
|
|
|
gr.HTML("<h2>My Specializations</h2>") |
|
|
|
|
|
with gr.Row(elem_classes="cards-grid"): |
|
with gr.Column(): |
|
|
|
gr.HTML('<div class="card-container da">') |
|
da_button = gr.Button("Data Analytics", elem_classes="card-button") |
|
gr.HTML(f''' |
|
<div class="card-inner"> |
|
<div class="card-content"> |
|
{icons.get(sections_data.get("cards", [])[0].get("icon", ""), "")} |
|
<span>{sections_data.get("cards", [])[0].get("title", "Data Analytics")}</span> |
|
</div> |
|
<div class="card-description"> |
|
{sections_data.get("cards", [])[0].get("description", "")} |
|
<div class="click-to-view da-click">Click to view</div> |
|
</div> |
|
</div> |
|
''') |
|
|
|
with gr.Column(): |
|
|
|
gr.HTML('<div class="card-container ml">') |
|
ml_button = gr.Button("Machine Learning", elem_classes="card-button") |
|
gr.HTML(f''' |
|
<div class="card-inner"> |
|
<div class="card-content"> |
|
{icons.get(sections_data.get("cards", [])[1].get("icon", ""), "")} |
|
<span>{sections_data.get("cards", [])[1].get("title", "Machine Learning")}</span> |
|
</div> |
|
<div class="card-description"> |
|
{sections_data.get("cards", [])[1].get("description", "")} |
|
<div class="click-to-view ml-click">Click to view</div> |
|
</div> |
|
</div> |
|
''') |
|
|
|
with gr.Column(): |
|
|
|
gr.HTML('<div class="card-container cv">') |
|
cv_button = gr.Button("Computer Vision", elem_classes="card-button") |
|
gr.HTML(f''' |
|
<div class="card-inner"> |
|
<div class="card-content"> |
|
{icons.get(sections_data.get("cards", [])[2].get("icon", ""), "")} |
|
<span>{sections_data.get("cards", [])[2].get("title", "Computer Vision")}</span> |
|
</div> |
|
<div class="card-description"> |
|
{sections_data.get("cards", [])[2].get("description", "")} |
|
<div class="click-to-view cv-click">Click to view</div> |
|
</div> |
|
</div> |
|
''') |
|
|
|
gr.HTML(f''' |
|
<div class="experience-timeline"> |
|
<h2>My Journey</h2> |
|
|
|
<div class="timeline-container"> |
|
<div class="timeline-track"></div> |
|
|
|
<div class="timeline-node"> |
|
<div class="timeline-dot"></div> |
|
<div class="timeline-year">2018-2021</div> |
|
<div class="timeline-content"> |
|
<div class="timeline-title">Bachelor's in Commerce (89%)</div> |
|
<div class="timeline-details"> |
|
<p class="timeline-location">SRM University Chennai</p> |
|
<p>Graduated with honors focusing on Business and Finance.</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="timeline-node"> |
|
<div class="timeline-dot"></div> |
|
<div class="timeline-year">2021-2023</div> |
|
<div class="timeline-content"> |
|
<div class="timeline-title">Junior Software Engineer at Cognizant</div> |
|
<div class="timeline-details"> |
|
<p class="timeline-location">Chennai India</p> |
|
<p>Developed and maintained enterprise-grade Java applications for the Insurance domain</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="timeline-node"> |
|
<div class="timeline-dot"></div> |
|
<div class="timeline-year">2023-2024</div> |
|
<div class="timeline-content"> |
|
<div class="timeline-title">Post-Graduation in AI/ML (97%)</div> |
|
<div class="timeline-details"> |
|
<p class="timeline-location">George Brown college,Canada</p> |
|
<p>Advanced studies in AI/ML and data science.</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="timeline-node"> |
|
<div class="timeline-dot"></div> |
|
<div class="timeline-year">2025</div> |
|
<div class="timeline-content"> |
|
<div class="timeline-title">Seeking ML Engineer/Data Scientist Role</div> |
|
<div class="timeline-details"> |
|
<p>Ready for opportunities in ML and Data Science in Canada.</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
''') |
|
|
|
gr.HTML(""" |
|
<script> |
|
document.addEventListener('DOMContentLoaded', function() { |
|
// Get all timeline nodes |
|
const timelineNodes = document.querySelectorAll('.timeline-node'); |
|
|
|
// Add click event listener to each node |
|
timelineNodes.forEach(node => { |
|
node.addEventListener('click', function() { |
|
// Check if this node is already active |
|
const isActive = this.classList.contains('active'); |
|
|
|
// Remove active class from all nodes |
|
timelineNodes.forEach(n => n.classList.remove('active')); |
|
|
|
// If node wasn't active before, make it active |
|
if (!isActive) { |
|
this.classList.add('active'); |
|
} |
|
}); |
|
}); |
|
|
|
// Make the first node active by default |
|
if (timelineNodes.length > 0) { |
|
timelineNodes[0].classList.add('active'); |
|
} |
|
}); |
|
</script> |
|
""") |
|
|
|
|
|
gr.HTML(generate_contact_html()) |
|
|
|
|
|
gr.File(value="data/resume.pdf", label="Resume", interactive=False, visible=False) |
|
|
|
|
|
da_button.click(show_data_analytics, inputs=None, outputs=[landing_section, da_section, ml_section, cv_section]) |
|
ml_button.click(show_machine_learning, inputs=None, outputs=[landing_section, da_section, ml_section, cv_section]) |
|
cv_button.click(show_computer_vision, inputs=None, outputs=[landing_section, da_section, ml_section, cv_section]) |
|
|
|
back_from_da.click(go_home, inputs=None, outputs=[landing_section, da_section, ml_section, cv_section]) |
|
back_from_ml.click(go_home, inputs=None, outputs=[landing_section, da_section, ml_section, cv_section]) |
|
back_from_cv.click(go_home, inputs=None, outputs=[landing_section, da_section, ml_section, cv_section]) |
|
|
|
|
|
gr.HTML(""" |
|
<button id="scrollToTop" class="scroll-to-top" aria-label="Scroll to Top"> |
|
↑ |
|
</button> |
|
<script> |
|
document.addEventListener('DOMContentLoaded', function () { |
|
const scrollToTopButton = document.getElementById('scrollToTop'); |
|
|
|
// Show or hide the button based on scroll position |
|
window.addEventListener('scroll', function () { |
|
if (window.scrollY > 300) { |
|
scrollToTopButton.style.display = 'flex'; // Use 'flex' for proper alignment |
|
} else { |
|
scrollToTopButton.style.display = 'none'; |
|
} |
|
}); |
|
|
|
// Scroll to top when the button is clicked |
|
scrollToTopButton.addEventListener('click', function () { |
|
window.scrollTo({ |
|
top: 0, |
|
behavior: 'smooth' |
|
}); |
|
}); |
|
}); |
|
</script> |
|
""") |
|
|
|
|
|
if __name__ == "__main__": |
|
demo.launch() |
