Scribd
Upload
7 views20 pages

MPI Retirement Calculator Overview

Assign

Uploaded by

Debottam Chatterjee
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views20 pages

MPI Retirement Calculator Overview

Assign

Uploaded by

Debottam Chatterjee
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

index.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Debottam Chatterjee-Portfolio</title>
<link rel="stylesheet" href="[Link]">
<link rel="icon" href="assets/icons/[Link]">
<link href="[Link]
rel="stylesheet">
<link rel="shortcut icon" href="assets/[Link]" type="image/x-icon">
</head>
<body>

<header>
<nav class="navbar">
<div class="logo">Debottam</div>

<button class="hamburger" id="hamburger">&#9776;</button>

<div class="nav-links" id="navLinks">


<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>

<button id="darkModeToggle">�
�</button>
</div>
</nav>

</header>

<section id="home" class="hero">


<h1>Hi, I'm <span class="typing-text"></span></h1>
<p>Web Developer | Designer | Learner</p>
<a href="[Link]" download class="btn">Download Resume</a>
</section>

<section id="about" class="about">


<h2>About Me</h2>
<p>I’m Debottam Chatterjee, a passionate and self-driven developer with a strong interest
in full-stack web development and modern technologies. Currently pursuing my
undergraduate studies at St. Xavier's College, Kolkata, I enjoy building scalable and user-
friendly applications from scratch. My recent projects include a full-featured MERN-based
eLibrary platform and several interactive web applications. I’m enthusiastic about learning
new tools, solving real-world problems through code, and collaborating on innovative tech
solutions.</p>
</section>

<section id="projects" class="projects">


<h2>My Projects</h2>
<div class="project-filters">
<button class="filter-btn active" data-filter="all">All</button>
<button class="filter-btn" data-filter="web">Web</button>
<button class="filter-btn" data-filter="python">Python</button>
</div>
<div class="project-cards">

<div class="project-card" data-category="web">


<img src="assets/[Link]" height="250px" width="300px" alt="Project 1">
<h3>Digital E-Library</h3>
<p>Developed a fully functional eLibrary platform using the MERN stack (MongoDB,
[Link], React, [Link]). The application allows users to sign up, log in, read/download
eBooks and audiobooks, and includes a robust admin panel for managing content and users.
Files and media are hosted using Cloudinary, ensuring scalable and efficient file
handling.</p><br>
<a href="[Link] target="_blank">View
Project</a>
</div>
<div class="project-card" data-category="web">
<img src="assets/[Link]" height="250px" width="300px" alt="Project 1">
<h3>Simple Calculator</h3>
<p>Created a simple calculator using HTML, CSS, and JavaScript. The calculator can
perform basic arithmetic operations and has a user-friendly interface.</p><br>
<a href="[Link] target="_blank">View
Project</a>
</div>
<div class="project-card" data-category="web">
<img src="assets/[Link]" height="250px" width="300px" alt="Project 1">
<h3>ATM Demo Webapp</h3>
<p>Created an ATM transaction demo web application that can imitate the debit, credit
and
view balance operations of an ATM using HTML, CSS and Javascript. </p><br>
<a href="[Link] target="_blank">View Project</a>
</div>
</div>
</section>

<section id="contact" class="contact">


<h2>Contact Me</h2>
<form>
<label for="name">Name</label>
<input type="text" id="name" required>
<label for="email">Email</label>
<input type="email" id="email" required>
<label for="message">Message</label>
<textarea id="message" rows="5" required></textarea>
<center><button type="submit">Send</button></center>
</form>
</section>

<button id="scrollToTopBtn">↑</button>

<footer>
<p style="color: white;">© 2025 Debottam Chatterjee. All rights reserved.</p>
<div class="socials">
<a href="[Link] target="_blank">GitHub</a>
<a href="[Link] target="_blank">LinkedIn</a>
<a href="[Link]
</div>
</footer>

<script src="[Link]"></script>
</body>
</html>

[Link]

:root {
--primary: #2d89ef;
--accent: #4caf50;

--bg-color: #f9f9f9;
--text-color: #111;
--card-bg: #ffffff;
--form-bg: #f7f7f7;
--footer-bg: #2d2d2d;
--link-color: #ccc;
}

[Link]-mode {
--bg-color: #121212;
--text-color: #f2f2f2;
--card-bg: #1e1e1e;
--form-bg: #1b1b1b;
--footer-bg: #000;
--link-color: #ddd;
}

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Poppins', sans-serif;
line-height: 1.6;
background-color: var(--bg-color);
color: var(--text-color);
scroll-behavior: smooth;
transition: background-color 0.3s, color 0.3s;
}

.navbar {
position: sticky;
top: 0;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
background: var(--primary);
padding: 1rem 2rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
color: white;
}

.navbar a,
.nav-links button {
color: white;
text-decoration: none;
margin-left: 1.5rem;
font-weight: 500;
background: none;
border: none;
cursor: pointer;
}
.navbar a:hover {
color: #ddd;
}

#darkModeToggle {
font-size: 1.3rem;
cursor: pointer;
background: none;
border: none;
}

