Added Colourfull skill palate
This commit is contained in:
parent
203f75026e
commit
8480ad8d97
|
|
@ -1,4 +1,10 @@
|
|||
import { name, LanguagesKnown, description1, description2 } from "config";
|
||||
import {
|
||||
name,
|
||||
LanguagesKnown,
|
||||
LanguagesKnownCategory,
|
||||
description1,
|
||||
description2,
|
||||
} from "config";
|
||||
import { AboutStyle } from "./about.style";
|
||||
|
||||
function about() {
|
||||
|
|
@ -9,7 +15,7 @@ function about() {
|
|||
<div className="content">
|
||||
<p>{description1}</p>
|
||||
</div>
|
||||
<div className="lang-map">
|
||||
{/* <div className="lang-map">
|
||||
{LanguagesKnown.map((lang) => {
|
||||
return (
|
||||
<div className="lang-map-element" key={lang}>
|
||||
|
|
@ -17,6 +23,19 @@ function about() {
|
|||
</div>
|
||||
);
|
||||
})}
|
||||
</div> */}
|
||||
<div className="lang-map">
|
||||
{LanguagesKnownCategory.map((lang) => {
|
||||
return (
|
||||
<div
|
||||
className="lang-map-element"
|
||||
key={lang}
|
||||
style={{ backgroundColor: lang[Object.keys(lang)[0]] }}
|
||||
>
|
||||
#{Object.keys(lang)[0].toString()}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="content-2">
|
||||
<p>{description2}</p>
|
||||
|
|
|
|||
|
|
@ -64,12 +64,12 @@ export const AboutStyle = styled.div`
|
|||
border-radius: 20px;
|
||||
margin: 2px;
|
||||
/* background-color: #${Math.random().toString(16).substring(2, 6)}; */
|
||||
background: rgb(34, 193, 195);
|
||||
/* background: rgb(34, 193, 195);
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(34, 193, 195, 1) 0%,
|
||||
rgba(253, 187, 45, 1) 100%
|
||||
);
|
||||
); */
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
color: #f5f5f5;
|
||||
|
|
|
|||
|
|
@ -6,15 +6,17 @@ import ArtModel from "./artModal";
|
|||
|
||||
function Art() {
|
||||
return (
|
||||
<ArtStyle>
|
||||
{projects.map((project, index) => {
|
||||
return (
|
||||
<>
|
||||
<SkillCard key={index} {...project} />
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</ArtStyle>
|
||||
<>
|
||||
<ArtStyle>
|
||||
{projects.map((project, index) => {
|
||||
return (
|
||||
<>
|
||||
<SkillCard key={index} {...project} />
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</ArtStyle>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from "react";
|
|||
import ArtCardStyle from "./artCard.style";
|
||||
import ArtModel from "./artModal";
|
||||
|
||||
function SkillCard({ name, description, image, type, onClick }) {
|
||||
function SkillCard({ name, description, image, type, url, onClick }) {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
|
|
@ -21,7 +21,9 @@ function SkillCard({ name, description, image, type, onClick }) {
|
|||
</div>
|
||||
|
||||
<div className="date">
|
||||
<b>{name}</b>
|
||||
<b>
|
||||
<a href={url}>{name}</a>
|
||||
</b>
|
||||
</div>
|
||||
<div className="content">{description}</div>
|
||||
<div className="type">#{type}</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ export default styled.div`
|
|||
width: 230px;
|
||||
height: 320px;
|
||||
box-sizing: border-box;
|
||||
background-color: #8609d4;
|
||||
background-color: #5f046b;
|
||||
border-radius: 5px;
|
||||
margin: 5px;
|
||||
.type {
|
||||
|
|
|
|||
387
config.js
387
config.js
|
|
@ -18,7 +18,6 @@ export const description2 =
|
|||
export const LanguagesKnown = [
|
||||
"NodeJS",
|
||||
"Python",
|
||||
"TypeScript",
|
||||
"C++",
|
||||
"C",
|
||||
"SQL",
|
||||
|
|
@ -29,11 +28,65 @@ export const LanguagesKnown = [
|
|||
"Docker",
|
||||
"AWS",
|
||||
"GCP",
|
||||
"TypeScript",
|
||||
"Cloud Computing",
|
||||
"Git",
|
||||
"Linux",
|
||||
"NextJS",
|
||||
];
|
||||
export const projects = [
|
||||
|
||||
export const LanguagesKnownCategory = [
|
||||
{ NodeJS: "#026F01" },
|
||||
{ Python: "#3776AB" },
|
||||
{ "C++": "#CE3074" },
|
||||
{ C: "#5A5EA7" },
|
||||
{ SQL: "#FFCD00" },
|
||||
{ Rust: "#E02021" },
|
||||
{ Go: "#BFD641" },
|
||||
{ Bash: "#010100" },
|
||||
{ Java: "#FFCD00" },
|
||||
{ NextJS: "#010100" },
|
||||
{ Docker: "#00b7ff" },
|
||||
{ AWS: "#00A591" },
|
||||
{ TypeScript: "#FFCD00" },
|
||||
{ GCP: "#94DFE3" },
|
||||
{ "Cloud Computing": "#E00198" },
|
||||
{ Git: "#DD4132" },
|
||||
{ Linux: "#010100" },
|
||||
];
|
||||
|
||||
export const arts = [
|
||||
{
|
||||
name: "Karyl #1",
|
||||
type: "art",
|
||||
description: "Drawn Princess Connect : Re-Dive charecter #1",
|
||||
image: "/images/art/karyl-2-final-3b.png",
|
||||
url: "/images/art/karyl-2-final-3b.png",
|
||||
},
|
||||
{
|
||||
name: "Karyl #2",
|
||||
type: "art",
|
||||
description: "Drawn Princess Connect : Re-Dive charecter #2",
|
||||
image: "/images/art/karyl-2-final.png",
|
||||
url: "/images/art/karyl-2-final.png",
|
||||
},
|
||||
{
|
||||
name: "Ayaka",
|
||||
type: "art",
|
||||
description: "Drawing of Ayaka from the Genshin Impact game",
|
||||
image: "/images/art/H12M27S20.smoothed_careful.png",
|
||||
url: "/images/art/H12M27S20.smoothed_careful.png",
|
||||
},
|
||||
{
|
||||
name: "Kirby",
|
||||
type: "art",
|
||||
description: "A Student, Full Stack and DevOps Platform Developer",
|
||||
image: "/images/art/Final_best.png",
|
||||
url: "/images/art/Final_best.png",
|
||||
},
|
||||
];
|
||||
|
||||
var project = [
|
||||
{
|
||||
name: "URL Minify",
|
||||
type: "project",
|
||||
|
|
@ -41,6 +94,7 @@ export const projects = [
|
|||
"Open Source | URL Minify is a simple URL shortener service that allows you to shorten any URL and redirect to the original URL.",
|
||||
image:
|
||||
"https://user-images.githubusercontent.com/41448663/153746139-237f8e4d-be25-4f04-91ec-2bb3ff6f0e34.png",
|
||||
url: "https://github.com/BRAVO68WEB/url-minify",
|
||||
},
|
||||
{
|
||||
name: "API",
|
||||
|
|
@ -48,29 +102,326 @@ export const projects = [
|
|||
description:
|
||||
"Bravo68web API solely devloped by me to provide a data on and needed by me on daily basis.",
|
||||
image: "https://api.b68dev.xyz/logo",
|
||||
url: "https://api.b68dev.xyz/",
|
||||
},
|
||||
{
|
||||
name: "Karyl #1",
|
||||
type: "art",
|
||||
description: "Drawn Princess Connect : Re-Dive charecter #1",
|
||||
image: "/images/art/karyl-2-final-3b.png",
|
||||
name: "LPU Wifi Login",
|
||||
type: "project",
|
||||
description: "LPU Wifi Login Application to login to LPU Wifi network",
|
||||
image:
|
||||
"https://raw.githubusercontent.com/BRAVO68WEB/lpu-wifi-login/main/icons/logo.png",
|
||||
url: "https://github.com/BRAVO68WEB/lpu-wifi-login",
|
||||
},
|
||||
{
|
||||
name: "Karyl #2",
|
||||
type: "art",
|
||||
description: "Drawn Princess Connect : Re-Dive charecter #2",
|
||||
image: "/images/art/karyl-2-final.png",
|
||||
name: "LPU Live Chat",
|
||||
type: "project",
|
||||
description:
|
||||
"LPU Live Chat Application to chat with university students, teachers, etc..",
|
||||
image:
|
||||
"https://raw.githubusercontent.com/BRAVO68WEB/lpu-live-chat/main/icons/logo.png",
|
||||
url: "https://github.com/BRAVO68WEB/lpu-live-chat",
|
||||
},
|
||||
{
|
||||
name: "Ayaka",
|
||||
type: "art",
|
||||
description: "Drawing of Ayaka from the Genshin Impact game",
|
||||
image: "/images/art/H12M27S20.smoothed_careful.png",
|
||||
name: "Server Init Script",
|
||||
type: "project",
|
||||
description:
|
||||
"Server Init Script is a script to initialize the server and its services esp. Oracle Server",
|
||||
image: "https://logos-world.net/wp-content/uploads/2020/11/GitHub-Logo.png",
|
||||
url: "https://github.com/BRAVO68WEB/oracle-server-init",
|
||||
},
|
||||
{
|
||||
name: "Kirby",
|
||||
type: "art",
|
||||
description: "A Student, Full Stack and DevOps Platform Developer",
|
||||
image: "/images/art/Final_best.png",
|
||||
name: "GSSoC Website",
|
||||
type: "project",
|
||||
description: "Contributed to GSSoC website",
|
||||
image:
|
||||
"https://raw.githubusercontent.com/GSSoC-Web/gssoc-assets/main/Logos/GS_logo_Black.png",
|
||||
url: "https://github.com/girlscript/gssoc-website-new",
|
||||
},
|
||||
{
|
||||
name: "osu-spotify-yt-rest",
|
||||
type: "project",
|
||||
description:
|
||||
"osu-spotify-yt-rest is a REST API for connect osu! with Spotify and Youtube",
|
||||
image: "/images/projects/osu-project.jpg",
|
||||
url: "https://github.com/BRAVO68WEB/osu-spotify-yt-rest",
|
||||
},
|
||||
{
|
||||
name: "nodejs-auth-jwt-session",
|
||||
type: "project",
|
||||
description:
|
||||
"Made a NodeJS Authentication and JWT Session with Redis support",
|
||||
image: "https://logos-world.net/wp-content/uploads/2020/11/GitHub-Logo.png",
|
||||
url: "https://github.com/BRAVO68WEB/nodejs-auth-jwt-session",
|
||||
},
|
||||
{
|
||||
name: "simplify-cd",
|
||||
type: "project",
|
||||
description: "Made a CI/CD application to deploy any nodejs application",
|
||||
image: "https://logos-world.net/wp-content/uploads/2020/11/GitHub-Logo.png",
|
||||
url: "https://github.com/BRAVO68WEB/simplify-cd",
|
||||
},
|
||||
{
|
||||
name: "starship",
|
||||
type: "project",
|
||||
description: "Contributed to Starship project",
|
||||
image:
|
||||
"https://raw.githubusercontent.com/starship/starship/master/media/icon.png",
|
||||
url: "https://github.com/starship/starship",
|
||||
},
|
||||
{
|
||||
name: "qbadges",
|
||||
type: "project",
|
||||
description:
|
||||
"Made a npm package to fetch all the badges of a user from Qwiklabs",
|
||||
image: "https://logos-world.net/wp-content/uploads/2020/11/GitHub-Logo.png",
|
||||
url: "https://github.com/BRAVO68WEB/qbadges",
|
||||
},
|
||||
{
|
||||
name: "vscode-uipack",
|
||||
type: "project",
|
||||
description: "An Extension to make VSCode UI more beautiful",
|
||||
image:
|
||||
"https://raw.githubusercontent.com/BRAVO68WEB/vscode-uipack/master/icon.png",
|
||||
url: "https://github.com/BRAVO68WEB/vscode-uipack",
|
||||
},
|
||||
{
|
||||
name: "vector-vscode-devpack",
|
||||
type: "project",
|
||||
description:
|
||||
"An Extension to make VSCode more efficient consisting of great extentions",
|
||||
image:
|
||||
"https://github.com/BRAVO68WEB/vector-vscode-devpack/blob/master/icon.png?raw=true",
|
||||
url: "https://github.com/BRAVO68WEB/vector-vscode-devpack",
|
||||
},
|
||||
{
|
||||
name: "IRC",
|
||||
type: "project",
|
||||
description: "Made a simple IRC web application",
|
||||
image:
|
||||
"https://raw.githubusercontent.com/BRAVO68WEB/irc/master/client/src/icons/irc-icon.png",
|
||||
url: "https://github.com/BRAVO68WEB/irc",
|
||||
},
|
||||
{
|
||||
name: "propstar-theme",
|
||||
type: "project",
|
||||
description: "Made a theme for VSCode",
|
||||
image:
|
||||
"https://github.com/BRAVO68WEB/propstar-theme/raw/main/assets/icon.png",
|
||||
url: "https://github.com/BRAVO68WEB/propstar-theme",
|
||||
},
|
||||
{
|
||||
name: "yt-music-player",
|
||||
type: "project",
|
||||
description: "Made a YT Music Player",
|
||||
image: "https://logos-world.net/wp-content/uploads/2020/11/GitHub-Logo.png",
|
||||
url: "https://github.com/BRAVO68WEB/yt-music-player",
|
||||
},
|
||||
{
|
||||
name: "icyicons",
|
||||
type: "project",
|
||||
description: "Made a VSCode Iconpack",
|
||||
image:
|
||||
"https://raw.githubusercontent.com/BRAVO68WEB/icyicons/master/icon.png",
|
||||
url: "https://github.com/BRAVO68WEB/icyicons",
|
||||
},
|
||||
{
|
||||
name: "lpu-ca1-python-proj",
|
||||
type: "project",
|
||||
description: "My University Python Project on Voice AI Assistant",
|
||||
image: "https://logos-world.net/wp-content/uploads/2020/11/GitHub-Logo.png",
|
||||
url: "https://github.com/BRAVO68WEB/lpu-ca1-python-proj",
|
||||
},
|
||||
{
|
||||
name: "img-proxy",
|
||||
type: "project",
|
||||
description: "An Image Proxy Server",
|
||||
image: "https://logos-world.net/wp-content/uploads/2020/11/GitHub-Logo.png",
|
||||
url: "https://github.com/BRAVO68WEB/img-proxy",
|
||||
},
|
||||
{
|
||||
name: "appsmith-docs",
|
||||
type: "project",
|
||||
description: "Contributed to Appsmith Documentation",
|
||||
image: "https://avatars.githubusercontent.com/u/67620218",
|
||||
url: "https://github.com/appsmithorg/appsmith-docs",
|
||||
},
|
||||
{
|
||||
name: "nodejs-image-upload-api",
|
||||
type: "project",
|
||||
description: "A NodeJS Image Upload API",
|
||||
image: "https://logos-world.net/wp-content/uploads/2020/11/GitHub-Logo.png",
|
||||
url: "https://github.com/chirag3003/nodejs-image-upload-api",
|
||||
},
|
||||
{
|
||||
name: "OwO",
|
||||
type: "project",
|
||||
description: 'A Multi-Lingual approach to print "OwO"',
|
||||
image: "https://logos-world.net/wp-content/uploads/2020/11/GitHub-Logo.png",
|
||||
url: "https://github.com/BRAVO68WEB/OwO",
|
||||
},
|
||||
{
|
||||
name: "ImprovedTube",
|
||||
type: "project",
|
||||
description: "Contributed to ImprovedTube",
|
||||
image:
|
||||
"https://raw.githubusercontent.com/code-for-charity/YouTube-Extension/master/icons/128.png",
|
||||
url: "https://github.com/code-for-charity/YouTube-Extension",
|
||||
},
|
||||
{
|
||||
name: "Electron CPU meter",
|
||||
type: "project",
|
||||
description: "Created an Electron App to monitor CPU usage",
|
||||
image:
|
||||
"https://raw.githubusercontent.com/BRAVO68WEB/electron-cpu-meter/master/src/icon.ico",
|
||||
url: "https://github.com/BRAVO68WEB/electron-cpu-meter",
|
||||
},
|
||||
{
|
||||
name: "LastFM DiscordRPC",
|
||||
type: "project",
|
||||
description: "LastFM + Discord RPC integration",
|
||||
image: "/images/brandlogos/Lastfm-icon-vector-03.svg",
|
||||
url: "https://github.com/BRAVO68WEB/lastfm-discordrpc",
|
||||
},
|
||||
{
|
||||
name: "Bin Buster",
|
||||
type: "project",
|
||||
description: "A simple, fast and useful bruter for multiple paste sources.",
|
||||
image: "https://logos-world.net/wp-content/uploads/2020/11/GitHub-Logo.png",
|
||||
url: "https://github.com/BRAVO68WEB/bin-buster",
|
||||
},
|
||||
{
|
||||
name: "LPU 2nd Sem Project",
|
||||
type: "project",
|
||||
description: "My University 2nd Sem Project on Web Development",
|
||||
image: "https://logos-world.net/wp-content/uploads/2020/11/GitHub-Logo.png",
|
||||
url: "https://github.com/BRAVO68WEB/lpu-2nd-sem-project",
|
||||
},
|
||||
{
|
||||
name: "Randomizer",
|
||||
type: "project",
|
||||
description:
|
||||
"A Random string encryptor w.r.t. Timestamps to add Security to your Web Application",
|
||||
image: "https://logos-world.net/wp-content/uploads/2020/11/GitHub-Logo.png",
|
||||
url: "https://github.com/BRAVO68WEB/Randomizer",
|
||||
},
|
||||
{
|
||||
name: "url-short-cfw",
|
||||
type: "project",
|
||||
description: "An Custom URL Shortener build on CloudFlare Worker Platform",
|
||||
image:
|
||||
"https://cdn.hashnode.com/res/hashnode/image/upload/v1624006530365/Ku95JYafL.jpeg",
|
||||
url: "https://github.com/BRAVO68WEB/url-short-cfw",
|
||||
},
|
||||
{
|
||||
name: "2048",
|
||||
type: "project",
|
||||
description:
|
||||
"An PWA instance of 2048 build with Javascript. Also added to KaiOS project",
|
||||
image:
|
||||
"https://raw.githubusercontent.com/BRAVO68WEB/KaiOS-2048/main/assets/favicons/ms-icon-310x310.png",
|
||||
url: "https://github.com/BRAVO68WEB/2048",
|
||||
},
|
||||
{
|
||||
name: "MERN LPU HRD Project",
|
||||
type: "project",
|
||||
description: "An MERN Stack Project created for LPU HRD",
|
||||
image: "https://logos-world.net/wp-content/uploads/2020/11/GitHub-Logo.png",
|
||||
url: "https://github.com/BRAVO68WEB/mern-lpu-hrd-project",
|
||||
},
|
||||
{
|
||||
name: "Britta/discord-music-bot",
|
||||
type: "project",
|
||||
description: "Contributed to Britta Discord Music Bot (verified bot)",
|
||||
image:
|
||||
"https://raw.githubusercontent.com/b3h3m0th/britta_discord-music-bot/master/assets/img/brittaBanner.png",
|
||||
url: "https://github.com/b3h3m0th/britta_discord-music-bot",
|
||||
},
|
||||
{
|
||||
name: "Flutter Portfolio",
|
||||
type: "project",
|
||||
description: "My Portfolio made with Flutter Web framework",
|
||||
image: "https://logos-world.net/wp-content/uploads/2020/11/GitHub-Logo.png",
|
||||
url: "https://github.com/BRAVO68WEB/Portfolio-About",
|
||||
},
|
||||
{
|
||||
name: "Hexo Webnary Theme",
|
||||
type: "project",
|
||||
description: "A Fully Customised Hexo Flat Modular Theme",
|
||||
image: "https://logos-world.net/wp-content/uploads/2020/11/GitHub-Logo.png",
|
||||
url: "https://github.com/BRAVO68WEB/hexo-webnary-theme",
|
||||
},
|
||||
{
|
||||
name: "HOTEL_AND_TRANS_RES",
|
||||
type: "project",
|
||||
description: "Hotel and transportation reservation management",
|
||||
image: "https://logos-world.net/wp-content/uploads/2020/11/GitHub-Logo.png",
|
||||
url: "https://github.com/BRAVO68WEB/HOTEL_AND_TRANS_RES",
|
||||
},
|
||||
{
|
||||
name: "Hexo",
|
||||
type: "project",
|
||||
description: "Got my theme added to official Hexojs Community website",
|
||||
image:
|
||||
"https://raw.githubusercontent.com/hexojs/logo/master/hexo-logo-avatar.png",
|
||||
url: "https://github.com/hexojs/hexo",
|
||||
},
|
||||
{
|
||||
name: "Just-Some-Bots/MusicBot",
|
||||
type: "project",
|
||||
description: "Contributed to Just-Some-Bots/MusicBot",
|
||||
image: "https://avatars.githubusercontent.com/u/22779351",
|
||||
url: "https://github.com/Just-Some-Bots/MusicBot",
|
||||
},
|
||||
{
|
||||
name: "Github Profile Readme Generator",
|
||||
type: "project",
|
||||
description: "Contributed to Github Profile Readme Generator",
|
||||
image:
|
||||
"https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/mdg.png",
|
||||
url: "https://github.com/rahuldkjain/github-profile-readme-generator",
|
||||
},
|
||||
{
|
||||
name: "npm package - encrypted-randomizer",
|
||||
type: "project",
|
||||
description:
|
||||
"A Random string encryptor w.r.t. Timestamps to add Security to your Web Application",
|
||||
image:
|
||||
"https://raw.githubusercontent.com/npm/logos/master/npm%20logo/classic/npm-2009.png",
|
||||
url: "https://www.npmjs.com/package/encrypted-randomizer",
|
||||
},
|
||||
{
|
||||
name: "npm package - gen-dockerfile",
|
||||
type: "project",
|
||||
description: "Generate Dockerfile from Dockerfile.template",
|
||||
image:
|
||||
"https://raw.githubusercontent.com/npm/logos/master/npm%20logo/classic/npm-2009.png",
|
||||
url: "https://www.npmjs.com/package/gen-dockerfile",
|
||||
},
|
||||
{
|
||||
name: "npm package - qbadges",
|
||||
type: "project",
|
||||
description: "Generate badges for your GitHub profile",
|
||||
image:
|
||||
"https://raw.githubusercontent.com/npm/logos/master/npm%20logo/classic/npm-2009.png",
|
||||
url: "https://www.npmjs.com/package/qbadges",
|
||||
},
|
||||
{
|
||||
name: "npm package - @bravo68web/hexo-webnary-theme",
|
||||
type: "project",
|
||||
description: "Hexo Plugin for hexo-webnary-theme",
|
||||
image:
|
||||
"https://raw.githubusercontent.com/npm/logos/master/npm%20logo/classic/npm-2009.png",
|
||||
url: "https://www.npmjs.com/package/@bravo68web/hexo-webnary-theme",
|
||||
},
|
||||
{
|
||||
name: "Ampr Music",
|
||||
type: "project",
|
||||
description: "Made a simple music webapp",
|
||||
image:
|
||||
"https://raw.githubusercontent.com/BRAVO68WEB/ampr-music/master/assets/logo.png",
|
||||
url: "https://github.com/BRAVO68WEB/ampr-music/",
|
||||
},
|
||||
];
|
||||
|
||||
// export const projects = project.sort(() => Math.random() - 0.5);
|
||||
export const projects = project;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 354 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Loading…
Reference in New Issue