[V0_FILE]javascript:file="next.config.mjs" isMerged="true" /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, } export default nextConfig [V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "default", "rsc": true, "tsx": true, "tailwind": { "config": "tailwind.config.ts", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="context/cv-context.tsx" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useState, useEffect } from "react" type CVContextType = { cv: any updateCV: (newCV: any) => void updateSection: (sectionName: string, sectionData: any) => void updateItem: (sectionName: string, itemIndex: number, itemData: any) => void addItem: (sectionName: string, itemData: any) => void removeItem: (sectionName: string, itemIndex: number) => void } const CVContext = createContext(undefined) export const CVProvider: React.FC<{ initialCV: any; children: React.ReactNode }> = ({ initialCV, children }) => { const [cv, setCV] = useState(initialCV) useEffect(() => { setCV(initialCV) }, [initialCV]) const updateCV = (newCV: any) => { setCV(newCV) } const updateSection = (sectionName: string, sectionData: any) => { setCV((prevCV: any) => { const updatedCollections = prevCV.allCollections.map((collection: any) => { if (collection.name === sectionName) { return { ...collection, ...sectionData } } return collection }) return { ...prevCV, allCollections: updatedCollections } }) } const updateItem = (sectionName: string, itemIndex: number, itemData: any) => { setCV((prevCV: any) => { const updatedCollections = prevCV.allCollections.map((collection: any) => { if (collection.name === sectionName) { const updatedItems = [...collection.items] updatedItems[itemIndex] = { ...updatedItems[itemIndex], ...itemData } return { ...collection, items: updatedItems } } return collection }) return { ...prevCV, allCollections: updatedCollections } }) } const addItem = (sectionName: string, itemData: any) => { setCV((prevCV: any) => { const updatedCollections = prevCV.allCollections.map((collection: any) => { if (collection.name === sectionName) { return { ...collection, items: [...collection.items, itemData] } } return collection }) return { ...prevCV, allCollections: updatedCollections } }) } const removeItem = (sectionName: string, itemIndex: number) => { setCV((prevCV: any) => { const updatedCollections = prevCV.allCollections.map((collection: any) => { if (collection.name === sectionName) { const updatedItems = collection.items.filter((_: any, index: number) => index !== itemIndex) return { ...collection, items: updatedItems } } return collection }) return { ...prevCV, allCollections: updatedCollections } }) } return ( {children} ) } export const useCV = () => { const context = useContext(CVContext) if (context === undefined) { throw new Error("useCV must be used within a CVProvider") } return context } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import "./globals.css" import type { Metadata } from "next" import { ThemeProvider } from "../components/theme-provider" export const metadata: Metadata = { title: "CV", description: "Personal CV", generator: "v0.dev", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { CVProvider } from "../context/cv-context" import Profile from "../components/profile" // Initial CV data import { CvData } from "../lib/data" export default function Page() { return ( ) } [V0_FILE]typescript:file="utils/placeholder-image.ts" isMerged="true" export const generatePlaceholderImageUrl = (query: string, width = 1200, height = 800): string => { return `/placeholder.svg?height=${height}&width=${width}&query=${encodeURIComponent(query)}` } [V0_FILE]css:file="styles/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; body { font-family: Arial, Helvetica, sans-serif; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]css:file="components/attachments.module.css" isMerged="true" .attachments { margin-top: 12px; width: 100%; position: relative; } .scrollableArea { position: absolute; inset: 0; overflow-x: scroll; scrollbar-width: none; } .scrollableArea::-webkit-scrollbar { display: none; } .images { display: flex; column-gap: 8px; position: relative; width: fit-content; min-width: 100%; } .media { background-color: var(--wash2); border-radius: 8px; overflow: hidden; position: relative; cursor: pointer; } .media img, .media video { position: absolute; width: 100%; height: 100%; object-fit: cover; } .media::after { position: absolute; inset: 0; content: ""; border: 1px solid var(--transparentBorder); border-radius: inherit; z-index: 10; pointer-events: none; } .media:active { cursor: -webkit-grabbing; } @media only screen and (max-width: 480px) { .scrollableArea { position: absolute; left: -40px; right: -24px; } .scrollableArea .images > div:first-child { margin-left: 40px; } .scrollableArea .images > div:last-child { margin-right: 24px; } .scrollableArea::-webkit-scrollbar-track { margin-left: 40px; margin-right: 24px; } } [V0_FILE]typescriptreact:file="components/rich-text.tsx" isMerged="true" import type React from "react" import Markdown from "react-markdown" interface RichTextProps { text: string } const Link: React.FC = ({ href, children }) => { return ( {children} ) } const components: Partial<{ [TagName in keyof React.JSX.IntrinsicElements]: React.FunctionComponent }> = { a: Link, } const RichText: React.FC = ({ text }) => { return (

{text}

) } // Add global styles for markdown content const markdownStyles = ` .markdown-wrapper ul { list-style-position: outside; list-style-type: disc; padding-left: 0; margin: 0; } .markdown-wrapper li { padding: 4px 0; } .markdown-wrapper li::marker { color: var(--grey3); } .markdown-wrapper li > p { margin: 0; padding: 0; display: inline; } .markdown-wrapper p { margin-bottom: 0.5rem; } .markdown-wrapper p:last-child { margin-bottom: 0; } .markdown-wrapper a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--primaryBorderColor); } .markdown-wrapper a:hover { border-bottom: 1px solid currentColor; } .dark .markdown-wrapper a { border-bottom: 1px solid var(--primaryBorderColor); } .dark .markdown-wrapper a:hover { border-bottom: 1px solid currentColor; } ` // Add the styles to the document if (typeof document !== "undefined") { const styleElement = document.createElement("style") styleElement.textContent = markdownStyles document.head.appendChild(styleElement) } export default RichText [V0_FILE]typescriptreact:file="components/attachments.tsx" isMerged="true" "use client" import type React from "react" import { useRef, useState } from "react" import Image from "next/image" import styles from "./attachments.module.css" import Scrollbar from "./scrollbar" import isMobile from "./is-mobile" type AttachmentsProps = { attachments: Array } const Attachments: React.FC = ({ attachments }) => { const [lightboxOpen, setLightboxOpen] = useState(false) const [currentIndex, setCurrentIndex] = useState(0) const scrollRef = useRef(null) const openLightbox = (index: number) => { setCurrentIndex(index) setLightboxOpen(true) } const closeLightbox = () => { setLightboxOpen(false) } const isOnMobile = isMobile() return ( <>