.hero {
min-height: 90vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 2rem;
background: linear-gradient(to right, #2d89ef, #4caf50);
color: white;
text-align: center;
}

.hero h1 {
font-size: 3rem;
margin-bottom: 0.5rem;
}

.typing-text {
border-right: 2px solid white;
padding-right: 5px;
font-weight: bold;
}

.hero p {
font-size: 1.2rem;
margin-bottom: 1.5rem;
}

.btn {
background-color: white;
color: var(--primary);
padding: 0.7rem 1.5rem;
border: none;
border-radius: 30px;
font-weight: bold;
cursor: pointer;
transition: background 0.3s ease;
text-decoration: none;
}

.btn:hover {
background-color: #f1f1f1;
}

section h2 {
font-size: 2.2rem;
text-align: center;
margin: 2rem 0 1rem;
position: relative;
}

section h2::after {
content: '';
display: block;
width: 80px;
height: 3px;
background: var(--primary);
margin: 0.5rem auto 0;
}

.about {
max-width: 900px;
margin: auto;
padding: 2rem;
text-align: center;
}

.projects {
padding: 2rem;
background-color: var(--bg-color);
transition: background-color 0.3s;
}

.project-filters {
text-align: center;
margin-bottom: 1.5rem;
}

.filter-btn {
background: transparent;
border: 2px solid var(--primary);
color: var(--primary);
padding: 0.5rem 1.2rem;
margin: 0 0.5rem;
border-radius: 25px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s;
}

.fi[Link],
.filter-btn:hover {
background: var(--primary);
color: white;
}

.project-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
gap: 2rem;
padding: 0 2rem;
}

.project-card {
background-color: var(--card-bg);
padding: 1.5rem;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
text-align: center;
transition: transform 0.3s ease, background-color 0.3s, color 0.3s;
}

.project-card:hover {
transform: translateY(-5px);
}

.project-card img {
width: 100%;
height: 160px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 1rem;
}

.project-card h3 {
font-size: 1.2rem;
margin: 0.5rem 0;
}

.project-card a {
text-decoration: none;
color: var(--accent);
font-weight: bold;
}
.contact {
padding: 2rem;
background-color: var(--bg-color);
}

.contact form {
max-width: 600px;
margin: auto;
background: var(--form-bg);
padding: 2rem;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: background-color 0.3s, color 0.3s;
}

.contact label {
display: block;
margin-top: 1rem;
font-weight: 500;
}

.contact input,
.contact textarea {
width: 100%;
padding: 0.7rem;
margin-top: 0.5rem;
border: 1px solid #ccc;
border-radius: 8px;
background-color: white;
color: var(--text-color);
}

[Link]-mode .contact input,


[Link]-mode .contact textarea {
background-color: #2a2a2a;
color: #f2f2f2;
border-color: #444;
}

.contact button {
margin-top: 1.5rem;
background: var(--primary);
color: white;
padding: 0.7rem 1.5rem;
border: none;
border-radius: 30px;
cursor: pointer;
font-weight: bold;
transition: background 0.3s ease;
}

.contact button:hover {
background-color: #2568c3;
}

#scrollToTopBtn {
position: fixed;
bottom: 30px;
right: 30px;
padding: 10px 15px;
background: var(--primary);
color: white;
border: none;
border-radius: 50%;
font-size: 1.2rem;
display: none;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
z-index: 999;
}

#scrollToTopBtn:hover {
background-color: #1b5fad;
}

footer {
background-color: var(--footer-bg);
color: var(--text-color);
text-align: center;
padding: 1.5rem 1rem;
transition: background-color 0.3s, color 0.3s;
}

footer .socials a {
color: var(--link-color);
margin: 0 10px;
text-decoration: none;
}

footer .socials a:hover {


color: white;
}

@media screen and (max-width: 768px) {


.navbar {
flex-direction: column;
align-items: flex-start;
}

.project-cards {
padding: 0 1rem;
}

.hero h1 {
font-size: 2.2rem;
}

.btn {
padding: 0.6rem 1.2rem;
}
}

.navbar .logo {
font-size: 1.5rem;
font-weight: bold;
color: white;
}

.nav-links {
display: flex;
gap: 1.5rem;
align-items: center;
}

.hamburger {
display: none;
font-size: 1.8rem;
background: none;
color: white;
border: none;
cursor: pointer;
}

@media screen and (max-width: 768px) {


.nav-links {
display: none;
flex-direction: column;
background: var(--primary);
position: absolute;
top: 60px;
right: 0;
width: 100%;
padding: 1rem 0;
text-align: center;
}

.[Link] {
display: flex;
}

.hamburger {
display: block;
}
}

[Link]

const toggle = [Link]('darkModeToggle');


[Link]('click', () => {
[Link]('dark-mode');
});

const text = [Link]('.typing-text');


const words = ["Debottam", "a Developer", "a Creator"];
let index = 0, charIndex = 0;

function type() {
if (charIndex < words[index].length) {
[Link] += words[index].charAt(charIndex);
charIndex++;
setTimeout(type, 100);
} else {
setTimeout(erase, 1500);
}
}
function erase() {
if (charIndex > 0) {
[Link] = words[index].substring(0, charIndex - 1);
charIndex--;
setTimeout(erase, 50);
} else {
index = (index + 1) % [Link];
setTimeout(type, 200);
}
}
type();

const scrollBtn = [Link]("scrollToTopBtn");


[Link]("scroll", () => {
[Link] = [Link] > 200 ? "block" : "none";
});
[Link]("click", () => {
[Link]({ top: 0, behavior: 'smooth' });
});

const filterButtons = [Link](".filter-btn");


const cards = [Link](".project-card");

fi[Link](btn => {
[Link]("click", () => {
[Link](".fi[Link]").[Link]("active");
[Link]("active");

const filter = [Link]("data-filter");


[Link](card => {
[Link] = filter === "all" || [Link] === filter ? "block" : "none";
});
});
});

const hamburger = [Link]('hamburger');


const navLinks = [Link]('navLinks');

[Link]('click', () => {
[Link]('open');
});

Live Website Link: Debottam Chatterjee-Portfolio

Github Repo Link: omegaxdemon/portfolio


Website Pictures:

Mobile View:

Desktop View:

You might also like