333 lines
18 KiB
HTML
333 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Technology Certifier Company</title>
|
|
<link rel="stylesheet" href="css/main.min.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
|
|
rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<h4 id="company_title">
|
|
TC<sup>2</sup>
|
|
</h4>
|
|
</header>
|
|
<section id="hero_section" class="fancy-border fancy-border--bottom">
|
|
<h1>Company main objective or
|
|
something important</h1>
|
|
</section>
|
|
<section>
|
|
<div class="grid section-title">
|
|
<h4 class="reveal">
|
|
<span>
|
|
What can be
|
|
</span>
|
|
</h4>
|
|
<h3 class="reveal">
|
|
<span>
|
|
Certified?
|
|
</span>
|
|
</h3>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<div class="grid section-title">
|
|
<h4 class="reveal">
|
|
<span>
|
|
What are
|
|
</span>
|
|
</h4>
|
|
<h3 class="reveal">
|
|
<span>
|
|
Functions?
|
|
</span>
|
|
</h3>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<div class="grid section-title">
|
|
<h4 class="reveal">
|
|
<span>
|
|
Specific needs for
|
|
</span>
|
|
</h4>
|
|
<h3 class="reveal">
|
|
<span>
|
|
certification in Tokenization
|
|
</span>
|
|
</h3>
|
|
</div>
|
|
</section>
|
|
<section id="">
|
|
<h3 class="section-title reveal">
|
|
<span>
|
|
Methodology
|
|
</span>
|
|
</h3>
|
|
<ul id="methodology_list" class="fancy-list"> </ul>
|
|
</section>
|
|
<section id="team_section">
|
|
<h3 class="section-title reveal">
|
|
<span>
|
|
Team
|
|
</span>
|
|
</h3>
|
|
<ul id="team_members" class="move-in"></ul>
|
|
</section>
|
|
<dialog id="person_bio">
|
|
<button onclick="closePersonBio()">
|
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
|
|
fill="#000000">
|
|
<path d="M0 0h24v24H0V0z" fill="none" />
|
|
<path
|
|
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
|
|
</svg>
|
|
</button>
|
|
<div id="person_bio_wrapper">
|
|
<img src="" alt="" id="person__image">
|
|
<h3 id="person__name"></h3>
|
|
<p id="person__title"></p>
|
|
<p id="person__bio"></p>
|
|
</div>
|
|
</dialog>
|
|
<script>
|
|
const teamMembers = [
|
|
// {
|
|
// name: 'Parin Lapasia',
|
|
// title: 'Principal director and shareholder',
|
|
// image: 'assets/craig-mckay-jmURdhtm7Ng-unsplash.jpg',
|
|
// bio: `Parin Lapasia is a highly experienced cybersecurity professional with expertise in conducting PCI Data Security assessments globally in over 30 countries. He has worked with various cybersecurity standards and frameworks, including ISA 62443, ISO 27001, NSW Cyber Security Policy Reporting, ACSC Essential Eight, Prudential Standard CPS 234, HITRUST, HIPAA, BITS FISAP, and more.
|
|
// \n\nParin holds multiple certifications in the cybersecurity domain, such as Certified Information Systems Security Professional (CISSP), Certified Information Systems Auditor (CISA), Certified Information Security Manager (CISM), Payment Card Industry (PCI) Qualified Security Assessor (QSA), and others.
|
|
// \n\nHe has a strong educational background, with a Master of Science in Computer Applications (M.Sc) from Symbiosis Institute of Computer Studies & Research and a Bachelor of Commerce (B.Com) from Ramniranjan Anandilal Podar College.
|
|
// \n\nIn his professional experience, Parin has worked with various organizations, including DeepComply Pty Ltd, where he provided cybersecurity consulting and advisory services to multiple clients. He has worked on projects related to cyber security risk assessments, compliance, vulnerability management, third-party supplier risk assessment, and technology assessments.
|
|
// \n\nBefore DeepComply, Parin served as the Senior Vice President of Security Consulting at ControlCase International Pvt. Ltd., where he conducted a wide range of compliance-related assignments and audits, including PCI DSS, ISO 27001, HIPAA, HITRUST, VISA PIN Security, and more. He managed a team of QSAs and consultants and was responsible for project management and delivery.
|
|
// \n\nAdditionally, Parin worked as a Security Consultant & ISMS Manager at Network Intelligence (I) Pvt Ltd., where he focused on vulnerability assessment, penetration testing, ISO 27001/BS7799 consulting, and information security audits.
|
|
// \n\nOverall, Parin Lapasia's extensive experience and expertise in cybersecurity make him a valuable asset in the field, with a track record of successful assessments and risk management for various organizations.`
|
|
// },
|
|
{
|
|
name: 'Rohit Tripathy',
|
|
title: 'Principal director and shareholder',
|
|
image: 'assets/Rohit Tripathy.jpg',
|
|
bio: `Rohit Tripathy is a versatile entrepreneur who has taken on various roles throughout his career. He started as an ethical hacker, then transitioned to become a Technology Consultant, followed by a Product Designer, and later a Credit Card Security Entrepreneur. He further evolved into a thinker/experimenter and eventually became a long-term investor and full-time traveler. Currently, he is a Blockchain Entrepreneur and the Founder of RanchiMall, a blockchain-based virtual mall that focuses on selling unique and innovative products purely on the internet.
|
|
\n\nRohit has a strong belief in bootstrapping, which he feels provides valuable learning experiences and enjoyment. He has applied blockchain technology to different industries, including real estate, startups, financial investments, internships, and e-commerce, with the goal of captivating the people of Ranchi.
|
|
\n\nAs an avid traveler, Rohit has worked on all continents except Antarctica and has visited over 120 countries. He is a seasoned public speaker, having given three TEDx Talks and made multiple appearances on Indian national television, sharing his entrepreneurial journey.
|
|
\n\nHis professional experience includes founding RanchiMall, co-founding Control Case, and being part of Intricap. Prior to his entrepreneurial ventures, he worked as a Senior Consultant at Ernst & Young, where he gained valuable experience in setting up e-Security practices.
|
|
\n\nRohit holds a PGDIM degree in Finance/Technology from the National Institute of Industrial Engineering and a BE degree in Industrial Electronics from Shivaji University.
|
|
\n\nIn summary, Rohit Tripathy is a multi-faceted individual with a diverse background, a passion for blockchain technology, and a keen interest in entrepreneurship and innovation.`
|
|
},
|
|
{
|
|
name: 'Puneet Sondh',
|
|
title: 'Principal director',
|
|
image: 'assets/Puneet Sondh.jpg',
|
|
bio: `Puneet Sondh is a highly experienced financial services professional with a strong leadership background. He has successfully managed teams in diverse global environments, specializing in operational risk, financial crime, and business transformation.\n\n Puneet's notable roles include Partner at Wipro Ltd, Business and Risk Consultant, Head of Risk and Compliance at State Street Syntel Services, and Assistant General Manager at ICICI Bank.\n\nHe holds advanced degrees in finance and industrial management, and has certifications in FinTech and Financial Crime.\n\n Puneet's expertise and achievements make him a valuable asset in the financial services industry.`
|
|
},
|
|
{
|
|
name: 'Ruchir Gupta',
|
|
title: 'Principal director',
|
|
image: 'assets/Ruchir Gupta.jpg',
|
|
bio: `Ruchir Gupta is a highly experienced and accomplished professional with over 23 years of expertise in global Supply Management. He holds a Bachelor's degree in Mechanical Engineering from Delhi College of Engineering and a Post Graduate Diploma in Industrial Management from NITIE Mumbai.
|
|
\n\nRuchir started his career as a Planning Engineer at Punj Lloyd Ltd, then moved on to work for Marico Ltd, where he managed the Edible Oils Business and implemented various planning strategies. He later ventured into management consulting, providing solutions to clients worldwide in areas like Planning Solution Enhancement, Global Inventory Optimization, S&OP process Design, and predictive models.
|
|
\n\nIn 2009, Ruchir joined Timex Watches group and led the Supply Chain and Distribution center operations, driving significant transformations and cost improvement programs. He later worked for various consulting firms, including Accenture, Scanomi, and Chainalytics, where he continued to excel in delivering supply chain optimization projects for clients across different industries.
|
|
\n\nCurrently, Ruchir is the Director of Material Planning at Micron Semiconductor Asia Operations, where he oversees the Global Back-end Materials Planning team and is responsible for establishing robust and scalable planning processes. His expertise covers 20+ locations with a focus on Package Assembly & SMT operations.
|
|
\n\nThroughout his career, Ruchir has been recognized for his excellence in supply chain management and has received numerous accolades for his contributions to various projects. He is known for his open communication, delegation with trust, attention to detail, and soft influence through cross-stakeholder collaboration.
|
|
\n\nRuchir's vast experience, leadership, and expertise make him a valuable asset in the field of supply chain management and materials planning.`
|
|
},
|
|
]
|
|
|
|
|
|
const render = {
|
|
teamMember(details, index) {
|
|
const { image, name, title } = details
|
|
const memberItem = document.createElement('li')
|
|
memberItem.classList.add('team-member')
|
|
memberItem.setAttribute('data-index', index)
|
|
memberItem.innerHTML = `
|
|
<div class="team-member__image-container">
|
|
<img src="${image}" alt="${name} profile picture" loading="lazy">
|
|
<img src="assets/stamp-outline.svg">
|
|
</div>
|
|
<p class="team-member__name">${name},</p>
|
|
<p class="team-member__title">${title}</p>
|
|
<span class="team-member__button">Learn more</span>
|
|
`
|
|
return memberItem
|
|
},
|
|
fancyListItem(details, index) {
|
|
const { label, title, description } = details
|
|
const listItem = document.createElement('li')
|
|
listItem.classList.add('fancy-list__item')
|
|
listItem.innerHTML = `
|
|
<div class="fancy-list__item__label-wrapper">
|
|
<span class="fancy-list__item__label">${label || index + 1}</span>
|
|
</div>
|
|
${title ? `<h4 class="fancy-list__item__title">${title}</h4>` : ''}
|
|
${description ? `<p class="fancy-list__item__description">${description}</p>` : ''}
|
|
`
|
|
return listItem
|
|
}
|
|
}
|
|
|
|
window.onload = () => {
|
|
const teamMembersList = document.getElementById('team_members')
|
|
teamMembers.sort((a, b) => a.name.localeCompare(b.name))
|
|
teamMembers.forEach((member, index) => {
|
|
const memberItem = render.teamMember(member, index)
|
|
teamMembersList.appendChild(memberItem)
|
|
})
|
|
document.getElementById('team_members').addEventListener('click', e => {
|
|
const index = e.target.closest('li').dataset.index
|
|
const { image, name, title, bio } = teamMembers[index]
|
|
document.getElementById('person__image').src = image
|
|
document.getElementById('person__name').textContent = name
|
|
document.getElementById('person__title').textContent = title
|
|
document.getElementById('person__bio').innerText = bio
|
|
document.getElementById('person_bio').showModal()
|
|
document.body.style.overflow = 'hidden';
|
|
document.body.style.top = `-${window.scrollY}px`;
|
|
})
|
|
dataLists.forEach(list => {
|
|
const { target, list: items } = list
|
|
const listContainer = document.getElementById(target)
|
|
if (!listContainer) return console.error(`No element found with id ${target}`)
|
|
items.forEach((item, index) => {
|
|
const listItem = render.fancyListItem(item, index)
|
|
listContainer.appendChild(listItem)
|
|
})
|
|
})
|
|
const headingObserver = new IntersectionObserver((entries, observer) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.firstElementChild.animate([
|
|
{
|
|
transform: 'translateY(0.5em)',
|
|
opacity: 0
|
|
},
|
|
{
|
|
transform: 'none',
|
|
opacity: 1
|
|
},
|
|
], {
|
|
duration: 300,
|
|
easing: 'ease',
|
|
fill: 'forwards',
|
|
delay: 100
|
|
})
|
|
observer.unobserve(entry.target)
|
|
}
|
|
})
|
|
}, {
|
|
threshold: 0.8
|
|
})
|
|
|
|
document.querySelectorAll('.reveal').forEach(heading => {
|
|
headingObserver.observe(heading)
|
|
})
|
|
const sectionObserver = new IntersectionObserver((entries, observer) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.animate([
|
|
{
|
|
transform: 'translateX(-0.5em)',
|
|
opacity: 0
|
|
},
|
|
{
|
|
transform: 'none',
|
|
opacity: 1
|
|
},
|
|
], {
|
|
duration: 300,
|
|
easing: 'ease',
|
|
fill: 'forwards',
|
|
delay: 100
|
|
})
|
|
observer.unobserve(entry.target)
|
|
}
|
|
})
|
|
}, {
|
|
threshold: 0.1
|
|
})
|
|
|
|
document.querySelectorAll('.move-in').forEach(section => {
|
|
sectionObserver.observe(section)
|
|
})
|
|
}
|
|
function closePersonBio() {
|
|
const scrollY = document.body.style.top;
|
|
window.scrollTo(0, parseInt(scrollY || '0') * -1);
|
|
document.body.style.overflow = '';
|
|
document.body.style.top = 'initial';
|
|
document.getElementById('person_bio').animate([
|
|
{
|
|
opacity: 1,
|
|
transform: 'scale(1)'
|
|
},
|
|
{
|
|
opacity: 0,
|
|
transform: 'scale(1.1)'
|
|
}
|
|
], {
|
|
duration: 100,
|
|
easing: 'ease',
|
|
}).finished.then(animation => {
|
|
animation.commitStyles();
|
|
document.getElementById('person_bio').close()
|
|
})
|
|
}
|
|
|
|
const dataLists = [
|
|
{
|
|
target: 'methodology_list',
|
|
list: [
|
|
{
|
|
title: 'Title',
|
|
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.'
|
|
},
|
|
{
|
|
title: 'Title',
|
|
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.'
|
|
},
|
|
{
|
|
title: 'Title',
|
|
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.'
|
|
},
|
|
{
|
|
title: 'Title',
|
|
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.'
|
|
},
|
|
{
|
|
title: 'Title',
|
|
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.'
|
|
},
|
|
{
|
|
title: 'Title',
|
|
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.'
|
|
},
|
|
{
|
|
title: 'Title',
|
|
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.'
|
|
},
|
|
{
|
|
title: 'Title',
|
|
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.'
|
|
},
|
|
{
|
|
title: 'Title',
|
|
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.'
|
|
},
|
|
]
|
|
}
|
|
]
|
|
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |