Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Demo Section Improved #81

Merged
merged 1 commit into from
May 17, 2024
+142 −84
Merged

Demo Section Improved #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"@tsparticles/react": "^3.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^5.2.1",
"react-router-dom": "^6.23.1",
"react-slick": "^0.30.2",
"slick-carousel": "^1.8.1",
Expand Down
22 changes: 22 additions & 0 deletions src/components/DemoConstants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
export const technologyExplanations = [
{
title: "ReactJS",
context: "ReactJS is a popular JavaScript library for building user interfaces, particularly for single-page applications. It's known for its component-based architecture, which allows developers to create reusable UI components. In the context of this project, ReactJS is used for developing the frontend of the app, handling user interactions, and managing the application state.",
},
{
title: "ThreeJS",
context: "ThreeJS is a JavaScript library used for creating and displaying 3D graphics in web browsers. It provides APIs for creating and manipulating 3D objects, scenes, and animations using WebGL, a JavaScript API for rendering interactive 3D graphics. In this project, ThreeJS is likely used to render the historical maps and 3D elements in the augmented reality environment.",
},
{
title: "Unity",
context: "Unity is a powerful and widely used game development platform that supports the creation of games and interactive experiences across various platforms, including desktop, mobile, and virtual reality (VR). In the context of this project, Unity will likely be used to develop more advanced AR/VR features, such as immersive environments, interactions, and animations.",
},
{
title: "WebGL",
context: "WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D graphics within any compatible web browser without the use of plug-ins. It is based on OpenGL ES and provides a low-level interface for rendering 3D graphics in web applications. WebGL is likely used in conjunction with ThreeJS and Unity to render 3D graphics and scenes in the web browser.",
},
{
title: "AR/VR tools",
context: "Various AR/VR tools and frameworks may be used to enhance the augmented reality experience in the app. These tools could include ARKit and ARCore for mobile AR, as well as VR frameworks like Oculus SDK or SteamVR for virtual reality experiences. These tools provide capabilities such as motion tracking, spatial mapping, and gesture recognition, which are essential for creating immersive AR/VR experiences.",
}
];
3 changes: 1 addition & 2 deletions src/components/DemoSection.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.demo-container {
text-align: center;
width: 50%;
/* width: 50%; */
margin-inline: auto;
}

Expand Down Expand Up @@ -45,7 +45,6 @@
font-size: 24px;
}

