Improved frontend design

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@apollo/server": "^4.10.2",
     "@as-integrations/next": "^3.0.0",
+    "@fontsource/poppins": "^5.1.1",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-slot": "^1.0.2",

src/apollo/type-defs.ts

@@ -80,6 +80,9 @@ export class Project {
   @Field(() => String)
   description: string;
 
+  @Field(() => Boolean)
+  isActive: boolean;
+
   @Field(() => Link, { nullable: true })
   link?: Link;
 }

src/app/components/Education.tsx

@@ -15,7 +15,7 @@ interface EducationPeriodProps {
 function EducationPeriod({ start, end }: EducationPeriodProps) {
   return (
     <div
-      className="text-sm tabular-nums text-gray-500"
+      className="text-base tabular-nums text-gray-500"
       aria-label={`Period: ${start} to ${end}`}
     >
       {start} - {end}
@@ -47,7 +47,7 @@ function EducationItem({ education }: EducationItemProps) {
         </div>
       </CardHeader>
       <CardContent
-        className="mt-2 text-foreground/80 print:text-[12px]"
+        className="mt-2 text-base text-foreground/80 print:text-[12px]"
         aria-labelledby={`education-${school
           .toLowerCase()
           .replace(/\s+/g, "-")}`}

src/app/components/Header.tsx

@@ -10,7 +10,7 @@ interface LocationLinkProps {
 
 function LocationLink({ location, locationLink }: LocationLinkProps) {
   return (
-    <p className="max-w-md items-center text-pretty font-mono text-xs text-foreground">
+    <p className="font-poppins max-w-md items-center text-pretty text-xs text-foreground">
       <a
         className="inline-flex gap-x-1.5 align-baseline leading-none hover:underline"
         href={locationLink}
@@ -54,7 +54,7 @@ interface ContactButtonsProps {
 function ContactButtons({ contact, personalWebsiteUrl }: ContactButtonsProps) {
   return (
     <div
-      className="flex gap-x-1 pt-1 font-mono text-sm text-foreground/80 print:hidden"
+      className="font-poppins flex gap-x-1 pt-1 text-sm text-foreground/80 print:hidden"
       role="list"
       aria-label="Contact links"
     >
@@ -99,7 +99,7 @@ interface PrintContactProps {
 function PrintContact({ contact, personalWebsiteUrl }: PrintContactProps) {
   return (
     <div
-      className="hidden gap-x-2 font-mono text-sm text-foreground/80 print:flex print:text-[12px]"
+      className="font-poppins hidden gap-x-2 text-sm text-foreground/80 print:flex print:text-[12px]"
       aria-label="Print contact information"
     >
       {personalWebsiteUrl && (
@@ -147,7 +147,7 @@ export function Header() {
           {RESUME_DATA.name}
         </h1>
         <p
-          className="max-w-md text-pretty font-mono text-sm text-foreground/80 print:text-[12px]"
+          className="font-poppins max-w-md text-pretty text-base text-foreground/80 print:text-[12px]"
           aria-labelledby="resume-name"
         >
           {RESUME_DATA.about}

src/app/components/Projects.tsx

@@ -14,12 +14,13 @@ type ProjectTags = readonly string[];
 interface ProjectLinkProps {
   title: string;
   link?: string;
+  isActive: boolean;
 }
 
 /**
  * Renders project title with optional link and status indicator
  */
-function ProjectLink({ title, link }: ProjectLinkProps) {
+function ProjectLink({ title, link, isActive }: ProjectLinkProps) {
   if (!link) {
     return <span>{title}</span>;
   }
@@ -34,13 +35,10 @@ function ProjectLink({ title, link }: ProjectLinkProps) {
         aria-label={`${title} project (opens in new tab)`}
       >
         {title}
-        <span
-          className="size-1 rounded-full bg-green-500"
-          aria-label="Active project indicator"
-        />
-      </a>
+      </a>{' '}
+      <span className={`${isActive ? 'text-[rgb(242,140,40)]' : 'text-[rgb(0,163,108)]'} animate-[pulse_1s_ease-in_infinite]`}>•</span>
       <div
-        className="hidden font-mono text-xs underline print:visible"
+        className="hidden font-poppins text-xs underline print:visible"
         aria-hidden="true"
       >
         {link.replace("https://", "").replace("www.", "").replace("/", "")}
@@ -67,7 +65,7 @@ function ProjectTags({ tags }: ProjectTagsProps) {
       {tags.map((tag) => (
         <li key={tag}>
           <Badge
-            className="px-1 py-0 text-[10px] print:px-1 print:py-0.5 print:text-[8px] print:leading-tight"
+            className="px-1 py-0 text-xs print:px-1 print:py-0.5 print:text-[8px] print:leading-tight"
             variant="secondary"
           >
             {tag}
@@ -81,14 +79,15 @@ function ProjectTags({ tags }: ProjectTagsProps) {
 interface ProjectCardProps {
   title: string;
   description: string;
+  isActive: boolean;
   tags: ProjectTags;
   link?: string;
 }
 
 /**
  * Card component displaying project information
  */
-function ProjectCard({ title, description, tags, link }: ProjectCardProps) {
+function ProjectCard({ title, description, tags, link, isActive }: ProjectCardProps) {
   return (
     <Card
       className="flex h-full flex-col overflow-hidden border p-3"
@@ -97,10 +96,10 @@ function ProjectCard({ title, description, tags, link }: ProjectCardProps) {
       <CardHeader>
         <div className="space-y-1">
           <CardTitle className="text-base">
-            <ProjectLink title={title} link={link} />
+            <ProjectLink title={title} link={link} isActive={isActive} />
           </CardTitle>
           <CardDescription
-            className="text-pretty font-mono text-xs print:text-[10px]"
+            className="text-pretty font-poppins text-base text-foreground/80 print:text-[10px]"
             aria-label="Project description"
           >
             {description}
@@ -140,6 +139,7 @@ export function Projects({ projects }: ProjectsProps) {
             <ProjectCard
               title={project.title}
               description={project.description}
+              isActive={project.isActive}
               tags={project.techStack}
               link={"link" in project ? project.link.href : undefined}
             />

src/app/components/Skills.tsx

@@ -21,7 +21,7 @@ function SkillsList({ skills, className }: SkillsListProps) {
     >
       {skills.map((skill) => (
         <li key={skill}>
-          <Badge className="print:text-[10px]" aria-label={`Skill: ${skill}`}>
+          <Badge className="font-poppins text-sm print:text-[10px]" aria-label={`Skill: ${skill}`}>
             {skill}
           </Badge>
         </li>

src/app/components/Summary.tsx

@@ -17,7 +17,7 @@ export function Summary({ summary, className }: AboutProps) {
         About
       </h2>
       <div
-        className="text-pretty font-mono text-sm text-foreground/80 print:text-[12px]"
+        className="text-pretty font-poppins text-base text-foreground/80 print:text-[12px]"
         aria-labelledby="about-section"
       >
         {summary}

src/app/components/WorkExperience.tsx

@@ -49,7 +49,7 @@ interface WorkPeriodProps {
 function WorkPeriod({ start, end }: WorkPeriodProps) {
   return (
     <div
-      className="text-sm tabular-nums text-gray-500"
+      className="text-base tabular-nums text-gray-500"
       aria-label={`Employment period: ${start} to ${end ?? "Present"}`}
     >
       {start} - {end ?? "Present"}
@@ -104,13 +104,13 @@ function WorkExperienceItem({ work }: WorkExperienceItemProps) {
           <WorkPeriod start={start} end={end} />
         </div>
 
-        <h4 className="font-mono text-sm font-semibold leading-none print:text-[12px]">
+        <h4 className="font-poppins text-base font-semibold leading-none print:text-[12px]">
           {title}
         </h4>
       </CardHeader>
 
       <CardContent>
-        <div className="mt-2 text-xs text-foreground/80 print:mt-1 print:text-[10px] text-pretty">
+        <div className="mt-2 text-base text-foreground/80 print:mt-1 print:text-[10px] text-pretty">
           {description}
         </div>
         <div className="mt-2">

src/app/page.tsx

@@ -66,7 +66,7 @@ export default function ResumePage() {
       </div>
 
       <section
-        className="mx-auto w-full max-w-2xl space-y-8 bg-white print:space-y-4"
+        className="mx-auto w-full max-w-3xl space-y-8 bg-white print:space-y-4"
         aria-label="Resume Content"
       >
         <Header />

src/components/command-menu.tsx

@@ -86,4 +86,4 @@ export const CommandMenu = ({ links }: Props) => {
       </CommandDialog>
     </>
   );
-};
+};

src/components/icons/index.ts

@@ -1,5 +1,4 @@
 import { GitHubIcon } from "./GitHubIcon";
 import { LinkedInIcon } from "./LinkedInIcon";
 import { XIcon } from "./XIcon";
-
 export { GitHubIcon, LinkedInIcon, XIcon };

src/components/ui/badge.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-semibold font-mono transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-nowrap",
+  "inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-semibold font-poppins transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-nowrap",
   {
     variants: {
       variant: {
@@ -26,7 +26,7 @@ const badgeVariants = cva(
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+  VariantProps<typeof badgeVariants> { }
 
 function Badge({ className, variant, ...props }: BadgeProps) {
   return (

src/components/ui/button.tsx

@@ -37,7 +37,7 @@ const buttonVariants = cva(
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+  VariantProps<typeof buttonVariants> {
   asChild?: boolean;
 }
 

src/components/ui/card.tsx

@@ -47,7 +47,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-sm text-foreground", className)}
+    className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
 ));
@@ -60,7 +60,7 @@ const CardContent = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "text-pretty font-mono text-sm text-muted-foreground",
+      "font-poppins text-pretty text-sm text-muted-foreground",
       className,
     )}
     {...props}

src/components/ui/command.tsx

@@ -24,7 +24,7 @@ const Command = React.forwardRef<
 
 Command.displayName = CommandPrimitive.displayName;
 
-interface CommandDialogProps extends DialogProps {}
+interface CommandDialogProps extends DialogProps { }
 
 const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (

src/components/ui/dialog.tsx

@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] print:hidden sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg print:hidden",
         className,
       )}
       {...props}

src/components/ui/section.tsx

@@ -1,12 +1,12 @@
 import { cn } from "@/lib/utils";
 import React from "react";
 
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {}
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> { }
 
 export function Section({ className, ...props }: BadgeProps) {
   return (
     <section
-      className={cn("flex min-h-0 flex-col gap-y-3 print:gap-y-1", className)}
+      className={cn("flex min-h-0 flex-col gap-y-3", className)}
       {...props}
     />
   );

src/data/resume-data.tsx

@@ -200,6 +200,7 @@ export const RESUME_DATA = {
       techStack: ["TypeScript", "Next.js", "Browser Extension", "PostgreSQL"],
       description:
         "Browser extension for debugging web applications. Includes taking screenshots, screen recording, E2E tests generation and generating bug reports",
+      isActive: false,
       logo: MonitoLogo,
       link: {
         label: "monito.dev",
@@ -220,6 +221,7 @@ export const RESUME_DATA = {
       ],
       description:
         "Platform for online consultations with real-time video meetings and scheduling",
+      isActive: false,
       logo: ConsultlyLogo,
       link: {
         label: "consultly.com",
@@ -231,6 +233,7 @@ export const RESUME_DATA = {
       techStack: ["TypeScript", "Next.js", "Tailwind CSS"],
       description:
         "An open source minimalist, print friendly CV template with a focus on readability and clean design. >9k stars on GitHub",
+      isActive: true,
       logo: MonitoLogo,
       link: {
         label: "Minimalist CV",