[V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Tayyaba Imtiaz | Portfolio", description: "Professional portfolio of Tayyaba Imtiaz, Computer Science student at FAST NUCES", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } .animate-in { animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .section-heading { @apply text-3xl font-bold mb-6 text-primary; } .section { @apply py-16; } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" "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]typescriptreact:file="components/ui/button.tsx" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/card.tsx" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (

)) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="lib/utils.ts" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" export function ThemeToggle() { const { setTheme, theme } = useTheme() return ( ) } [V0_FILE]typescriptreact:file="components/navbar.tsx" "use client" import { useState } from "react" import Link from "next/link" import { Menu, X } from "lucide-react" import { ThemeToggle } from "@/components/theme-toggle" import { Button } from "@/components/ui/button" export function Navbar() { const [isMenuOpen, setIsMenuOpen] = useState(false) const toggleMenu = () => { setIsMenuOpen(!isMenuOpen) } const navItems = [ { name: "Home", href: "#home" }, { name: "About", href: "#about" }, { name: "Skills", href: "#skills" }, { name: "Education", href: "#education" }, { name: "Projects", href: "#projects" }, { name: "Contact", href: "#contact" }, ] return (

Tayyaba Imtiaz {/* Desktop Navigation /}
{navItems.map((item) => ( {item.name} ))}
{/ Mobile Navigation Toggle /}

{/ Mobile Navigation Menu */} {isMenuOpen && (

{navItems.map((item) => ( {item.name} ))}

)}
) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" import { Button } from "@/components/ui/button" import { ChevronDown, Download } from "lucide-react" import Link from "next/link" export function HeroSection() { return (

Hi, I'm Tayyaba Imtiaz

Computer Science Student

