silicoflare/silicoflare-website
1
0
Fork 0
mirror of https://github.com/silicoflare/silicoflare-website.git synced 2026-05-26 20:17:58 +05:30
Code Issues Packages Projects Releases Wiki Activity

feat: complete revamp using daisyui

Browse Source
This commit is contained in:
Suraj B M
2024-12-01 23:44:50 +05:30
parent 6853aeb1ba
commit 4dee378f84
21 changed files with 2052 additions and 2121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
.eslintrc.cjs
View File

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

40
README.md
View File

@@ -14,17 +14,37 @@ If you are developing a production application, we recommend updating the config
- Configure the top-level `parserOptions` property like this: - Configure the top-level `parserOptions` property like this:
```js ```js
export default { export default tseslint.config({
// other rules... languageOptions: {
// other options...
parserOptions: { parserOptions: {
ecmaVersion: 'latest', project: ['./tsconfig.node.json', './tsconfig.app.json'],
sourceType: 'module', tsconfigRootDir: import.meta.dirname,
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` - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked` - Optionally add `...tseslint.configs.stylisticTypeChecked`
- 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 - 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,
},
})
```

BIN
bun.lockb
View File

Binary file not shown.

28
eslint.config.js Normal file
View File

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

7
index.html
View File

@@ -1,13 +1,16 @@
<!doctype html> <!doctype html>
<html lang="en"> <html data-theme="synthwave" lang="en">
<head> <head>
<meta charset="UTF-8" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SilicoFlare</title> <title>SilicoFlare</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>

3692
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

37
package.json
View File

@@ -5,25 +5,32 @@
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "tsc && vite build", "build": "tsc -b && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "lint": "eslint .",
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@silicoflare/portfolify": "^1.5.1", "autoprefixer": "^10.4.20",
"react": "^18.2.0", "dayjs": "^1.11.13",
"react-dom": "^18.2.0" "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": { "devDependencies": {
"@types/react": "^18.2.56", "@eslint/js": "^9.15.0",
"@types/react-dom": "^18.2.19", "@types/react": "^18.3.12",
"@typescript-eslint/eslint-plugin": "^7.0.2", "@types/react-dom": "^18.3.1",
"@typescript-eslint/parser": "^7.0.2", "@vitejs/plugin-react-swc": "^3.5.0",
"@vitejs/plugin-react": "^4.2.1", "daisyui": "^4.12.14",
"eslint": "^8.56.0", "eslint": "^9.15.0",
"eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.5", "eslint-plugin-react-refresh": "^0.4.14",
"typescript": "^5.2.2", "globals": "^15.12.0",
"vite": "^5.1.4" "typescript": "~5.6.2",
"typescript-eslint": "^8.15.0",
"vite": "^6.0.1"
} }
} }

6
postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

BIN
public/favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 273 KiB

BIN
public/resume.pdf
View File

Binary file not shown.

116
src/App.tsx
View File

@@ -1,45 +1,77 @@
import { Portfolio, MainHead, Avatar, Intro, PortSection, SubHead, LinkBar, SocialLink, MD, CardList, Card } from '@silicoflare/portfolify'; import { useEffect, useState } from "react";
// import { Portfolio, MainHead, Avatar, Intro, PortSection, SubHead, LinkBar, SocialLink, MD, CardList, Card } from 'portfolify'; import ProjectCard from "./components/ProjectCard";
import { links, projects } from "./data";
import JSConfetti from "js-confetti";
import dayjs from "dayjs";
export default function App() { export default function App() {
return ( const [bday, setBday] = useState(false);
<Portfolio>
<MainHead>Suraj B M</MainHead> useEffect(() => {
<Avatar src="avatar.png"/> const today = dayjs();
<LinkBar> if (today.month() === 8 && today.date() === 23) {
<SocialLink href="/resume.pdf" logo="nf-md-file_document" /> setBday(true);
<SocialLink href="mailto:suraj.b.m555@gmail.com" logo="nf-oct-mail" /> const confetti = new JSConfetti();
<SocialLink href="https://github.com/silicoflare" logo="nf-md-github" /> confetti.addConfetti();
<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> return (
<PortSection> <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">
<SubHead>Projects</SubHead> <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">
<CardList> {bday && (
<Card heading="Formista"> <div className="text-2xl md:text-3xl font-semibold text-primary">
<MD> Level {dayjs().diff("2003-09-23", "years")}!
A form app with more features. [Link](https://formista.vercel.app) </div>
</MD> )}
</Card> <h1 className="text-5xl md:text-6xl font-bold text-primary">
<Card heading="LuffyEdit"> Suraj “SilicoFlare”
<MD> </h1>
A simple text editor in C with file save and load. TypeScript maniac, student, gamer and an avid Linux user.
</MD> <div className="w-full flex items-center gap-3 justify-center md:justify-start">
</Card> <a
<Card heading="docker-hadoop"> href="/resume.pdf"
<MD> target="_blank"
A minified Docker image containing pre installed tools required for Big Data. className="badge badge-accent badge-outline px-5 py-3 rounded-md hover:bg-accent hover:text-base-100"
</MD> >
</Card> Resume
<Card heading="@silicoflare/portfolify"> </a>
<MD> {Object.entries(links).map(([title, link]) => (
A React component package to build a simple portfolio website. <a
</MD> href={link}
</Card> key={title}
</CardList> target="_blank"
</PortSection> className="text-accent hover:scale-110 transition ease-in-out duration-200"
</Portfolio> >
) <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>
);
} }

35
src/components/ProjectCard.tsx Normal file
View File

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

61
src/data.ts Normal file
View File

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

5
src/index.css
View File

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

12
src/main.tsx
View File

@@ -1,10 +1,10 @@
import React from 'react' import { StrictMode } from 'react'
import ReactDOM from 'react-dom/client' import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css' import './index.css'
import App from './App.tsx'
ReactDOM.createRoot(document.getElementById('root')!).render( createRoot(document.getElementById('root')!).render(
<React.StrictMode> <StrictMode>
<App /> <App />
</React.StrictMode>, </StrictMode>,
) )

2
src/vite-env.d.ts vendored
View File

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

15
tailwind.config.js Normal file
View File

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

26
tsconfig.app.json Normal file
View File

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

28
tsconfig.json
View File

@@ -1,25 +1,7 @@
{ {
"compilerOptions": { "files": [],
"target": "ES2020", "references": [
"useDefineForClassFields": true, { "path": "./tsconfig.app.json" },
"lib": ["ES2020", "DOM", "DOM.Iterable"], { "path": "./tsconfig.node.json" }
"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" }]
} }

21
tsconfig.node.json
View File

@@ -1,11 +1,24 @@
{ {
"compilerOptions": { "compilerOptions": {
"composite": true, "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"skipLibCheck": true, "target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext", "module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler", "moduleResolution": "bundler",
"allowSyntheticDefaultImports": true, "allowImportingTsExtensions": true,
"strict": true "isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
}, },
"include": ["vite.config.ts"] "include": ["vite.config.ts"]
} }

4
vite.config.ts
View File

@@ -1,7 +1,7 @@
import { defineConfig } from 'vite' 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({ export default defineConfig({
plugins: [react()], plugins: [react()],
}) })