tailwind

jsonresume · Apr 26, 2024 · 0bbefd0 · 0bbefd0
1 parent 83187f6
commit 0bbefd0
Show file tree

Hide file tree

Showing 10 changed files with 262 additions and 59 deletions.
diff --git 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
@@ -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) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-xl',
+      className
+    )}
+    {...props}
+  />
+));
+
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn('aspect-square h-full w-full', className)}
+    {...props}
+  />
+));
+
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      'flex h-full w-full items-center justify-center rounded-xl bg-muted',
+      className
+    )}
+    {...props}
+  />
+));
+
+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
@@ -0,0 +1,27 @@
+import Section from './Section';
+import { Card, CardHeader, CardContent } from './Card';
+
+const Education = ({ education }) => {
+  return (
+    <Section>
+      <h2 className="text-xl font-bold">Education</h2>
+      {education.map((e) => {
+        return (
+          <Card key={e.institution}>
+            <CardHeader>
+              <div className="flex items-center justify-between gap-x-2 text-base">
+                <h3 className="font-semibold leading-none">{e.institution}</h3>
+                <div className="text-sm tabular-nums text-gray-500">
+                  {e.startDate} - {e.endDate}
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent className="mt-2">{e.area}</CardContent>
+          </Card>
+        );
+      })}
+    </Section>
+  );
+};
+
+export default Education;
diff --git 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 (
     <div className="flex items-center justify-between">
@@ -7,15 +17,60 @@ const HeroComponent = ({ basics }) => {
           {basics.label}
         </p>
         <p className="max-w-md items-center text-pretty font-mono text-xs text-muted-foreground">
-          <a
-            className="inline-flex gap-x-1.5 align-baseline leading-none hover:underline"
-            href={basics.location.city}
-            target="_blank"
-          >
+          <span className="inline-flex gap-x-1.5 align-baseline leading-none">
+            <CiGlobe />
             {basics.location.city}
-          </a>
+          </span>
         </p>
+        <div className="flex gap-x-1 pt-1 font-mono text-sm text-muted-foreground print:hidden">
+          {basics.email ? (
+            <Button className="size-8" variant="outline" size="icon" asChild>
+              <a href={`mailto:${basics.email}`}>
+                <CiMail className="size-4" />
+              </a>
+            </Button>
+          ) : null}
+          {basics.phone ? (
+            <Button className="size-8" variant="outline" size="icon" asChild>
+              <a href={`tel:${basics.phone}`}>
+                <CiPhone className="size-4" />
+              </a>
+            </Button>
+          ) : null}
+          {basics.profiles.map((social) => {
+            const SocialIcon = socials[social.network];
+            return (
+              <Button
+                key={social.username}
+                className="size-8"
+                variant="outline"
+                size="icon"
+                asChild
+              >
+                <a href={social.url}>
+                  <SocialIcon className="size-4" />
+                </a>
+              </Button>
+            );
+          })}
+        </div>
+        <div className="hidden flex-col gap-x-1 font-mono text-sm text-muted-foreground print:flex">
+          {basics.email ? (
+            <a href={`mailto:${basics.email}`}>
+              <span className="underline">{basics.email}</span>
+            </a>
+          ) : null}
+          {basics.phone ? (
+            <a href={`tel:${basics.phone}`}>
+              <span className="underline">{basics.phone}</span>
+            </a>
+          ) : null}
+        </div>
       </div>
+      <Avatar className="size-28">
+        <AvatarImage alt={basics.name} src={basics.image} />
+        <AvatarFallback>{'TD'}</AvatarFallback>
+      </Avatar>
     </div>
   );
 };

diff --git a/packages/jsonresume-theme-tailwind/src/ui/ProjectCard.js 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 (
+    <Card className="flex flex-col overflow-hidden border border-muted p-3">
+      <CardHeader className="">
+        <div className="space-y-1">
+          <CardTitle className="text-base">
+            {link ? (
+              <a
+                href={link}
+                target="_blank"
+                className="inline-flex items-center gap-1 hover:underline"
+              >
+                {title}{' '}
+                <span className="size-1 rounded-full bg-green-500"></span>
+              </a>
+            ) : (
+              title
+            )}
+          </CardTitle>
+          <div className="hidden font-mono text-xs underline print:visible">
+            {link?.replace('https://', '').replace('www.', '').replace('/', '')}
+          </div>
+          <CardDescription className="font-mono text-xs">
+            {description}
+          </CardDescription>
+        </div>
+      </CardHeader>
+      <CardContent className="mt-auto flex">
+        <div className="mt-2 flex flex-wrap gap-1">
+          {/* {tags.map((tag) => (
+            <Badge
+              className="px-1 py-0 text-[10px]"
+              variant="secondary"
+              key={tag}
+            >
+              {tag}
+            </Badge>
+          ))} */}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git 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 (
-    <Section title="Projects">
-      <ul class="projects">
-        {projects.map(
-          ({ url, description, highlights, name, isActive, github }) => {
-            return (
-              <li>
-                <article>
-                  <header>
-                    <h3>
-                      <a
-                        href={url}
-                        target="_blank"
-                        title={`Ver el proyecto ${name}`}
-                      >
-                        {name}
-                      </a>
-                      {isActive && <span>•</span>}
-                      {github && (
-                        <a
-                          class="github-code-link"
-                          href={github}
-                          target="_blank"
-                          title={`Ver código fuente del proyecto ${name}`}
-                        >
-                          <GitHub />
-                        </a>
-                      )}
-                    </h3>
-                    <p>{description}</p>
-                  </header>
-                  <footer>
-                    {highlights.map((highlight) => {
-                      return <span>{highlight}</span>;
-                    })}
-                  </footer>
-                </article>
-              </li>
-            );
-          }
-        )}
-      </ul>
+    <Section className="print-force-new-page scroll-mb-16">
+      <h2 className="text-xl font-bold">Projects</h2>
+      <div className="-mx-3 grid grid-cols-1 gap-3 print:grid-cols-3 print:gap-2 md:grid-cols-2 lg:grid-cols-3">
+        {projects?.map((project) => {
+          return (
+            <>
+              asd
+              <ProjectCard
+                key={project.title}
+                title={project.title}
+                description={project.description}
+                tags={project.techStack}
+                link={'link' in project ? project.link.href : undefined}
+              />
+            </>
+          );
+        })}
+      </div>
     </Section>
   );
 };

diff --git 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 }) => {
             <Hero basics={resume.basics} />
             <About basics={resume.basics} />
             <Work work={resume.work} />
+            <Education education={resume.education} />
+            <Skills skills={resume.skills} />
+            <Projects projects={resume.projects} />
           </section>
         </main>
       </div>

diff --git a/packages/jsonresume-theme-tailwind/src/ui/Skills.js 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 (
+    <Section>
+      <h2 className="text-xl font-bold">Skills</h2>
+      <div className="flex flex-wrap gap-1">
+        {skills.map((skill) => {
+          return <Badge key={skill.name}>{skill.name}</Badge>;
+        })}
+      </div>
+    </Section>
+  );
+};
+
+export default Skills;
diff --git 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 }) => {
 
               <h4 className="font-mono text-sm leading-none">{w.title}</h4>
             </CardHeader>
-            <CardContent className="mt-2 text-xs">{w.summary}</CardContent>
+            <CardContent className="mt-2 text-xs">
+              {w.summary}
+              <br />
+              <br />
+              <ul>
+                {w.highlights?.map((h) => {
+                  return <li>- {h}</li>;
+                })}
+              </ul>
+            </CardContent>
           </Card>
         );
       })}