Responsible and ambitious student with excellent time management and customer service abilities. Passionate about learning new technologies and applying my expertise in projects.

) } [V0_FILE]typescriptreact:file="components/about-section.tsx" export function AboutSection() { return (

About Me

I am a Computer Science student at FAST NUCES with a passion for technology and problem-solving. My academic journey has equipped me with strong programming skills and a solid foundation in computer science principles.

I am passionate about learning new technologies and applying my knowledge to create innovative solutions. With excellent time management and communication skills, I am able to work effectively both independently and as part of a team.

Career Objective

Responsible and ambitious student with excellent time management and customer service abilities. Seeking to apply my expertise in projects and eager to learn more. Possess proven communication skills and a strong work ethic that will aid your company in meeting its milestones and goals. Passionate towards learning new things and hoping to learn something new from here too.

) } [V0_FILE]typescriptreact:file="components/skills-section.tsx" import { Code, Database, Layout, PenTool, Server, Workflow } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" export function SkillsSection() { const skills = [ { category: "Programming", icon: , items: ["Object Oriented Programming", "C++", "Assembly Language"], }, { category: "Data Structures", icon: , items: ["Data Structures concepts", "Graphs implementation", "Algorithms"], }, { category: "Web Development", icon: , items: ["HTML", "CSS", "Frontend basics"], }, { category: "Tools & Software", icon: , items: ["MS Office (Word, PowerPoint, Access, Visio, Excel)"], }, { category: "Computer Organization", icon: , items: ["Digital Logic and Design", "Gates and connections"], }, { category: "Soft Skills", icon: , items: ["Communication skills", "Problem Analysis", "Mathematical problem analysis", "Devotion towards work"], }, ] return ( Skills {skills.map((skill, index) => ( {skill.icon} {skill.category} {skill.items.map((item, idx) => ( {item} ))} ))} ) } [V0_FILE]typescriptreact:file="components/education-section.tsx" import { GraduationCap, School, BookOpen } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" export function EducationSection() { const education = [ { level: "Bachelor's in Computer Sciences", institution: "FAST NUCES CFD", period: "2022 - Present", details: "CGPA: 3.31/4.0 (cleared 3 semesters as a regular student)", icon: , }, { level: "Intermediate", institution: "KIPS College Faisalabad", period: "2020 - 2022", details: "Marks: 987/1100 (Punjab Board) with majors in Computer Science, Mathematics, and Physics", icon: , }, { level: "Matriculation", institution: "ASF Public School Islamabad", period: "Completed in 2020", details: "Marks: 934/1100 (Federal Board) with majors in Computer Science, Mathematics, Chemistry and Physics", icon: , }, ] return ( Education {education.map((item, index) => ( {item.icon} {item.level} {item.period} {item.institution} {item.details} ))} ) } [V0_FILE]typescriptreact:file="components/projects-section.tsx" import { ExternalLink, Github } from "lucide-react" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" export function ProjectsSection() { const projects = [ { title: "Sports Website", description: "Created a sports website using HTML/CSS, applying frontend development knowledge.", technologies: ["HTML", "CSS"], image: "/placeholder.svg?height=200&width=400", }, { title: "Dodge-em Game", description: "Developed a Dodge-em game in C++ using fundamental and logical programming concepts.", technologies: ["C++", "Game Development"], image: "/placeholder.svg?height=200&width=400", }, { title: "School Management System", description: "Built a school management system in C++ implementing object-oriented programming concepts.", technologies: ["C++", "OOP"], image: "/placeholder.svg?height=200&width=400", }, { title: "Dictionary", description: "Created a dictionary application in C++ utilizing all programming and logical concepts in Data Structures.", technologies: ["C++", "Data Structures"], image: "/placeholder.svg?height=200&width=400", }, { title: "Balloon Shooter Game", description: "Developed a balloon shooter game in Assembly language using Computer Organization concepts.", technologies: ["Assembly Language"], image: "/placeholder.svg?height=200&width=400", }, { title: "Graphs Implementation", description: "Implemented graphs in C++ using Discrete Structures and Mathematical concepts.", technologies: ["C++", "Discrete Structures", "Algorithms"], image: "/placeholder.svg?height=200&width=400", }, ] return ( Projects {projects.map((project, index) => ( {project.title} {project.technologies.map((tech, idx) => ( {tech} ))} {project.description} ))} ) } [V0_FILE]typescriptreact:file="components/contact-section.tsx" "use client" import type React from "react" import { useState } from "react" import { Mail, Phone, Send } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" export function ContactSection() { const [formData, setFormData] = useState({ name: "", email: "", message: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const [submitSuccess, setSubmitSuccess] = useState(false) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) // Simulate form submission setTimeout(() => { setIsSubmitting(false) setSubmitSuccess(true) setFormData({ name: "", email: "", message: "" }) // Reset success message after 3 seconds setTimeout(() => { setSubmitSuccess(false) }, 3000) }, 1500) } return ( Contact Me Get In Touch Feel free to reach out to me for any inquiries, opportunities, or just to say hello! Phone +92 345 8543529 Email f223324@cfd.nu.edu.pk tayyabaimtiaz554@gmail.com Send Me a Message Fill out the form below and I'll get back to you as soon as possible. Name Email Message </div> <Button type="submit" className="w-full" disabled={isSubmitting}> {isSubmitting ? ( <span className="flex items-center gap-2"> <span className="animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full" /> Sending... </span> ) : ( <span className="flex items-center gap-2"> <Send className="h-4 w-4" /> Send Message </span> )} </Button> {submitSuccess && ( <div className="bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 p-3 rounded-md text-sm"> Thank you for your message! I'll get back to you soon. </div> )} </form> </CardContent> </Card> </div> </div> </section> ) } [V0_FILE]typescriptreact:file="components/footer.tsx" import { Github, Linkedin, Mail, Twitter } from "lucide-react" import Link from "next/link" export function Footer() { return ( <footer className="bg-muted py-8"> <div className="container mx-auto px-4"> <div className="flex flex-col md:flex-row justify-between items-center"> <div className="mb-4 md:mb-0"> <h3 className="text-xl font-bold text-primary">Tayyaba Imtiaz</h3> <p className="text-muted-foreground">Computer Science Student</p> </div> <div className="flex space-x-4"> <a href="#" className="text-muted-foreground hover:text-primary transition-colors" aria-label="GitHub"> <Github className="h-5 w-5" /> </a> <a href="#" className="text-muted-foreground hover:text-primary transition-colors" aria-label="LinkedIn"> <Linkedin className="h-5 w-5" /> </a> <a href="#" className="text-muted-foreground hover:text-primary transition-colors" aria-label="Twitter"> <Twitter className="h-5 w-5" /> </a> <a href="mailto:tayyabaimtiaz554@gmail.com" className="text-muted-foreground hover:text-primary transition-colors" aria-label="Email" > <Mail className="h-5 w-5" /> </a> </div> </div> <div className="mt-8 pt-4 border-t text-center text-sm text-muted-foreground"> <p>© {new Date().getFullYear()} Tayyaba Imtiaz. All rights reserved.</p> <div className="mt-2 flex justify-center space-x-4"> <Link href="#" className="hover:text-primary transition-colors"> Privacy Policy </Link> <Link href="#" className="hover:text-primary transition-colors"> Terms of Service </Link> </div> </div> </div> </footer> ) } [V0_FILE]typescriptreact:file="app/page.tsx" import { AboutSection } from "@/components/about-section" import { ContactSection } from "@/components/contact-section" import { EducationSection } from "@/components/education-section" import { Footer } from "@/components/footer" import { HeroSection } from "@/components/hero-section" import { Navbar } from "@/components/navbar" import { ProjectsSection } from "@/components/projects-section" import { SkillsSection } from "@/components/skills-section" export default function Home() { return ( <main> <Navbar /> <HeroSection /> <AboutSection /> <SkillsSection /> <EducationSection /> <ProjectsSection /> <ContactSection /> <Footer /> </main> ) } [V0_FILE]typescriptreact:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/.{ts,tsx}", ".{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } </article></body></html>