From 0bbefd02af81b5262deff41223a8b73b1b3eaa5e Mon Sep 17 00:00:00 2001 From: Thomas Davis Date: Fri, 26 Apr 2024 21:31:54 +1000 Subject: [PATCH] tailwind --- .../jsonresume-theme-tailwind/package.json | 1 + .../src/ui/Avatar.js | 44 ++++++++++++ .../src/ui/Education.js | 27 ++++++++ .../jsonresume-theme-tailwind/src/ui/Hero.js | 67 +++++++++++++++++-- .../src/ui/ProjectCard.js | 51 ++++++++++++++ .../src/ui/Projects.js | 65 ++++++------------ .../src/ui/Resume.js | 6 ++ .../src/ui/Skills.js | 17 +++++ .../jsonresume-theme-tailwind/src/ui/Work.js | 11 ++- pnpm-lock.yaml | 32 +++++++-- 10 files changed, 262 insertions(+), 59 deletions(-) create mode 100644 packages/jsonresume-theme-tailwind/src/ui/Avatar.js create mode 100644 packages/jsonresume-theme-tailwind/src/ui/Education.js create mode 100644 packages/jsonresume-theme-tailwind/src/ui/ProjectCard.js create mode 100644 packages/jsonresume-theme-tailwind/src/ui/Skills.js diff --git a/packages/jsonresume-theme-tailwind/package.json b/packages/jsonresume-theme-tailwind/package.json index c87151e1..d9c02603 100644 --- a/packages/jsonresume-theme-tailwind/package.json +++ b/packages/jsonresume-theme-tailwind/package.json @@ -17,6 +17,7 @@ "styled-components": "^6" }, "dependencies": { + "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-slot": "^1.0.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", diff --git a/packages/jsonresume-theme-tailwind/src/ui/Avatar.js b/packages/jsonresume-theme-tailwind/src/ui/Avatar.js new file mode 100644 index 00000000..cae2e244 --- /dev/null +++ b/packages/jsonresume-theme-tailwind/src/ui/Avatar.js @@ -0,0 +1,44 @@ +'use client'; + +import * as React from 'react'; +import * as AvatarPrimitive from '@radix-ui/react-avatar'; + +import { cn } from './utils'; + +const Avatar = React.forwardRef(({ className, ...props }, ref) => ( + +)); + +Avatar.displayName = AvatarPrimitive.Root.displayName; + +const AvatarImage = React.forwardRef(({ className, ...props }, ref) => ( + +)); + +AvatarImage.displayName = AvatarPrimitive.Image.displayName; + +const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => ( + +)); + +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName; + +export { Avatar, AvatarImage, AvatarFallback }; diff --git a/packages/jsonresume-theme-tailwind/src/ui/Education.js b/packages/jsonresume-theme-tailwind/src/ui/Education.js new file mode 100644 index 00000000..269782d4 --- /dev/null +++ b/packages/jsonresume-theme-tailwind/src/ui/Education.js @@ -0,0 +1,27 @@ +import Section from './Section'; +import { Card, CardHeader, CardContent } from './Card'; + +const Education = ({ education }) => { + return ( +
+

Education

+ {education.map((e) => { + return ( + + +
+

{e.institution}

+
+ {e.startDate} - {e.endDate} +
+
+ + {e.area} + + ); + })} +
+ ); +}; + +export default Education; diff --git a/packages/jsonresume-theme-tailwind/src/ui/Hero.js b/packages/jsonresume-theme-tailwind/src/ui/Hero.js index 3b89cdc5..74d6e25c 100644 --- a/packages/jsonresume-theme-tailwind/src/ui/Hero.js +++ b/packages/jsonresume-theme-tailwind/src/ui/Hero.js @@ -1,3 +1,13 @@ +import { Avatar, AvatarImage, AvatarFallback } from './Avatar'; +import { Button } from './Button'; +import { CiMail, CiPhone, CiGlobe } from 'react-icons/ci'; +import { FaGithub, FaTwitter } from 'react-icons/fa'; + +const socials = { + github: FaGithub, + twitter: FaTwitter, +}; + const HeroComponent = ({ basics }) => { return (
@@ -7,15 +17,60 @@ const HeroComponent = ({ basics }) => { {basics.label}

- + + {basics.location.city} - +

+
+ {basics.email ? ( + + ) : null} + {basics.phone ? ( + + ) : null} + {basics.profiles.map((social) => { + const SocialIcon = socials[social.network]; + return ( + + ); + })} +
+
+ {basics.email ? ( + + {basics.email} + + ) : null} + {basics.phone ? ( + + {basics.phone} + + ) : null} +
+ + + {'TD'} + ); }; diff --git a/packages/jsonresume-theme-tailwind/src/ui/ProjectCard.js b/packages/jsonresume-theme-tailwind/src/ui/ProjectCard.js new file mode 100644 index 00000000..f468f56f --- /dev/null +++ b/packages/jsonresume-theme-tailwind/src/ui/ProjectCard.js @@ -0,0 +1,51 @@ +import { + Card, + CardHeader, + CardContent, + CardDescription, + CardTitle, +} from './Card'; + +export default function ProjectCard({ title, description, link }) { + return ( + + +
+ + {link ? ( + + {title}{' '} + + + ) : ( + title + )} + +
+ {link?.replace('https://', '').replace('www.', '').replace('/', '')} +
+ + {description} + +
+ + +
+ {/* {tags.map((tag) => ( + + {tag} + + ))} */} +
+ + + ); +} diff --git a/packages/jsonresume-theme-tailwind/src/ui/Projects.js b/packages/jsonresume-theme-tailwind/src/ui/Projects.js index c62ad4a9..d6f13b74 100644 --- a/packages/jsonresume-theme-tailwind/src/ui/Projects.js +++ b/packages/jsonresume-theme-tailwind/src/ui/Projects.js @@ -1,53 +1,26 @@ -import { FaBeer as GitHub } from 'react-icons/fa'; import Section from './Section'; +import ProjectCard from './ProjectCard'; const Projects = ({ projects }) => { - if (!projects) { - return null; - } - return ( -
-
    - {projects.map( - ({ url, description, highlights, name, isActive, github }) => { - return ( -
  • -
    -
    -

    - - {name} - - {isActive && •} - {github && ( - - - - )} -

    -

    {description}

    -
    -
    - {highlights.map((highlight) => { - return {highlight}; - })} -
    -
    -
    • - ); - } - )} -
+
+

Projects

+
+ {projects?.map((project) => { + return ( + <> + asd + + + ); + })} +
); }; diff --git a/packages/jsonresume-theme-tailwind/src/ui/Resume.js b/packages/jsonresume-theme-tailwind/src/ui/Resume.js index fb78c1a5..1eb13d8a 100644 --- a/packages/jsonresume-theme-tailwind/src/ui/Resume.js +++ b/packages/jsonresume-theme-tailwind/src/ui/Resume.js @@ -2,6 +2,9 @@ import { Inter } from 'next/font/google'; import Hero from './Hero'; import About from './About'; import Work from './Work'; +import Projects from './Projects'; +import Education from './Education'; +import Skills from './Skills'; // import Projects from './Projects'; // import Summary from './Summary'; @@ -21,6 +24,9 @@ const Resume = ({ resume }) => { + + +
diff --git a/packages/jsonresume-theme-tailwind/src/ui/Skills.js b/packages/jsonresume-theme-tailwind/src/ui/Skills.js new file mode 100644 index 00000000..46f9978c --- /dev/null +++ b/packages/jsonresume-theme-tailwind/src/ui/Skills.js @@ -0,0 +1,17 @@ +import Section from './Section'; +import { Badge } from './Badge'; + +const Skills = ({ skills }) => { + return ( +
+

Skills

+
+ {skills.map((skill) => { + return {skill.name}; + })} +
+
+ ); +}; + +export default Skills; diff --git a/packages/jsonresume-theme-tailwind/src/ui/Work.js b/packages/jsonresume-theme-tailwind/src/ui/Work.js index 05d05610..88080e1f 100644 --- a/packages/jsonresume-theme-tailwind/src/ui/Work.js +++ b/packages/jsonresume-theme-tailwind/src/ui/Work.js @@ -34,7 +34,16 @@ const Work = ({ work }) => {

{w.title}

- {w.summary} + + {w.summary} +
+
+
    + {w.highlights?.map((h) => { + return
  • - {h}
    • ; + })} +
+ ); })} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9906beca..601ce336 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -389,6 +389,9 @@ importers: packages/jsonresume-theme-tailwind: dependencies: + '@radix-ui/react-avatar': + specifier: ^1.0.4 + version: 1.0.4(react-dom@18.2.0)(react@18.2.0) '@radix-ui/react-slot': specifier: ^1.0.2 version: 1.0.2(@types/react@18.2.39)(react@18.2.0) @@ -4749,6 +4752,28 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: true + /@radix-ui/react-avatar@1.0.4(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-kVK2K7ZD3wwj3qhle0ElXhOjbezIgyl2hVvgwfIdexL3rN6zJmy5AqqIf+D31lxVppdzV8CjAfZ6PklkmInZLw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.4 + '@radix-ui/react-context': 1.0.1(@types/react@18.2.39)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.17)(@types/react@18.2.39)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.39)(react@18.2.0) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.39)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.17)(@types/react@18.2.39)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==} peerDependencies: @@ -4798,7 +4823,6 @@ packages: '@babel/runtime': 7.24.4 '@types/react': 18.2.39 react: 18.2.0 - dev: true /@radix-ui/react-direction@1.0.1(@types/react@18.2.39)(react@18.2.0): resolution: {integrity: sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==} @@ -4961,7 +4985,6 @@ packages: '@types/react-dom': 18.2.17 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - dev: true /@radix-ui/react-roving-focus@1.0.4(@types/react-dom@18.2.17)(@types/react@18.2.39)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==} @@ -5157,7 +5180,6 @@ packages: '@babel/runtime': 7.24.4 '@types/react': 18.2.39 react: 18.2.0 - dev: true /@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.2.39)(react@18.2.0): resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==} @@ -5201,7 +5223,6 @@ packages: '@babel/runtime': 7.24.4 '@types/react': 18.2.39 react: 18.2.0 - dev: true /@radix-ui/react-use-previous@1.0.1(@types/react@18.2.39)(react@18.2.0): resolution: {integrity: sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==} @@ -7132,7 +7153,6 @@ packages: resolution: {integrity: sha512-rvrT/M7Df5eykWFxn6MYt5Pem/Dbyc1N8Y0S9Mrkw2WFCRiqUgw9P7ul2NpwsXCSM1DVdENzdG9J5SreqfAIWg==} dependencies: '@types/react': 18.2.39 - dev: true /@types/react@18.2.39: resolution: {integrity: sha512-Oiw+ppED6IremMInLV4HXGbfbG6GyziY3kqAwJYOR0PNbkYDmLWQA3a95EhdSmamsvbkJN96ZNN+YD+fGjzSBA==} @@ -11209,7 +11229,7 @@ packages: peerDependencies: eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 dependencies: - '@babel/runtime': 7.23.4 + '@babel/runtime': 7.24.4 aria-query: 5.3.0 array-includes: 3.1.7 array.prototype.flatmap: 1.3.2