mirror of
https://github.com/silicoflare/silicoflare-website.git
synced 2026-05-26 12:09:53 +05:30
Change website to use portfolify
This commit is contained in:
18
.eslintrc.cjs
Normal file
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
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
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
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 550 KiB |
BIN
data/dark.png
BIN
data/dark.png
Binary file not shown.
|
Before Width: | Height: | Size: 238 B |
BIN
data/hippo.ttf
BIN
data/hippo.ttf
Binary file not shown.
BIN
data/hurmit.otf
BIN
data/hurmit.otf
Binary file not shown.
BIN
data/light.png
BIN
data/light.png
Binary file not shown.
|
Before Width: | Height: | Size: 178 B |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
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
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
data/ubuntu.ttf
Binary file not shown.
BIN
favicon.ico
BIN
favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 6.0 KiB |
53
index.html
53
index.html
@@ -1,44 +1,13 @@
|
||||
<!DOCTYPE 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>Home - SilicoFlare</title>
|
||||
|
||||
<link rel="stylesheet" href="silicoflare.css">
|
||||
<link class="styles" rel="stylesheet" href="silicoflare_dark.css">
|
||||
<script src="silicoflare.js"></script>
|
||||
|
||||
</head>
|
||||
<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>
|
||||
<span class="tooltip">Dark Mode</span>
|
||||
<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>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>SilicoFlare</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
29
package.json
Normal file
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>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 51 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -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
BIN
public/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
public/favicon.png
Normal file
BIN
public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 273 KiB |
BIN
public/resume.pdf
Normal file
BIN
public/resume.pdf
Normal file
Binary file not shown.
245
silicoflare.css
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
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
0
src/index.css
Normal file
10
src/main.tsx
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
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
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
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
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()],
|
||||
})
|
||||
Reference in New Issue
Block a user