Skip to content

Commit

Permalink
feat: Add radar, HUD and content
Browse files Browse the repository at this point in the history
  • Loading branch information
vigneshd332 committed Jun 24, 2024
1 parent 9595d86 commit 982733e
Show file tree
Hide file tree
Showing 25 changed files with 619 additions and 66 deletions.
4 changes: 3 additions & 1 deletion src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import WorldHome from "./ui/pages/WorldHome/WorldHome";
import AboutPage from "./ui/pages/AboutPage/AboutPage";
import StartPage from "./ui/pages/StartPage/StartPage";
import styles from "./App.module.css";

function App(): JSX.Element {
Expand All @@ -9,7 +10,8 @@ function App(): JSX.Element {
<Router>
<Routes>
<Route path="/">
<Route index element={<WorldHome />} />
<Route index element={<StartPage />} />
<Route path="world" element={<WorldHome />} />
<Route path="about" element={<AboutPage />} />
</Route>
</Routes>
Expand Down
Binary file added src/assets/dvote.webp
Binary file not shown.
Binary file modified src/assets/god.webp
Binary file not shown.
Binary file added src/assets/portfolio-about.webp
Binary file not shown.
Binary file added src/assets/portfolio.webp
Binary file not shown.
27 changes: 26 additions & 1 deletion src/ui/components/About/About.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,9 @@
letter-spacing: 1px;
max-width: min(850px, var(--margin-provider));
line-height: 1.7rem;
max-height: 55vh;
overflow: auto;
margin-bottom: 2rem;
}

.links {
Expand All @@ -118,10 +121,29 @@
margin-right: 0.5rem;
}

.socials {
display: flex;
flex-direction: row;
justify-content: space-around;
width: 50%;
}

.socialIcon {
height: auto;
width: 2rem;
filter: invert(1);
transition: var(--transition-fast);
}

.socialIcon:hover {
transition: var(--transition-slow);
filter: invert(0.7);
}

@supports (backdrop-filter: blur(2px)) {
.About {
backdrop-filter: blur(2px);
background-color: #00000077;
background-color: #000000cc;
}
}

Expand All @@ -141,6 +163,9 @@
.navTitle {
font-size: 1.5rem;
}
.socials {
width: 80%;
}
}