{attachments.map((media, index) => (

openLightbox(index)} className={styles.media} style={{ height: "90px", aspectRatio: media.width / media.height < 0.42 ? 0.42 : media.width / media.height > 2.33 ? 2.33 : media.width / media.height, }} > {media.type === "image" ? (

) : media.type === "video" ? (

))}

{lightboxOpen && (

{attachments[currentIndex].type === "image" ? (

) : attachments[currentIndex].type === "video" ? (

)} ) } export default Attachments [V0_FILE]typescriptreact:file="components/profile.tsx" isMerged="true" "use client" import Image from "next/image" import type React from "react" import { useState } from "react" import { ArrowIcon } from "./icons" import RichText from "./rich-text" import Attachments from "./attachments" import { useCV } from "../context/cv-context" // Define the section order const sectionOrder = [ "Work Experience", "Projects", "Side Projects", "Exhibitions", "Speaking", "Writing", "Awards", "Features", "Volunteering", "Education", "Certifications", "Contact", "Teams", ] const Profile: React.FC = () => { const { cv, updateCV } = useCV() // Central editor modal state const [editorOpen, setEditorOpen] = useState(false) // Filter and sort collections based on the section order const sortedCollections = cv.allCollections .filter((collection: any) => sectionOrder.includes(collection.name)) .sort((a: any, b: any) => { return sectionOrder.indexOf(a.name) - sectionOrder.indexOf(b.name) }) return (

{cv.general.displayName}

{cv.general.byline}

{cv.general.website ? ( {cv.general.website} ) : null}

{cv.general.about ? (

About

) : null} {sortedCollections.map((collection: any, index: number) => { return (

{collection.name}

{collection.items.map((experience: any, itemIndex: number) => { if (collection.name === "Contact") { return (

) } return (

) })}

) } type ProfileItemProps = { experience: any } const ProfileItem: React.FC = ({ experience }) => { let title if (experience.url) { title = ( <> {experience.heading} ) } else { title = experience.heading } return (

{experience.year} 0000 — 0000

{title}

{experience.location ?

{experience.location}

: null} {experience.description ? (

) : null} {experience.attachments && experience.attachments.length > 0 ? ( ) : null}

) } type ContactItemProps = { experience: any } const ContactItem: React.FC = ({ experience }) => { return (

{experience.platform} 0000 — 0000

{experience.handle}

) } export default Profile [V0_FILE]typescriptreact:file="components/icons.tsx" isMerged="true" import type React from "react" interface IconProps extends React.SVGProps { size?: number | string } const defaultSize = 16 const defaultStrokeWidth = 1.5 export const PencilIcon: React.FC = ({ size = defaultSize, strokeWidth = defaultStrokeWidth, ...props }) => ( ) export const PlusIcon: React.FC = ({ size = defaultSize, strokeWidth = defaultStrokeWidth, ...props }) => ( ) export const XIcon: React.FC = ({ size = defaultSize, strokeWidth = defaultStrokeWidth, ...props }) => ( ) export const PaperclipIcon: React.FC = ({ size = defaultSize, strokeWidth = defaultStrokeWidth, ...props }) => ( ) export const SunIcon: React.FC = ({ size = 20, strokeWidth = defaultStrokeWidth, ...props }) => ( ) export const MoonIcon: React.FC = ({ size = 20, strokeWidth = defaultStrokeWidth, ...props }) => ( ) export const ArrowIcon: React.FC = ({ size = 12, fill = "currentColor", ...props }) => ( ) [V0_FILE]typescriptreact:file="components/is-mobile.tsx" isMerged="true" const isMobile = (): boolean => { if (typeof window === "undefined") return false return window.innerWidth < 768 } export default isMobile [V0_FILE]typescriptreact:file="components/scrollbar.tsx" isMerged="true" import type React from "react" type ScrollbarProps = { scrollview: React.RefObject innerChild: React.RefObject inlineStyle?: React.CSSProperties } const Scrollbar: React.FC = ({ scrollview, innerChild, inlineStyle = {} }) => { // This is a simplified version of the scrollbar // In a real implementation, we would track scroll position and update the thumb return (

) } export default Scrollbar [V0_FILE]typescriptreact:file="components/modal.tsx" isMerged="true" "use client" import type React from "react" // import { useEffect, useRef } from "react" // Removed import * as Dialog from "@radix-ui/react-dialog" // Added interface ModalProps { isOpen: boolean onClose: () => void title: string children: React.ReactNode } const Modal: React.FC = ({ isOpen, onClose, title, children }) => { return ( !open && onClose()}>

{title}

{children}

) } export default Modal [V0_FILE]typescriptreact:file="hooks/use-mobile.tsx" isMerged="true" "use client" import * as React from "react" const MOBILE_BREAKPOINT = 768 export function useIsMobile() { const [isMobile, setIsMobile] = React.useState(undefined) React.useEffect(() => { const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`) const onChange = () => { setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) } mql.addEventListener("change", onChange) setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) return () => mql.removeEventListener("change", onChange) }, []) return !!isMobile } [V0_FILE]typescript:file="hooks/use-toast.ts" isMerged="true" "use client" // Inspired by react-hot-toast library import * as React from "react" import type { ToastActionElement, ToastProps } from "@/components/ui/toast" const TOAST_LIMIT = 1 const TOAST_REMOVE_DELAY = 1000000 type ToasterToast = ToastProps & { id: string title?: React.ReactNode description?: React.ReactNode action?: ToastActionElement } const actionTypes = { ADD_TOAST: "ADD_TOAST", UPDATE_TOAST: "UPDATE_TOAST", DISMISS_TOAST: "DISMISS_TOAST", REMOVE_TOAST: "REMOVE_TOAST", } as const let count = 0 function genId() { count = (count + 1) % Number.MAX_SAFE_INTEGER return count.toString() } type ActionType = typeof actionTypes type Action = | { type: ActionType["ADD_TOAST"] toast: ToasterToast } | { type: ActionType["UPDATE_TOAST"] toast: Partial } | { type: ActionType["DISMISS_TOAST"] toastId?: ToasterToast["id"] } | { type: ActionType["REMOVE_TOAST"] toastId?: ToasterToast["id"] } interface State { toasts: ToasterToast[] } const toastTimeouts = new Map>() const addToRemoveQueue = (toastId: string) => { if (toastTimeouts.has(toastId)) { return } const timeout = setTimeout(() => { toastTimeouts.delete(toastId) dispatch({ type: "REMOVE_TOAST", toastId: toastId, }) }, TOAST_REMOVE_DELAY) toastTimeouts.set(toastId, timeout) } export const reducer = (state: State, action: Action): State => { switch (action.type) { case "ADD_TOAST": return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT), } case "UPDATE_TOAST": return { ...state, toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)), } case "DISMISS_TOAST": { const { toastId } = action // ! Side effects ! - This could be extracted into a dismissToast() action, // but I'll keep it here for simplicity if (toastId) { addToRemoveQueue(toastId) } else { state.toasts.forEach((toast) => { addToRemoveQueue(toast.id) }) } return { ...state, toasts: state.toasts.map((t) => t.id === toastId || toastId === undefined ? { ...t, open: false, } : t, ), } } case "REMOVE_TOAST": if (action.toastId === undefined) { return { ...state, toasts: [], } } return { ...state, toasts: state.toasts.filter((t) => t.id !== action.toastId), } } } const listeners: Array<(state: State) => void> = [] let memoryState: State = { toasts: [] } function dispatch(action: Action) { memoryState = reducer(memoryState, action) listeners.forEach((listener) => { listener(memoryState) }) } type Toast = Omit function toast({ ...props }: Toast) { const id = genId() const update = (props: ToasterToast) => dispatch({ type: "UPDATE_TOAST", toast: { ...props, id }, }) const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id }) dispatch({ type: "ADD_TOAST", toast: { ...props, id, open: true, onOpenChange: (open) => { if (!open) dismiss() }, }, }) return { id: id, dismiss, update, } } function useToast() { const [state, setState] = React.useState(memoryState) React.useEffect(() => { listeners.push(setState) return () => { const index = listeners.indexOf(setState) if (index > -1) { listeners.splice(index, 1) } } }, [state]) return { ...state, toast, dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }), } } export { useToast, toast } [V0_FILE]typescript:file="lib/utils.ts" isMerged="true" import { clsx, type ClassValue } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx" isMerged="true" "use client" import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" const AspectRatio = AspectRatioPrimitive.Root export { AspectRatio } [V0_FILE]typescriptreact:file="components/ui/use-mobile.tsx" isMerged="true" "use client" import * as React from "react" const MOBILE_BREAKPOINT = 768 export function useIsMobile() { const [isMobile, setIsMobile] = React.useState(undefined) React.useEffect(() => { const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`) const onChange = () => { setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) } mql.addEventListener("change", onChange) setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) return () => mql.removeEventListener("change", onChange) }, []) return !!isMobile } [V0_FILE]typescriptreact:file="components/ui/pagination.tsx" isMerged="true" import * as React from "react" import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react" import { cn } from "@/lib/utils" import { type ButtonProps, buttonVariants } from "@/components/ui/button" const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (

About

Tags

Share

About

Tags

Share

More from csi-abil

More Templates Like This

About

Tags

Share

About

Tags

Share

More from csi-abil

More Templates Like This