feat: complete revamp using daisyui

2026-05-26 12:09:53 +05:30 · 2024-12-01 23:44:50 +05:30
parent 6853aeb1ba
commit 4dee378f84
21 changed files with 2052 additions and 2121 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,18 +0,0 @@
-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 },
-    ],
-  },
-}
--- a/README.md
+++ b/README.md
@@ -14,17 +14,37 @@ If you are developing a production application, we recommend updating the config
 - Configure the top-level `parserOptions` property like this:

 ```js
-export default {
-  // other rules...
+export default tseslint.config({
+  languageOptions: {
+    // other options...
    parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.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
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```
--- a/bun.lockb
+++ b/bun.lockb
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
--- a/index.html
+++ b/index.html
@@ -1,13 +1,16 @@
 <!doctype html>
-<html lang="en">
-  <head>
+<html data-theme="synthwave" lang="en">
+
+<head>
  <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/favicon.png" />
+  <link rel="icon" type="image/png" href="/avatar.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>SilicoFlare</title>
-  </head>
-  <body>
+</head>
+
+<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
-  </body>
+</body>
+
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -5,25 +5,32 @@
  "type": "module",
  "scripts": {
    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
-    "@silicoflare/portfolify": "^1.5.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "autoprefixer": "^10.4.20",
+    "dayjs": "^1.11.13",
+    "js-confetti": "^0.12.0",
+    "lucide-react": "^0.462.0",
+    "postcss": "^8.4.49",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwindcss": "^3.4.15"
  },
  "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"
+    "@eslint/js": "^9.15.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "daisyui": "^4.12.14",
+    "eslint": "^9.15.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "globals": "^15.12.0",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.15.0",
+    "vite": "^6.0.1"
  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/public/favicon.png
