Change website to use portfolify
18
.eslintrc.cjs
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
env: { browser: true, es2020: true },
|
||||||
|
extends: [
|
||||||
|
'eslint:recommended',
|
||||||
|
'plugin:@typescript-eslint/recommended',
|
||||||
|
'plugin:react-hooks/recommended',
|
||||||
|
],
|
||||||
|
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||||
|
parser: '@typescript-eslint/parser',
|
||||||
|
plugins: ['react-refresh'],
|
||||||
|
rules: {
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
||||||
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
30
README.md
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
# React + TypeScript + Vite
|
||||||
|
|
||||||
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||||
|
|
||||||
|
Currently, two official plugins are available:
|
||||||
|
|
||||||
|
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||||
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||||
|
|
||||||
|
## Expanding the ESLint configuration
|
||||||
|
|
||||||
|
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
|
||||||
|
|
||||||
|
- Configure the top-level `parserOptions` property like this:
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
// other rules...
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 'latest',
|
||||||
|
sourceType: 'module',
|
||||||
|
project: ['./tsconfig.json', './tsconfig.node.json'],
|
||||||
|
tsconfigRootDir: __dirname,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
|
||||||
|
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
|
||||||
|
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
|
||||||
|
Before Width: | Height: | Size: 550 KiB |
BIN
data/dark.png
|
Before Width: | Height: | Size: 238 B |
BIN
data/hippo.ttf
BIN
data/hurmit.otf
BIN
data/light.png
|
Before Width: | Height: | Size: 178 B |
|
Before Width: | Height: | Size: 128 KiB |
@@ -1,75 +0,0 @@
|
|||||||
@font-face {
|
|
||||||
font-family: "Hippo";
|
|
||||||
src: url('hippo.ttf');
|
|
||||||
}
|
|
||||||
|
|
||||||
.stackedit__html {
|
|
||||||
max-width: 900px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
color: #000;
|
|
||||||
font-family: 'Poppins', sans-serif;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
background-color: #1F415E;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
color: white;
|
|
||||||
padding: 15px;
|
|
||||||
text-decoration: none;
|
|
||||||
border: 0px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-family: 'Hippo';
|
|
||||||
letter-spacing: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1::after {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
color: #1F415E;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-family: 'Hippo';
|
|
||||||
}
|
|
||||||
|
|
||||||
h2::after {
|
|
||||||
border-bottom: 1px solid #1F415E;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
color: #EC8934;
|
|
||||||
font-family: 'Hippo';
|
|
||||||
}
|
|
||||||
|
|
||||||
table, thead, tbody, th, tr, td {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
background-color: #EC8934;
|
|
||||||
color: white;
|
|
||||||
border-left: 1px solid white;
|
|
||||||
border-right: 1px solid white;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr {
|
|
||||||
border-left: 1px solid white;
|
|
||||||
border-right: 1px solid white;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
tr:nth-child(odd) {
|
|
||||||
background-color: #f2f2f2; /* Or any color you fancy */
|
|
||||||
}
|
|
||||||
|
|
||||||
.thanks {
|
|
||||||
text-align: center;
|
|
||||||
font-family: 'Hippo';
|
|
||||||
color: #EC8934;
|
|
||||||
font-size: 60px;
|
|
||||||
}
|
|
||||||
109
data/styles.css
@@ -1,109 +0,0 @@
|
|||||||
@import "https://www.nerdfonts.com/assets/css/webfont.css";
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Noto Math';
|
|
||||||
src: url('noto-math.ttf');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SilicoHand';
|
|
||||||
src: url('silicohand.ttf');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Hurmit';
|
|
||||||
src: url('hurmit.otf');
|
|
||||||
}
|
|
||||||
|
|
||||||
.stackedit__html {
|
|
||||||
max-width: 900px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
color: #000;
|
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* color: #FFC000; */
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
background-color: #8546F0;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
color: white;
|
|
||||||
padding: 15px;
|
|
||||||
text-decoration: none;
|
|
||||||
border: 0px;
|
|
||||||
font-family: 'SilicoHand';
|
|
||||||
/* text-transform: uppercase; */
|
|
||||||
}
|
|
||||||
|
|
||||||
h1::after {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
color: #8546F0;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2::after {
|
|
||||||
border-bottom: 1px solid #8546F0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
color: #FF00FF;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.katex-html {
|
|
||||||
color: #0A2342;
|
|
||||||
/* font-weight: bolder; */
|
|
||||||
font-family: 'Noto Math';
|
|
||||||
}
|
|
||||||
|
|
||||||
.katex--inline {
|
|
||||||
color: #0A2342;
|
|
||||||
/* font-weight: bolder; */
|
|
||||||
font-family: 'Noto Math';
|
|
||||||
}
|
|
||||||
|
|
||||||
div.logo {
|
|
||||||
text-align: right;
|
|
||||||
font-size: 30px;
|
|
||||||
font-family: 'SilicoHand';
|
|
||||||
}
|
|
||||||
|
|
||||||
.silicoflare {
|
|
||||||
font-family: 'SilicoHand';
|
|
||||||
}
|
|
||||||
|
|
||||||
.silicoflare::before {
|
|
||||||
content: "Silico";
|
|
||||||
color: #7F00FF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.silicoflare::after {
|
|
||||||
content: "Flare";
|
|
||||||
color: #FF4500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sif-font-silicohand {
|
|
||||||
font-family: 'SilicoHand';
|
|
||||||
}
|
|
||||||
|
|
||||||
.sif-text-orange {
|
|
||||||
color: #FF4500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sif-text-purple {
|
|
||||||
color: #7F00FF;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
font-family: "Hurmit";
|
|
||||||
}
|
|
||||||
|
|
||||||
.token {
|
|
||||||
font-family: "Hurmit";
|
|
||||||
}
|
|
||||||
BIN
data/ubuntu.ttf
BIN
favicon.ico
|
Before Width: | Height: | Size: 6.0 KiB |
45
index.html
@@ -1,44 +1,13 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Home - SilicoFlare</title>
|
<title>SilicoFlare</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="silicoflare.css">
|
|
||||||
<link class="styles" rel="stylesheet" href="silicoflare_dark.css">
|
|
||||||
<script src="silicoflare.js"></script>
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="modeSel" onclick="changeMode()" onmouseenter="hoverIn()" onmouseleave="hoverOut()"><img id="mode" src="data/dark.png" alt="dark_mode" onmouseenter="hoverIn()" onmouseleave="hoverOut()"></div>
|
<div id="root"></div>
|
||||||
<span class="tooltip">Dark Mode</span>
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
<header class="pc">
|
|
||||||
<div class="heading">SilicoFlare</div>
|
|
||||||
<div class="menu selected">Home</div>
|
|
||||||
<div class="menu">About Me</div>
|
|
||||||
<div class="menu">Creations</div>
|
|
||||||
<div class="menu">Contact</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<header class="phone">
|
|
||||||
<div class="heading-ph">SilicoFlare</div>
|
|
||||||
<div class="ham" onclick="hamburger()">☰</div>
|
|
||||||
<div id="ph-links">
|
|
||||||
<div class="menu-ph selected">Home</div>
|
|
||||||
<div class="menu-ph">About Me</div>
|
|
||||||
<div class="menu-ph">Creations</div>
|
|
||||||
<div class="menu-ph">Contact</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div id="overlay"> </div>
|
|
||||||
<div class="bigtext">The name is Flare...</div>
|
|
||||||
<div class="bigtext"><span class="si">Silico</span><span class="f">Flare</span></div>
|
|
||||||
<br><br><br>
|
|
||||||
<main class="centred">
|
|
||||||
Welcome to my world! You would already have seen a significance difference in the looks of my homepage. Yes! I am redesigning it with all the skills I'm learning. Only the homepage is changed, but I'll be changing other pages too! Since other pages are under construction, they have been temporarily removed from my website, so I'm sorry for any inconveniences!
|
|
||||||
</main>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
29
package.json
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
{
|
||||||
|
"name": "silicoflare-website",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc && vite build",
|
||||||
|
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@silicoflare/portfolify": "^1.5.0",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.2.56",
|
||||||
|
"@types/react-dom": "^18.2.19",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^7.0.2",
|
||||||
|
"@typescript-eslint/parser": "^7.0.2",
|
||||||
|
"@vitejs/plugin-react": "^4.2.1",
|
||||||
|
"eslint": "^8.56.0",
|
||||||
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.5",
|
||||||
|
"typescript": "^5.2.2",
|
||||||
|
"vite": "^5.1.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,153 +0,0 @@
|
|||||||
<!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>Lab 1 CodeGen</title>
|
|
||||||
|
|
||||||
<style type="text/css">
|
|
||||||
* {
|
|
||||||
font-family:'Segoe UI', Verdana, Geneva, Tahoma, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
#code {
|
|
||||||
border: 1px solid black;
|
|
||||||
font-family:'Consolas';
|
|
||||||
padding: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body onload="init()">
|
|
||||||
<form>
|
|
||||||
<p>
|
|
||||||
<label for="stuName">Name: </label>
|
|
||||||
<input type="text" id="stuName" placeholder="Enter your name" onkeyup="genCode()" >
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<label for="srn">SRN: </label>
|
|
||||||
<input type="text" id="srn" placeholder="Enter your SRN" onkeyup="genCode()">
|
|
||||||
</p><br><br>
|
|
||||||
|
|
||||||
<template id="vals">
|
|
||||||
<div class="value">
|
|
||||||
<label class="lbl1" for="x">X: </label>
|
|
||||||
<input type="text" class="fld1" id="x" onkeyup="genCode()"> 
|
|
||||||
<label class="lbl2" for="y">Y: </label>
|
|
||||||
<input type="text" class="fld2" id="y" onkeyup="genCode()"> 
|
|
||||||
<button type="button" class="del">×</button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<div id="uservals">
|
|
||||||
</div>
|
|
||||||
<button type="button" onclick="add()">Add Entry</button>
|
|
||||||
<!-- <button type="button" onclick="genCode()">Submit</button> -->
|
|
||||||
</form>
|
|
||||||
<br><br>
|
|
||||||
<h3>Copy your code from here:</h3>
|
|
||||||
<button type="button" onclick="copyCode()">COPY</button>
|
|
||||||
<div id="code">
|
|
||||||
Enter values to generate code and then click 'COPY' to copy the code.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- ------------------------------------------------------------------------ -->
|
|
||||||
|
|
||||||
<script>
|
|
||||||
var count = 0
|
|
||||||
var finalCode = ""
|
|
||||||
|
|
||||||
function delValue(num) {
|
|
||||||
var divi = document.getElementById("value"+num);
|
|
||||||
divi.remove();
|
|
||||||
for(i=num+1;i<count;i++) {
|
|
||||||
var work = document.getElementById("value"+i);
|
|
||||||
work.setAttribute("id", "value"+(i-1));
|
|
||||||
work.querySelector(".lbl1").setAttribute("for", "x"+(i-1));
|
|
||||||
work.querySelector(".lbl2").setAttribute("for", "y"+(i-1));
|
|
||||||
work.querySelector(".fld1").setAttribute("id", "x"+(i-1));
|
|
||||||
work.querySelector(".fld2").setAttribute("id", "y"+(i-1));
|
|
||||||
work.querySelector(".del").setAttribute("onclick", "delValue("+(i-1)+")");
|
|
||||||
}
|
|
||||||
console.log("Entry "+num+" removed!")
|
|
||||||
count--;
|
|
||||||
}
|
|
||||||
|
|
||||||
function add() {
|
|
||||||
var i = count;
|
|
||||||
list = document.getElementById('uservals');
|
|
||||||
temp = document.importNode(document.getElementById('vals').content, true);
|
|
||||||
temp.querySelector(".value").setAttribute("id", "value"+i);
|
|
||||||
temp.querySelector(".lbl1").setAttribute("for", "x"+i);
|
|
||||||
temp.querySelector(".lbl2").setAttribute("for", "y"+i);
|
|
||||||
temp.querySelector(".fld1").setAttribute("id", "x"+i);
|
|
||||||
temp.querySelector(".fld2").setAttribute("id", "y"+i);
|
|
||||||
temp.querySelector(".del").setAttribute("onclick", "delValue("+i+")");
|
|
||||||
list.appendChild(temp);
|
|
||||||
count++;
|
|
||||||
document.getElementById("value"+(count-1)).querySelector(".fld1").focus();
|
|
||||||
console.log(count);
|
|
||||||
}
|
|
||||||
|
|
||||||
function init() {
|
|
||||||
add();
|
|
||||||
document.getElementById("value0").querySelector(".fld1").focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
function genCode() {
|
|
||||||
codeArea = document.getElementById("code");
|
|
||||||
startX = document.getElementById("value0").querySelector(".fld1").value;
|
|
||||||
endX = document.getElementById("value"+(count-1)).querySelector(".fld1").value;
|
|
||||||
finalCode = "x = "+startX+":"+(endX-startX)/(count-1)+":"+endX+";";
|
|
||||||
|
|
||||||
finalCode += "\nx = x';"
|
|
||||||
|
|
||||||
var ySTR = "y = ["
|
|
||||||
for(i=0;i<count;i++) {
|
|
||||||
work = document.getElementById("value"+i).querySelector(".fld2").value;
|
|
||||||
ySTR += work;
|
|
||||||
if(i!=(count-1))
|
|
||||||
ySTR+=";"
|
|
||||||
}
|
|
||||||
finalCode += "\n"+ySTR+"]";
|
|
||||||
|
|
||||||
finalCode += "\nplot(x,y)"+
|
|
||||||
"\nxlabel('$Volume\\ of\\ NaOH\\ added\\ in\\ mL$')"+
|
|
||||||
"\nylabel('$pH$')"+
|
|
||||||
"\nxgrid()";
|
|
||||||
|
|
||||||
finalCode += "\nxstring(0.5, 11, ['Name: "+document.getElementById("stuName").value+"'])";
|
|
||||||
finalCode += "\nxstring(0.5, 10.4, ['SRN: "+document.getElementById("srn").value+"'])";
|
|
||||||
|
|
||||||
finalCode += "\nxstring(0.5, 8, ['SCALE'])"+
|
|
||||||
"\nxstring(0.5, 7.5, ['X-AXIS: 0.5 mL'])"+
|
|
||||||
"\nxstring(0.5, 7, ['Y-AXIS: 1 pH (starts from 2)'])";
|
|
||||||
|
|
||||||
finalCode += "\nscf"+
|
|
||||||
"\nN = length(x)"+
|
|
||||||
"\ndydx = diff(y(:)) ./ diff(x(:))"+
|
|
||||||
"\ndydx(N) = dydx(N-1)"+
|
|
||||||
"\nx1 = x + 0.5"+
|
|
||||||
"\nplot(x1, dydx)"+
|
|
||||||
"\nxgrid()"+
|
|
||||||
"\nxlabel('$Volume\\ of\\ NaOH\\ added\\ in\\ mL$')"+
|
|
||||||
"\nylabel('$\\frac{\\Delta$E}{\\Delta$V}$')"+
|
|
||||||
"\nxstring(0.8, 550, ['SCALE'])";
|
|
||||||
finalCode += "\nxstring(0.5, 11, ['Name: "+document.getElementById("stuName").value+"'])";
|
|
||||||
finalCode += "\nxstring(0.5, 10.4, ['SRN: "+document.getElementById("srn").value+"'])";
|
|
||||||
|
|
||||||
finalCode += "\nxstring(0.5, 8, ['SCALE'])"+
|
|
||||||
"\nxstring(0.5, 7.5, ['X-AXIS: 0.5 mL'])"+
|
|
||||||
"\nxstring(0.5, 7, ['Y-AXIS: 1 pH (starts from 2)'])";
|
|
||||||
codeArea.innerText = finalCode;
|
|
||||||
}
|
|
||||||
|
|
||||||
function copyCode() {
|
|
||||||
navigator.clipboard.writeText(finalCode);
|
|
||||||
window.alert("Copied to clipboard!");
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,152 +0,0 @@
|
|||||||
<!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>Lab 2 CodeGen</title>
|
|
||||||
|
|
||||||
<style type="text/css">
|
|
||||||
* {
|
|
||||||
font-family:'Segoe UI', Verdana, Geneva, Tahoma, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
#code {
|
|
||||||
border: 1px solid black;
|
|
||||||
font-family:'Consolas';
|
|
||||||
padding: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body onload="init()">
|
|
||||||
<form>
|
|
||||||
<p>
|
|
||||||
<label for="stuName">Name: </label>
|
|
||||||
<input type="text" id="stuName" placeholder="Enter your name" onkeyup="genCode()" >
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<label for="srn">SRN: </label>
|
|
||||||
<input type="text" id="srn" placeholder="Enter your SRN" onkeyup="genCode()">
|
|
||||||
</p><br><br>
|
|
||||||
|
|
||||||
<template id="vals">
|
|
||||||
<div class="value">
|
|
||||||
<label class="lbl1" for="x">X: </label>
|
|
||||||
<input type="text" class="fld1" id="x" onkeyup="genCode()"> 
|
|
||||||
<label class="lbl2" for="y">Y: </label>
|
|
||||||
<input type="text" class="fld2" id="y" onkeyup="genCode()"> 
|
|
||||||
<button type="button" class="del">×</button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<div id="uservals">
|
|
||||||
</div>
|
|
||||||
<button type="button" onclick="add()">Add Entry</button>
|
|
||||||
<!-- <button type="button" onclick="genCode()">Submit</button> -->
|
|
||||||
</form>
|
|
||||||
<br><br>
|
|
||||||
<h3>Copy your code from here:</h3>
|
|
||||||
<button type="button" onclick="copyCode()">COPY</button>
|
|
||||||
<div id="code">
|
|
||||||
Enter values to generate code and then click 'COPY' to copy the code.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- ------------------------------------------------------------------------ -->
|
|
||||||
|
|
||||||
<script>
|
|
||||||
var count = 0
|
|
||||||
var finalCode = ""
|
|
||||||
|
|
||||||
function delValue(num) {
|
|
||||||
var divi = document.getElementById("value"+num);
|
|
||||||
divi.remove();
|
|
||||||
for(i=num+1;i<count;i++) {
|
|
||||||
var work = document.getElementById("value"+i);
|
|
||||||
work.setAttribute("id", "value"+(i-1));
|
|
||||||
work.querySelector(".lbl1").setAttribute("for", "x"+(i-1));
|
|
||||||
work.querySelector(".lbl2").setAttribute("for", "y"+(i-1));
|
|
||||||
work.querySelector(".fld1").setAttribute("id", "x"+(i-1));
|
|
||||||
work.querySelector(".fld2").setAttribute("id", "y"+(i-1));
|
|
||||||
work.querySelector(".del").setAttribute("onclick", "delValue("+(i-1)+")");
|
|
||||||
}
|
|
||||||
console.log("Entry "+num+" removed!")
|
|
||||||
count--;
|
|
||||||
}
|
|
||||||
|
|
||||||
function add() {
|
|
||||||
var i = count;
|
|
||||||
list = document.getElementById('uservals');
|
|
||||||
temp = document.importNode(document.getElementById('vals').content, true);
|
|
||||||
temp.querySelector(".value").setAttribute("id", "value"+i);
|
|
||||||
temp.querySelector(".lbl1").setAttribute("for", "x"+i);
|
|
||||||
temp.querySelector(".lbl2").setAttribute("for", "y"+i);
|
|
||||||
temp.querySelector(".fld1").setAttribute("id", "x"+i);
|
|
||||||
temp.querySelector(".fld2").setAttribute("id", "y"+i);
|
|
||||||
temp.querySelector(".del").setAttribute("onclick", "delValue("+i+")");
|
|
||||||
list.appendChild(temp);
|
|
||||||
count++;
|
|
||||||
document.getElementById("value"+(count-1)).querySelector(".fld1").focus();
|
|
||||||
console.log(count);
|
|
||||||
}
|
|
||||||
|
|
||||||
function init() {
|
|
||||||
add();
|
|
||||||
document.getElementById("value0").querySelector(".fld1").focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
function genCode() {
|
|
||||||
codeArea = document.getElementById("code");
|
|
||||||
startX = document.getElementById("value0").querySelector(".fld1").value;
|
|
||||||
endX = document.getElementById("value"+(count-1)).querySelector(".fld1").value;
|
|
||||||
finalCode = "x = "+startX+":"+(endX-startX)/(count-1)+":"+endX+";";
|
|
||||||
|
|
||||||
finalCode += "\nx = x';"
|
|
||||||
|
|
||||||
var ySTR = "y = ["
|
|
||||||
for(i=0;i<count;i++) {
|
|
||||||
work = document.getElementById("value"+i).querySelector(".fld2").value;
|
|
||||||
ySTR += work;
|
|
||||||
if(i!=(count-1))
|
|
||||||
ySTR+=";"
|
|
||||||
}
|
|
||||||
finalCode += "\n"+ySTR+"]";
|
|
||||||
|
|
||||||
// finalCode += "\nplot(x,y)"+
|
|
||||||
// "\nxlabel('$Volume\\ of\\ $K_{2}Cr_{2}O_{7}$\\ added\\ in\\ mL$')"+
|
|
||||||
// "\nylabel('$Potential\\ (E)\\ in\\ mV$')"+
|
|
||||||
// "\nxgrid()";
|
|
||||||
|
|
||||||
// finalCode += "\nxstring(5.5, 450, ['Name: "+document.getElementById("stuName").value+"'])";
|
|
||||||
// finalCode += "\nxstring(5.5, 425, ['SRN: "+document.getElementById("srn").value+"'])";
|
|
||||||
|
|
||||||
// finalCode += "\nxstring(0.8, 850, ['SCALE'])"+
|
|
||||||
// "\nxstring(0.5, 825, ['X-AXIS: 0.5 mL'])"+
|
|
||||||
// "\nxstring(0.6, 800, ['Y-AXIS: 50 V'])";
|
|
||||||
|
|
||||||
// finalCode += "\nscf"+
|
|
||||||
finalCode += "\nN = length(x)"+
|
|
||||||
"\ndydx = diff(y(:)) ./ diff(x(:))"+
|
|
||||||
"\ndydx(N) = dydx(N-1)"+
|
|
||||||
"\nx1 = x + 0.5"+
|
|
||||||
"\nplot(x1, dydx)"+
|
|
||||||
"\nxgrid()"+
|
|
||||||
"\nxlabel('$Volume\\ of\\ $K_{2}Cr_{2}O_{7}$\\ added\\ in\\ mL$')"+
|
|
||||||
"\nylabel('$\\frac{\\Delta$E}{\\Delta$V}$')"+
|
|
||||||
"\nxstring(0.8, 550, ['SCALE'])"+
|
|
||||||
"\nxstring(0.5, 525, ['X-AXIS: 0.5 mL'])"+
|
|
||||||
"\nxstring(0.49, 500, ['Y-AXIS: 50 units'])";
|
|
||||||
|
|
||||||
finalCode += "\nxstring(5.5, 550, ['Name: "+document.getElementById("stuName").value+"'])";
|
|
||||||
finalCode += "\nxstring(5.5, 525, ['SRN: "+document.getElementById("srn").value+"'])";
|
|
||||||
codeArea.innerText = finalCode;
|
|
||||||
}
|
|
||||||
|
|
||||||
function copyCode() {
|
|
||||||
navigator.clipboard.writeText(finalCode);
|
|
||||||
window.alert("Copied to clipboard!");
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
Before Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 51 KiB |
@@ -1,129 +0,0 @@
|
|||||||
@import "https://www.nerdfonts.com/assets/css/webfont.css";
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Noto Math';
|
|
||||||
src: url('noto-math.ttf');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SilicoHand';
|
|
||||||
src: url('silicohand.ttf');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Hurmit';
|
|
||||||
src: url('hurmit.otf');
|
|
||||||
}
|
|
||||||
|
|
||||||
.stackedit__html {
|
|
||||||
max-width: 900px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
color: #000;
|
|
||||||
font-family: 'Poppins', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* color: #FFC000; */
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
background-color: #313C71;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
color: white;
|
|
||||||
padding: 15px;
|
|
||||||
text-decoration: none;
|
|
||||||
border: 0px;
|
|
||||||
font-family: 'SilicoHand';
|
|
||||||
/* text-transform: uppercase; */
|
|
||||||
}
|
|
||||||
|
|
||||||
h1::after {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
color: #313C71;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2::after {
|
|
||||||
border-bottom: 1px solid #313C71;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
color: #EF7F1A;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.katex-html {
|
|
||||||
color: #0A2342;
|
|
||||||
/* font-weight: bolder; */
|
|
||||||
font-family: 'Noto Math';
|
|
||||||
}
|
|
||||||
|
|
||||||
.katex--inline {
|
|
||||||
color: #0A2342;
|
|
||||||
/* font-weight: bolder; */
|
|
||||||
font-family: 'Noto Math';
|
|
||||||
}
|
|
||||||
|
|
||||||
div.logo {
|
|
||||||
text-align: right;
|
|
||||||
font-size: 30px;
|
|
||||||
font-family: 'SilicoHand';
|
|
||||||
}
|
|
||||||
|
|
||||||
.silicoflare {
|
|
||||||
font-family: 'SilicoHand';
|
|
||||||
}
|
|
||||||
|
|
||||||
.silicoflare::before {
|
|
||||||
content: "Suraj";
|
|
||||||
color: #7F00FF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.silicoflare::after {
|
|
||||||
content: " BM";
|
|
||||||
color: #FF4500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sif-font-silicohand {
|
|
||||||
font-family: 'SilicoHand';
|
|
||||||
}
|
|
||||||
|
|
||||||
.sif-text-orange {
|
|
||||||
color: #FF4500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sif-text-purple {
|
|
||||||
color: #7F00FF;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
font-family: "Hurmit";
|
|
||||||
}
|
|
||||||
|
|
||||||
.token {
|
|
||||||
font-family: "Hurmit";
|
|
||||||
}
|
|
||||||
|
|
||||||
.img {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
width: auto;
|
|
||||||
margin: auto;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
text-align: center;
|
|
||||||
margin: auto;
|
|
||||||
width: 75%;
|
|
||||||
border: 1px solid black;
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr, td, th {
|
|
||||||
border: 1px solid black;
|
|
||||||
}
|
|
||||||
BIN
public/avatar.png
Normal file
|
After Width: | Height: | Size: 57 KiB |
BIN
public/favicon.png
Normal file
|
After Width: | Height: | Size: 273 KiB |
BIN
public/resume.pdf
Normal file
245
silicoflare.css
@@ -1,245 +0,0 @@
|
|||||||
@font-face {
|
|
||||||
font-family: SilicoHand;
|
|
||||||
src: url('data/silicohand.ttf');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: Ubuntu;
|
|
||||||
src: url('data/ubuntu.ttf');
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
font-size: 20px;
|
|
||||||
font-family: Ubuntu;
|
|
||||||
}
|
|
||||||
|
|
||||||
#modeSel {
|
|
||||||
z-index: 999;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 10px;
|
|
||||||
border-top-left-radius: 10px;
|
|
||||||
border-bottom-left-radius: 10px;
|
|
||||||
background-color: rgba(53, 53, 53, 0.5);
|
|
||||||
position: fixed;
|
|
||||||
right: 0%;
|
|
||||||
bottom: 5%;
|
|
||||||
transition: 0.2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mode {
|
|
||||||
transition: 0.2s ease-in-out;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip {
|
|
||||||
padding: 5px;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 10px 15px;
|
|
||||||
background-color: rgba(53, 53, 53);
|
|
||||||
position: fixed;
|
|
||||||
right: 5vw;
|
|
||||||
bottom: 6.5%;
|
|
||||||
display: none;
|
|
||||||
color: white;
|
|
||||||
transition: display 0.2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
z-index: 999;
|
|
||||||
font-family: SilicoHand;
|
|
||||||
width: 100%;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
border: none;
|
|
||||||
background-color: #7f00ff;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.phone {
|
|
||||||
display: none;
|
|
||||||
font-family: SilicoHand;
|
|
||||||
padding: 1.95vw 26vw 1.95vw 1.95vw;
|
|
||||||
font-size: 5vw;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.heading-ph {
|
|
||||||
font-family: SilicoHand;
|
|
||||||
padding: 0.5vw;
|
|
||||||
font-size: 5vw;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ham {
|
|
||||||
font-size: 5vw;
|
|
||||||
font-weight: bolder;
|
|
||||||
position: fixed;
|
|
||||||
right: 0.5%;
|
|
||||||
top: -0.5%;
|
|
||||||
padding: 1.5%;
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
#ph-links {
|
|
||||||
display: none;
|
|
||||||
margin-top: 2vw;
|
|
||||||
background-color: rgb(40, 40, 40);
|
|
||||||
width: 100%;
|
|
||||||
position: fixed;
|
|
||||||
left: 0%;
|
|
||||||
padding: 1.5vw;
|
|
||||||
transition: all 0.2s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-ph {
|
|
||||||
padding: 1vw;
|
|
||||||
font-size: 3vw;
|
|
||||||
margin-right: 3vw;
|
|
||||||
transition: all 0.2s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-ph:hover {
|
|
||||||
background-color: #f0f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-ph.selected {
|
|
||||||
background-color: #f0f;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 500px) {
|
|
||||||
.phone {
|
|
||||||
font-size: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-ph {
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
padding-top: 50em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bigtext {
|
|
||||||
font-size: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.si, .f {
|
|
||||||
font-size: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ham {
|
|
||||||
font-size: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.heading {
|
|
||||||
font-family: SilicoHand;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 1.95vw 26vw 1.95vw 1.95vw;
|
|
||||||
font-size: 3.25vw;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu {
|
|
||||||
font-family: SilicoHand;
|
|
||||||
padding: 1.3vw;
|
|
||||||
margin: 5px;
|
|
||||||
font-size: 1.3vw;
|
|
||||||
color: white;
|
|
||||||
display: inline;
|
|
||||||
float: right;
|
|
||||||
min-width: 9.76vw;
|
|
||||||
transition: background-color 0.2s ease-in-out;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu:hover {
|
|
||||||
background-color: #f0f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu.selected {
|
|
||||||
background-color: #f0f;
|
|
||||||
}
|
|
||||||
|
|
||||||
#overlay {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background-color: rgba(15, 15, 15, 0.7);
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 900;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bigtext {
|
|
||||||
font-size: 7vw;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.si {
|
|
||||||
font: 7vw SilicoHand;
|
|
||||||
color: #7f00ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.f {
|
|
||||||
font: 7vw SilicoHand;
|
|
||||||
color: orangered;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
padding-top: 10vw;
|
|
||||||
transition: background-color 0.2s ease-in-out;
|
|
||||||
transition: color 0.5s ease-in-out;
|
|
||||||
min-width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
font-size: 2.2vw;
|
|
||||||
padding: 0 2.28vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 1000px) {
|
|
||||||
.bigtext {
|
|
||||||
font-size: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.si, .f {
|
|
||||||
font-size: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
font-size: 17.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pc {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.phone {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#overlay {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.centred {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
var current = "dark";
|
|
||||||
var isActive = false;
|
|
||||||
|
|
||||||
function changeMode() {
|
|
||||||
if (current == 'dark') {
|
|
||||||
current = 'light';
|
|
||||||
document.getElementById("mode").setAttribute("src", "data/light.png");
|
|
||||||
document.getElementById("mode").setAttribute("alt", "light_mode");
|
|
||||||
document.querySelector(".tooltip").innerHTML = "Light Mode";
|
|
||||||
document.querySelector(".styles").setAttribute("href", "silicoflare_light.css");
|
|
||||||
}
|
|
||||||
else if (current == 'light') {
|
|
||||||
current = 'dark';
|
|
||||||
document.getElementById("mode").setAttribute("src", "data/dark.png");
|
|
||||||
document.getElementById("mode").setAttribute("alt", "dark_mode");
|
|
||||||
document.querySelector(".tooltip").innerHTML = "Dark Mode";
|
|
||||||
document.querySelector(".styles").setAttribute("href", "silicoflare_dark.css");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function hoverIn() {
|
|
||||||
document.getElementById("modeSel").style.backgroundColor = "rgba(53, 53, 53, 1)";
|
|
||||||
document.getElementById("mode").style.opacity = 1;
|
|
||||||
document.querySelector(".tooltip").style.display = "block";
|
|
||||||
}
|
|
||||||
|
|
||||||
function hoverOut() {
|
|
||||||
document.getElementById("modeSel").style.backgroundColor = "rgba(53, 53, 53, 0.5)";
|
|
||||||
document.getElementById("mode").style.opacity = 0.5;
|
|
||||||
document.querySelector(".tooltip").style.display = "none";
|
|
||||||
}
|
|
||||||
|
|
||||||
function hamburger() {
|
|
||||||
if (!isActive) {
|
|
||||||
document.getElementById("ph-links").style.display = "block";
|
|
||||||
document.getElementById("overlay").style.display = "block";
|
|
||||||
isActive = true;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
document.getElementById("ph-links").style.display = "none";
|
|
||||||
document.getElementById("overlay").style.display = "none";
|
|
||||||
isActive = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
body {
|
|
||||||
background-color: #17001f;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
body {
|
|
||||||
background-color: white;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
44
src/App.tsx
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
import { Portfolio, MainHead, Avatar, Intro, PortSection, SubHead, LinkBar, SocialLink, BulletList, ListItem, MD, Label, CardList, Card } from '@silicoflare/portfolify';
|
||||||
|
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return (
|
||||||
|
<Portfolio>
|
||||||
|
<MainHead>Suraj B M</MainHead>
|
||||||
|
<Avatar src="avatar.png"/>
|
||||||
|
<LinkBar>
|
||||||
|
<SocialLink href="/resume.pdf" logo="nf-md-file_document" />
|
||||||
|
<SocialLink href="mailto:suraj.b.m555@gmail.com" logo="nf-oct-mail" />
|
||||||
|
<SocialLink href="https://github.com/silicoflare" logo="nf-md-github" />
|
||||||
|
<SocialLink href="https://instagram.com/suraj.b.m" logo="nf-md-instagram" />
|
||||||
|
<SocialLink href="https://in.linkedin.com/in/suraj-b-m" logo="nf-md-linkedin" />
|
||||||
|
</LinkBar>
|
||||||
|
<Intro>Student and Frontend Web Developer</Intro>
|
||||||
|
<PortSection>
|
||||||
|
<SubHead>Projects</SubHead>
|
||||||
|
<CardList>
|
||||||
|
<Card heading="Formista">
|
||||||
|
<MD>
|
||||||
|
A form app with more features. [Link](https://formista.vercel.app)
|
||||||
|
</MD>
|
||||||
|
</Card>
|
||||||
|
<Card heading="LuffyEdit">
|
||||||
|
<MD>
|
||||||
|
A simple text editor in C with file save and load.
|
||||||
|
</MD>
|
||||||
|
</Card>
|
||||||
|
<Card heading="docker-hadoop">
|
||||||
|
<MD>
|
||||||
|
A minified Docker image containing pre installed tools required for Big Data.
|
||||||
|
</MD>
|
||||||
|
</Card>
|
||||||
|
<Card heading="@silicoflare/portfolify">
|
||||||
|
<MD>
|
||||||
|
A React component package to build a simple portfolio website.
|
||||||
|
</MD>
|
||||||
|
</Card>
|
||||||
|
</CardList>
|
||||||
|
</PortSection>
|
||||||
|
</Portfolio>
|
||||||
|
)
|
||||||
|
}
|
||||||
0
src/index.css
Normal file
10
src/main.tsx
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom/client'
|
||||||
|
import App from './App.tsx'
|
||||||
|
import './index.css'
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>,
|
||||||
|
)
|
||||||
2
src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
|
declare module '@silicoflare/portfolify';
|
||||||
25
tsconfig.json
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src"],
|
||||||
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
||||||
11
tsconfig.node.json
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"strict": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
7
vite.config.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
})
|
||||||