js • Lines: 187import { Col, Container, Image, Row } from "react-bootstrap";
import PageIntro from "./PageIntro";
import SeriesList from "./SeriesList";
import Starfield from "./Starfield";
const organizations = [
{ name: "Infosys", logo: "https://www.vectorlogo.zone/logos/infosys/infosys-ar21.svg", url: "https://www.infosys.com" },
{ name: "HPE", logo: "https://www.vectorlogo.zone/logos/hewlett_packard_enterprise/hewlett_packard_enterprise-icon.svg", url: "https://www.hpe.com" },
{ name: "GE Renewable Energy", logo: "https://www.vectorlogo.zone/logos/ge/ge-icon.svg", url: "https://www.ge.com/renewableenergy" },
{ name: "Oracle", logo: "https://www.vectorlogo.zone/logos/oracle/oracle-icon.svg", url: "https://www.oracle.com" },
{ name: "HCL Technologies", logo: "https://www.vectorlogo.zone/logos/hcl/hcl-icon.svg", url: "https://www.hcltech.com" },
{ name: "Cognizant", logo: "https://www.vectorlogo.zone/logos/cognizanttechnology/cognizanttechnology-icon.svg", url: "https://www.cognizant.com" },
];
const timeline = [
{ role: "Senior Technologist", company: "Infosys", start: "Nov 2024", end: "Present" },
{ role: "Cloud Developer III", company: "HPE", start: "Dec 2022", end: "Nov 2024" },
{ role: "Sr. Software Engineer", company: "GE Renewable Energy", start: "Dec 2018", end: "Nov 2022" },
{ role: "Sr. Applications Engineer", company: "Oracle", start: "Jan 2016", end: "Dec 2018" },
{ role: "Sr. Software Engineer", company: "HCL Technologies", start: "Nov 2014", end: "Nov 2015" },
{ role: "Programmer Analyst", company: "Cognizant", start: "Nov 2011", end: "Oct 2014" },
];
const techStack = ["React.js", "Python", "Rust", "JavaScript", "C#", "Node.js", "System Design", "Distributed Systems", "Cloud Architecture", "Machine Learning"];
const openSourceProjects = [
{ name: "Iron Learn", desc: "A pure Rust ML library", url: "https://github.com/Palash90/iron_learn", type: "Rust" },
{ name: "HDL Emulator", desc: "Web-based HDL emulator for teaching", url: "https://github.com/Palash90/emulator", type: "JavaScript" },
{ name: "Distributed File System", desc: "DFS inspired by Google File System", url: "https://github.com/Palash90/dist-fs", type: "Java" },
];
export default function Home() {
return <>
<Starfield />
<Container className={"home-page " + window.findProp("pages.home.class")} fluid>
<PageIntro
h1={(window.findProp('pages.home.greeting') || '') + (window.findProp('shortName') || '')}
p={window.findProp('pages.home.tag')}
h1Color={window.findProp("pages.home.h1Color")}
pColor={window.findProp("pages.home.pColor")}
/>
<Row className="align-items-center mb-5">
<Col md={7}>
<div className="bio-text" style={{ whiteSpace: "pre-line", lineHeight: 1.85 }}>
{window.findProp('pages.home.desc')}
</div>
</Col>
<Col md={5}>
<div className="profile-img-wrap">
<Image
fluid
className="profile-img"
src={window.findProp('pages.home.profilePicUrl')}
/>
</div>
</Col>
</Row>
<Row className="mb-4">
<Col>
<div className="professional-summary">
<Row className="text-center">
<Col md={2}>
<div className="stat-item stat-hover-wrapper">
<div className="stat-number">14+</div>
<div className="stat-label">Years Experience</div>
<div className="timeline-tooltip">
{timeline.map((item, i) => (
<div className="timeline-item" key={i}>
<div className="timeline-info">
<div className="timeline-role">{item.role}</div>
<div className="timeline-company">{item.company}</div>
<div className="timeline-dates">{item.start} — {item.end}</div>
</div>
</div>
))}
</div>
</div>
</Col>
<Col md={2}>
<div className="stat-item stat-hover-wrapper">
<div className="stat-number">5+</div>
<div className="stat-label">Organizations</div>
<div className="org-tooltip">
{organizations.map((org, i) => (
<a href={org.url} target="_blank" rel="noopener noreferrer" className="org-item" key={i}>
<img src={org.logo} alt={org.name} className="org-logo" />
<span>{org.name}</span>
</a>
))}
</div>
</div>
</Col>
<Col md={2}>
<div className="stat-item stat-hover-wrapper">
<div className="stat-number">11+</div>
<div className="stat-label">Technologies</div>
<div className="tech-tooltip">
<div className="tech-tooltip-tags">
{techStack.map((tech, i) => (
<span className="tech-tooltip-tag" key={i}>{tech}</span>
))}
</div>
</div>
</div>
</Col>
<Col md={2}>
<div className="stat-item stat-hover-wrapper">
<div className="stat-number">3</div>
<div className="stat-label">Open Source</div>
<div className="projects-tooltip">
{openSourceProjects.map((proj, i) => (
<a href={proj.url} target="_blank" rel="noopener noreferrer" className="project-item" key={i}>
<div className="project-name">{proj.name}</div>
<div className="project-desc">{proj.desc}</div>
<div className="project-type">{proj.type}</div>
</a>
))}
</div>
</div>
</Col>
<Col md={4}>
<a href="https://ai.palashkantikundu.in" target="_blank" rel="noopener noreferrer" className="text-decoration-none">
<div className="stat-item book-stat">
<div className="stat-number book-icon">📖</div>
<div className="stat-label">Published Book</div>
<div className="book-title">Build Your Own Neural Network</div>
</div>
</a>
</Col>
</Row>
</div>
</Col>
</Row>
<Row className="mb-4">
<Col md={6}>
<div className="home-section tech-stack-section">
<h6 className="section-heading">Technologies</h6>
<div className="tech-tags">
<span className="tech-tag primary">React.js</span>
<span className="tech-tag primary">Python</span>
<span className="tech-tag primary">Rust</span>
<span className="tech-tag">System Design</span>
<span className="tech-tag">Distributed Systems</span>
</div>
</div>
</Col>
<Col md={6}>
<div className="home-section expertise-section">
<h6 className="section-heading">Expertise</h6>
<ul className="expertise-list">
<li>Full Stack Dev</li>
<li>Cloud Architecture & Dev</li>
<li>Machine Learning</li>
<li>System Design and Architecture</li>
</ul>
</div>
</Col>
</Row>
<Row className="align-items-start">
<Col md={7}>
<div className="home-section">
<h6 className="section-heading">
{window.findProp("pages.home.techBlogHeader")}
<a href="/contents/tech" className="show-all">
{window.findProp("pages.home.techBlogShowAll")}
</a>
</h6>
<p className="section-sub">{window.findProp("pages.home.techBlogTag")}</p>
<SeriesList type="contents.swe" limit={5} truncateAt={55} flat />
</div>
</Col>
<Col md={5}>
<div className="home-section">
<h6 className="section-heading">
{window.findProp("pages.home.musicBlogHeader")}
<a href="/contents/music" className="show-all">
{window.findProp("pages.home.musicBlogShowAll")}
</a>
</h6>
<p className="section-sub">{window.findProp("pages.home.musicBlogTag")}</p>
<SeriesList type="contents.music" limit={5} truncateAt={55} flat />
</div>
</Col>
</Row>
</Container>
</>
}