From cad94ebb856cdbac3228ee0ff5ca977151116bc0 Mon Sep 17 00:00:00 2001
From: Josh Patra <30350506+SoPat712@users.noreply.github.com>
Date: Mon, 7 Apr 2025 22:11:28 -0400
Subject: [PATCH] switch to svelte
---
src/App.css | 63 +++++---------------------------------
src/App.js | 67 -----------------------------------------
src/App.test.js | 8 -----
src/app.d.ts | 13 ++++++++
src/app.html | 23 ++++++++++++++
src/index.css | 13 --------
src/index.js | 17 -----------
src/lib/index.ts | 1 +
src/logo.svg | 1 -
src/reportWebVitals.js | 13 --------
src/routes/+page.svelte | 66 ++++++++++++++++++++++++++++++++++++++++
src/setupTests.js | 5 ---
12 files changed, 110 insertions(+), 180 deletions(-)
delete mode 100644 src/App.js
delete mode 100644 src/App.test.js
create mode 100644 src/app.d.ts
create mode 100644 src/app.html
delete mode 100644 src/index.css
delete mode 100644 src/index.js
create mode 100644 src/lib/index.ts
delete mode 100644 src/logo.svg
delete mode 100644 src/reportWebVitals.js
create mode 100644 src/routes/+page.svelte
delete mode 100644 src/setupTests.js
diff --git a/src/App.css b/src/App.css
index 6e66d4f..d178dfd 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,59 +1,10 @@
-.App {
- text-align: center;
+@import "tailwindcss";
+
+/* Custom font and base styles */
+body {
+ @apply bg-black text-gray-200 font-mono;
}
-.App-logo {
- height: 40vmin;
- pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
-}
-
-.App-link {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
-
-.dropdown-button {
- background-color: #61dafb;
- color: black;
- padding: 10px 20px;
- margin: 10px;
- border: none;
- border-radius: 5px;
- font-weight: bold;
- cursor: pointer;
- transition: background-color 0.2s ease;
-}
-
-.dropdown-button:hover {
- background-color: #4bb0e5;
-}
-
-.dropdown {
- margin-top: 10px;
- text-align: left;
+a {
+ @apply text-blue-400 hover:underline;
}
diff --git a/src/App.js b/src/App.js
deleted file mode 100644
index 701004c..0000000
--- a/src/App.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React, { useState, useEffect } from "react";
-import "./App.css";
-
-function App() {
- const [loading, setLoading] = useState(true);
- const [showJobs, setShowJobs] = useState(false);
- const [showGrades, setShowGrades] = useState(false);
-
- useEffect(() => {
- const timeout = setTimeout(() => setLoading(false), 1000); // preload effect
- return () => clearTimeout(timeout);
- }, []);
-
- if (loading) {
- return (
-
-
Loading portfolio...
-
- );
- }
-
- return (
-
- );
-}
-
-export default App;
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index 1f03afe..0000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
- render();
- const linkElement = screen.getByText(/learn react/i);
- expect(linkElement).toBeInTheDocument();
-});
diff --git a/src/app.d.ts b/src/app.d.ts
new file mode 100644
index 0000000..da08e6d
--- /dev/null
+++ b/src/app.d.ts
@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+ namespace App {
+ // interface Error {}
+ // interface Locals {}
+ // interface PageData {}
+ // interface PageState {}
+ // interface Platform {}
+ }
+}
+
+export {};
diff --git a/src/app.html b/src/app.html
new file mode 100644
index 0000000..42c9455
--- /dev/null
+++ b/src/app.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+ My Terminal Portfolio
+
+
+
+
+
+
+
+ %sveltekit.head%
+
+
+ %sveltekit.body%
+
+
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index ec2585e..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
-}
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index d563c0f..0000000
--- a/src/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-
-
-
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/src/lib/index.ts b/src/lib/index.ts
new file mode 100644
index 0000000..856f2b6
--- /dev/null
+++ b/src/lib/index.ts
@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 9dfc1c0..0000000
--- a/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
deleted file mode 100644
index 5253d3a..0000000
--- a/src/reportWebVitals.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
- if (onPerfEntry && onPerfEntry instanceof Function) {
- import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
- getCLS(onPerfEntry);
- getFID(onPerfEntry);
- getFCP(onPerfEntry);
- getLCP(onPerfEntry);
- getTTFB(onPerfEntry);
- });
- }
-};
-
-export default reportWebVitals;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
new file mode 100644
index 0000000..b9504e9
--- /dev/null
+++ b/src/routes/+page.svelte
@@ -0,0 +1,66 @@
+
+
+
+
+ ❯ Hello, I'm {name}
+
+
+ └─ a {role} building full-stack apps, server infra, and cool terminal UIs.
+
+
+
+ Projects
+
+ {#each projects as { name, link, description }}
+ -
+
+ ❯ {name}
+
+
└─ {description}
+
+ {/each}
+
+
+
+
+
+
+
+
diff --git a/src/setupTests.js b/src/setupTests.js
deleted file mode 100644
index 8f2609b..0000000
--- a/src/setupTests.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';