index.html

<!DOCTYPE HTML>
<html>
	<head>
		<title>Shiraz-V-Kamaruddin-Portfolio</title>
		<meta charset="utf-8" />
		<meta 
			name="description" 
			content="Shiraz-V-Kamaruddin's Game Programmer Portofile">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<!-- <link rel="shortcut icon" type="image/jpg" href="/favicon.jpg"/> -->
		<link rel="shortcut icon" type="image/ico" href="images/Icon/reaper.ico"/>
		<link rel="stylesheet" href="assets/css/main.css" />
		<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
		<script src="https://kit.fontawesome.com/1b4abe6603.js" crossorigin="anonymous"></script>
	</head>
	<body class="is-preload">

		<!-- Wrapper -->
			<div id="wrapper">

				<!-- Header -->
					<header id="header">
						<div class="logo">
						
							<span class="icon">
								<i class="fa-solid fa-gamepad"></i>
							</span>
							
							
						</div>
						<div class="content">
							<div class="inner">
								<h1>Shiraz-V-Kamar</h1>	
								<p> Unity Developer | Game Programmer </p>
								<!-- Download Resume -->
								
								"Game Dev reel is <b>coming soon</b>!"<br>
								<a href="images/Documents/Shiraz V Kamar Resume.pdf" class="button" download><i class="fa-solid fa-file-arrow-down"></i> Resume</a> &nbsp;
								<!-- <a href="" class="button"><i class="fa-brands fa-youtube"></i> Dev Reel</a> -->
								<br><br>
								<h3>“Codes are a puzzle. A game, just like any other game.”<br></h3> 
								- Alan Turing -
							</div>
						</div>
						<nav>
							<ul>
								<li><a href="#about">About</a></li>
								<li><a href="#Works">Games</a></li>
								<li><a href="#ArtWorks">Extras</a></li>
								<li><a href="#contact">Contact</a></li>
							</ul>
						</nav>
					</header>

				<!-- Main -->
					<div id="main">
						<!-- About -->
						<article id="about">
							<br>
							<nav class="article-navbar use-middle">
								<ul>
								  <li><a href="#about">About</a></li>
								  <li><a href="#Works">Games</a></li>
								  <li><a href="#ArtWorks">Extras</a></li>
								  <li><a href="#contact">Contact</a></li>
								</ul>
							  </nav>
							<h2 class="major">Shiraz-V-Kamar</h2>
							<span class="image main"><img class="lazyload" data-src="images/Game Banner Info.png" alt="" /></span>
							<h3 class="major">About</h3>
							<p> <B>Hey ! Shiraz here 😊</B><br>
								Welcome to my portfolio! <br>

								<h5>⭐ Key Info ⭐</h5>
								<i class="fa-solid fa-circle bullet-point-icons"> </i>  &nbsp; I hold a Master's in Game Technology🎓, passionate about gaming and bringing creative concepts to life. <br>

								<i class="fa-solid fa-circle bullet-point-icons"> </i>  &nbsp; I've prototyped and implemented game features 🧪, contributing to swift iteration and testing🔬.<br>

								<i class="fa-solid fa-circle bullet-point-icons"> </i>  &nbsp; My strengths lie in innovation, advanced programming🧑🏾‍💻, and pushing game development boundaries.<br>

								<i class="fa-solid fa-circle bullet-point-icons"> </i>  &nbsp; Currently, I'm investing my time in up-skilling, strengthening my foundations, 🤔exploring new ideas. <br><br>

								A passionate game developer with a focus on creating immersive and engaging experiences. With a strong foundation in Unity, C#, and gameplay programming, I specialize in bringing creative visions to life through interactive gameplay mechanics and captivating storytelling. <br>
								
								Throughout my career, I've had the privilege of working on a diverse range of projects, from RPGs to shooters, each offering unique challenges and opportunities for innovation. My approach to game development is rooted in a blend of technical expertise, creative vision, and a deep understanding of player experience.<br>

								<i class="fa-solid fa-circle bullet-point-icons"> </i>  &nbsp; <a href="#I-Frankenstein">I-Frankenstein</a> is a third-person game based on Frankenstein, where players can control each body part and piece them together to progress through the game.<br>
								<i class="fa-solid fa-circle bullet-point-icons"> </i>  &nbsp; <a href="#TheElementals">The Elementals</a> is a third-person endless shooter game, where players take on the role of a robotic elemental defending against alien attacks. 
								These projects demonstrate my ability to lead teams and deliver high-quality gaming experiences.<br>

								In this portfolio, you'll find a showcase of my projects, highlighting my skills in game design, programming, and project management. Whether you're a fellow developer, recruiter, or gaming enthusiast, I invite you to explore my work and get a glimpse into my passion for <a href="#Works">game development</a>.<br>
							</p>
							<h3 class="major" >Work Experience</h3>

							<div class="timeline">
								<ul>
									<li>
										<span>Game Programmer</span>
										<div class="content">
											<h3 >Hypernova interactive</h3>
											<p> Bengaluru, India </p>
											<div class="bullet-points">
												<b>Mayanagari</b><br>
												<i class="fa-solid fa-circle bullet-point-icons"> </i> Strengthened Mayanagari's user experience by resolving 
												bugs and implementing enhancements, resulting in a 
												decrease in issues.<br>
												<i class="fa-solid fa-circle bullet-point-icons"> </i> Implemented the action queue feature, which resulted in a 
												decrease in player frustration during complex gameplay 
												scenarios.<br>
												<i class="fa-solid fa-circle bullet-point-icons"> </i> Conducted in-depth research and laid the groundwork for 
												implementing multiplayer functionality in Mayanagari, setting 
												the stage for future development initiatives and positioning the 
												project for scalability and community growth.<br>
												<br>
												<b>Dojo Defenders</b><br>
												<i class="fa-solid fa-circle bullet-point-icons"> </i> Development of a midcore game prototype, incorporating 
												innovative gameplay mechanics that resulted in an increase in 
												player engagement during testing phases.<br>
												<i class="fa-solid fa-circle bullet-point-icons"> </i> Implemented 5 new features and resolved bugs, resulting in a  
												improvement in overall gameplay stability.<br>
												<i class="fa-solid fa-circle bullet-point-icons"> </i> Contributed to iterative design processes, which led to 
												multiple iterations and an increase in the effectiveness of the  
												game mechanics, as evidenced by play tester feedback.<br>
											</div>
										</div>
									</li>
								</ul>
							</div>


							<h3 class="major" >Education</h3>

							<div class="timeline">
								<ul>
									<li>
										<span>M.Sc. in Game Technology</span>
										<div class="content">
											<h3 >ICAT</h3>
											<p> Bengaluru </p>
											<div class="bullet-points">
												<i class="fa-solid fa-circle bullet-point-icons"></i> Specialized in Game Programming <br>
												<!-- <i class="fa-solid fa-circle point-Marker"></i> Specialized in Game Programming <br> -->
											</div>
										</div>
									</li>
									<li>
										<span>B.Sc. in Animation</span>
										<div class="content">
											<h3>Whistling Woods International</h3>
											<p> Mumbai </p>
											<div class="bullet-points">
												<i class="fa-solid fa-circle bullet-point-icons"></i> Specialized in Game Designing <br>
											</div>
										</div>
									</li>
								</ul>
							</div>

							<h3 class="major" >Extra info</h3>

							<div class="skills-grid">
								<div class="skill-card skillList">
									<div class="skills-content">
										<div class="skills-banner skillListBanner"></div>
										<h2 class="skills-header"><i class="icons brands fa-solid fa-square-poll-vertical"></i> Skills</h2>
										<div class="skills-text">
											<!-- skills progress bar -->
											<div class="progress-bars">
												<div class="progress-bar">
													<h4 class="progress-title"> <span class="pythonLanguage"><i class="fa-solid fa-circle python-Marker"></i>Python</span> <i class="fa-solid fa-circle csharp-Marker"></i>C# </h4>
													<div class="progress-con">
														<div class="progress">
															<span class="bar csharp-bar"></span>
															<span class="bar python-bar"></span>
														</div>
													</div>
												</div>
												<div class="progress-bar">
													<h4 class="progress-title"><i class="fa-solid fa-circle cplus-Marker"></i><span class="javaLanguage">C++, Java</span> </h4>
													<div class="progress-con">
														<div class="progress">
															<span class="bar java-bar"></span>
														</div>
													</div>
												</div>
												<div class="progress-bar">
													<h4 class="progress-title"><i class="fa-solid fa-circle css-Marker"></i>CSS <i class="fa-solid fa-circle html-Marker"></i>HTML  </h4>
													<div class="progress-con">
														<div class="progress">
															<span class="bar html-bar"></span>
															<span class="bar css-bar"></span>
														</div>
													</div>
												</div>
												<div class="progress-bar">
													<h4 class="progress-title"><i class="fa-solid fa-circle substance-Marker"></i>Visual Studio </h4>
													<div class="progress-con">
														<div class="progress">
															<span class="bar vs-bar"></span>
														</div>
													</div>
												</div>
												<div class="progress-bar">
													<h4 class="progress-title"><i class="fa-solid fa-circle substance-Marker"></i>Shader(HLSL)</h4>
													<div class="progress-con">
														<div class="progress">
															<span class="bar shader-bar"></span>
														</div>
													</div>
												</div>
												<div class="progress-bar">
													<h4 class="progress-title"><i class="fa-solid fa-circle github-Marker"></i>Git</h4>
													<div class="progress-con">
														<div class="progress">
															<span class="bar github-bar"></span>
														</div>
													</div>
												</div>
											</div>
										</div>
									   </div>
								</div>

									<div class="skills-card Softwares">
										<div class="skills-content">
											<div class="skills-banner softwareBanner"></div>
											<h2 class="skills-header"><span><i class="icons brands fa-brands fa-uncharted"></span></i> Softwares</h2>
											<div class="skills-text">
												<!-- software Progress bars -->
												<div class="progress-bars">
													<div class="progress-bar">
														<h4 class="progress-title"><i class="fa-solid fa-circle unreal-Marker"></i>Unreal <i class="fa-solid fa-circle unity-Marker"></i>Unity  </h4>
														<div class="progress-con">
															<div class="progress">
																<span class="bar unity-bar"></span>
																<span class="bar unreal-bar"></span>
															</div>
														</div>
													</div>
													<div class="progress-bar">
														<h4 class="progress-title"><i class="fa-solid fa-circle miro-Marker"></i>Miro <i class="fa-solid fa-circle notion-Marker"></i>Notion</h4>
														<div class="progress-con">
															<div class="progress">
																<span class="bar notion-bar"></span>
																<span class="bar miro-bar"></span>

															</div>
														</div>
													</div>
													<div class="progress-bar">
														<h4 class="progress-title"> <i class="fa-solid fa-circle illustrator-Marker"></i>Illustrator <span><i class="fa-solid fa-circle photoshop-Marker"></i>Photoshop</span> </h4>
														<div class="progress-con">
															<div class="progress">
																<span class="bar photoshop-bar"></span>
																<span class="bar illustrator-bar"></span>
															</div>
														</div>
													</div>
													<div class="progress-bar">
														<span><h4 class="progress-title"><i class="fa-solid fa-circle afterEffects-Marker"></i>After effects <i class="fa-solid fa-circle premier-Marker"></i>Premier Pro</h4></span>
														<div class="progress-con">
															<div class="progress">
																<span class="bar premier-bar"></span>
																<span class="bar afterEffects-bar"></span>
															</div>
														</div>
													</div>
													<div class="progress-bar">
														<h4 class="progress-title">  <i class="fa-solid fa-circle blender-Marker"></i>Blender <i class="fa-solid fa-circle zbrush-Marker"></i> Zbrush <i class="fa-solid fa-circle maya-Marker"></i>Maya</h4>
														<div class="progress-con">
															<div class="progress">
																<span class="bar maya-bar"></span>
																<span class="bar zbrush-bar"></span>
																<span class="bar blender-bar"></span>
															</div>
														</div>
													</div>
													<div class="progress-bar">
														<h4 class="progress-title"> <i class="fa-solid fa-circle substance-Marker"></i>Substance Painter </h4>
														<div class="progress-con">
															<div class="progress">
																<span class="bar substance-bar"></span>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
							</div>
							<div class="skills-grid ">
								<div class="skills-card hobbies">
									<div class="skills-content">
										<div class="skills-banner hibbiesbanner"></div>
										<h2 class="skills-header"><i class="fa-solid fa-chess-knight"></i> Hobbies</h2>
										<div class="slill-list-text">
											<ul>
												<li>Gaming</li> 
												<li>Reading</li> 
												<li>Python Automation</li> 
												<li>Interested in Psychology</li> 
												<li>Drawing Digital || Paper</li> 
												<li>Japanese Culture (anime, manga)</li> 	
												<li>Listening to (Audiobooks || Music)</li> 
											</ul>
										</div>
									</div>
								</div>

								
								<div class="skills-card Languages">
									<div class="skills-content">
										<div class="skills-banner languageBanner"></div>
										<h2 class="skills-header"><i class="icons brands fa-solid fa-language"></i> Languages</h2>
										<div class="slill-list-text">
											<ul>
											<li>English (Proficient)</li>
											<li>Malayalam (Native)</li>
											<li>Hindi (communicative) </li>
											<li>Tamil (communicative)</li>
											<li>Japanese (communicative {Learning}) </li>
											</ul>
										</div>
									</div>
								</div>
							</div>

							<div class="back-to-top">
								<button class="top-btn" data-target="#about">Back to Top</button>
							</div>
						</article>

						<!-- Contact -->
							<article id="contact">
								<h2 class="major">Contact</h2>
								<form method="post" action="https://formspree.io/f/myyayjko">
									<div class="fields">
										<div class="field half">
											<label for="name">Name</label>
											<input type="text" name="name" id="name" required/>
										</div>
										<div class="field half">
											<label for="email">Email</label>
											<input type="text" name="email" id="email" required/>
										</div>
										<div class="field">
											<label for="message">Message</label>
											<textarea name="message" id="message" rows="4" required></textarea>
										</div>
									</div>
									<ul class="actions">
										<li><input type="submit" value="Send Message" class="primary" /></li>
										<li><input type="reset" value="Reset" /></li>
									</ul>
								</form>
								<ul class="icons">
									<li><a  href="tel:+91 7907461696" onclick="copyNumber()"  class="icons brands fa-solid fa-mobile-screen-button"> </a>  </li>
									<li><a  href="mailto:ShirazVKamar@gmail.com" target="blank" class="icons brands fa-solid fa-envelope"> </a>  </li>	
									<li><a href="http://www.linkedin.com/in/shiraz-v-kamaruddin" target="blank" class="icon brands fa-linkedin-in"><span class="label">Linkedin</span></a></li>
									<li><a href="https://www.instagram.com/dead_bloody_red/" target="blank" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
									<script>
										function copyNumber() {
										  // Specify the number to copy
										  var number = +917907461696;
										
										  // Copy the number to the clipboard
										  navigator.clipboard.writeText(number).then(function() {
											console.log('Number copied to clipboard');
										  }, function(err) {
											console.error('Failed to copy number: ', err);
										  });
										}
										</script>
									<!-- <li><a href="#" class="icon brands fa-github"><span class="label">GitHub</span></a></li> -->
								</ul>
								<ul class="icons">
									
									<!-- &nbsp; +91 7907461696 -->
								</ul>
								<p></p>
							</article>


							<!-- Works -->
							<article id="Works" class="Works">
								<br>
								<nav class="article-navbar use-middle">
									<ul>
									  <li><a href="#about">About</a></li>
									  <li><a href="#Works">Games</a></li>
									  <li><a href="#ArtWorks">Extras</a></li>
									  <li><a href="#contact">Contact</a></li>
									</ul>
								  </nav>
								</nav>
								<h2 class="major">Works</h2>
								<span class="image main"><img class="lazyload" data-src="images/Game Banner.png" alt="Game Banner" /></span>
								<div style="text-align: center;">
									"Game Dev reel is <b>coming soon</b>!"
									<!-- <a href="" class="button"><i class="fa-brands fa-youtube"></i> Dev Reel</a> -->
								</div>
								<br><br>
							
								<!-- Adding Buttons for filtering -->
								<div class="filter-buttons">
									<button class="filter-btn" data-filter="all">All</button>
									<button class="filter-btn" data-filter="prototypes">Prototypes</button>
									<button class="filter-btn" data-filter="mechanic">Mechanic Remakes</button>
									<button class="filter-btn" data-filter="full">Full Games</button>
								</div>
								<br>
								<h3  class="major">Hypernova interactive</h3>
								<div class="grid">

									<!-- card 1 -->
									<div class="grid-item full game-item" data-title="Mayanagari">
										<div class="card" onclick="Mayanagari()"></button>
										  <img
											class="card-img lazyload"
											data-src="./images/Mayanagari/Mayanagari.png"
											alt="Mayanagari Banner Pic"
										  />
										  <div class="card-content">
										  <h2 class="card-header">Mayanagari</h2>
										  <div class="card-tags-container">
											  <div class="cards-tag">
												  <p class="card-text">
													  Engine  
												  </p>
												  <p class="card-text-speration">
													  :
												  </p>
												  <p class="card-tag-icon-con">
													  <span class="game-card-tag">🎮 Unity</span>
												  </p>
											  </div>
											  <div class="cards-tag">
												  <p class="card-text">
													  Game Type 
												  </p>
												  <p class="card-text-speration">
													  :
												  </p>
												  <p class="card-tag-icon-con">
													  <span class="game-card-tag">🗃️ Action-Adventure, Open World</span>
												  </p>
											  </div>
											  <div class="cards-tag">
												  <p class="card-text">
													  Project Type
												  </p>
												  <p class="card-text-speration">
													  :
												  </p>
												  <p class="card-tag-icon-con">
													  <span class="game-card-tag">📁 Single Player</span>
												  </p>
											  </div>
										  </div>
											<button class="card-btn" onclick="Mayanagari()">Visit <span> <i class="fa-solid fa-arrow-right"></i></span></button>
											<script>
											  function Mayanagari() {
											    location.hash = 'Mayanagari';
											//   window.open('#Mayanagari');
											//   window.focus();
											  }
											  </script>
										  </div>
										</div>
									</div>

									<!-- Card 2 -->
									<div class="grid-item prototypes game-item" data-title="Dojo Defenders">
										<div class="card" onclick="DojoDefenders()">
										  <img
											class="card-img lazyload"
											data-src="./images/Dojo Defenders/Dojo Defender Thumbnail.png"
											alt="Dojo Defender Banner Pic"
										  />
										  <div class="card-content">
										  <h2 class="card-header">Dojo Defenders</h2>
										  <div class="card-tags-container">
											  <div class="cards-tag">
												  <p class="card-text">
													  Engine  
												  </p>
												  <p class="card-text-speration">
													  :
												  </p>
												  <p class="card-tag-icon-con">
													  <span class="game-card-tag">🎮 Unity</span>
												  </p>
											  </div>
											  <div class="cards-tag">
												  <p class="card-text">
													  Game Type 
												  </p>
												  <p class="card-text-speration">
													  :
												  </p>
												  <p class="card-tag-icon-con">
													  <span class="game-card-tag">🗃️ Midcore Game</span>
												  </p>
											  </div>
											  <div class="cards-tag">
												  <p class="card-text">
													  Project Type
												  </p>
												  <p class="card-text-speration">
													  :
												  </p>
												  <p class="card-tag-icon-con">
													  <span class="game-card-tag">📁 Single Player</span>
												  </p>
											  </div>
										  </div>
											<button class="card-btn" onclick="DojoDefenders()">Visit <span> <i class="fa-solid fa-arrow-right"></i></span></button>
											<script>
											  function DojoDefenders() {
											    location.hash = 'DojoDefenders';
											//   window.open('#DojoDefenders');
											//   window.focus();
											  }
											  </script>
										  </div>
										</div>
									</div>
								</div>
								<br>

								<!-- PERSONAL PROJECT SECTION -->

								<h3  class="major">Personal Projects</h3>
								<div class="grid">
									<!-- card 1 -->
									 <div class="grid-item prototypes game-item" data-title="I Frankenstein"> <!-- Added data-tiitle and game-item to auto populate the games in horizontal bar -->
										<div class="card" onclick="Frankenstein()">
										  
											<img
											class="card-img lazyload"
											data-src="./images/I-Frankenstein/Frankenstein Thumbnail Temp.png"
											alt="I-Frankenstein Banner Pic"
										  />
										  <div class="card-content">
										  <h2 class="card-header">I-Frankenstein</h2>
										  <div class="card-tags-container">
											  <div class="cards-tag">
												  <p class="card-text">
													  Engine  
												  </p>
												  <p class="card-text-speration">
													  :
												  </p>
												  <p class="card-tag-icon-con">
													  <span class="game-card-tag">🎮 Unity</span>
												  </p>
											  </div>
											  <div class="cards-tag">
												  <p class="card-text">
													  Game Type 
												  </p>
												  <p class="card-text-speration">
													  :
												  </p>
												  <p class="card-tag-icon-con">
													  <span class="game-card-tag">🗃️ RPG, Survival, Puzzle</span>
												  </p>
											  </div>
											  <div class="cards-tag">
												  <p class="card-text">
													  Project Type
												  </p>
												  <p class="card-text-speration">
													  :
												  </p>
												  <p class="card-tag-icon-con">
													  <span class="game-card-tag">📁 Major Project</span>
												  </p>
											  </div>
										  </div>
											<button class="card-btn" onclick="Frankenstein()">Visit <span> <i class="fa-solid fa-arrow-right"></i></span></button>
											<script>
											  function Frankenstein() {
											  location.hash = 'I-Frankenstein';
												//   window.open('#I-Frankenstein');
												//   window.focus();
											  }
											  </script>
										  </div>
										</div>
									</div>

									<!-- card 2 -->
									<div class="grid-item full game-item" data-title="The Elementals">
									  <div class="card" onclick="Game2()">
										<img
										  class="card-img lazyload"
										  data-src="./images/The elementals/Banner Pic.png"
										  alt="Grand Canyon"
										/>
										<div class="card-content">
										<h2 class="card-header">The Elementals</h2>
										<div class="card-tags-container">
											<div class="cards-tag">
												<p class="card-text">
													Engine  
												</p>
												<p class="card-text-speration">
													:
												</p>
												<p class="card-tag-icon-con">
													<span class="game-card-tag">🎮 Unity</span>
												</p>
											</div>
											<div class="cards-tag">
												<p class="card-text">
													Game Type 
												</p>
												<p class="card-text-speration">
													:
												</p>
												<p class="card-tag-icon-con">
													<span class="game-card-tag">🗃️ Third-Person</span>
												</p>
											</div>
											<div class="cards-tag">
												<p class="card-text">
													Project Type
												</p>
												<p class="card-text-speration">
													:
												</p>
												<p class="card-tag-icon-con">
													<span class="game-card-tag">📁 Game Jam Game</span>
												</p>
											</div>
									    </div>
										  <button class="card-btn" onclick="Game2()">Visit <span> <i class="fa-solid fa-arrow-right"></i></span></button>
										  <script>
											function Game2() {
											  location.hash = 'TheElementals';
											// window.open('#TheElementals');
											// window.focus();
											}
											</script>
										</div>
									  </div>
									</div>

									<!-- Card 3 -->
									<div class="grid-item full game-item" data-title="Holy Souls">
									  <div class="card" onclick="HolySouls()">
										<img class="card-img lazyload" data-src="./images/Holy Souls/Holy Souls Banner.png" alt="Holy Souls Banner Pic" />
										<div class="card-content">
										  <h2 class="card-header">Holy Souls</h2>
										  <div class="card-tags-container">
											<div class="cards-tag">
												<p class="card-text">
													Engine  
												</p>
												<p class="card-text-speration">
													:
												</p>
												<p class="card-tag-icon-con">
													<span class="game-card-tag">🎮 Unity</span>
												</p>
											</div>
											<div class="cards-tag">
												<p class="card-text">
													Game Type 
												</p>
												<p class="card-text-speration">
													:
												</p>
												<p class="card-tag-icon-con">
													<span class="game-card-tag">🗃️ Top-down</span>
												</p>
											</div>
											<div class="cards-tag">
												<p class="card-text">
													Project Type
												</p>
												<p class="card-text-speration">
													:
												</p>
												<p class="card-tag-icon-con">
													<span class="game-card-tag">📁 Personal-Project</span>
												</p>
											</div>
									    </div>
										  <button class="card-btn" onclick="HolySouls()">Visit <span><i class="fa-solid fa-arrow-right"></i> </span></button>
										  <script>
										  function HolySouls() {
											location.hash = 'HolySouls';
											// window.open('#HolySouls');
											// window.focus();
										  }
										  </script>
										</div>
									  </div>
									</div>

									<!-- Card 4 -->
									<!-- <div class="grid-item">
										<div class="card">
										  <img class="card-img lazyload" data-src="./images/Endless Shooter/Banner Pic.png" alt="Maldives" />
										  <div class="card-content">
											<h2 class="card-header">Endless Shooter</h2>
											<div class="card-tags-container">
												<div class="cards-tag">
													<p class="card-text">
														Engine  
													</p>
													<p class="card-text-speration">
														:
													</p>
													<p class="card-tag-icon-con">
														<span class="game-card-tag">🎮 Unity</span>
													</p>
												</div>
												<div class="cards-tag">
													<p class="card-text">
														Game Type 
													</p>
													<p class="card-text-speration">
														:
													</p>
													<p class="card-tag-icon-con">
														<span class="game-card-tag">🗃️ Isometric Shooter</span>
													</p>
												</div>
												<div class="cards-tag">
													<p class="card-text">
														Project Type
													</p>
													<p class="card-text-speration">
														:
													</p>
													<p class="card-tag-icon-con">
														<span class="game-card-tag">📁 Learning-Project</span>
													</p>
												</div>
											</div>
											<button class="card-btn" onclick="Game4()">Visit <span><i class="fa-solid fa-arrow-right"></i> </span></button>
											<script>
											function Game4() {
											  location.hash = 'EndlessShooter';
											  window.open('Works.html#HolySouls');
											    window.focus();
											}
											</script>
										  </div>
										</div>
									</div> -->

									<!-- Card 5 -->
									<div class="grid-item full game-item" data-title="AR Birthday Gift">
										<div class="card" onclick="ARBirthdayGift()">
										  <img class="card-img lazyload" data-src="./images/AR Birthday Gift/ARBirthdayGift Screenshot.png" alt="Maldives" />
										  <div class="card-content">
											<h2 class="card-header">AR Birthday Gift</h2>
											<div class="card-tags-container">
												<div class="cards-tag">
													<p class="card-text">
														Engine  
													</p>
													<p class="card-text-speration">
														:
													</p>
													<p class="card-tag-icon-con">
														<span class="game-card-tag">🎮 Unity</span>
													</p>
												</div>
												<div class="cards-tag">
													<p class="card-text">
														Game Type 
													</p>
													<p class="card-text-speration">
														:
													</p>
													<p class="card-tag-icon-con">
														<span class="game-card-tag">🗃️ Augmented Reality</span>
													</p>
												</div>
												<div class="cards-tag">
													<p class="card-text">
														Project Type
													</p>
													<p class="card-text-speration">
														:
													</p>
													<p class="card-tag-icon-con">
														<span class="game-card-tag">📁 Personal-Project</span>
													</p>
												</div>
											</div>
											<button class="card-btn" onclick="ARBirthdayGift()">Visit <span><i class="fa-solid fa-arrow-right"></i> </span></button>
											<script>
											function ARBirthdayGift() {
											location.hash = 'ARBirthdayGift';
											// window.open('#ARBirthdayGift');
											// window.focus();
											}
											</script>
										  </div>
										</div>
									</div>

									<!-- Card 6 -->
									<div class="grid-item prototypes game-item" data-title="Dig Through">
										<div class="card" onclick="DigThrough()">
										  <img class="card-img lazyload" data-src="./images/Dig Through/Dig Through Thumbnail.png" alt="Dig Through Thumbnail Pic" />
										  <div class="card-content">
											<h2 class="card-header">Dig Through</h2>
											<div class="card-tags-container">
												<div class="cards-tag">
													<p class="card-text">
														Engine  
													</p>
													<p class="card-text-speration">
														:
													</p>
													<p class="card-tag-icon-con">
														<span class="game-card-tag">🎮 LibGDX</span>
													</p>
												</div>
												<div class="cards-tag">
													<p class="card-text">
														Game Type 
													</p>
													<p class="card-text-speration">
														:
													</p>
													<p class="card-tag-icon-con">
														<span class="game-card-tag">🗃️ Hyper-Casual</span>
													</p>
												</div>
												<div class="cards-tag">
													<p class="card-text">
														Project Type
													</p>
													<p class="card-text-speration">
														:
													</p>
													<p class="card-tag-icon-con">
														<span class="game-card-tag">📁 Assignment</span>
													</p>
												</div>
											</div>
											<button class="card-btn" onclick="DigThrough()">Visit <span><i class="fa-solid fa-arrow-right"></i> </span></button>
											<script>
											function DigThrough() {
											location.hash = 'SoundScapes';
											//   window.open('#DigThrough');
											//   window.focus();
											}
											</script>
										  </div>
										</div>
									</div>

									<!-- Card 7 -->
									<div class="grid-item prototypes game-item" data-title="Sound Scapes" >
										<div class="card" onclick="SoundScapes()">
										  <img class="card-img lazyload" data-src="./images/SoundScapes/Sound Scape.PNG" alt="Sound Scapes Card Pic" />
										  <div class="card-content">
											<h2 class="card-header">Sound Scapes</h2>
											<div class="card-tags-container">
												<div class="cards-tag">
													<p class="card-text">
														Engine  
													</p>
													<p class="card-text-speration">
														:
													</p>
													<p class="card-tag-icon-con">
														<span class="game-card-tag">🎮 Unity</span>
													</p>
												</div>
												<div class="cards-tag">
													<p class="card-text">
														Game Type 
													</p>
													<p class="card-text-speration">
														:
													</p>
													<p class="card-tag-icon-con">
														<span class="game-card-tag">🗃️ 3D Side Scroller</span>
													</p>
												</div>
												<div class="cards-tag">
													<p class="card-text">
														Project Type
													</p>
													<p class="card-text-speration">
														:
													</p>
													<p class="card-tag-icon-con">
														<span class="game-card-tag">📁 Semester Project</span>
													</p>
												</div>
											</div>
											<button class="card-btn" onclick="SoundScapes()">Visit <span><i class="fa-solid fa-arrow-right"></i> </span></button>
											<script>
											function SoundScapes() {
												location.hash = 'SoundScapes';
											//   window.open('#SoundScapes');
											//   window.focus();
											}
											</script>
										  </div>
										</div>
									</div>

									<!-- Card 8 -->
									<!-- <div class="grid-item">
										<div class="card">
										  <img class="card-img lazyload" data-src="./images/FolkArt/FolkArt CardImage 3.png" alt="Rome" />
										  <div class="card-content">
											<h2 class="card-header">Folk Art Interaction</h2>
											<div class="card-tags-container">
												  <div class="cards-tag">
													  <p class="card-text">
														  Engine  
													  </p>
													  <p class="card-text-speration">
														  :
													  </p>
													  <p class="card-tag-icon-con">
														  <span class="game-card-tag">🎮 Unity</span>
													  </p>
												  </div>
												  <div class="cards-tag">
													  <p class="card-text">
														  Game Type 
													  </p>
													  <p class="card-text-speration">
														  :
													  </p>
													  <p class="card-tag-icon-con">
														  <span class="game-card-tag">🗃️ First-Person</span>
													  </p>
												  </div>
												  <div class="cards-tag">
													  <p class="card-text">
														  Project Type
													  </p>
													  <p class="card-text-speration">
														  :
													  </p>
													  <p class="card-tag-icon-con">
														  <span class="game-card-tag">📁 Assignment</span>
													  </p>
												  </div>
											</div>
											<button class="card-btn" onclick="FolkArt()">  Visit <span><i class="fa-solid fa-arrow-right"></i> </span></button>
  
											<script>
											  function FolkArt() {
												// location.hash = 'FolkArt';
												window.open('#FolkArt');
												window.focus();
											  }
											  </script>
										  </div>
										</div>
									  </div> -->

									  <!-- Card 9 -->
									<div class="grid-item mechanic game-item" data-title="Inventory System">
										<div class="card" onclick="InventorySystem()">
										  <img class="card-img lazyload" data-src="./images/Inventory/Inventory Thumbnail Temp.png" alt="Rome" />
										  <div class="card-content">
											<h2 class="card-header">Inventory System</h2>
											<div class="card-tags-container">
												  <div class="cards-tag">
													  <p class="card-text">
														  Engine  
													  </p>
													  <p class="card-text-speration">
														  :
													  </p>
													  <p class="card-tag-icon-con">
														  <span class="game-card-tag">🎮 Unity</span>
													  </p>
												  </div>
												  <div class="cards-tag">
													  <p class="card-text">
														  Game Type 
													  </p>
													  <p class="card-text-speration">
														  :
													  </p>
													  <p class="card-tag-icon-con">
														  <span class="game-card-tag">🗃️ Game Mechanic</span>
													  </p>
												  </div>
												  <div class="cards-tag">
													  <p class="card-text">
														  Project Type
													  </p>
													  <p class="card-text-speration">
														  :
													  </p>
													  <p class="card-tag-icon-con">
														  <span class="game-card-tag">📁 Prototype</span>
													  </p>
												  </div>
											</div>
											<button class="card-btn" onclick="InventorySystem()">  Visit <span><i class="fa-solid fa-arrow-right"></i> </span></button>
  
											<script>
											  function InventorySystem() {
												location.hash = 'InventorySystem';
												// window.open('#InventorySystem');
												// window.focus();
											  }
											  </script>
										  </div>
										</div>
									  </div>

									   <!-- Card 10 -->
									<div class="grid-item mechanic game-item" data-title="Grappling Hook">
										<div class="card" onclick="GrapplingHook()">
										  <img class="card-img lazyload" data-src="./images/Grappling Hook/Grappling hook banner.png" alt="Rome" />
										  <div class="card-content">
											<h2 class="card-header">Grappling Hook</h2>
											<div class="card-tags-container">
												  <div class="cards-tag">
													  <p class="card-text">
														  Engine  
													  </p>
													  <p class="card-text-speration">
														  :
													  </p>
													  <p class="card-tag-icon-con">
														  <span class="game-card-tag">🎮 Unity</span>
													  </p>
												  </div>
												  <div class="cards-tag">
													  <p class="card-text">
														  Game Type 
													  </p>
													  <p class="card-text-speration">
														  :
													  </p>
													  <p class="card-tag-icon-con">
														  <span class="game-card-tag">🗃️ Game Mechanic</span>
													  </p>
												  </div>
												  <div class="cards-tag">
													  <p class="card-text">
														  Project Type
													  </p>
													  <p class="card-text-speration">
														  :
													  </p>
													  <p class="card-tag-icon-con">
														  <span class="game-card-tag">📁 Prototype</span>
													  </p>
												  </div>
											</div>
											<button class="card-btn" onclick="GrapplingHook()">  Visit <span><i class="fa-solid fa-arrow-right"></i> </span></button>
  
											<script>
											  function GrapplingHook() {
												location.hash = 'GrapplingHook';
												// window.open('#GrapplingHook');
												// window.focus();
											  }
											  </script>
										  </div>
										</div>
									  </div>
								</div>
								<br>
								<div class="back-to-top">
									<button class="top-btn" data-target="#Works">Back to Top</button>
								</div>
							</article>
						

						<!-- Games Starts here -->
						<article id="HolySouls" class="Games">
							<br>
							<nav class="article-navbar use-middle">
								<ul>
								  <li><a href="#about">About</a></li>
								  <li><a href="#Works">Games</a></li>
								  <li><a href="#ArtWorks">Extras</a></li>
								  <li><a href="#contact">Contact</a></li>
								</ul>
							  </nav>
								<h2 class="Project-Heading">Holy Souls</h2>
								<span class="image main"><img class="lazyload" data-src="images/Holy Souls/Holy Souls Banner 2.png" alt="" /></span>
								<div class="Game-video">
									<iframe class="lazyload" width="560" height="315" data-src="https://www.youtube.com/embed/EFZtaXohY7A"  title="YouTube video player" frameborder="0" allow="accelerometer;  clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
							    </div>
								<br>
								<h3 class="major">🎮 Other Games</h3> 
								<!-- Game Horizontal bar -->
								<div class="game-carousel">
									<button class="carousel-nav left" onclick="scrollCarouselLeft()">&#9664;</button>
									<div class="game-container">
										<!-- JavaScript will dynamically populate this area with game items -->
									</div>
									<button class="carousel-nav right" onclick="scrollCarouselRight()">&#9654;</button>
								</div>
								<div class="GameDetails">
									<div class="GameInformation">
										<div class="game-info-banner"></div>
										<br>
										<h3 class="major">ℹ️ Description</h3> 
										<p>As the arbiter of the spirits in purgatory, you possess the sovereignty to bestow upon them either a revitalizing breath of life or a final verdict of death. Your choices shall shape their ultimate fate, and you are the one who holds the key to their existence.
										</p>
										

										<h3 class="major">💫Features</h3>
										<ul>
											<li>Implemented a procedural maze generation system utilizing the breadth-first search algorithm, resulting in dynamic and engaging gameplay.</li>
											<li>Developed a high-score saving and loading feature, improving game functionality and enhancing user experience. </li>
											<li>Maze tile Breaking Mechanic triggered every 10 seconds</li>
											<li>Endless Mazes</li>
											<li>Every sound in this game was crafted, tuned, or compiled by me, ensuring a fully immersive auditory experience.</li>
										</ul>
										
										
										<h3 class="major"> ✅Highlights</h3>
										<ul>
											<li>Solo-Dev</li>
											<li>Designed and programmed a unique tile-breaking and restoration mechanic from scratch, adding depth and complexity to the game's core mechanics.</li>
											<li>Look and Feel of Game</li>
												<li class="spaced-list">Global Volume Configuration</li>
												<li class="spaced-list">Lighting</li>
											<li>Effects</li>
												<li class="spaced-list">Camera Shake</li>
											<li>Shaders</li>
												<li class="spaced-list">Wall disolve shader</li>
												<li class="spaced-list">Abstract Lava shader</li>
										</ul>
									</div>
									<div class="GameToolInfo">
										<div class="game-info-banner"></div>
										<p>
											<h3 class="major">📅 Year</h3>
											<ul> <li>2022</li> 
											</ul>

											<h3 class="major">💻Platform</h3>
											<ul> <li>Mobile</li> 
											</ul>
											

											<h3 class="major">⚙️Engine</h3> 
											<ul>
											<li>Unity</li>
											</ul>
											
											<h3 class="major">🙍🏽Role</h3> 
											<ul>
												<li>Programmer</li>
												<li>Effect Artist</li>
												<li>Game Design</li>
												<li>Lighting</li>
											</ul>
											
											<h3 class="major">👥Team Size</h3> 
											<ul>
											<li>Solo Project</li>
											</ul>
											

											<!-- <h3 class="major">⌛Time Taken</h3> 
											<ul>
												<li>Production -  days</li>
												<li>+2 days BUG fixing</li>
											</ul> -->
											

											<h3 class="major">🛠️Tools Used</h3> 
											<ul>
												<li>Unity</li>
												<li>Maya</li>
												<li>Illustrator</li>
												<li>Photoshop</li>
												<li>Obsidian</li>
											</ul>
										</p>
									</div>
								</div>
						</article>

						<article id="I-Frankenstein" class="Games">
							<br>
							<nav class="article-navbar use-middle">
								<ul>
								  <li><a href="#about">About</a></li>
								  <li><a href="#Works">Games</a></li>
								  <li><a href="#ArtWorks">Extras</a></li>
								  <li><a href="#contact">Contact</a></li>
								</ul>
							  </nav>
							<h2 class="Project-Heading">I-Frankenstein</h2>
							<span class="image main"><img class="lazyload" data-src="images/I-Frankenstein/Frankenstein Game Banner.png" alt="" /></span>
							<div class="Game-video">

								<!-- <button class="prev-button" onclick="prevMedia()">&#10094;</button>
								<button class="next-button" onclick="nextMedia()">&#10095;</button> -->
								<iframe id="media-frame" class="lazyload" width="560" height="315" 
									src="https://www.youtube.com/embed/KdBZage87M8?si=1EBiQUfAE4kKaWjD" 
									title="YouTube video player" 
									frameborder="0" 
									allow="accelerometer;  clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
									allowfullscreen>
								</iframe>

							</div>
							<br>
							<h3 class="major">🎮 Other Games</h3> 
								<div class="game-carousel">
									<button class="carousel-nav left" onclick="scrollCarouselLeft()">&#9664;</button>
									<div class="game-container">
										<!-- JavaScript will dynamically populate this area with game items -->
									</div>
									<button class="carousel-nav right" onclick="scrollCarouselRight()">&#9654;</button>
								</div>
								<br>
								<div class="GameDetails">
									<div class="GameInformation">
										<div class="game-info-banner"></div>
										<!-- <h2>About Game</h2>
										<p> 
										First person Experience (July 2020) <br>
										First person game where the player can interact and inspect each of the artifacts.
										</p>-->
										<br>
										<aside>
										🌟🏆 "Recipient of the <b>'Best Project' award</b> at the ICAT 13th Graduation Showcase 🏆🌟 
										</aside>
										<br>

										<br>
										<h3 class="major">ℹ️ Description</h3> 
										<p>
											Take on the role of the monster and face the terrors of Doctor Frankenstein's experiments in this game. Use the standout mechanic of separating body parts to solve puzzles, and manage resources to survive in the game's tense and challenging world. With a third-person view and stunning graphics, experience the story from the monster's perspective in a thrilling and immersive way. Discover the haunting world of Frankenstein like never before in this unforgettable adventure.
										</p>
										

										<h3 class="major">💫Features</h3>
										<ul>
											<li>Third Person Game with Dynamic Camera</li>
											<li>Unique body part separation mechanic to explore and solve puzzles</li>
											<li>Multiple possibilities for experimentation and combination with each body part</li>
											<li>New Input System (Keyboard and controller)</li>
											<li>Strategic use of body parts to improve survival in a dangerous world</li>
										</ul>
										
										
										<h3 class="major"> ✅Contributions</h3>
										<ul>
											<li>Lead Programmer</li>
											<li>Developing Mechanic from scratch</li>
												<li class="spaced-list">BodyWheel System</li>
												<li class="spaced-list">Interaction System</li>
											<li>Look and Feel of the Game</li>
												<li class="spaced-list">Global Volumes Settings</li>
												<li class="spaced-list">Lighting</li>
											<!-- <li>Effects (visual, sound)</li>
												<li class="spaced-list">Camera Shake</li>
												<li class="spaced-list">Sound Effects</li> -->
											<li>Animation Setup</li>
										</ul>
									</div>
									<div class="GameToolInfo">
										<div class="game-info-banner"></div>
										<p>
											<h3 class="major">📅 Year</h3>
											<ul> <li>2023</li> 
											</ul>

											<h3 class="major">💻Platform</h3>
											<ul> <li>PC</li> 
											</ul>
											

											<h3 class="major">⚙️Engine</h3> 
											<ul>
											<li>Unity</li>
											</ul>
											
											<h3 class="major">🙍🏽Role</h3> 
											<ul>
												<li>Lead-Programmer</li>
												<li>Game designer</li>
												<li>UI Design</li>
												<li>Lighting Artist</li>
											</ul>
											
									

											<h3 class="major">👥Team Size</h3> 
											<ul>
											<li>2</li>
											</ul>
											

											<h3 class="major">⌛Time Taken</h3> 
											<ul>
												<li>Production - 2 Months</li>
											</ul>
											

											<h3 class="major">🛠️Tools Used</h3> 
											<ul>
												<li>Unity</li>
												<li>Autodesk Maya</li>
												<li>Photoshop</li>
												<li>Substance Painter</li>
												<li>GitHub Desktop</li>
												<li>Notion (project management)</li>
												<li>Miro (ideation)</li>
											</ul>
										</p>
									</div>
								</div>

								<br>
								<br>
								<h3 class="major">🖼️ ScreenShots</h3> 
								<!-- Image Container for Screenshots -->
								<div id="image-container">
									<img id="current-image" src="" alt="Screenshot">
								</div>
								
								<!-- Controls and Indicators Container -->
								<div id="controls-container">
									<button class="prev-button">
									<i class="fas fa-arrow-left"></i> <!-- Left arrow icon for Previous -->
									</button>
									<div id="indicators"></div>
									<button class="next-button">
									<i class="fas fa-arrow-right"></i> <!-- Right arrow icon for Next -->
									</button>
								</div>
								
						</article>

						<article id="TheElementals" class="Games">
							<br>
							<nav class="article-navbar use-middle">
								<ul>
								  <li><a href="#about">About</a></li>
								  <li><a href="#Works">Games</a></li>
								  <li><a href="#ArtWorks">Extras</a></li>
								  <li><a href="#contact">Contact</a></li>
								</ul>
							  </nav>
							<h2 class="Project-Heading">The Elementals</h2>
							<span class="image main"><img class="lazyload" data-src="images/The elementals/Banner Pic 2.png" alt="" /></span>
							<div class="Game-video">
								<iframe class="lazyload" width="560" height="315" data-src="https://www.youtube.com/embed/nBBeg75FN0A" title="YouTube video player" frameborder="0" allow="accelerometer;  clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
							    </div>
								<br>
								<h3 class="major">🎮 Other Games</h3> 
								<div class="game-carousel">
									<button class="carousel-nav left" onclick="scrollCarouselLeft()">&#9664;</button>
									<div class="game-container">
										<!-- JavaScript will dynamically populate this area with game items -->
									</div>
									<button class="carousel-nav right" onclick="scrollCarouselRight()">&#9654;</button>
								</div>
								<div class="GameDetails">
									<div class="GameInformation">
										<div class="game-info-banner"></div>
										<!-- <h2>About Game</h2>
										<p> 
										First person Experience (July 2020) <br>
										First person game where the player can interact and inspect each of the artifacts.
										</p>

										<br> -->
										<br>
										<aside>
										🏆 <b>2nd place winner</b> in Game Jam 🏆
										</aside>
										<br>
										<h3 class="major">ℹ️ Description</h3> 
										<p>Step into the shoes of the elemental robotic warrior's commander, with the mission to enhance its power for the forthcoming extraterrestrial battle. Your objective is to upgrade the warrior's elemental capacities through extensive weapon training. Can you push the limits of the warrior and elevate its speed and strength to new levels? The journey towards transforming the elemental warrior into the supreme champion starts now!
										</p>
										

										<h3 class="major">💫Features</h3>
										<ul>
											<li>Third Person Game with Dynamic Camera</li>
											<li>Destruction</li>
											<li>Saving and Loading HighScore, Music, and Sound Effects</li>
											<li>New Input System (Keyboard and controller)</li>
											<li>Endless Shooter</li>
										</ul>
										
										
										<h3 class="major"> ✅Contributions</h3>
										<ul>
											<li>Lead Developer</li>
											<li>Developing Mechanic from scratch</li>
												<li class="spaced-list">Shooting System</li>
												<li class="spaced-list">Bullet System</li>
											<li>Saving and Loading player Preferences</li>
											<li>Look and Feel of the Game</li>
												<li class="spaced-list">Global Volumes Settings</li>
												<li class="spaced-list">Lighting</li>
											<li>Effects (visual, sound)</li>
												<li class="spaced-list">Camera Shake</li>
												<li class="spaced-list">Sound Effects</li>
											<li>Animation Setup</li>
										</ul>
									</div>
									<div class="GameToolInfo">
										<div class="game-info-banner"></div>
										<p>
											<h3 class="major">📅 Year</h3>
											<ul> <li>2023</li> 
											</ul>

											<h3 class="major">💻Platform</h3>
											<ul> <li>PC</li> 
											</ul>
											

											<h3 class="major">⚙️Engine</h3> 
											<ul>
											<li>Unity</li>
											</ul>
											
											<h3 class="major">🙍🏽Role</h3> 
											<ul>
												<li>Lead-Programmer</li>
												<li>Game designer</li>
												<li>UI Design</li>
												<li>Lighting Artist</li>
											</ul>
											
									

											<h3 class="major">👥Team Size</h3> 
											<ul>
											<li>2</li>
											</ul>
											

											<h3 class="major">⌛Time Taken</h3> 
											<ul>
												<li>Production - 2 Months</li>
											</ul>
											

											<h3 class="major">🛠️Tools Used</h3> 
											<ul>
												<li>Unity</li>
												<li>Photoshop</li>
												<li>Notion (project management)</li>
												<li>Miro (ideation)</li>
												
											</ul>
										</p>
									</div>
								</div>
								
						</article>

						<article id="EndlessShooter" class="GamesLeft">
							<br>
							<nav class="article-navbar use-middle">
								<ul>
								  <li><a href="#about">About</a></li>
								  <li><a href="#Works">Games</a></li>
								  <li><a href="#ArtWorks">Extras</a></li>
								  <li><a href="#contact">Contact</a></li>
								</ul>
							  </nav>
								<h2 class="Project-Heading">Endless Survival Shooter</h2>
								<span class="image main"><img class="lazyload" data-src="images/Endless Shooter/Banner Pic 2.png" alt="" /></span>
								<div class="Game-video">
									<iframe class="lazyload" width="560" height="315" data-src="https://www.youtube.com/embed/PN2B2_hDFAQ" title="YouTube video player" frameborder="0" allow="accelerometer;  clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
							    </div>
								<br>
								<h3 class="major">🎮 Other Games</h3> 
								<div class="game-carousel">
									<button class="carousel-nav left" onclick="scrollCarouselLeft()">&#9664;</button>
									<div class="game-container">
										JavaScript will dynamically populate this area with game items
									</div>
									<button class="carousel-nav right" onclick="scrollCarouselRight()">&#9654;</button>
								</div>
								<div class="GameDetails">
									<div class="GameInformation">
										<div class="game-info-banner"></div>
										<br>
										<h3 class="major">ℹ️ Description</h3> 
										<p>Take on the challenge of surviving against hordes of zombie toys as a toy armed only with a gun. How long can you last in this fight for survival?
										</p>
										

										<h3 class="major">💫Features</h3>
										<ul>
											<li>Created an engaging endless shooter game with immersive gameplay mechanics, resulting in a fun and exciting player experience.</li>
											<li>Leveraged experience with the God of War orb system to create a unique and dynamic gameplay mechanic, enhancing the game's overall fun factor and player experience.</li>
											<li>Developed a high-score saving and loading system, allowing players to track and compare their progress and achievements in the game.</li>
											<li>Designed and implemented a floating health text feature, optimizing the game's user interface and providing players with critical information during gameplay.</li>
										</ul>
										
										
										<h3 class="major"> ✅Highlights</h3>
										<ul>
											<li>Solo-Dev</li>
											<li>Designed and implemented an efficient object pooling system for enemies, improving game performance and increasing the number of enemies that can be rendered on-screen at once.</li>
											
									
										</ul>
									</div>
									<div class="GameToolInfo">
										<div class="game-info-banner"></div>
										<p>
											<h3 class="major">📅 Year</h3>
											<ul> <li>2020</li> 
											</ul>

											<h3 class="major">💻Platform</h3>
											<ul> <li>PC</li> 
											</ul>
											

											<h3 class="major">⚙️Engine</h3> 
											<ul>
											<li>Unity</li>
											</ul>
											
											<h3 class="major">🙍🏽Role</h3> 
											<ul>
												<li>Programmer</li>
												<li>Effect Artist</li>
												<li>Game Design</li>
												<li>Lighting</li>
											</ul>
											
											<h3 class="major">👥Team Size</h3> 
											<ul>
											<li>Solo Project</li>
											</ul>
											

											<!-- <h3 class="major">⌛Time Taken</h3> 
											<ul>
												<li>Production -  days</li>
												<li>+2 days BUG fixing</li>
											</ul> -->
											

											<h3 class="major">🛠️Tools Used</h3> 
											<ul>
												<li>Unity</li>
												<li>Illustrator</li>
												<li>Obsidian</li>
												<li>Photoshop</li>
											</ul>
										</p>
									</div>
								</div>
								
						</article>
							
						<article id="ARBirthdayGift" class="Games">
							<br>
							<nav class="article-navbar use-middle">
								<ul>
								  <li><a href="#about">About</a></li>
								  <li><a href="#Works">Games</a></li>
								  <li><a href="#ArtWorks">Extras</a></li>
								  <li><a href="#contact">Contact</a></li>
								</ul>
							  </nav>
								<h2 class="Project-Heading">AR Birthday Gift</h2>
								
								<span class="image main"><img class="lazyload" data-src="images/AR Birthday Gift/ARBirthdayGift.png" alt="" /></span>
								<div class="Game-video">
									<iframe class="lazyload" width="560" height="315" data-src="https://www.youtube.com/embed/rZUOGaFCnyY" title="YouTube video player" frameborder="0" allow="accelerometer;  clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
							    </div>
								<br>
								<h3 class="major">🎮 Other Games</h3> 
								<div class="game-carousel">
									<button class="carousel-nav left" onclick="scrollCarouselLeft()">&#9664;</button>
									<div class="game-container">
										<!-- JavaScript will dynamically populate this area with game items -->
									</div>
									<button class="carousel-nav right" onclick="scrollCarouselRight()">&#9654;</button>
								</div>

								<div class="GameDetails">
									<div class="GameInformation">
										<div class="game-info-banner"></div>
										<br>
										<h3 class="major">ℹ️ Description</h3> 
										<p>Experience birthdays like never before with our cutting-edge augmented reality app! Take pictures, interact with virtual gifts, pop balloons, indulge in sweet treats, and savor cake slices one at a time. Celebrate in style and create unforgettable memories with the immersive app!
										</p>
										

										<h3 class="major">💫Features</h3>
										<ul>
											<li>Augmented Reality Birthday Surprise</li>
											<li>Marker-less Augmentation</li>
											<li>Developed an immersive augmented reality birthday surprise app, leveraging ground plane detection technology to create a realistic and interactive user experience.</li>
											<li>Created a feature enabling users to take pictures and store them in the app's gallery for future reference and sharing.</li>
											<li>Utilized industry-standard programming techniques to implement object translation, scaling, and rotation functionality, enabling users to interact with a virtual gift box in a dynamic and engaging way.</li>
											<li>Touch Interactions</li>
										</ul>
										
										
										<h3 class="major"> ✅Highlights</h3>
										<ul>
											<li>Solo-Dev</li>
											<li>I personally created all of the animations featured in this game for a truly unique and custom experience.</li>
											<li>Programmed a balloon-popping feature, allowing users to burst virtual balloons with a satisfying pop</li>
											<li>Created a cupcake-biting feature, enabling users to indulge in the deliciousness of virtual sweet treats with a simple tap.</li>
											<li>Enjoy a full cake-eating experience, one slice at a time! Start by savoring the decorative toppings before indulging in each delectable piece of cake.</li>
											
									
										</ul>

										
									</div>
									<div class="GameToolInfo">
										<div class="game-info-banner"></div>
										<p>
											<h3 class="major">📅 Year</h3>
											<ul> <li>2022</li> 
											</ul>

											<h3 class="major">💻Platform</h3>
											<ul> <li>Android</li> 
											</ul>
											

											<h3 class="major">⚙️Engine</h3> 
											<ul>
											<li>Unity</li>
											</ul>
											
											<h3 class="major">🙍🏽Role</h3> 
											<ul>
												<li>Programmer</li>
												<li>Effect Artist</li>
												<li>Game Design</li>
												<li>Lighting</li>
												<li>Animation</li>
											</ul>
											
											<h3 class="major">👥Team Size</h3> 
											<ul>
											<li>Solo Project</li>
											</ul>
											

											<!-- <h3 class="major">⌛Time Taken</h3> 
											<ul>
												<li>Production -  days</li>
												<li>+2 days BUG fixing</li>
											</ul> -->
											

											<h3 class="major">🛠️Tools Used</h3> 
											<ul>
												<li>Unity</li>
												<li>Vuforia</li>
												<li>Illustrator</li>
												<li>Photoshop</li>
												<li>Obsidian (Project Management)</li>
											</ul>
										</p>
									</div>
								</div>
								
						</article>

						<article id="SoundScapes" class="Games">
							<br>
							<nav class="article-navbar use-middle">
								<ul>
								  <li><a href="#about">About</a></li>
								  <li><a href="#Works">Games</a></li>
								  <li><a href="#ArtWorks">Extras</a></li>
								  <li><a href="#contact">Contact</a></li>
								</ul>
							  </nav>
							<h2 class="Project-Heading">Sound Scapes</h2>
							<span class="image main"><img class="lazyload" data-src="images/SoundScapes/SoundScapesGame Banner.png" alt="" /></span>
							<div class="Game-video">
								<iframe class="lazyload" width="560" height="315" data-src="https://www.youtube.com/embed/OPwNk_qYaPA" title="YouTube video player" frameborder="0" allow="accelerometer;  clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
							</div>

							<br>
							<h3 class="major">🎮 Other Games</h3> 

							<div class="game-carousel">
								<button class="carousel-nav left" onclick="scrollCarouselLeft()">&#9664;</button>
								<div class="game-container">
									<!-- JavaScript will dynamically populate this area with game items -->
								</div>
								<button class="carousel-nav right" onclick="scrollCarouselRight()">&#9654;</button>
							</div>

							<div class="GameDetails">
								<div class="GameInformation">
									<div class="game-info-banner"></div>
									<br>
									<h3 class="major">ℹ️ Description</h3> 
									<p>In Soundscapes, players take on the role of a teddy bear on a journey to explore a magical land. With the power of their voice, players can create platforms for the bear to traverse and navigate through challenging terrain. But that's not all - using their voice, players can also control obstacles and other objects in the scene to help the bear overcome challenges and reach new heights.<br>
										With intuitive voice controls and a charming, whimsical art style, VoiceBear is a unique and immersive platformer that encourages players to explore their creativity and think outside the box.
									</p>
									

									<h3 class="major">💫Features</h3>
									<ul>
										<li>Create a new landscape based on the amplitude of the sound input through the microphone</li>
										<li>Control various objects in the environment, including lifting and rotating objects</li>
										<li>Use voice commands to manipulate the landscape and bring the world to life</li>
										<li>Use voice commands to manipulate the landscape and bring the world to life</li>
									</ul>
									
									
									<h3 class="major"> ✅Highlights</h3>
									<ul>
										<li>Played a key role in brainstorming and refining the initial concept for the game</li>										
										<li>Developed and contributed to the level design, working closely with the design team to create engaging and challenging gameplay experiences</li>										
										<li>Conducted playtesting and gathered feedback to iterate and refine the game's mechanics and design elements</li>											
										<li>Demonstrated strong problem-solving skills and an ability to adapt to new challenges and changing requirements</li>											
										<li>Maintained a strong focus on the player experience, always seeking to create engaging and immersive gameplay that kept players coming back for more.</li>										
									</ul>

									
								</div>
								<div class="GameToolInfo">
									<div class="game-info-banner"></div>
									<p>
										<h3 class="major">📅 Year</h3>
										<ul> <li>2018</li> 
											<!-- <li>September</li> -->
										</ul>

										<h3 class="major">💻Platform</h3>
										<ul> <li>PC</li> 
										</ul>
										

										<h3 class="major">⚙️Engine</h3> 
										<ul>
										<li>Unity</li>
										</ul>
										
										<h3 class="major">🙍🏽Role</h3> 
										<ul>
											<li>Game Design</li>
											<li>UI Design</li>
										</ul>
										
										<h3 class="major">👥Team Size</h3> 
										<ul>
										<li>7</li>
										</ul>
										

										<!-- <h3 class="major">⌛Time Taken</h3> 
										<ul>
											<li>Production -  days</li>
											<li>+2 days BUG fixing</li>
										</ul> -->
										

										<h3 class="major">🛠️Tools Used</h3> 
										<ul>
											<li>Unity</li>
											<li>Photoshop</li>
										</ul>
									</p>
								</div>
							</div>
							
						</article>

						<article id="FolkArt" class="GamesLeft">
							<br>
							<nav class="article-navbar use-middle">
								<ul>
								  <li><a href="#about">About</a></li>
								  <li><a href="#Works">Games</a></li>
								  <li><a href="#ArtWorks">Extras</a></li>
								  <li><a href="#contact">Contact</a></li>
								</ul>
							  </nav>
								<h2 class="Project-Heading">Folk Art Project</h2>
								<span class="image main"><img class="lazyload" data-src="images/FolkArt//FolkArt Banner.png" alt="" /></span>
								<div class="Game-video">
									<iframe class="lazyload" width="560" height="315" data-src="https://www.youtube.com/embed/GaxwkS7HyN4" title="YouTube video player" frameborder="0" allow="accelerometer;  clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
								</div>

								<br>
								<h3 class="major">🎮 Other Games</h3> 

								<div class="game-carousel">
									<button class="carousel-nav left" onclick="scrollCarouselLeft()">&#9664;</button>
									<div class="game-container">
										<!-- JavaScript will dynamically populate this area with game items -->
									</div>
									<button class="carousel-nav right" onclick="scrollCarouselRight()">&#9654;</button>
								</div>

								<div class="GameDetails">
									<div class="GameInformation">
										<div class="game-info-banner"></div>
										<!-- <h2>About Game</h2>
										<p> 
										First person Experience (July 2020) <br>
										First person game where the player can interact and inspect each of the artifacts.
										</p>
	
										<aside>
										🔥 This game was <b>created during</b> COVID pandemic (July).
										</aside>
										<br> -->
										<br>
										<h3 class="major">ℹ️ Description</h3> 
										<p> The game is set in our lab to give the player (students or faculty) a familiar surrounding, the player then can interact, inspect and read about each of the artifacts which is placed inside the crystal (with crystal being the separation between the two worlds).
										</p>
										
	
										<h3 class="major">💫Features</h3>
										<ul>
											<li>Created a first-person camera system that provided an immersive player experience, using cursor lock to ensure smooth and responsive movement</li>
											<li>Utilized spatial sound to create an immersive and engaging audio experience that set the mood and atmosphere of the game's environment</li>
											<li>Developed a floating GUI that provided clear and intuitive guidance for the player, helping them navigate the game's environment and interact with objects in meaningful ways</li>
											<li>Implemented an inspection system that allowed players to examine and rotate objects in the game world, enhancing their sense of immersion and adding depth to the gameplay experience</li>
											<li>Developed the game for both Windows and Mac, ensuring that it was accessible to the widest possible audience</li>
										</ul>
										
										
										<h3 class="major"> ✅Contributions</h3>
										<ul>
											<li>Core developer</li>
											<li>Worked with volumes to ensure that post-processing effects were synced with in-game actions, creating a seamless and engaging experience for players</li>
											<li>Used shader graph to develop a range of custom shaders, including a grass shader that utilized vertex displacement for added realism and immersion</li>
											<li>Developed a glass shader with refraction and a distortion shader that added depth and detail to the game's environment</li>
											<li>Lighting and setup of the Scene</li>
											<li>Added a range of visual and audio effects to enhance the player experience, including post-processing effects that created a blur effect during object inspection and a transitional effect that added continuity and pulled players deeper into the game world.</li>
										</ul>
									</div>
									<div class="GameToolInfo">
										<div class="game-info-banner"></div>
										<p>
											<h3 class="major">📅 Year</h3>
											<ul> <li>2020</li> 
											</ul>
	
											<h3 class="major">💻Platform</h3>
											<ul> <li>PC</li> 
											</ul>
											
	
											<h3 class="major">⚙️Engine</h3> 
											<ul>
											<li>Unity</li>
											</ul>
											
											<h3 class="major">🙍🏽Role</h3> 
											<ul>
												<li>Programmer</li>
												<li>Effect Artist</li>
												<li>Lighting</li>
											</ul>

											<h3 class="major">👥Team Size</h3> 
											<ul>
											<li>2</li>
											</ul>
											
	
											<h3 class="major">⌛Time Taken</h3> 
											<ul>
												<li>Production - 5 days</li>
												<li>+2 days BUG fixing</li>
											</ul>
											
	
											<h3 class="major">🛠️Tools Used</h3> 
											<ul>
												<li>Unity</li>
												<li>Photoshop</li>
												<li>Notion (project management)</li>
											</ul>
										</p>
									</div>
								</div>
								
						</article>

						<article id="DigThrough" class="Games">
							<br>
							<nav class="article-navbar use-middle">
								<ul>
								  <li><a href="#about">About</a></li>
								  <li><a href="#Works">Games</a></li>
								  <li><a href="#ArtWorks">Extras</a></li>
								  <li><a href="#contact">Contact</a></li>
								</ul>
							  </nav>
							<h2 class="Project-Heading">Dig Through</h2>
							<span class="image main"><img class="lazyload" data-src="images/Dig Through/Dig Through Bannerl.png" alt="Dig Through Banner image" /></span>
							<div class="Game-video">
								<iframe class="lazyload" width="560" height="315" data-src="https://www.youtube.com/embed/rX6Ciszmjl8" title="YouTube video player" frameborder="0" allow="accelerometer;  clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
							</div>

							<br>
							<h3 class="major">🎮 Other Games</h3> 

							<div class="game-carousel">
								<button class="carousel-nav left" onclick="scrollCarouselLeft()">&#9664;</button>
								<div class="game-container">
									<!-- JavaScript will dynamically populate this area with game items -->
								</div>
								<button class="carousel-nav right" onclick="scrollCarouselRight()">&#9654;</button>
							</div>

							<div class="GameDetails">
								<div class="GameInformation">
									<div class="game-info-banner"></div>
									<!-- <h2>About Game</h2>
									<p> 
									First person Experience (July 2020) <br>
									First person game where the player can interact and inspect each of the artifacts.
									</p> -->
									<br>
									<aside>
										☕ Made with Java in <b> Android studio </b>☕
									</aside>
									<br>
									<h3 class="major">ℹ️ Description</h3> 
									<p> 
										In this hyper-casual game, play as a tribal kid on a mission to mine valuable energy orbs by digging through the ground. Watch out for the spiky platforms that stand in your way as you navigate through challenging levels that increase in difficulty. 
									</p>
									
									<h3 class="major"> ✅Highlights</h3>
									<ul>
										<li>Solo-Dev</li>
										<li>Challenging levels with increasing difficulty to keep you engaged</li>
										<li>Simple controls and addictive gameplay that anyone can enjoy</li>
										<li>Lively and animated character design that brings the tribal kid to life</li>
										<li>Spiky platforms that add a thrilling element of danger to the game</li>
										<li>Vibrant graphics and catchy soundtrack that enhance the immersive experience</li>
										
									</ul> 

									<h3 class="major">💫Features</h3>
									<ul>
										<li>Adjustable difficulty modes that cater to players of all skill levels</li>
										<li>Highscore tracking system that allows players to compete with others for the top score</li>
										<li>Life system that adds an extra layer of challenge and strategy to the gameplay</li>
										<li>Endless game mode for players who want to keep digging and collecting orbs without limits</li>
										<li>Save and load highscore function, allowing players to track their progress and continue where they left off.</li>
									</ul>
									
									
								</div>
								<div class="GameToolInfo">
									<div class="game-info-banner"></div>
									<p>
										<h3 class="major">📅 Year</h3>
										<ul> <li>2022</li> 
										</ul>

										<h3 class="major">💻Platform</h3>
										<ul> <li>Mobile [Android]</li> 
										</ul>
										

										<h3 class="major">⚙️Engine</h3> 
										<ul>
										<li>LibGDX</li>
										</ul>
										
										<h3 class="major">🙍🏽Role</h3> 
										<ul>
											<li>Solo-Dev</li>
											<li>Programmer</li>
											<li>Designer</li>
										</ul>

										<h3 class="major">👥Team Size</h3> 
										<ul>
										<li>1</li>
										</ul>
										

										<!-- <h3 class="major">⌛Time Taken</h3> 
										<ul>
											<li>Production - 5 days</li>
											<li>+2 days BUG fixing</li>
										</ul> -->
										

										<h3 class="major">🛠️Tools Used</h3> 
										<ul>
											<li>Android Studio</li>
											<li>Photoshop</li>
											<li>Illustrator</li>
											<li>Texture Packer</li>
											<li>Audacity</li>
											<li>Notion (project management)</li>
										</ul>
									</p>
								</div>
							</div>
							
						</article>

						<article id="InventorySystem" class="Games">		
							<br>
							<nav class="article-navbar use-middle">
								<ul>
								  <li><a href="#about">About</a></li>
								  <li><a href="#Works">Games</a></li>
								  <li><a href="#ArtWorks">Extras</a></li>
								  <li><a href="#contact">Contact</a></li>
								</ul>
							  </nav>
							<h2 class="Project-Heading">Inventory System</h2>
							<span class="image main"><img class="lazyload" data-src="images/Game Banner Prototype.png" alt="Inventory System image" /></span>
							<div class="Game-video">
								<iframe class="lazyload" width="560" height="315" data-src="https://www.youtube.com/embed/q1Exgpeys7M?si=DYukRn8_rxeayod3" title="YouTube video player" frameborder="0" allow="accelerometer;  clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
							</div>

							<br>
							<h3 class="major">🎮 Other Games</h3> 

							<div class="game-carousel">
								<button class="carousel-nav left" onclick="scrollCarouselLeft()">&#9664;</button>
								<div class="game-container">
									<!-- JavaScript will dynamically populate this area with game items -->
								</div>
								<button class="carousel-nav right" onclick="scrollCarouselRight()">&#9654;</button>
							</div>

							<div class="GameDetails">
								<div class="GameInformation">
									<div class="game-info-banner"></div>
									<br>
									<div style="text-align: center;">
										<a href="https://github.com/Shiraz-V-Kamar/InventorySystem" class="button"><i class="fa fa-github"></i> Github</a>
									</div>
									<h3 class="major">ℹ️ Description</h3> 
									<p> 
										This prototype is an exciting game that revolves around managing an inventory system while adding an extra layer of fun with a timer. Players must shoot all surveillance cameras before time runs out, collecting bullets and guns along the way to aid them in their mission. Additionally, destroying each camera rewards players with extra time, creating a dynamic and challenging gameplay experience from start to finish.
									</p>
									
									<h3 class="major"> ✅Highlights</h3>
									<ul>
										<li>Solo-Dev</li>
										<li>Created in 48 hours</li>
										<li>Dynamic blend of strategic inventory management and timed challenges</li>
										<li>Seamless integration of tactical decision-making and intense action</li>
										
										
									</ul> 

									<h3 class="major">💫Features</h3>
									<ul>
										
										<li>Engaging gameplay centered around managing an inventory system</li>
										<li>Timed challenge: Players must destroy all surveillance cameras before time runs out</li>
										<li>Collection mechanics: Players gather bullets and guns to aid in their mission</li>
										<li>Strategic decision-making: Manage inventory wisely to maximize effectiveness in combat</li>
										<li>Time extension: Destroying each camera rewards players with extra time</li>
									</ul>
									
									
								</div>
								<div class="GameToolInfo">
									<div class="game-info-banner"></div>
									<p>
										<h3 class="major">📅 Year</h3>
										<ul> <li>2023</li> 
										</ul>

										<h3 class="major">💻Platform</h3>
										<ul> <li>PC</li> 
										</ul>
										

										<h3 class="major">⚙️Engine</h3> 
										<ul>
										<li>Unity</li>
										</ul>

										<h3 class="major">👥Team Size</h3> 
										<ul>
										<li>1</li>
										</ul>
										

										<h3 class="major">⌛Time Taken</h3> 
										<ul>
											<li>2 days</li>
										</ul>
										

										<h3 class="major">🛠️Tools Used</h3> 
										<ul>
											<li>Unity</li>
											<li>Photoshop</li>
											<li>Illustrator</li>
											<li>Audacity</li>
											<li>Notion (project management)</li>
											<li>Github</li>
										</ul>
									</p>
								</div>
							</div>
							
						</article>

						<article id="GrapplingHook" class="Games">
							<br>
							<nav class="article-navbar use-middle">
								<ul>
								  <li><a href="#about">About</a></li>
								  <li><a href="#Works">Games</a></li>
								  <li><a href="#ArtWorks">Extras</a></li>
								  <li><a href="#contact">Contact</a></li>
								</ul>
							  </nav>
							<h2 class="Project-Heading">Grappling Hook</h2>
							<span class="image main"><img class="lazyload" data-src="images/Game Banner Prototype.png" alt="Grappling Hook image" /></span>
							<div class="Game-video">
								<iframe class="lazyload" width="560" height="315" data-src="https://www.youtube.com/embed/NfWbssrdx3c?si=pgCg75SwO1hO4I16" title="YouTube video player" frameborder="0" allow="accelerometer;  clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
							</div>

							<br>
							<h3 class="major">🎮 Other Games</h3> 

							<div class="game-carousel">
								<button class="carousel-nav left" onclick="scrollCarouselLeft()">&#9664;</button>
								<div class="game-container">
									<!-- JavaScript will dynamically populate this area with game items -->
								</div>
								<button class="carousel-nav right" onclick="scrollCarouselRight()">&#9654;</button>
							</div>

							<div class="GameDetails">
								<div class="GameInformation">
									<div class="game-info-banner"></div>
									<br>
									<div style="text-align: center;">
										<a href="https://github.com/Shiraz-V-Kamar/Grappling-hook" class="button"><i class="fa fa-github"></i> Github</a>
									</div>
									<h3 class="major">ℹ️ Description</h3> 
									<p> 
										In this game prototype, players use a grappling hook based on Hooke's Law to navigate through a level specially designed for testing the mechanics. The objective is to collect coins scattered throughout the level using the grappling hook. Players must master the grappling mechanic to swing and maneuver their way to success. It's a thrilling and challenging experience that showcases the unique gameplay of the grappling hook.
									</p>
									
									<h3 class="major"> ✅Highlights</h3>
									<ul>
										<li>Solo-Dev</li>
										<li>New Gameplay: Try out a game with a cool new feature - a grappling hook based on Hooke's Law.</li>
										<li>Exciting Level: Play through a special level designed to test this grappling hook mechanic.</li>
										<li>Swing and Collect: Swing around and gather coins scattered throughout the level using the grappling hook.</li>
										<li>Enjoy the Action: Have fun swinging from place to place, mastering the grappling hook's moves.</li>
										<li>Simple controls and addictive gameplay that anyone can enjoy</li>
										<li>Vibrant graphics and catchy soundtrack that enhance the immersive experience</li>
										
									</ul> 

									<h3 class="major">💫Features</h3>
									<ul>
										<li>Grappling Hook Mechanics: Experience unique gameplay centered around a grappling hook mechanic based on Hooke's Law.</li>
										<li>Custom Prototype Level: Explore a specially designed level tailored to showcase the grappling hook's functionality and potential.</li>
										<li>Coin Collection Gameplay: Engage in challenging gameplay by collecting coins scattered strategically throughout the level using the grappling hook.</li>
										<li>Physics-Based Challenges: Encounter various obstacles and puzzles that test your understanding of physics and require skillful use of the grappling hook to overcome.</li>
										<li>Dynamic Swinging Action: Enjoy thrilling swinging mechanics as you swing, jump, and navigate through the level using the grappling hook.</li>
									</ul>
									
									
								</div>
								<div class="GameToolInfo">
									<div class="game-info-banner"></div>
									<p>
										<h3 class="major">📅 Year</h3>
										<ul> <li>2023</li> 
										</ul>

										<h3 class="major">💻Platform</h3>
										<ul> <li>PC</li> 
										</ul>
										

										<h3 class="major">⚙️Engine</h3> 
										<ul>
										<li>Unity</li>
										</ul>

										<h3 class="major">👥Team Size</h3> 
										<ul>
										<li>1</li>
										</ul>
										

										<h3 class="major">⌛Time Taken</h3> 
										<ul>
											<li>2 days</li>
										</ul>
										

										<h3 class="major">🛠️Tools Used</h3> 
										<ul>
											<li>Unity</li>
											<li>Photoshop</li>
											<li>Illustrator</li>
											<li>Audacity</li>
											<li>Notion (project management)</li>
											<li>Github</li>
										</ul>
									</p>
								</div>
							</div>
							
						</article>

						<!-- Games from Game Studio -->
						<article id="Mayanagari" class="Games">
							<br>
							<nav class="article-navbar use-middle">
								<ul>
								  <li><a href="#about">About</a></li>
								  <li><a href="#Works">Games</a></li>
								  <li><a href="#ArtWorks">Extras</a></li>
								  <li><a href="#contact">Contact</a></li>
								</ul>
							  </nav>
							<h2 class="Project-Heading">Mayanagari</h2>
							<span class="image main"><img class="lazyload" data-src="images/Mayanagari/Mayanagari Banner.png" alt="Inventory System image" /></span>
							<div class="Game-video">
								<iframe class="lazyload" width="560" height="315" data-src="https://www.youtube.com/embed/_Ofj-bAjJ8Y?si=466srHnOzEf9lAUp" title="YouTube video player" frameborder="0" allow="accelerometer;  clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
							</div>
							<br>
							<h3 class="major">🎮 Other Games</h3> 
							<div class="game-carousel">
								<button class="carousel-nav left" onclick="scrollCarouselLeft()">&#9664;</button>
								<div class="game-container">
									<!-- JavaScript will dynamically populate this area with game items -->
								</div>
								<button class="carousel-nav right" onclick="scrollCarouselRight()">&#9654;</button>
							</div>
						</Br>
							<div class="GameDetails">
								<div class="GameInformation">
									<div class="game-info-banner"></div>
									<br>
									<br>
									<h3 class="major">ℹ️ Description</h3> 
									<p> 
										Mayanagari, the latest creation from Hypernova Industries, invites players into an immersive open-world experience set amidst the bustling streets of India. This mobile game captures the authentic essence of Indian urban life, drawing inspiration from acclaimed web shows like Mirzapur and Gangs of Wasseypur. Positioned as the 'Indian GTA', Mayanagari distinguishes itself by embracing its cultural roots while offering a narrative depth akin to titles such as Sleeping Dogs and Watch Dogs.<br>
										Check the <b><a href="https://www.youtube.com/@MayanagriOfficial">youtube channel</a></b>
									</p>
									
									<h3 class="major"> ✅Contributions</h3>
									<ul>
										<li>Made Mayanagari easier to play by fixing problems and adding improvements, which reduced the number of issues.</li>
										<li>Added a new feature called the action queue, allowing players to line up emotes or emotes and other actions. This makes the game less frustrating.</li>
										<li>Researched ECS (Entity Component System) and Photon to add multiplayer to Mayanagari, making it ready for more players and future updates.</li>
									</ul> 
									
									
								</div>
								<div class="GameToolInfo">
									<div class="game-info-banner"></div>
									<p>
										<h3 class="major">📅 Year</h3>
										<ul> <li>2023 - 2024</li> 
										</ul>

										<h3 class="major">💻Platform</h3>
										<ul> 
											<li>Android</li> 
											<li>iOS</li> 
										</ul>
										

										<h3 class="major">⚙️Engine</h3> 
										<ul>
										<li>Unity</li>
										</ul>
										
										<h3 class="major">🙍🏽Role</h3> 
										<ul>
											<li>Gameplay Programmer</li>
										</ul>
										

										<h3 class="major">🛠️Tools Used</h3> 
										<ul>
											<li>Unity</li>
											<li>Photoshop</li>
											<li>Slack</li>
											<li>Jira</li>
											<li>Notion (project management)</li>
											<li>Plastic SCM(Version Control)</li>
										</ul>
									</p>
								</div>
							</div>
							
						</article>

						<article id="DojoDefenders" class="Games">
							<br>
							<nav class="article-navbar use-middle">
								<ul>
								  <li><a href="#about">About</a></li>
								  <li><a href="#Works">Games</a></li>
								  <li><a href="#ArtWorks">Extras</a></li>
								  <li><a href="#contact">Contact</a></li>
								</ul>
							  </nav>
							<h2 class="Project-Heading">Dojo Defenders</h2>
							<span class="image main"><img class="lazyload" data-src="images/Dojo Defenders/Dojo Defender Banner.png" alt="Inventory System image" /></span>
							<div class="Game-video">
								<iframe class="lazyload" width="560" height="315" data-src="" title="YouTube video player" frameborder="0" allow="accelerometer;  clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
							</div>
							<br>
							<h3 class="major">🎮 Other Games</h3> 
							<div class="game-carousel">
								<button class="carousel-nav left" onclick="scrollCarouselLeft()">&#9664;</button>
								<div class="game-container">
									<!-- JavaScript will dynamically populate this area with game items -->
								</div>
								<button class="carousel-nav right" onclick="scrollCarouselRight()">&#9654;</button>
							</div>

							<div class="GameDetails">
								<div class="GameInformation">
									<div class="game-info-banner"></div>
									<br>
									<h3 class="major">ℹ️ Description</h3> 
									<p> 
										This is a midcore game centered around warrior combat in Japan, players immerse themselves in intense battles against samurais and formidable foes. As they progress through the game, they have the opportunity to level up their characters, unlocking both active and passive abilities that enhance their combat prowess. Similar to the progression in games like Archero, players advance through different levels, each presenting new challenges and enemies to overcome. With each victory, players not only hone their skills but also unlock new abilities, creating a dynamic and rewarding gameplay experience that combines strategy, action, and progression. 
									</p>
									
									<h3 class="major"> ✅Contributions</h3>
									<ul>
										<li>Development of a prototype mid-core game with innovative 
											gameplay features that increased player engagement in 
											testing stages.</li>
										<li>Performed a part in iterative design procedures that led in 
											multiple revisions and an improvement in the game 
											mechanics' efficacy, as verified by playtester feedback.</li>
										<li>Implemented UI for the game. </li> 
										<li>Implemented the following features : -</li>
											<ul>
												<li>Passive skills like - Strength, Agility, Fortitude, Dexterity, Evasion, Vampirism.</li>
												<li>Active skills like - Thunderstrike, Dragon Heart  </li>
												<li>Spawn System for enemies</li>
												<li>Traps or Game elements - portals, snap walls, barrels, alkatraz, geyser, disco tiles</li>
											</ul>
									</ul> 
									
								</div>
								<div class="GameToolInfo">
									<div class="game-info-banner"></div>
									<p>
										<h3 class="major">📅 Year</h3>
										<ul> <li>2023 - 2024</li> 
										</ul>

										<h3 class="major">💻Platform</h3>
										<ul> <li>Mobile [Android]</li> 
										</ul>
										

										<h3 class="major">⚙️Engine</h3> 
										<ul>
										<li>Unity</li>
										</ul>
										
										<h3 class="major">🙍🏽Role</h3> 
										<ul>
											<li>Gameplay Programmer</li>
										</ul>

										<h3 class="major">🛠️Tools Used</h3> 
										<ul>
											<li>Unity</li>
											<li>Photoshop</li>
											<li>Jira</li>
											<li>Slack</li>
											<li>Notion (project management)</li>
										</ul>
									</p>
								</div>
							</div>
							
						</article>

						<!-- Other Works --> 
						<article id="ArtWorks" class="ArtWorks">
							<br>
							<nav class="article-navbar use-middle">
								<ul>
								  <li><a href="#about">About</a></li>
								  <li><a href="#Works">Games</a></li>
								  <li><a href="#ArtWorks">Extras</a></li>
								  <li><a href="#contact">Contact</a></li>
								</ul>
							  </nav>
							<h2 class="major">Other Works</h2>
							<span class="image main"><img class="lazyload" data-src="images/Other Work Banner.png" alt="Other Works Banner Pic" /></span>
							<h3 class="major">2D Works</h3>
							<div class="grid">

								<!-- card 1 -->
								<div class="grid-item">
									<div class="card" onclick="RevyFanArt()">
									<img
										class="card-img lazyload"
										data-src="./images/Other Works/2D/RevyFanart/image.jpg"
										alt="Revy Black Lagoon"
									/>
									<div class="card-content">
									<h2 class="card-header">Revy FanArt</h2>
									<div class="card-tags-container">
										<div class="cards-tag">
											<p class="card-text">
												Work Type  
											</p>
											<p class="card-text-speration">
												:
											</p>
											<p class="card-tag-icon-con">
												<span class="game-card-tag">🎨 Illustration</span>
											</p>
										</div>
									</div>
										<button class="card-btn" onclick="RevyFanArt()">Visit <span> <i class="fa-solid fa-arrow-right"></i></span></button>
										<script>
										function RevyFanArt() {
											location.hash = 'RevyFanArt';
										}
										</script>
									</div>
									</div>
								</div>

								<!-- card 2 -->
								<div class="grid-item">
									<div class="card" onclick="EmmaFanArt()">
										<img
										class="card-img lazyload"
										data-src="./images/Other Works/2D/Emma FanArt/yokusoku_no_Neverland_with_copyright.jpg"
										alt="Emma Promised Neverland"
										/>
										<div class="card-content">
										<h2 class="card-header">Emma FanArt</h2>
										<div class="card-tags-container">
											<div class="cards-tag">
												<p class="card-text">
													Work Type  
												</p>
												<p class="card-text-speration">
													:
												</p>
												<p class="card-tag-icon-con">
													<span class="game-card-tag">🎨 Illustration</span>
												</p>
											</div>
										</div>
										<button class="card-btn" onclick="EmmaFanArt()">Visit <span> <i class="fa-solid fa-arrow-right"></i></span></button>
										<script>
											function EmmaFanArt() {
											location.hash = 'EmmaFanArt';
											}
										</script>
										</div>
									</div>
								</div>

								<!-- card 3 -->
								<div class="grid-item">
									<div class="card" onclick="HimikoFanArt()">
										<img
										class="card-img lazyload"
										data-src="./images/Other Works/2D/Himiko FanArt/my hero academia_with_copyright.jpg"
										alt="Himiko Toga My Hero Academia"
										/>
										<div class="card-content">
										<h2 class="card-header">Himiko Toga FanArt</h2>
										<div class="card-tags-container">
											<div class="cards-tag">
												<p class="card-text">
													Work Type  
												</p>
												<p class="card-text-speration">
													:
												</p>
												<p class="card-tag-icon-con">
													<span class="game-card-tag">🎨 Illustration</span>
												</p>
											</div>
										</div>
										<button class="card-btn" onclick="HimikoFanArt()">Visit <span> <i class="fa-solid fa-arrow-right"></i></span></button>
										<script>
											function HimikoFanArt() {
											location.hash = 'HimikoFanArt';
											}
										</script>
										</div>
									</div>
								</div>

								<!-- card 4 -->
								<div class="grid-item">
									<div class="card" onclick="MountMiyoboku()">
										<img
										class="card-img lazyload"
										data-src="./images/Other Works/2D/MountMiyoboku Environment/Mount miyaboku rvj submission 2.png"
										alt="Mount Miyaboku"
										/>
										<div class="card-content">
										<h2 class="card-header">Mount Myōboku</h2>
										<div class="card-tags-container">
											<div class="cards-tag">
												<p class="card-text">
													Work Type  
												</p>
												<p class="card-text-speration">
													:
												</p>
												<p class="card-tag-icon-con">
													<span class="game-card-tag">🎨 Concept Art</span>
												</p>
											</div>
										</div>
										<button class="card-btn" onclick="MountMiyoboku()">Visit <span> <i class="fa-solid fa-arrow-right"></i></span></button>
										<script>
											function MountMiyoboku() {
											location.hash = 'MountMiyoboku';
											}
										</script>
										</div>
									</div>
								</div>
								
								<!-- card 5 -->
								<!-- <div class="grid-item">
									<div class="card">
										<img
										class="card-img lazyload"
										data-src="./images/Other Works/2D/Lilith/Lilith 2.png"
										alt="Lilith Concept Art"
										/>
										<div class="card-content">
										<h2 class="card-header">Lilith</h2>
										<div class="card-tags-container">
											<div class="cards-tag">
												<p class="card-text">
													Work Type  
												</p>
												<p class="card-text-speration">
													:
												</p>
												<p class="card-tag-icon-con">
													<span class="game-card-tag">🎨 Character Concept Art</span>
												</p>
											</div>
										</div>
										<button class="card-btn" onclick="Lilith()">Visit <span> <i class="fa-solid fa-arrow-right"></i></span></button>
										<script>
											function Lilith() {
											location.hash = 'Lilith';
											}
										</script>
										</div>
									</div>
								</div>
								<br> -->
							</div>
							
							<!-- 3D Works -->
							<br>
							<h3 class="major">3D Works</h3>
							<div class="grid">
								
								<!-- card 1 -->
								<div class="grid-item">
									<div class="card" onclick="ItachiVsSasuke()">
										<img
										class="card-img lazyload"
										data-src="./images/Other Works/3D/Itachi vs Sasuke/Maya output render  13.png"
										alt="Environment Concept art"
										/>
										<div class="card-content">
											<h2 class="card-header">Itachi vs Sasuke</h2>
											<div class="card-tags-container">
											<div class="cards-tag">
												<p class="card-text">
													Work Type  
												</p>
												<p class="card-text-speration">
													:
												</p>
												<p class="card-tag-icon-con">
													<span class="game-card-tag">🎲 3D Models</span>
												</p>
											</div>
										</div>
										<button class="card-btn" onclick="ItachiVsSasuke()">Visit <span> <i class="fa-solid fa-arrow-right"></i></span></button>
										<script>
											function ItachiVsSasuke() {
												location.hash = 'ItachiVsSasuke';
											}
											</script>
										</div>
									</div>
								</div>

								<!-- card 2 -->
								<div class="grid-item">
									<div class="card" onclick="DemonLord()">
										<img
										class="card-img lazyload"
										data-src="./images/Other Works/3D/Goat king/Final render.jpg"
										alt="Demon Lord"
										/>
										<div class="card-content">
											<h2 class="card-header">Demon Lord</h2>
											<div class="card-tags-container">
											<div class="cards-tag">
												<p class="card-text">
													Work Type  
												</p>
												<p class="card-text-speration">
													:
												</p>
												<p class="card-tag-icon-con">
													<span class="game-card-tag">🎲 3D Models</span>
												</p>
											</div>
										</div>
										<button class="card-btn" onclick="DemonLord()">Visit <span> <i class="fa-solid fa-arrow-right"></i></span></button>
										<script>
											function DemonLord() {
												location.hash = 'DemonLord';
											}
											</script>
										</div>
									</div>
								</div>

								<!-- card 3 -->
								<div class="grid-item">
									<div class="card" onclick="HidanWeapon()">
										<img
										class="card-img lazyload"
										data-src="./images/Other Works/3D/Hiddan weapon/Render 4.png"
										alt="Hiddan Weapon"
										/>
										<div class="card-content">
											<h2 class="card-header">Triple-Bladed Scythe</h2>
											<div class="card-tags-container">
											<div class="cards-tag">
												<p class="card-text">
													Work Type  
												</p>
												<p class="card-text-speration">
													:
												</p>
												<p class="card-tag-icon-con">
													<span class="game-card-tag">🎲 3D Models</span>
												</p>
											</div>
										</div>
										<button class="card-btn" onclick="HidanWeapon()">Visit <span> <i class="fa-solid fa-arrow-right"></i></span></button>
										<script>
											function HidanWeapon() {
												location.hash = 'HidanWeapon';
											}
											</script>
										</div>
									</div>
								</div>

								<!-- card 4 -->
								<div class="grid-item">
									<div class="card" onclick="HealthPotion()">
										<img
										class="card-img lazyload"
										data-src="./images/Other Works/3D/Mug Render/Mug Final render.jpg"
										alt="Health Potion Mug"
										/>
										<div class="card-content">
											<h2 class="card-header">Health Potion</h2>
											<div class="card-tags-container">
											<div class="cards-tag">
												<p class="card-text">
													Work Type  
												</p>
												<p class="card-text-speration">
													:
												</p>
												<p class="card-tag-icon-con">
													<span class="game-card-tag">🎲 3D Models</span>
												</p>
											</div>
										</div>
										<button class="card-btn" onclick="HealthPotion()">Visit <span> <i class="fa-solid fa-arrow-right"></i></span></button>
										<script>
											function HealthPotion() {
												location.hash = 'HealthPotion';
											}
											</script>
										</div>
									</div>
								</div>
							</div>

							<!-- <br>
							<h3 class="major">Video Works</h3> -->
							<div class="grid">
								<!-- card 1 -->
								<!-- <div class="grid-item">
									<div class="card">
										<img
										class="card-img lazyload"
										data-src="./images/Other Works/Video/Naruto vs Sasuke/"
										alt="Itachi vs Sasuke"
										/>
										<div class="card-content">
											<h2 class="card-header">Itachi Vs Sasuke</h2>
											<div class="card-tags-container">
											<div class="cards-tag">
												<p class="card-text">
													Work Type  
												</p>
												<p class="card-text-speration">
													:
												</p>
												<p class="card-tag-icon-con">
													<span class="game-card-tag">🎞️ Timeline Video </span>
												</p>
											</div>
										</div>
										<button class="card-btn" onclick="Lilith()">Visit <span> <i class="fa-solid fa-arrow-right"></i></span></button>
										<script>
											function Lilith() {
												location.hash = 'Lilith';
											}
											</script>
										</div>
									</div>
								</div> -->
								<!-- card 2 -->
								<!-- <div class="grid-item">
									<div class="card">
										<img
										class="card-img lazyload"
										data-src="./images/Other Works/Video/XD Module output/"
										alt="Application Prototype"
										/>
										<div class="card-content">
											<h2 class="card-header">Application Prototype</h2>
											<div class="card-tags-container">
											<div class="cards-tag">
												<p class="card-text">
													Work Type  
												</p>
												<p class="card-text-speration">
													:
												</p>
												<p class="card-tag-icon-con">
													<span class="game-card-tag">🎞️ Adobe XD</span>
												</p>
											</div>
										</div>
										<button class="card-btn" onclick="Lilith()">Visit <span> <i class="fa-solid fa-arrow-right"></i></span></button>
										<script>
											function Lilith() {
												location.hash = 'Lilith';
											}
											</script>
										</div>
									</div>
								</div> -->
							</div>
							<div class="back-to-top">
								<button class="top-btn" data-target="#ArtWorks">Back to Top</button>
							</div>
						</article>

						<!-- Other Works Starts here -->
						<article id="RevyFanArt" class="ExtraWorks">
							<br>
							<nav class="article-navbar use-middle">
								<ul>
								  <li><a href="#about">About</a></li>
								  <li><a href="#Works">Games</a></li>
								  <li><a href="#ArtWorks">Extras</a></li>
								  <li><a href="#contact">Contact</a></li>
								</ul>
							  </nav>
							<h2 class="Project-Heading">Revy FanArt</h2>
							<span class="image main"><img class="lazyload" data-src="./images/Other Works/2D/RevyFanart/image.jpg" alt="Revy Black Lagoon" /></span>

							<div class="GameDetails">
								<div class="GameInformation">
									<div class="game-info-banner"></div>
									<br>
									<h3 class="major">🖌️Subject</h3> 
									<ul>
										<li>Character Name - Revy</li>
										<li>Anime Name - Black Lagoon</li>
										<li>Studio - Madhouse</li>
										<li>Aired in - 2006</li>
									</ul>
									
								</div>
								<div class="GameToolInfo">
									<div class="game-info-banner"></div>
									<p>
										<h3 class="major">📅 Year</h3>
										<ul> <li>2019</li> 
										</ul>

										
										<h3 class="major">⌛Time taken</h3>
										<ul> <li>24 hours</li> 
										</ul>
										

										<h3 class="major">🛠️Software</h3> 
										<ul>
										<li>Photoshop</li>
										</ul>
									</p>
								</div>
							</div>
							
						</article>

						<article id="EmmaFanArt" class="ExtraWorks">
							<br>
							<nav class="article-navbar use-middle">
								<ul>
								  <li><a href="#about">About</a></li>
								  <li><a href="#Works">Games</a></li>
								  <li><a href="#ArtWorks">Extras</a></li>
								  <li><a href="#contact">Contact</a></li>
								</ul>
							  </nav>
							<h2 class="Project-Heading">Emma FanArt</h2>
							<span class="image main"><img class="lazyload" data-src="images/Other Works/2D/Emma FanArt/yokusoku_no_Neverland_with_copyright.jpg" alt="" /></span>

							<div class="GameDetails">
								<div class="GameInformation">
									<div class="game-info-banner"></div>
									<br>
									<h3 class="major">🖌️Subject</h3> 
									<ul>
										<li>Character Name - Emma</li>
										<li>Anime Name - The Promised Neverland</li>
										<li>Studio - CloverWorks</li>
										<li>Aired in - 2019 </li>
									</ul>
									
								</div>
								<div class="GameToolInfo">
									<div class="game-info-banner"></div>
									<p>
										<h3 class="major">📅 Year</h3>
										<ul> <li>2019</li> 
										</ul>

										
										<h3 class="major">⌛Time taken</h3>
										<ul> <li>8 hours</li> 
										</ul>
										

										<h3 class="major">🛠️Software</h3> 
										<ul>
										<li>Photoshop</li>
										</ul>
									</p>
								</div>
							</div>
							
						</article>

						<article id="HimikoFanArt" class="ExtraWorks">
							<br>
							<nav class="article-navbar use-middle">
								<ul>
								  <li><a href="#about">About</a></li>
								  <li><a href="#Works">Games</a></li>
								  <li><a href="#ArtWorks">Extras</a></li>
								  <li><a href="#contact">Contact</a></li>
								</ul>
							  </nav>
							<h2 class="Project-Heading">Emma FanArt</h2>
							<span class="image main"><img class="lazyload" data-src="images/Other Works/2D/Himiko FanArt/my hero academia_with_copyright.jpg" alt="" /></span>

							<div class="GameDetails">
								<div class="GameInformation">
									<div class="game-info-banner"></div>
									<br>
									<h3 class="major">🖌️Subject</h3> 
									<ul>
										<li>Character Name - Himiko Togo</li>
										<li>Anime Name - My hero Academia</li>
										<li>Studio - Bones</li>
										<li>Aired in - 2016  </li>
									</ul>
									
								</div>
								<div class="GameToolInfo">
									<div class="game-info-banner"></div>
									<p>
										<h3 class="major">📅 Year</h3>
										<ul> <li>2019</li> 
										</ul>

										
										<h3 class="major">⌛Time taken</h3>
										<ul> <li>12 hours</li> 
										</ul>
										

										<h3 class="major">🛠️Software</h3> 
										<ul>
										<li>Photoshop</li>
										</ul>
									</p>
								</div>
							</div>
							
						</article>

						<article id="MountMiyoboku" class="ExtraWorks">
							<br>
							<nav class="article-navbar use-middle">
								<ul>
								  <li><a href="#about">About</a></li>
								  <li><a href="#Works">Games</a></li>
								  <li><a href="#ArtWorks">Extras</a></li>
								  <li><a href="#contact">Contact</a></li>
								</ul>
							  </nav>
							<h2 class="Project-Heading">Mount Myōboku</h2>
							<span class="image main"><img class="lazyload" data-src="images/Other Works/2D/MountMiyoboku Environment/Mount miyaboku rvj submission 2.png" alt="" /></span>

							<div class="GameDetails">
								<div class="GameInformation">
									<div class="game-info-banner"></div>
									<br>
									<h3 class="major">🖌️Subject</h3> 
									<ul>
										<li>Place Name - Mount Myōboku</li>
										<li>Anime Name - Naruto</li>
										<li>Studio - Pierrot</li>
										<li>Aired in - 2003  </li>
									</ul>
									
								</div>
								<div class="GameToolInfo">
									<div class="game-info-banner"></div>
									<p>
										<h3 class="major">📅 Year</h3>
										<ul> <li>2022</li> 
										</ul>

										<h3 class="major">🛠️Software</h3> 
										<ul>
										<li>Photoshop</li>
										<li>PureRef</li>
										</ul>
									</p>
								</div>
							</div>
							
						</article>

						<article id="Lilith" class="ExtraWorks">
							<br>
							<nav class="article-navbar use-middle">
								<ul>
								  <li><a href="#about">About</a></li>
								  <li><a href="#Works">Games</a></li>
								  <li><a href="#ArtWorks">Extras</a></li>
								  <li><a href="#contact">Contact</a></li>
								</ul>
							  </nav>
							<h2 class="Project-Heading">Lilith</h2>
							<span class="image main"><img class="lazyload" data-src="images/Other Works/2D/Lilith/Lilith 2.png" alt="" /></span>

							<div class="GameDetails">
								<div class="GameInformation">
									<div class="game-info-banner"></div>
									<br>
									<h3 class="major">🖌️Subject</h3> 
									<ul>
										<li>Character Name - Lilith</li>
										<li>Inspiration - Jew Folklore</li>
									</ul>
									
								</div>
								<div class="GameToolInfo">
									<div class="game-info-banner"></div>
									<p>
										<h3 class="major">📅 Year</h3>
										<ul> <li>2022</li> 
										</ul>

										<h3 class="major">🛠️Software</h3> 
										<ul>
										<li>Photoshop</li>
										<li>PureRef</li>
										</ul>
									</p>
								</div>
							</div>
							
						</article>
						
						<!-- 3D Starts here -->
						<article id="ItachiVsSasuke" class="ExtraWorks">
							<br>
							<nav class="article-navbar use-middle">
								<ul>
								  <li><a href="#about">About</a></li>
								  <li><a href="#Works">Games</a></li>
								  <li><a href="#ArtWorks">Extras</a></li>
								  <li><a href="#contact">Contact</a></li>
								</ul>
							  </nav>
							<h2 class="Project-Heading">Itachi Vs Sasuke</h2>
							<span class="image main"><img class="lazyload" data-src="images/Other Works/3D/Itachi vs Sasuke/Maya output render  13.png" alt="" /></span>
							<!-- <br> -->
							<!-- <h2 class="Project-Heading">ScreenShots</h2> -->

							<div class="GameDetails">
								<div class="GameInformation">
									<div class="game-info-banner"></div>
									<br>
									<h3 class="major">🖌️Subject</h3> 
									<ul>
										<li>Place - Uchiha Hideout</li>
										<li>Inspiration - Naruto Anime</li>
										<li>Studio - Pierrot</li>
										<li>Aired in - 2003  </li>
									</ul>
									
								</div>
								<div class="GameToolInfo">
									<div class="game-info-banner"></div>
									<p>
										<h3 class="major">📅 Year</h3>
										<ul> <li>2022</li> 
										</ul>

										<h3 class="major">🛠️Software</h3> 
										<ul>
											<li>Photoshop (For concept art)</li>
											<li>Noiton (Project Management)</li>
											<li>Maya (Modeling)</li>
											<li>Zbrush (HighPoly Details)</li>
											<li>Substance Painter (Texturing)</li>
											<li>PureRef</li>
										</ul>
									</p>
								</div>
							</div>
						</article>

						<article id="DemonLord" class="ExtraWorks">
							<br>
							<nav class="article-navbar use-middle">
								<ul>
								  <li><a href="#about">About</a></li>
								  <li><a href="#Works">Games</a></li>
								  <li><a href="#ArtWorks">Extras</a></li>
								  <li><a href="#contact">Contact</a></li>
								</ul>
							  </nav>
							<h2 class="Project-Heading">Demon Lord</h2>
							<span class="image main"><img class="lazyload" data-src="images/Other Works/3D/Goat king/Final render.jpg" alt="" /></span>
							<!-- <br> -->
							<!-- <h3 class="Project-Heading">ScreenShots</h3> -->
							
							<div class="GameDetails">
								<div class="GameInformation">
									<div class="game-info-banner"></div>
									<br>
									<h3 class="major">🖌️Subject</h3> 
									<ul>
										<li>Creature - Hybrid of Goat and Human [with Demonic Powers]</li>
										<li>Inspiration - Cernunnos, Faunus</li>
									</ul>
									
								</div>
								<div class="GameToolInfo">
									<div class="game-info-banner"></div>
									<p>
										<h3 class="major">📅 Year</h3>
										<ul> <li>2022</li> 
										</ul>

										<h3 class="major">🛠️Software</h3> 
										<ul>
											<li>Photoshop (For concept art)</li>
											<li>Noiton (Project Management)</li>
											<li>Maya (Modeling)</li>
											<li>Substance Painter (Texturing)</li>
											<li>PureRef</li>
										</ul>
									</p>
								</div>
							</div>
							
						</article>

						<article id="HidanWeapon" class="ExtraWorks">
							<br>
							<nav class="article-navbar use-middle">
								<ul>
								  <li><a href="#about">About</a></li>
								  <li><a href="#Works">Games</a></li>
								  <li><a href="#ArtWorks">Extras</a></li>
								  <li><a href="#contact">Contact</a></li>
								</ul>
							  </nav>
							<h2 class="Project-Heading">Triple-Bladed Scythe</h2>
							<span class="image main"><img class="lazyload" data-src="images/Other Works/3D/Hiddan weapon/Render version 2 - 3.png" alt="" /></span>
							<!-- <br> -->
							<!-- <h3 class="Project-Heading">ScreenShots</h3> -->
							
							<div class="GameDetails">
								<div class="GameInformation">
									<div class="game-info-banner"></div>
									<br>
									<h3 class="major">🖌️Subject</h3> 
									<ul>
										<li>Object - Weapon</li>
										<li>User - Hidan</li>
										<li>Inspiration - Naruto Anime</li>
									</ul>
									
								</div>
								<div class="GameToolInfo">
									<div class="game-info-banner"></div>
									<p>
										<h3 class="major">📅 Year</h3>
										<ul> <li>2022</li> 
										</ul>

										<h3 class="major">🛠️Software</h3> 
										<ul>
											<li>Photoshop (For concept art)</li>
											<li>Noiton (Project Management)</li>
											<li>Maya (Modeling)</li>
											<li>Substance Painter (Texturing)</li>
											<li>Zbrush (Adding Details)</li>
											<li>PureRef</li>
										</ul>
									</p>
								</div>
							</div>
							
						</article>

						<article id="HealthPotion" class="ExtraWorks">
							<br>
							<nav class="article-navbar use-middle">
								<ul>
								  <li><a href="#about">About</a></li>
								  <li><a href="#Works">Games</a></li>
								  <li><a href="#ArtWorks">Extras</a></li>
								  <li><a href="#contact">Contact</a></li>
								</ul>
							  </nav>
							<h2 class="Project-Heading">Health Potion</h2>
							<span class="image main"><img class="lazyload" data-src="images/Other Works/3D/Mug Render/Mug Render Dynamic 1.jpg" alt="" /></span>
							<!-- <br> -->
							<!-- <h3 class="Project-Heading">ScreenShots</h3> -->
							
							<div class="GameDetails">
								<div class="GameInformation">
									<div class="game-info-banner"></div>
									<br>
									<h3 class="major">🖌️Subject</h3> 
									<ul>
										<li>Object - Health Potion</li>
									</ul>
									
								</div>
								<div class="GameToolInfo">
									<div class="game-info-banner"></div>
									<p>
										<h3 class="major">📅 Year</h3>
										<ul> <li>2022</li> 
										</ul>

										<h3 class="major">🛠️Software</h3> 
										<ul>
											<li>Maya (Modeling)</li>
											<li>Zbrush (Adding Details)</li>
											<li>Substance Painter (Texturing)</li>
											<li>PureRef</li>
										</ul>
									</p>
								</div>
							</div>
							
						</article>
					</div>

				<!-- Footer -->
					<footer id="footer">
						<p class="copyright"> Thanks for checking out my portfolio <br><br> Have an amazing day 👋 <br><br> Designed By Shiraz-V-Kamar</p>
					</footer>

			</div>
			
		<!-- BG -->
			<div id="bg">
				<!-- <video autoplay loop muted plays-inline >
					<source src="images/BGvideo.mp4" type="video/mp4">
				</video> -->
			</div>

		<!-- Scripts -->
			<script src="assets/js/jquery.min.js"></script>
			<script src="assets/js/browser.min.js"></script>
			<script src="assets/js/breakpoints.min.js"></script>
			<script src="assets/js/util.js"></script>
			<script src="assets/js/main.js"></script>
			<script src="assets/js/lazysizes.min.js" async=""></script>

	</body>
</html>