+++ b/public/favicon.png
--- a/public/resume.pdf
+++ b/public/resume.pdf
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,45 +1,77 @@
-import { Portfolio, MainHead, Avatar, Intro, PortSection, SubHead, LinkBar, SocialLink, MD, CardList, Card } from '@silicoflare/portfolify';
-// import { Portfolio, MainHead, Avatar, Intro, PortSection, SubHead, LinkBar, SocialLink, MD, CardList, Card } from 'portfolify';
-
+import { useEffect, useState } from "react";
+import ProjectCard from "./components/ProjectCard";
+import { links, projects } from "./data";
+import JSConfetti from "js-confetti";
+import dayjs from "dayjs";

 export default function App() {
+  const [bday, setBday] = useState(false);
+
+  useEffect(() => {
+    const today = dayjs();
+    if (today.month() === 8 && today.date() === 23) {
+      setBday(true);
+      const confetti = new JSConfetti();
+      confetti.addConfetti();
+    }
+  }, []);
+
  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>
-    )
+    <div className="w-screen h-screen flex flex-col gap-3 bg-base-100 text-base-content md:text-lg p-2 md:p-10 font-space-grotesk">
+      <div className="mt-[15rem] md:mt-10 my-5 px-10 md:px-20 flex flex-col justify-center gap-2 text-center md:text-left">
+        {bday && (
+          <div className="text-2xl md:text-3xl font-semibold text-primary">
+            Level {dayjs().diff("2003-09-23", "years")}!
+          </div>
+        )}
+        <h1 className="text-5xl md:text-6xl font-bold text-primary">
+          Suraj “SilicoFlare”
+        </h1>
+        TypeScript maniac, student, gamer and an avid Linux user.
+        <div className="w-full flex items-center gap-3 justify-center md:justify-start">
+          <a
+            href="/resume.pdf"
+            target="_blank"
+            className="badge badge-accent badge-outline px-5 py-3 rounded-md hover:bg-accent hover:text-base-100"
+          >
+            Resume
+          </a>
+          {Object.entries(links).map(([title, link]) => (
+            <a
+              href={link}
+              key={title}
+              target="_blank"
+              className="text-accent hover:scale-110 transition ease-in-out duration-200"
+            >
+              <img
+                height="20"
+                width="20"
+                src={`https://cdn.simpleicons.org/${title}/FFD100`}
+                className="text-accent hover:scale-110 transition ease-in-out duration-200"
+              />
+            </a>
+          ))}
+        </div>
+      </div>
+      <div className="my-20 md:hidden"></div>
+
+      <div className="my-10 flex flex-col px-10 md:px-20 w-full">
+        <h2 className="text-2xl md:text-4xl font-bold text-primary font-space-grotesk">
+          Projects
+        </h2>
+        <div className="w-full grid grid-cols-1 md:grid-cols-3 gap-3 mt-5">
+          {projects.map((pro) => (
+            <ProjectCard
+              key={pro.name}
+              name={pro.name}
+              tech={pro.tech}
+              description={pro.description}
+              repo={pro.repo}
+            />
+          ))}
+        </div>
+      </div>
+      <div className="p-20 py-10"></div>
+    </div>
+  );
 }
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@@ -0,0 +1,35 @@
+import { Project } from "../data";
+
+export default function ProjectCard({
+  name,
+  tech,
+  description,
+  repo,
+}: Project) {
+  return (
+    <a
+      href={`https://github.com/${repo}`}
+      target="_blank"
+      className="card bg-base-300 w-full shadow-xl hover:scale-105 transition ease-in-out duration-200"
+    >
+      <div className="card-body text-sm text-justify md:text-left md:text-base">
+        <h2 className="card-title flex items-center justify-between text-secondary">
+          {name}
+          <div className="flex items-center gap-2 text-neutral-content">
+            {tech.map((x) => (
+              <img
+                key={x}
+                height="20"
+                width="20"
+                src={`https://cdn.simpleicons.org/${x}/57C6F3`}
+                className="text-neutral-content fill-neutral-content stroke-neutral-content"
+                title={x}
+              />
+            ))}
+          </div>
+        </h2>
+        <p>{description}</p>
+      </div>
+    </a>
+  );
+}
--- a/src/data.ts
+++ b/src/data.ts
@@ -0,0 +1,61 @@
+export const links: Record<string, string> = {
+  gmail: "mailto:silicoflare@gmail.com",
+  github: "https://github.com/silicoflare",
+  linkedin: "https://in.linkedin.com/in/suraj-b-m",
+};
+
+export interface Project {
+  name: string;
+  description: string;
+  repo: string;
+  tech: string[];
+}
+
+export const projects: Project[] = [
+  {
+    name: "rapport",
+    description:
+      "An end-to-end encrypted messaging app written in Next.js. involving several layers of encryption",
+    repo: "silicoflare/rapport",
+    tech: ["nextdotjs", "mysql"],
+  },
+  {
+    name: "pesu-tix",
+    description:
+      "An event ticketing system tailored for PES University, integrating ID Card verification for secure event access.",
+    repo: "silicoflare/pesu-tix",
+    tech: ["nextdotjs", "trpc"],
+  },
+  {
+    name: "confidant",
+    description: "A CLI tool to create secure password-protected vaults",
+    repo: "silicoflare/confidant",
+    tech: ["typescript"],
+  },
+  {
+    name: "safe",
+    description:
+      "A CLI tool to encrypt and decrypt files to share with contacts",
+    repo: "silicoflare/safe-cli",
+    tech: ["typescript"],
+  },
+  {
+    name: "vroomify",
+    description:
+      "An enterprise resource planning [ERP] software for an automobile industry, to manage orders, models, inventory and refills",
+    repo: "Samprith002/vroomify",
+    tech: ["nextdotjs", "fastapi", "mongodb"],
+  },
+  {
+    name: "docker-hadoop",
+    description: "A Docker image containing necessary tools for Big Data",
+    repo: "silicoflare/docker-hadoop",
+    tech: ["docker"],
+  },
+  {
+    name: "silicodrive",
+    description: "A simple file storage and synchronization platform",
+    repo: "silicoflare/silicodrive",
+    tech: ["nextdotjs", "supabase"],
+  },
+];
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
 import './index.css'
+import App from './App.tsx'

-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
    <App />
-  </React.StrictMode>,
+  </StrictMode>,
 )
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1,3 +1 @@
 /// <reference types="vite/client" />
-declare module '@silicoflare/portfolify';
-declare module 'portfolify';
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      fontFamily: {
+        "space-grotesk": '"Space Grotesk"',
+      },
+    },
+  },
+  plugins: [require("daisyui")],
+  daisyui: {
+    themes: ["synthwave", "coffee"],
+  },
+};
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,25 +1,7 @@
 {
-  "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" }]
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
 }
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -1,11 +1,24 @@
 {
  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "strict": true
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
  },
  "include": ["vite.config.ts"]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import react from '@vitejs/plugin-react-swc'

-// https://vitejs.dev/config/
+// https://vite.dev/config/
 export default defineConfig({
  plugins: [react()],
 })