diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..837f9cd --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,7 @@ +{ + "trailingComma": "es5", + "tabWidth": 4, + "semi": true, + "singleQuote": false, + "plugins": ["prettier-plugin-tailwindcss"] +} diff --git a/package.json b/package.json index c3c4b91..f61704d 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,9 @@ "scripts": { "dev": "concurrently \"pnpm run tw:dev\" \"air\"", "tw:dev": "tailwindcss -i ./public/css/styles.css -o ./static/styles.css --watch", - "tw:prod": "tailwindcss -i ./public/css/styles.css -o ./static/styles.css --minify" + "tw:prod": "tailwindcss -i ./public/css/styles.css -o ./static/styles.css --minify", + "prettier": "prettier ./public --write", + "prettier:check": "prettier ./public --check" }, "keywords": [ "personal", @@ -20,6 +22,7 @@ "autoprefixer": "^10.4.16", "concurrently": "^8.2.2", "postcss": "^8.4.31", + "prettier-plugin-tailwindcss": "^0.5.6", "tailwindcss": "^3.3.3" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9e1ad18..e50fb1b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,6 +14,9 @@ devDependencies: postcss: specifier: ^8.4.31 version: 8.4.31 + prettier-plugin-tailwindcss: + specifier: ^0.5.6 + version: 0.5.6(prettier@3.0.3) tailwindcss: specifier: ^3.3.3 version: 3.3.3 @@ -577,6 +580,67 @@ packages: source-map-js: 1.0.2 dev: true + /prettier-plugin-tailwindcss@0.5.6(prettier@3.0.3): + resolution: {integrity: sha512-2Xgb+GQlkPAUCFi3sV+NOYcSI5XgduvDBL2Zt/hwJudeKXkyvRS65c38SB0yb9UB40+1rL83I6m0RtlOQ8eHdg==} + engines: {node: '>=14.21.3'} + peerDependencies: + '@ianvs/prettier-plugin-sort-imports': '*' + '@prettier/plugin-pug': '*' + '@shopify/prettier-plugin-liquid': '*' + '@shufo/prettier-plugin-blade': '*' + '@trivago/prettier-plugin-sort-imports': '*' + prettier: ^3.0 + prettier-plugin-astro: '*' + prettier-plugin-css-order: '*' + prettier-plugin-import-sort: '*' + prettier-plugin-jsdoc: '*' + prettier-plugin-marko: '*' + prettier-plugin-organize-attributes: '*' + prettier-plugin-organize-imports: '*' + prettier-plugin-style-order: '*' + prettier-plugin-svelte: '*' + prettier-plugin-twig-melody: '*' + peerDependenciesMeta: + '@ianvs/prettier-plugin-sort-imports': + optional: true + '@prettier/plugin-pug': + optional: true + '@shopify/prettier-plugin-liquid': + optional: true + '@shufo/prettier-plugin-blade': + optional: true + '@trivago/prettier-plugin-sort-imports': + optional: true + prettier-plugin-astro: + optional: true + prettier-plugin-css-order: + optional: true + prettier-plugin-import-sort: + optional: true + prettier-plugin-jsdoc: + optional: true + prettier-plugin-marko: + optional: true + prettier-plugin-organize-attributes: + optional: true + prettier-plugin-organize-imports: + optional: true + prettier-plugin-style-order: + optional: true + prettier-plugin-svelte: + optional: true + prettier-plugin-twig-melody: + optional: true + dependencies: + prettier: 3.0.3 + dev: true + + /prettier@3.0.3: + resolution: {integrity: sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==} + engines: {node: '>=14'} + hasBin: true + dev: true + /queue-microtask@1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} dev: true diff --git a/public/css/styles.css b/public/css/styles.css index 4cae8eb..ac5db76 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -4,14 +4,14 @@ @layer components { .colourful-card { - @apply relative p-2 bg-white text-zinc-950 transition-all hover:bg-transparent hover:text-white - after:w-full after:h-full - after:transition-all - after:absolute after:-z-10 after:top-2 after:-right-2 - hover:after:top-0 hover:after:right-0 - after:bg-gradient-to-r after:from-purple-500 after:to-pink-500 - focus:after:top-0 focus:after:right-0 - focus:bg-transparent focus:text-white; + @apply relative bg-white p-2 text-zinc-950 transition-all after:absolute after:-right-2 + after:top-2 after:-z-10 + after:h-full + after:w-full after:bg-gradient-to-r after:from-purple-500 after:to-pink-500 + after:transition-all hover:bg-transparent + hover:text-white hover:after:right-0 hover:after:top-0 + focus:bg-transparent focus:text-white + focus:after:right-0 focus:after:top-0; } .clip-me-from-grass { @@ -51,7 +51,7 @@ background-size: cover; background-position: center center; background-repeat: repeat; - background-image: url('/static/grid.svg'); + background-image: url("/static/grid.svg"); } .radial-overlay { diff --git a/public/views/index.html b/public/views/index.html index 85d16a8..4a5a0fd 100644 --- a/public/views/index.html +++ b/public/views/index.html @@ -1,218 +1,371 @@ - + + + + + + + + + + + + + + + + + + Juan Wu | Portfolio + - - - - - - - - - - - - - - - - - Juan Wu | Portfolio - - - - -
-
-
- JUAN WU -
- SOFTWARE DEVELOPER - -
-
- -
- -
-
- - -
-
-
-

- Hello there , -

-

- I am Juan -

-

- I am a Software Developer during the day -

-

- & - work at - LCS - and - Hawk - Hacks - at night -

-

(send help, I have been enslaved)

- -

- Check out my -

- - PROJECTS - +
+ +
- + +
+ + +
+
+
+

+ Hello there , +

+

+ I am Juan +

+

+ I am a Software Developer during the day +

+

+ & + work at + LCS + and + Hawk Hacks + at night +

+

(send help, I have been enslaved)

+ +

+ Check out my +

+ + PROJECTS + +
+ +
+
+
+
+
+
+

+ Welcome to + + Project Graveyard + +

+
+
+
+ + Juan's dumb projects archive + +
+
+ +
+
+
+

+ Welcome to + + + Juan's Narcissistic Biography + + +

-
-
-
-
-

- Welcome to - - Project Graveyard - -

+ +
+
+

Made With Luv

+

Juan

-
-
- - Juan's dumb projects archive - -
-
- -
-
-
-

- Welcome to - - - Juan's Narcissistic Biography - - -

-
-
-
- - - - + +