.technology-explanation p,
.resource-column ul {
text-align: center;
color: #fff;
Expand Down
172 changes: 90 additions & 82 deletions src/components/DemoSection.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,90 +1,98 @@
import React, {Fragment} from "react";
import React, { Fragment } from "react";
import "./DemoSection.css";
import { technologyExplanations } from "./DemoConstants";
import { RiReactjsLine } from "react-icons/ri";
import { TbBrandThreejs } from "react-icons/tb";
import { FaUnity, FaVrCardboard } from "react-icons/fa";
import { SiWebgl } from "react-icons/si";

const DemoSection = () => {
return (
<div className="demo-container">
<h2 className="text-5xl font-bold my-8">Demo Section</h2>
<div className="video-container">
<iframe
src="https://www.youtube.com/embed/o9pNopC1BMU?autoplay=1&loop=1&playlist=o9pNopC1BMU&rel=0"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
className="mx-auto"
></iframe>
</div>
<p className="demo-description font-thin">
Take a sneak peek into our time-traveling adventures! Explore simulations,
historical reenactments, and futuristic scenarios that will transport you through
the ages.
</p>
<div className="technology-explanation">
<h2 className="font-bold text-3xl my-4">Technology Used</h2>
<p className="mb-6">
<b>1. ReactJS : </b> ReactJS is a popular JavaScript library for building user
interfaces, particularly for single-page applications. It's known for its
component-based architecture, which allows developers to create reusable UI
components. In the context of this project, ReactJS is used for developing the
frontend of the app, handling user interactions, and managing the application
state.
</p>
<p className="mb-6">
<b>2. ThreeJS : </b> ThreeJS is a JavaScript library used for creating and
displaying 3D graphics in web browsers. It provides APIs for creating and
manipulating 3D objects, scenes, and animations using WebGL, a JavaScript API
for rendering interactive 3D graphics. In this project, ThreeJS is likely used
to render the historical maps and 3D elements in the augmented reality
environment.
</p>
<p className="mb-6">
<b>3. Unity : </b> Unity is a powerful and widely used game development platform
that supports the creation of games and interactive experiences across various
platforms, including desktop, mobile, and virtual reality (VR). In the context
of this project, Unity will likely be used to develop more advanced AR/VR
features, such as immersive environments, interactions, and animations.
</p>
<p className="mb-6">
<b>4. WebGL : </b>WebGL (Web Graphics Library) is a JavaScript API for rendering
interactive 3D graphics within any compatible web browser without the use of
plug-ins. It is based on OpenGL ES and provides a low-level interface for
rendering 3D graphics in web applications. WebGL is likely used in conjunction
with ThreeJS and Unity to render 3D graphics and scenes in the web browser.
</p>
<p className="mb-6">
<b>5. AR/VR tools : </b> Various AR/VR tools and frameworks may be used to
enhance the augmented reality experience in the app. These tools could include
ARKit and ARCore for mobile AR, as well as VR frameworks like Oculus SDK or
SteamVR for virtual reality experiences. These tools provide capabilities such
as motion tracking, spatial mapping, and gesture recognition, which are
essential for creating immersive AR/VR experiences.
</p>
</div>
<div className="resource-column">
<p><b>Resources</b></p>
<ul>
<li>
<span className="logos--unity"></span>
<a href="https://docs.unity3d.com/Manual/index.html">Unity
Docs</a>
</li>
<li>
<span className="mdi--script"></span>
<a href="https://docs.unity3d.com/ScriptReference/">Script Reference</a>
</li>
<li>
<span className="icon-park-outline--api"></span>
<a href="http://www.google.com">API Reference</a>
</li>
<li>
<span className="logos--unity"></span>
<a href="https://unity.com/learn/get-started">Unity Learning</a>
</li>
</ul>
const icons = [
<RiReactjsLine key="react" />,
<TbBrandThreejs key="three" />,
<FaUnity key="unity" />,
<SiWebgl key="webgl" />,
<FaVrCardboard key="arvr" />,
];

return (
<div className="demo-container md:px-32">
<h2 className="text-5xl font-bold my-16">Demo Section</h2>
<div className="md:w-2/3 mx-auto">
<div
className="video-container p-2 md:p-6 my-8 bg-gradient-to-b from-black to-sky-900 via-sky-600
rounded-2xl shadow-[0px_5px_25px_2px_#2a4365] "
>
<iframe
src="https://www.youtube.com/embed/o9pNopC1BMU?autoplay=1&loop=1&playlist=o9pNopC1BMU&rel=0"
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
className="mx-auto rounded-2xl"
></iframe>
</div>
<p className="demo-description font-thin text-center">
Take a sneak peek into our time-traveling adventures! Explore
simulations, historical reenactments, and futuristic scenarios that
will transport you through the ages.
</p>
</div>
<div className="technology-explanation">

{/* Horizontal Line for separation */}
<hr className="h-0.05 bg-white my-12 opacity-30" />

{/* Technology Used */}
<h2 className="font-bold text-4xl mb-6 pt-6">Technology Used</h2>

<div className="md:grid grid-cols-2 md:gap-10 md:w-2/3 mx-auto md:px-2 px-4">
{/* Mapping Data from DemoConstant.js into cards */}
{technologyExplanations.map((explanation, index) => (
// Cards
<div key={index} className={`max-w-lg mx-auto my-16 md:my-8 overflow-hidden
bg-neutral-100 rounded-lg hover:scale-105 transition
${index === 4 ? 'md:ml-[15vw] md:w-full' : ''}`}
>
<div className="flex items-center justify-center bg-sky-700 py-4">
<div className="text-3xl text-neutral-200">{icons[index]}</div>
</div>
<div className="px-6 py-4">
<h1 className="font-bold text-xl text-gray-800 mb-2"> {explanation.title} </h1>
<p className="text-gray-700">{explanation.context}</p>
</div>
</div>
))}
</div>
);

</div>
<div className="resource-column bg-gradient-to-b from-black to-sky-900 rounded-xl">
<p>
<b>Resources</b>
</p>
<ul>
<li>
<span className="logos--unity"></span>
<a href="https://docs.unity3d.com/Manual/index.html">Unity Docs</a>
</li>
<li>
<span className="mdi--script"></span>
<a href="https://docs.unity3d.com/ScriptReference/">
Script Reference
</a>
</li>
<li>
<span className="icon-park-outline--api"></span>
<a href="http://www.google.com">API Reference</a>
</li>
<li>
<span className="logos--unity"></span>
<a href="https://unity.com/learn/get-started">Unity Learning</a>
</li>
</ul>
</div>
</div>
);
};

export default DemoSection;