@media screen and (max-width: 450px) {
Expand Down
56 changes: 50 additions & 6 deletions src/ui/components/About/About.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@ import { useEffect } from "react";
import TxtRotate from "../../helpers/TypeCarousel";
import styles from "./About.module.css";
import god from "../../../assets/god.webp";
import linkedin from "../../../assets/linkedin.svg";
import github from "../../../assets/github.svg";
import instagram from "../../../assets/instagram.svg";
import twitter from "../../../assets/twitter.svg";

const About = (): JSX.Element => {
useEffect(() => {
Expand All @@ -23,7 +27,7 @@ const About = (): JSX.Element => {
<button
className={styles.aboutNavButton}
onClick={() => {
window.location.pathname = "/";
window.location.pathname = "/world";
}}
>
GO TO WORLD
Expand All @@ -37,11 +41,51 @@ const About = (): JSX.Element => {
</div>
<div className={styles.doGodsHaveToGiveIntros}>
Hey! I'm Vignesh, a software developer who also knows iron and steel
making &#40;can't say I'm very fond of it&#41; and a junior at NIT
Trichy. I love taking on challenges that are out of the ordinary and
doings things that I haven't done before. In my free-time, you can
find me producing music, sipping on Coffee or just wondering why
Linux is so damn good.
making &#40;can't say I'm very fond of it&#41; and a graduate from
NIT Trichy &#40;batch of 2024&#41;. I love taking on challenges that
are out of the ordinary and doings things that I haven't done
before. In my free-time, you can find me producing music or sipping
on coffee. I've currently taken an interest to game development and
am learing about shader programming. Feel free to reach out to me on
my socials for a chat :&#41;
</div>
<div className={styles.socials}>
<a
href="https://www.instagram.com/netrunner._/"
target="_blank"
rel="noreferrer"
>
<img
className={styles.socialIcon}
src={instagram}
alt="Instagram"
/>
</a>
<a
href="https://www.linkedin.com/in/vduraisamy/"
target="_blank"
rel="noreferrer"
>
<img
className={styles.socialIcon}
src={linkedin}
alt="LinkedIn"
/>
</a>
<a
href="https://www.github.com/vigneshd332"
target="_blank"
rel="noreferrer"
>
<img className={styles.socialIcon} src={github} alt="GitHub" />
</a>
<a
href="https://www.twitter.com/HBM2E"
target="_blank"
rel="noreferrer"
>
<img className={styles.socialIcon} src={twitter} alt="Twitter" />
</a>
</div>
<div className={styles.links}>
<button className={styles.link}>
Expand Down
11 changes: 9 additions & 2 deletions src/ui/components/Card/Card.module.css
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
.card {
width: 100%;
height: 500px;
height: 550px;
max-width: 450px;
background-color: #3a3a3a;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 1rem;
}

.cardImg {
Expand All @@ -30,7 +34,7 @@
padding: 0.7rem;
font-size: 1.1rem;
font-family: "Poppins";
max-height: 130px;
max-height: 150px;
overflow: auto;
}

Expand All @@ -47,6 +51,9 @@
}

@media screen and (max-width: 500px) {
.card {
padding-bottom: 0;
}
.cardImg > img {
height: 200px;
}
Expand Down
2 changes: 1 addition & 1 deletion src/ui/components/Experience/data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import github from "../../../assets/github.svg";
export const cardData: CardData[] = [
{
img: citi,
title: "Citi",
title: "Citi - Internship",
text: "Developed an update automation tool for creating update snapshots for the OpenLink Endur application. The tool was used by the team to automate the process of creating update snapshots, saving hours of manual work. Developed a node-wise XML comparison tool for comparing the XML Feeds of the Endur application's subcomponents.",
websites: [{ icon: globe, url: "https://www.citi.com/" }],
},
Expand Down
67 changes: 67 additions & 0 deletions src/ui/components/PlayerHUD/PlayerHUD.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
.playerRadar {
position: absolute;
bottom: 0;
height: 25vh;
width: 25vh;
min-width: 10rem;
min-height: 10rem;
background-color: var(--world-ui-color-bg);
}

.playerRadar canvas {
width: 100%;
height: 100%;
}

.playerStats {
position: absolute;
bottom: 0;
right: 0;
height: 25vh;
width: 40vh;
min-height: 10rem;
min-width: 15rem;
background-color: var(--world-ui-color-bg);
}

.playerStatsContainer {
display: flex;
flex-direction: column;
justify-content: space-evenly;
height: 100%;
margin: 1rem;
margin-top: 0;
}

.playerStatsItem {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}

.playerStatsLabel {
font-size: 1rem;
}

.playerStatsValue {
font-size: 1rem;
}

@media screen and (max-width: 768px) {
.playerRadar {
height: 15vh;
width: 15vh;
min-height: 8rem;
min-width: 8rem;
bottom: calc(50% - max(15vh / 2, 8rem / 2));
}

.playerStats {
height: 15vh;
width: 15vh;
min-height: 8rem;
min-width: 10rem;
left: 0;
}
}
37 changes: 37 additions & 0 deletions src/ui/components/PlayerHUD/PlayerHUD.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import styles from "./PlayerHUD.module.css";

const PlayerControls = ({ gameStart, hudData }: ControlProps): JSX.Element => {
return (
<div style={{ visibility: gameStart ? "visible" : "hidden" }}>
<div className={styles.playerRadar}>
<canvas id="radar-canvas" className={styles.playerRadarCanvas}></canvas>
</div>{" "}
<div className={styles.playerStats}>
<div className={styles.playerStatsContainer}>
<div className={styles.playerStatsItem}>
<span className={styles.playerStatsLabel}>Aircraft:</span>
<span className={styles.playerStatsValue}>{hudData.name}</span>
</div>
<div className={styles.playerStatsItem}>
<span className={styles.playerStatsLabel}>Speed:</span>
<span className={styles.playerStatsValue}>
{hudData.speed} km/h
</span>
</div>
<div className={styles.playerStatsItem}>
<span className={styles.playerStatsLabel}>Altitude:</span>
<span className={styles.playerStatsValue}>
{hudData.altitude} ft
</span>
</div>
<div className={styles.playerStatsItem}>
<span className={styles.playerStatsLabel}>Bank Angle:</span>
<span className={styles.playerStatsValue}>{hudData.roll}°</span>
</div>
</div>
</div>
</div>
);
};

export default PlayerControls;
25 changes: 24 additions & 1 deletion src/ui/components/Projects/data.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,40 @@
import dwoc from "../../../assets/dwoc.webp";
import proximity from "../../../assets/proximity.webp";
import code from "../../../assets/codecharacter.webp";
import dvote from "../../../assets/dvote.webp";
import portfolio from "../../../assets/portfolio.webp";
import globe from "../../../assets/globe.svg";
import github from "../../../assets/github.svg";

export const cardData: CardData[] = [
{
img: code,
title: "Code Character | A strategy based programming game",
text: "Developed the Renderer for the game using Phaser. Designed and Developed an intuitive UI with robust State Management using React and Redux.",
text: "Developed a proxy web driver to handle C++, Java and Python language servers for the game's editor using Golang. Developed the Renderer and Log Parser for the game using Phaser. Designed and Developed an intuitive UI with React and Redux.",
websites: [
{ icon: globe, url: "https://code.pragyan.org" },
{ icon: github, url: "https://github.com/delta/codecharacter-web-2022" },
{ icon: github, url: "https://github.com/delta/codecharacter-lsp-2023" },
],
},
{
img: portfolio,
title: "Vignesh Duraisamy | Portfolio",
text: "Designed and Developed an interactive 3D portfolio with THREE.js and React to show my projects and past work experiences. Integrated various 3D models of aircraft and ships to show a game like portfolio where users can click on relevant links and icons to view information about me.",
websites: [
{ icon: globe, url: "https://net-runner.dev/" },
{ icon: github, url: "https://github.com/vigneshd332/portfolio" },
],
},
{
img: dvote,
title: "D-Vote | A ZKP based decentralized voting platform",
text: "DVote is a decentralized Zero Knowledge Proof based voting application ingeniously harnessing the transformative potential of blockchain technology. This innovative platform revolutionizes the traditional voting paradigm by adopting a decentralized approach, mitigating reliance on a centralized authority.",
websites: [
{
icon: github,
url: "https://github.com/suhailahmed2627/dvote-frontend",
},
],
},
{
Expand Down
10 changes: 5 additions & 5 deletions src/ui/components/WorldUI/WorldUI.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const WorldUI = (): JSX.Element => {
<div className={styles.worldUI}>
<div className={styles.worldUINavContainer}>
<div className={styles.worldUINav}>
<h2 className={styles.theChosenOne}>Vignesh's World</h2>
<h2 className={styles.theChosenOne}>Vignesh Duraisamy</h2>
<div className={styles.navButtons}>
<button
className={styles.navButton}
Expand All @@ -37,9 +37,9 @@ const WorldUI = (): JSX.Element => {
<div className={styles.instructions}>
<div className={styles.instructionListItem}>
<p>
• This is supposed to be an interactive portfolio. Its work in
progress, but feel free to have a look around. To see a simpler
version click the about button.
• This is an interactive portfolio. Its work in progress, but feel
free to have a look around. To see a simpler version click the
about button.
</p>
</div>
<div className={styles.instructionListItem}>
Expand All @@ -63,7 +63,7 @@ const WorldUI = (): JSX.Element => {
<p>• Click on text and icons to interact .</p>
</div>
<div className={styles.instructionListItem}>
<p>Welcome again :&#41;</p>
<p>Have a look :&#41;</p>
</div>
</div>
<div className={styles.startMessage}>
Expand Down
12 changes: 12 additions & 0 deletions src/ui/components/types.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,15 @@ interface CardData {
text: string;
websites: Icon[];
}

interface ControlProps {
gameStart: boolean;
hudData: HUDData;
}

interface HUDData {
name: string;
speed: number;
altitude: number;
roll: number;
}
Loading

0 comments on commit 982733e

Please sign in to comment.