From 66eea084625f0358a956fee6dc97bac26fdc6860 Mon Sep 17 00:00:00 2001 From: Geeky-Gyan Date: Mon, 21 Oct 2024 21:51:54 +0530 Subject: [PATCH] added portfolio --- assets/css/gyanajyotimishra.css | 171 ++++++++++++++++++++++++++++++++ assets/js/gyanajyotimishra.js | 49 +++++++++ assets/js/script.js | 6 ++ gyanajyotimishra.html | 126 +++++++++++++++++++++++ 4 files changed, 352 insertions(+) create mode 100644 assets/css/gyanajyotimishra.css create mode 100644 assets/js/gyanajyotimishra.js create mode 100644 gyanajyotimishra.html diff --git a/assets/css/gyanajyotimishra.css b/assets/css/gyanajyotimishra.css new file mode 100644 index 0000000..b637bde --- /dev/null +++ b/assets/css/gyanajyotimishra.css @@ -0,0 +1,171 @@ +/* General Styles */ +body { + font-family: 'Poppins', sans-serif; + margin: 0; + padding: 0; + background-color: var(--bg-color); + color: var(--text-color); +} + +:root { + --bg-color: #ffffff; + --text-color: #333; + --primary-color: #3498db; + --card-bg-color: #f4f4f4; /* Background for cards */ + --modal-bg-color: #fff; /* Background for modal */ + --skill-bg-color: #f4f4f4; + --hero-text-color: #333; /* Light mode hero text color */ +} + +.dark-theme { + --bg-color: #333; + --text-color: #ffffff; + --primary-color: #2980b9; + --card-bg-color: #444; /* Dark mode card background */ + --modal-bg-color: #555; /* Dark mode modal background */ + --skill-bg-color: #444; /* Dark mode skill background */ + --hero-text-color: #ffffff; /* Dark mode hero text color */ +} + +h1, h2, h3, p { + margin-bottom: 20px; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 20px; +} + +/* Header */ +header { + background-color: var(--primary-color); + color: #fff; + padding: 20px 0; + position: sticky; + top: 0; + z-index: 1000; +} + +header h1 { + text-align: center; +} + +nav ul { + display: flex; + justify-content: center; + list-style: none; + margin-bottom: 10px; +} + +nav ul li { + margin: 0 15px; +} + +nav ul li a { + color: #fff; + text-decoration: none; +} + +#theme-toggle { + background: none; + border: none; + font-size: 1.5rem; + color: #fff; + cursor: pointer; +} + +/* Hero Section */ +#hero { + background: url('hero-bg.jpg') no-repeat center center/cover; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: var(--hero-text-color); /* Use hero text color variable */ +} + +.hero-title { + color: var(--hero-text-color); /* Ensure the hero title uses the hero text color */ +} + +.btn { + background-color: var(--primary-color); + padding: 10px 20px; + color: #fff; + text-decoration: none; + border-radius: 5px; +} + +.section { + padding: 80px 20px; + text-align: center; +} + +/* Skills Section */ +.skill-container { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.skill { + background-color: var(--skill-bg-color); + padding: 15px; + margin: 10px; + border-radius: 5px; + min-width: 150px; +} + +/* Projects Section */ +.project-grid { + display: flex; + justify-content: space-around; + flex-wrap: wrap; +} + +.project-card { + background-color: var(--card-bg-color); + padding: 20px; + width: 30%; + margin: 10px; + border-radius: 8px; + cursor: pointer; + color: var(--text-color); +} + +/* Modals */ +.modal { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.8); +} + +.modal-content { + background: var(--modal-bg-color); + color: var(--text-color); + margin: 100px auto; + padding: 20px; + width: 80%; + max-width: 600px; + border-radius: 8px; +} + +.close { + float: right; + font-size: 2rem; + cursor: pointer; +} + +/* Footer */ +footer { + background-color: var(--primary-color); + color: #fff; + text-align: center; + padding: 10px 0; +} diff --git a/assets/js/gyanajyotimishra.js b/assets/js/gyanajyotimishra.js new file mode 100644 index 0000000..0d1745f --- /dev/null +++ b/assets/js/gyanajyotimishra.js @@ -0,0 +1,49 @@ +// Smooth Scrolling +document.querySelectorAll('nav ul li a').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const targetId = this.getAttribute('href').substring(1); + const targetElement = document.getElementById(targetId); + + window.scrollTo({ + top: targetElement.offsetTop - 60, // Adjust for header height + behavior: 'smooth' + }); + }); +}); + +// Dark Mode Toggle +const themeToggle = document.getElementById('theme-toggle'); +const body = document.body; + +themeToggle.addEventListener('click', () => { + body.classList.toggle('dark-theme'); + themeToggle.textContent = body.classList.contains('dark-theme') ? '☀️' : '🌙'; +}); + +// Modal Functionality for Projects +const modals = document.querySelectorAll('.modal'); +const projectCards = document.querySelectorAll('.project-card'); +const closeButtons = document.querySelectorAll('.close'); + +// Open Modal +projectCards.forEach(card => { + card.addEventListener('click', () => { + const modalId = card.getAttribute('data-modal'); + document.getElementById(modalId).style.display = 'block'; + }); +}); + +// Close Modal +closeButtons.forEach(button => { + button.addEventListener('click', () => { + button.parentElement.parentElement.style.display = 'none'; + }); +}); + +// Close Modal by Clicking Outside +window.addEventListener('click', (e) => { + if (e.target.classList.contains('modal')) { + e.target.style.display = 'none'; + } +}); diff --git a/assets/js/script.js b/assets/js/script.js index 4f78819..f1ce69e 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -1,4 +1,10 @@ const entries = [ + { + name: "Gyanajyoti Mishra", + portfolio: "gyanajyotimishra.html", + github: "https://github.com/Geeky-Gyan", + linkedin: "https://www.linkedin.com/in/gyanajyoti-mishra-a3844526b", + }, { name: "Arkapravo Roy", portfolio: "arkapravoroy.html", diff --git a/gyanajyotimishra.html b/gyanajyotimishra.html new file mode 100644 index 0000000..49f45e5 --- /dev/null +++ b/gyanajyotimishra.html @@ -0,0 +1,126 @@ + + + + + + + Gyanajyoti Mishra - Portfolio + + + + + + +
+
+

Gyanajyoti Mishra

+ +
+
+ + +
+
+

Hi, I'm Gyanajyoti

+

Competitive Programmer | Web Developer | Tech Enthusiast

+ View My Work +
+
+ + + +
+
+

About Me

+

I am a passionate software developer and competitive programmer currently pursuing B.Tech in Pharmaceutical Engineering at IIT-BHU. I enjoy solving complex problems and building innovative web applications.

+
+
+ + +
+
+

Skills

+
+
C++
+
Web Development
+
Node.js & Express.js
+
Nextjs
+
Competitive Programming
+
+
+
+ + +
+
+

Projects

+
+
+

Chat application

+

A chat application using html css js and socketio.

+
+
+

Ecell Website

+

managing a dynamic website for IIT-BHU's E-Cell initiative.

+
+ +
+
+
+ + +
+
+

Contact Me

+

Reach out to me at:

+ +
+
+ + + + + + + + + + + + + +