Change website to use portfolify

.eslintrc.cjs

@@ -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 },
+    ],
+  },
+}

.gitignore

@@ -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?

README.md

@@ -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

data/studyhive.css

@@ -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;
-}

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";
-}

index.html

@@ -1,44 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <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>
-
+  </head>
-        <link rel="stylesheet" href="silicoflare.css">
+  <body>
-        <link class="styles" rel="stylesheet" href="silicoflare_dark.css">
+    <div id="root"></div>
-        <script src="silicoflare.js"></script>
+    <script type="module" src="/src/main.tsx"></script>
-
+  </body>
-    </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>
 </html>

package.json

@@ -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"
+  }
+}

pes/scilab/lab01.html

@@ -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()">&emsp;
-                    <label class="lbl2" for="y">Y: </label>
-                        <input type="text" class="fld2" id="y" onkeyup="genCode()">&emsp;
-                    <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>

pes/scilab/lab02.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()">&emsp;
-                    <label class="lbl2" for="y">Y: </label>
-                        <input type="text" class="fld2" id="y" onkeyup="genCode()">&emsp;
-                    <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>

pesu_notes/styles.css

@@ -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;
-}

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;
-}

silicoflare.js

@@ -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;
-    }
-}

silicoflare_dark.css

@@ -1,4 +0,0 @@
-body            {
-    background-color: #17001f;
-    color: white;
-}

silicoflare_light.css

@@ -1,4 +0,0 @@
-body            {
-    background-color: white;
-    color: black;
-}

src/App.tsx

@@ -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>
+    )
+}

src/main.tsx

@@ -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>,
+)

src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+declare module '@silicoflare/portfolify';

tsconfig.json

@@ -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" }]
+}

tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})