Skip to content

Commit

Permalink
added portfolio
Browse files Browse the repository at this point in the history
  • Loading branch information
@Geeky-Gyan
Geeky-Gyan committed Oct 21, 2024
1 parent 932ab80 commit 66eea08
Show file tree
Hide file tree
Showing 4 changed files with 352 additions and 0 deletions.
171 changes: 171 additions & 0 deletions assets/css/gyanajyotimishra.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
49 changes: 49 additions & 0 deletions assets/js/gyanajyotimishra.js
View file
Original file line number Diff line number Diff line change
@@ -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';
}
});
6 changes: 6 additions & 0 deletions assets/js/script.js
View file
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
126 changes: 126 additions & 0 deletions gyanajyotimishra.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Gyanajyoti Mishra - Portfolio</title>
<link rel="stylesheet" href="assets/css/gyanajyotimishra.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
</head>
<body>

<!-- Header Section -->
<header>
<div class="container">
<h1>Gyanajyoti Mishra</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<button id="theme-toggle">🌙</button>
</nav>
</div>
</header>

<!-- Hero Section -->
<section id="hero">
<div class="container">
<h2 class="hero-title">Hi, I'm Gyanajyoti</h2>
<p>Competitive Programmer | Web Developer | Tech Enthusiast</p>
<a href="#projects" class="btn">View My Work</a>
</div>
</section>


<!-- About Section -->
<section id="about" class="section">
<div class="container">
<h2>About Me</h2>
<p>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.</p>
</div>
</section>

<!-- Skills Section -->
<section id="skills" class="section">
<div class="container">
<h2>Skills</h2>
<div class="skill-container">
<div class="skill">C++ </div>
<div class="skill">Web Development</div>
<div class="skill">Node.js & Express.js</div>
<div class="skill">Nextjs</div>
<div class="skill">Competitive Programming</div>
</div>
</div>
</section>

<!-- Projects Section -->
<section id="projects" class="section">
<div class="container">
<h2>Projects</h2>
<div class="project-grid">
<div class="project-card" data-modal="project1">
<h3>Chat application</h3>
<p>A chat application using html css js and socketio.</p>
</div>
<div class="project-card" data-modal="project2">
<h3>Ecell Website</h3>
<p>managing a dynamic website for IIT-BHU's E-Cell initiative.</p>
</div>

</div>
</div>
</section>

<!-- Contact Section -->
<section id="contact" class="section">
<div class="container">
<h2>Contact Me</h2>
<p>Reach out to me at:</p>
<ul>
<li>Email: mishrarashmita200@gmail.com</li>
<li>GitHub: <a href="https://github.com/Geeky-Gyan" target="_blank">github.com/Geeky-Gyan</a></li>
<li>LinkedIn: <a href="https://www.linkedin.com/in/gyanajyoti-mishra-a3844526b" target="_blank">linkedin.com/in/gyanajyoti-mishra-a3844526b</a></li>
</ul>
</div>
</section>

<!-- Footer -->
<footer>
<div class="container">
<p>&copy; 2024 Gyanajyoti Mishra. All Rights Reserved.</p>
</div>
</footer>

<!-- Modals for Project Details -->
<div id="project1" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<h2>Campus Ambassador Dashboard</h2>
<p>Detailed information about the project...</p>
</div>
</div>

<div id="project2" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<h2>Ecell Website</h2>
<p>Detailed information about the project...</p>
</div>
</div>

<div id="project3" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<h2>Competitive Programming Snippets</h2>
<p>Detailed information about the project...</p>
</div>
</div>

<script src="assets/js/gyanajyotimishra.js"></script>
</body>
</html>

0 comments on commit 66eea08

Please sign in to comment.