🎨 Module Project: Portfolio Landing Page

Page Sections Required

1. Navigation Bar - Fixed/sticky header with links to all sections
2. Hero Section - Eye-catching introduction with your name and title
3. About Section - Brief bio and background information
4. Skills Section - Display of your technical skills with visual cards
5. Projects Section - Showcase of 3-6 projects with descriptions
6. Contact Section - Working contact form with validation
7. Footer - Social links and copyright information

Technical Requirements

• Built with React functional components
• All components properly typed with TypeScript
• Responsive design (mobile, tablet, desktop)
• Proper use of props for component reusability
• Event handlers for all interactive elements
• Form validation with error messages
• Smooth scroll navigation between sections
• Accessible (semantic HTML, ARIA labels where needed)

Styling Requirements

• Choose one primary styling approach (inline styles, CSS Modules, or Tailwind)
• Consistent color scheme and typography
• Hover effects and transitions
• Cards with shadows and borders for visual hierarchy
• Responsive breakpoints for different screen sizes
• Professional and modern appearance

Using Vite

# Create new Vite project with React and TypeScript
npm create vite@latest portfolio -- --template react-ts

# Navigate into the project
cd portfolio

# Install dependencies
npm install

# Start development server
npm run dev

Your project should now be running at http://localhost:5173

Recommended Folder Structure

portfolio/
├── src/
│   ├── components/
│   │   ├── Navigation.tsx
│   │   ├── Hero.tsx
│   │   ├── About.tsx
│   │   ├── Skills.tsx
│   │   ├── SkillCard.tsx
│   │   ├── Projects.tsx
│   │   ├── ProjectCard.tsx
│   │   ├── Contact.tsx
│   │   ├── ContactForm.tsx
│   │   └── Footer.tsx
│   ├── types/
│   │   └── index.ts
│   ├── data/
│   │   └── portfolio.ts
│   ├── App.tsx
│   ├── App.css
│   └── main.tsx
├── public/
├── index.html
├── package.json
└── tsconfig.json

src/types/index.ts

Let's define all our TypeScript types in one place:

// Skill type with name, level, and icon
export interface Skill {
    name: string;
    level: 'beginner' | 'intermediate' | 'advanced' | 'expert';
    icon?: string; // Optional emoji or icon
}

// Project type for portfolio items
export interface Project {
    id: number;
    title: string;
    description: string;
    technologies: string[];
    imageUrl?: string;
    demoUrl?: string;
    githubUrl?: string;
}

// Contact form data type
export interface ContactFormData {
    name: string;
    email: string;
    message: string;
}

// Form validation errors
export interface FormErrors {
    name?: string;
    email?: string;
    message?: string;
}

// Navigation link type
export interface NavLink {
    label: string;
    href: string;
}

// Social link type for footer
export interface SocialLink {
    platform: string;
    url: string;
    icon: string;
}

src/data/portfolio.ts

Create sample data to populate your portfolio:

import { Skill, Project, NavLink, SocialLink } from '../types';

export const skills: Skill[] = [
    { name: 'TypeScript', level: 'advanced', icon: '📘' },
    { name: 'React', level: 'advanced', icon: '⚛️' },
    { name: 'JavaScript', level: 'expert', icon: '💛' },
    { name: 'HTML/CSS', level: 'expert', icon: '🎨' },
    { name: 'Node.js', level: 'intermediate', icon: '🟢' },
    { name: 'Git', level: 'advanced', icon: '🔧' },
];

export const projects: Project[] = [
    {
        id: 1,
        title: 'E-Commerce Platform',
        description: 'A full-stack e-commerce application with cart, checkout, and payment integration.',
        technologies: ['React', 'TypeScript', 'Node.js', 'MongoDB'],
        demoUrl: 'https://example.com',
        githubUrl: 'https://github.com/username/project',
    },
    {
        id: 2,
        title: 'Task Management App',
        description: 'Collaborative task manager with real-time updates and team features.',
        technologies: ['React', 'TypeScript', 'Firebase', 'Tailwind CSS'],
        demoUrl: 'https://example.com',
        githubUrl: 'https://github.com/username/project',
    },
    {
        id: 3,
        title: 'Weather Dashboard',
        description: 'Real-time weather dashboard with forecasts and location search.',
        technologies: ['React', 'TypeScript', 'Weather API', 'Chart.js'],
        demoUrl: 'https://example.com',
        githubUrl: 'https://github.com/username/project',
    },
];

export const navLinks: NavLink[] = [
    { label: 'Home', href: '#home' },
    { label: 'About', href: '#about' },
    { label: 'Skills', href: '#skills' },
    { label: 'Projects', href: '#projects' },
    { label: 'Contact', href: '#contact' },
];

export const socialLinks: SocialLink[] = [
    { platform: 'GitHub', url: 'https://github.com/username', icon: '🐙' },
    { platform: 'LinkedIn', url: 'https://linkedin.com/in/username', icon: '💼' },
    { platform: 'Twitter', url: 'https://twitter.com/username', icon: '🐦' },
];

Note: Replace these with your own information as you build!

Top-Level Structure

The App.tsx component will be our main container that renders all sections:

import Navigation from './components/Navigation';
import Hero from './components/Hero';
import About from './components/About';
import Skills from './components/Skills';
import Projects from './components/Projects';
import Contact from './components/Contact';
import Footer from './components/Footer';

function App() {
    return (
        <>
            <Navigation />
            <main>
                <Hero />
                <About />
                <Skills />
                <Projects />
                <Contact />
            </main>
            <Footer />
        </>
    );
}

export default App;

Choose Your Approach

For this project, you can use any styling method you prefer. Here are recommendations:

For this tutorial, we'll use inline styles for simplicity, but feel free to convert to your preferred method!

What We're Building

• Fixed/sticky navigation bar at the top
• Logo/name on the left
• Navigation links on the right
• Smooth scroll to sections when clicked
• Mobile-friendly hamburger menu (optional enhancement)

src/components/Navigation.tsx

import React from 'react';
import { navLinks } from '../data/portfolio';

const Navigation: React.FC = () => {
    const handleSmoothScroll = (e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
        e.preventDefault();
        const targetId = href.replace('#', '');
        const element = document.getElementById(targetId);
        
        if (element) {
            element.scrollIntoView({
                behavior: 'smooth',
                block: 'start',
            });
        }
    };

    return (
        <nav style={styles.nav}>
            <div style={styles.container}>
                <h1 style={styles.logo}>Your Name</h1>
                
                <ul style={styles.navList}>
                    {navLinks.map((link) => (
                        <li key={link.href} style={styles.navItem}>
                            <a
                                href={link.href}
                                onClick={(e) => handleSmoothScroll(e, link.href)}
                                style={styles.navLink}
                            >
                                {link.label}
                            </a>
                        </li>
                    ))}
                </ul>
            </div>
        </nav>
    );
};

const styles = {
    nav: {
        position: 'fixed' as const,
        top: 0,
        left: 0,
        right: 0,
        backgroundColor: '#ffffff',
        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
        zIndex: 1000,
        padding: '1rem 0',
    },
    container: {
        maxWidth: '1200px',
        margin: '0 auto',
        padding: '0 2rem',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    logo: {
        fontSize: '1.5rem',
        fontWeight: 'bold',
        color: '#667eea',
        margin: 0,
    },
    navList: {
        display: 'flex',
        listStyle: 'none',
        gap: '2rem',
        margin: 0,
        padding: 0,
    },
    navItem: {
        margin: 0,
    },
    navLink: {
        textDecoration: 'none',
        color: '#333',
        fontSize: '1rem',
        fontWeight: 500,
        transition: 'color 0.3s ease',
        cursor: 'pointer',
    },
};

export default Navigation;

Enhanced Navigation with Hover States

To add hover effects with inline styles, we can use the onMouseEnter and onMouseLeave events:

import React, { useState } from 'react';
import { navLinks } from '../data/portfolio';

const Navigation: React.FC = () => {
    const [hoveredLink, setHoveredLink] = useState<string | null>(null);

    const handleSmoothScroll = (e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
        e.preventDefault();
        const targetId = href.replace('#', '');
        const element = document.getElementById(targetId);
        
        if (element) {
            element.scrollIntoView({
                behavior: 'smooth',
                block: 'start',
            });
        }
    };

    return (
        <nav style={styles.nav}>
            <div style={styles.container}>
                <h1 style={styles.logo}>Your Name</h1>
                
                <ul style={styles.navList}>
                    {navLinks.map((link) => (
                        <li key={link.href} style={styles.navItem}>
                            <a
                                href={link.href}
                                onClick={(e) => handleSmoothScroll(e, link.href)}
                                onMouseEnter={() => setHoveredLink(link.href)}
                                onMouseLeave={() => setHoveredLink(null)}
                                style={{
                                    ...styles.navLink,
                                    color: hoveredLink === link.href ? '#667eea' : '#333',
                                }}
                            >
                                {link.label}
                            </a>
                        </li>
                    ))}
                </ul>
            </div>
        </nav>
    );
};

export default Navigation;

What We're Building

• Full-screen or large hero section
• Your name in large, bold text
• Tagline describing what you do
• Call-to-action buttons (View Projects, Contact Me)
• Gradient or eye-catching background

src/components/Hero.tsx

import React from 'react';

const Hero: React.FC = () => {
    const scrollToSection = (sectionId: string) => {
        const element = document.getElementById(sectionId);
        if (element) {
            element.scrollIntoView({ behavior: 'smooth' });
        }
    };

    return (
        <section id="home" style={styles.hero}>
            <div style={styles.content}>
                <h1 style={styles.name}>
                    Hi, I'm <span style={styles.highlight}>Your Name</span>
                </h1>
                
                <p style={styles.tagline}>
                    Full-Stack Developer | React Enthusiast | TypeScript Advocate
                </p>
                
                <p style={styles.description}>
                    I build beautiful, functional web applications that solve real problems.
                    Passionate about clean code, user experience, and continuous learning.
                </p>
                
                <div style={styles.buttonGroup}>
                    <button
                        onClick={() => scrollToSection('projects')}
                        style={styles.primaryButton}
                    >
                        View My Work
                    </button>
                    <button
                        onClick={() => scrollToSection('contact')}
                        style={styles.secondaryButton}
                    >
                        Contact Me
                    </button>
                </div>
            </div>
        </section>
    );
};

const styles = {
    hero: {
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        color: '#ffffff',
        textAlign: 'center' as const,
        padding: '2rem',
        marginTop: '60px', // Account for fixed nav
    },
    content: {
        maxWidth: '800px',
    },
    name: {
        fontSize: '3rem',
        fontWeight: 'bold',
        marginBottom: '1rem',
        lineHeight: 1.2,
    },
    highlight: {
        color: '#ffd700',
    },
    tagline: {
        fontSize: '1.5rem',
        marginBottom: '1.5rem',
        fontWeight: 500,
    },
    description: {
        fontSize: '1.125rem',
        marginBottom: '2rem',
        lineHeight: 1.6,
        opacity: 0.95,
    },
    buttonGroup: {
        display: 'flex',
        gap: '1rem',
        justifyContent: 'center',
        flexWrap: 'wrap' as const,
    },
    primaryButton: {
        padding: '0.875rem 2rem',
        fontSize: '1rem',
        fontWeight: 600,
        border: 'none',
        borderRadius: '8px',
        backgroundColor: '#ffffff',
        color: '#667eea',
        cursor: 'pointer',
        transition: 'transform 0.2s ease, box-shadow 0.2s ease',
        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
    },
    secondaryButton: {
        padding: '0.875rem 2rem',
        fontSize: '1rem',
        fontWeight: 600,
        border: '2px solid #ffffff',
        borderRadius: '8px',
        backgroundColor: 'transparent',
        color: '#ffffff',
        cursor: 'pointer',
        transition: 'background-color 0.2s ease',
    },
};

export default Hero;

Enhanced Hero with Hover States

import React, { useState } from 'react';

const Hero: React.FC = () => {
    const [hoveredButton, setHoveredButton] = useState<string | null>(null);

    const scrollToSection = (sectionId: string) => {
        const element = document.getElementById(sectionId);
        if (element) {
            element.scrollIntoView({ behavior: 'smooth' });
        }
    };

    const getPrimaryButtonStyle = () => ({
        ...styles.primaryButton,
        transform: hoveredButton === 'primary' ? 'translateY(-2px)' : 'translateY(0)',
        boxShadow: hoveredButton === 'primary' 
            ? '0 6px 12px rgba(0, 0, 0, 0.2)' 
            : '0 4px 6px rgba(0, 0, 0, 0.1)',
    });

    const getSecondaryButtonStyle = () => ({
        ...styles.secondaryButton,
        backgroundColor: hoveredButton === 'secondary' ? 'rgba(255, 255, 255, 0.1)' : 'transparent',
    });

    return (
        <section id="home" style={styles.hero}>
            <div style={styles.content}>
                <h1 style={styles.name}>
                    Hi, I'm <span style={styles.highlight}>Your Name</span>
                </h1>
                
                <p style={styles.tagline}>
                    Full-Stack Developer | React Enthusiast | TypeScript Advocate
                </p>
                
                <p style={styles.description}>
                    I build beautiful, functional web applications that solve real problems.
                    Passionate about clean code, user experience, and continuous learning.
                </p>
                
                <div style={styles.buttonGroup}>
                    <button
                        onClick={() => scrollToSection('projects')}
                        onMouseEnter={() => setHoveredButton('primary')}
                        onMouseLeave={() => setHoveredButton(null)}
                        style={getPrimaryButtonStyle()}
                    >
                        View My Work
                    </button>
                    <button
                        onClick={() => scrollToSection('contact')}
                        onMouseEnter={() => setHoveredButton('secondary')}
                        onMouseLeave={() => setHoveredButton(null)}
                        style={getSecondaryButtonStyle()}
                    >
                        Contact Me
                    </button>
                </div>
            </div>
        </section>
    );
};

export default Hero;

What We're Building

• Section heading
• Professional photo or avatar (optional)
• Brief biography (2-3 paragraphs)
• Key highlights or achievements
• Clean, readable layout

src/components/About.tsx

import React from 'react';

const About: React.FC = () => {
    return (
        <section id="about" style={styles.section}>
            <div style={styles.container}>
                <h2 style={styles.heading}>About Me</h2>
                
                <div style={styles.content}>
                    <div style={styles.imageContainer}>
                        {/* Placeholder for your photo */}
                        <div style={styles.imagePlaceholder}>
                            <span style={styles.emoji}>👨‍💻</span>
                        </div>
                    </div>
                    
                    <div style={styles.text}>
                        <p style={styles.paragraph}>
                            Hi! I'm a passionate full-stack developer with a love for creating 
                            elegant solutions to complex problems. I specialize in building 
                            modern web applications using React, TypeScript, and Node.js.
                        </p>
                        
                        <p style={styles.paragraph}>
                            My journey into web development started [X years ago], and I've 
                            been hooked ever since. I believe in writing clean, maintainable 
                            code and following best practices to deliver high-quality products.
                        </p>
                        
                        <p style={styles.paragraph}>
                            When I'm not coding, you can find me [your hobbies/interests]. 
                            I'm always eager to learn new technologies and take on challenging 
                            projects that push me to grow as a developer.
                        </p>
                        
                        <div style={styles.highlights}>
                            <h3 style={styles.subheading}>Quick Facts</h3>
                            <ul style={styles.list}>
                                <li style={styles.listItem}>🎓 Computer Science graduate</li>
                                <li style={styles.listItem}>💼 [X] years of development experience</li>
                                <li style={styles.listItem}>🚀 [X]+ projects completed</li>
                                <li style={styles.listItem}>🌱 Currently learning [new technology]</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

const styles = {
    section: {
        padding: '5rem 2rem',
        backgroundColor: '#f8f9fa',
    },
    container: {
        maxWidth: '1200px',
        margin: '0 auto',
    },
    heading: {
        fontSize: '2.5rem',
        fontWeight: 'bold',
        textAlign: 'center' as const,
        marginBottom: '3rem',
        color: '#333',
    },
    content: {
        display: 'flex',
        gap: '3rem',
        alignItems: 'center',
        flexWrap: 'wrap' as const,
    },
    imageContainer: {
        flex: '0 0 250px',
    },
    imagePlaceholder: {
        width: '250px',
        height: '250px',
        borderRadius: '50%',
        backgroundColor: '#667eea',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        boxShadow: '0 8px 16px rgba(0, 0, 0, 0.1)',
    },
    emoji: {
        fontSize: '6rem',
    },
    text: {
        flex: '1',
        minWidth: '300px',
    },
    paragraph: {
        fontSize: '1.125rem',
        lineHeight: 1.8,
        color: '#555',
        marginBottom: '1.5rem',
    },
    highlights: {
        marginTop: '2rem',
        padding: '1.5rem',
        backgroundColor: '#ffffff',
        borderRadius: '8px',
        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)',
    },
    subheading: {
        fontSize: '1.5rem',
        fontWeight: 'bold',
        marginBottom: '1rem',
        color: '#667eea',
    },
    list: {
        listStyle: 'none',
        padding: 0,
        margin: 0,
    },
    listItem: {
        fontSize: '1.125rem',
        marginBottom: '0.75rem',
        color: '#555',
    },
};

export default About;

Using an Actual Photo

To use a real photo instead of the placeholder:

// Replace the imagePlaceholder div with:
<img 
    src="/path-to-your-photo.jpg" 
    alt="Your Name"
    style={styles.image}
/>

// Add to styles:
image: {
    width: '250px',
    height: '250px',
    borderRadius: '50%',
    objectFit: 'cover' as const,
    boxShadow: '0 8px 16px rgba(0, 0, 0, 0.1)',
},

src/components/SkillCard.tsx

First, let's create a reusable card for individual skills:

import React from 'react';
import { Skill } from '../types';

interface SkillCardProps {
    skill: Skill;
}

const SkillCard: React.FC<SkillCardProps> = ({ skill }) => {
    // Convert skill level to percentage for visual indicator
    const getLevelPercentage = (level: Skill['level']): number => {
        switch (level) {
            case 'beginner': return 25;
            case 'intermediate': return 50;
            case 'advanced': return 75;
            case 'expert': return 100;
            default: return 0;
        }
    };

    // Get color based on skill level
    const getLevelColor = (level: Skill['level']): string => {
        switch (level) {
            case 'beginner': return '#ffc107';
            case 'intermediate': return '#2196F3';
            case 'advanced': return '#4CAF50';
            case 'expert': return '#667eea';
            default: return '#ccc';
        }
    };

    const percentage = getLevelPercentage(skill.level);
    const color = getLevelColor(skill.level);

    return (
        <div style={styles.card}>
            {skill.icon && (
                <div style={styles.icon}>{skill.icon}</div>
            )}
            
            <h3 style={styles.skillName}>{skill.name}</h3>
            
            <div style={styles.levelContainer}>
                <div style={styles.levelBackground}>
                    <div 
                        style={{
                            ...styles.levelBar,
                            width: `${percentage}%`,
                            backgroundColor: color,
                        }}
                    />
                </div>
                <span style={styles.levelText}>
                    {skill.level.charAt(0).toUpperCase() + skill.level.slice(1)}
                </span>
            </div>
        </div>
    );
};

const styles = {
    card: {
        backgroundColor: '#ffffff',
        borderRadius: '12px',
        padding: '1.5rem',
        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
        transition: 'transform 0.3s ease, box-shadow 0.3s ease',
        cursor: 'pointer',
    },
    icon: {
        fontSize: '3rem',
        marginBottom: '1rem',
        textAlign: 'center' as const,
    },
    skillName: {
        fontSize: '1.25rem',
        fontWeight: 'bold',
        marginBottom: '1rem',
        textAlign: 'center' as const,
        color: '#333',
    },
    levelContainer: {
        marginTop: '1rem',
    },
    levelBackground: {
        width: '100%',
        height: '8px',
        backgroundColor: '#e0e0e0',
        borderRadius: '4px',
        overflow: 'hidden',
        marginBottom: '0.5rem',
    },
    levelBar: {
        height: '100%',
        transition: 'width 0.5s ease',
        borderRadius: '4px',
    },
    levelText: {
        fontSize: '0.875rem',
        color: '#666',
        textAlign: 'center' as const,
        display: 'block',
    },
};

export default SkillCard;

src/components/Skills.tsx

Now let's create the section that displays all skill cards:

import React, { useState } from 'react';
import { skills } from '../data/portfolio';
import SkillCard from './SkillCard';

const Skills: React.FC = () => {
    const [hoveredCard, setHoveredCard] = useState<number | null>(null);

    return (
        <section id="skills" style={styles.section}>
            <div style={styles.container}>
                <h2 style={styles.heading}>My Skills</h2>
                
                <p style={styles.intro}>
                    Here are the technologies and tools I work with. I'm always 
                    learning and expanding my skill set!
                </p>
                
                <div style={styles.grid}>
                    {skills.map((skill, index) => (
                        <div
                            key={skill.name}
                            onMouseEnter={() => setHoveredCard(index)}
                            onMouseLeave={() => setHoveredCard(null)}
                            style={{
                                transform: hoveredCard === index 
                                    ? 'translateY(-8px)' 
                                    : 'translateY(0)',
                                transition: 'transform 0.3s ease',
                            }}
                        >
                            <SkillCard skill={skill} />
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};

const styles = {
    section: {
        padding: '5rem 2rem',
        backgroundColor: '#ffffff',
    },
    container: {
        maxWidth: '1200px',
        margin: '0 auto',
    },
    heading: {
        fontSize: '2.5rem',
        fontWeight: 'bold',
        textAlign: 'center' as const,
        marginBottom: '1rem',
        color: '#333',
    },
    intro: {
        fontSize: '1.125rem',
        textAlign: 'center' as const,
        color: '#666',
        marginBottom: '3rem',
        maxWidth: '600px',
        margin: '0 auto 3rem',
    },
    grid: {
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
        gap: '2rem',
    },
};

export default Skills;

src/components/ProjectCard.tsx

import React, { useState } from 'react';
import { Project } from '../types';

interface ProjectCardProps {
    project: Project;
}

const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
    const [isHovered, setIsHovered] = useState(false);

    return (
        <div
            style={{
                ...styles.card,
                transform: isHovered ? 'translateY(-8px)' : 'translateY(0)',
                boxShadow: isHovered 
                    ? '0 12px 24px rgba(0, 0, 0, 0.15)' 
                    : '0 4px 6px rgba(0, 0, 0, 0.1)',
            }}
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => setIsHovered(false)}
        >
            {/* Project Image Placeholder */}
            {project.imageUrl ? (
                <img 
                    src={project.imageUrl} 
                    alt={project.title}
                    style={styles.image}
                />
            ) : (
                <div style={styles.imagePlaceholder}>
                    <span style={styles.placeholderIcon}>💻</span>
                </div>
            )}
            
            {/* Project Content */}
            <div style={styles.content}>
                <h3 style={styles.title}>{project.title}</h3>
                
                <p style={styles.description}>{project.description}</p>
                
                {/* Technology Tags */}
                <div style={styles.techTags}>
                    {project.technologies.map((tech) => (
                        <span key={tech} style={styles.tag}>
                            {tech}
                        </span>
                    ))}
                </div>
                
                {/* Project Links */}
                <div style={styles.links}>
                    {project.demoUrl && (
                        <a 
                            href={project.demoUrl}
                            target="_blank"
                            rel="noopener noreferrer"
                            style={styles.linkButton}
                        >
                            🌐 Live Demo
                        </a>
                    )}
                    {project.githubUrl && (
                        <a 
                            href={project.githubUrl}
                            target="_blank"
                            rel="noopener noreferrer"
                            style={styles.linkButton}
                        >
                            🐙 View Code
                        </a>
                    )}
                </div>
            </div>
        </div>
    );
};

const styles = {
    card: {
        backgroundColor: '#ffffff',
        borderRadius: '12px',
        overflow: 'hidden',
        transition: 'transform 0.3s ease, box-shadow 0.3s ease',
        cursor: 'pointer',
    },
    image: {
        width: '100%',
        height: '200px',
        objectFit: 'cover' as const,
    },
    imagePlaceholder: {
        width: '100%',
        height: '200px',
        backgroundColor: '#667eea',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    },
    placeholderIcon: {
        fontSize: '4rem',
    },
    content: {
        padding: '1.5rem',
    },
    title: {
        fontSize: '1.5rem',
        fontWeight: 'bold',
        marginBottom: '0.75rem',
        color: '#333',
    },
    description: {
        fontSize: '1rem',
        lineHeight: 1.6,
        color: '#666',
        marginBottom: '1rem',
    },
    techTags: {
        display: 'flex',
        flexWrap: 'wrap' as const,
        gap: '0.5rem',
        marginBottom: '1.5rem',
    },
    tag: {
        padding: '0.25rem 0.75rem',
        backgroundColor: '#e3f2fd',
        color: '#2196F3',
        borderRadius: '16px',
        fontSize: '0.875rem',
        fontWeight: 500,
    },
    links: {
        display: 'flex',
        gap: '1rem',
        flexWrap: 'wrap' as const,
    },
    linkButton: {
        padding: '0.5rem 1rem',
        backgroundColor: '#667eea',
        color: '#ffffff',
        textDecoration: 'none',
        borderRadius: '6px',
        fontSize: '0.875rem',
        fontWeight: 600,
        transition: 'background-color 0.2s ease',
    },
};

export default ProjectCard;

src/components/Projects.tsx

import React from 'react';
import { projects } from '../data/portfolio';
import ProjectCard from './ProjectCard';

const Projects: React.FC = () => {
    return (
        <section id="projects" style={styles.section}>
            <div style={styles.container}>
                <h2 style={styles.heading}>My Projects</h2>
                
                <p style={styles.intro}>
                    Here are some of the projects I've worked on. Each one taught me 
                    something new and helped me grow as a developer.
                </p>
                
                <div style={styles.grid}>
                    {projects.map((project) => (
                        <ProjectCard key={project.id} project={project} />
                    ))}
                </div>
                
                <div style={styles.ctaContainer}>
                    <p style={styles.ctaText}>
                        Want to see more? Check out my GitHub for additional projects!
                    </p>
                    <a 
                        href="https://github.com/username"
                        target="_blank"
                        rel="noopener noreferrer"
                        style={styles.ctaButton}
                    >
                        View All Projects on GitHub
                    </a>
                </div>
            </div>
        </section>
    );
};

const styles = {
    section: {
        padding: '5rem 2rem',
        backgroundColor: '#f8f9fa',
    },
    container: {
        maxWidth: '1200px',
        margin: '0 auto',
    },
    heading: {
        fontSize: '2.5rem',
        fontWeight: 'bold',
        textAlign: 'center' as const,
        marginBottom: '1rem',
        color: '#333',
    },
    intro: {
        fontSize: '1.125rem',
        textAlign: 'center' as const,
        color: '#666',
        marginBottom: '3rem',
        maxWidth: '600px',
        margin: '0 auto 3rem',
    },
    grid: {
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
        gap: '2rem',
        marginBottom: '3rem',
    },
    ctaContainer: {
        textAlign: 'center' as const,
        marginTop: '3rem',
    },
    ctaText: {
        fontSize: '1.125rem',
        color: '#666',
        marginBottom: '1rem',
    },
    ctaButton: {
        display: 'inline-block',
        padding: '0.875rem 2rem',
        backgroundColor: '#333',
        color: '#ffffff',
        textDecoration: 'none',
        borderRadius: '8px',
        fontSize: '1rem',
        fontWeight: 600,
        transition: 'background-color 0.2s ease',
    },
};

export default Projects;

What We Need

• Name field (required, min 2 characters)
• Email field (required, valid email format)
• Message field (required, min 10 characters)
• Real-time validation with error messages
• Submit button with disabled state
• Success message after submission

src/components/ContactForm.tsx

import React, { useState } from 'react';
import { ContactFormData, FormErrors } from '../types';

const ContactForm: React.FC = () => {
    const [formData, setFormData] = useState<ContactFormData>({
        name: '',
        email: '',
        message: '',
    });

    const [errors, setErrors] = useState<FormErrors>({});
    const [isSubmitted, setIsSubmitted] = useState(false);
    const [isSubmitting, setIsSubmitting] = useState(false);

    // Validation functions
    const validateName = (name: string): string | undefined => {
        if (!name.trim()) {
            return 'Name is required';
        }
        if (name.trim().length < 2) {
            return 'Name must be at least 2 characters';
        }
        return undefined;
    };

    const validateEmail = (email: string): string | undefined => {
        if (!email.trim()) {
            return 'Email is required';
        }
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
            return 'Please enter a valid email address';
        }
        return undefined;
    };

    const validateMessage = (message: string): string | undefined => {
        if (!message.trim()) {
            return 'Message is required';
        }
        if (message.trim().length < 10) {
            return 'Message must be at least 10 characters';
        }
        return undefined;
    };

    // Handle input changes
    const handleChange = (
        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
    ) => {
        const { name, value } = e.target;
        setFormData(prev => ({ ...prev, [name]: value }));
        
        // Clear error for this field
        setErrors(prev => ({ ...prev, [name]: undefined }));
    };

    // Handle blur events for validation
    const handleBlur = (
        e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>
    ) => {
        const { name, value } = e.target;
        let error: string | undefined;

        switch (name) {
            case 'name':
                error = validateName(value);
                break;
            case 'email':
                error = validateEmail(value);
                break;
            case 'message':
                error = validateMessage(value);
                break;
        }

        setErrors(prev => ({ ...prev, [name]: error }));
    };

    // Validate entire form
    const validateForm = (): boolean => {
        const nameError = validateName(formData.name);
        const emailError = validateEmail(formData.email);
        const messageError = validateMessage(formData.message);

        setErrors({
            name: nameError,
            email: emailError,
            message: messageError,
        });

        return !nameError && !emailError && !messageError;
    };

    // Handle form submission
    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();

        if (!validateForm()) {
            return;
        }

        setIsSubmitting(true);

        // Simulate API call
        await new Promise(resolve => setTimeout(resolve, 1500));

        console.log('Form submitted:', formData);
        
        setIsSubmitted(true);
        setIsSubmitting(false);
        
        // Reset form
        setFormData({ name: '', email: '', message: '' });
    };

    if (isSubmitted) {
        return (
            <div style={styles.successMessage}>
                <h3 style={styles.successTitle}>✅ Message Sent!</h3>
                <p style={styles.successText}>
                    Thank you for reaching out! I'll get back to you as soon as possible.
                </p>
                <button
                    onClick={() => setIsSubmitted(false)}
                    style={styles.resetButton}
                >
                    Send Another Message
                </button>
            </div>
        );
    }

    return (
        <form onSubmit={handleSubmit} style={styles.form}>
            {/* Name Field */}
            <div style={styles.field}>
                <label htmlFor="name" style={styles.label}>
                    Name *
                </label>
                <input
                    type="text"
                    id="name"
                    name="name"
                    value={formData.name}
                    onChange={handleChange}
                    onBlur={handleBlur}
                    style={{
                        ...styles.input,
                        borderColor: errors.name ? '#f44336' : '#ddd',
                    }}
                    placeholder="Your name"
                />
                {errors.name && (
                    <span style={styles.error}>{errors.name}</span>
                )}
            </div>

            {/* Email Field */}
            <div style={styles.field}>
                <label htmlFor="email" style={styles.label}>
                    Email *
                </label>
                <input
                    type="email"
                    id="email"
                    name="email"
                    value={formData.email}
                    onChange={handleChange}
                    onBlur={handleBlur}
                    style={{
                        ...styles.input,
                        borderColor: errors.email ? '#f44336' : '#ddd',
                    }}
                    placeholder="your.email@example.com"
                />
                {errors.email && (
                    <span style={styles.error}>{errors.email}</span>
                )}
            </div>

            {/* Message Field */}
            <div style={styles.field}>
                <label htmlFor="message" style={styles.label}>
                    Message *
                </label>
                <textarea
                    id="message"
                    name="message"
                    value={formData.message}
                    onChange={handleChange}
                    onBlur={handleBlur}
                    rows={6}
                    style={{
                        ...styles.textarea,
                        borderColor: errors.message ? '#f44336' : '#ddd',
                    }}
                    placeholder="Your message..."
                />
                {errors.message && (
                    <span style={styles.error}>{errors.message}</span>
                )}
            </div>

            {/* Submit Button */}
            <button
                type="submit"
                disabled={isSubmitting}
                style={{
                    ...styles.submitButton,
                    opacity: isSubmitting ? 0.6 : 1,
                    cursor: isSubmitting ? 'not-allowed' : 'pointer',
                }}
            >
                {isSubmitting ? 'Sending...' : 'Send Message'}
            </button>
        </form>
    );
};

const styles = {
    form: {
        maxWidth: '600px',
        margin: '0 auto',
    },
    field: {
        marginBottom: '1.5rem',
    },
    label: {
        display: 'block',
        marginBottom: '0.5rem',
        fontSize: '1rem',
        fontWeight: 600,
        color: '#333',
    },
    input: {
        width: '100%',
        padding: '0.75rem',
        fontSize: '1rem',
        border: '2px solid #ddd',
        borderRadius: '6px',
        transition: 'border-color 0.2s ease',
        boxSizing: 'border-box' as const,
    },
    textarea: {
        width: '100%',
        padding: '0.75rem',
        fontSize: '1rem',
        border: '2px solid #ddd',
        borderRadius: '6px',
        transition: 'border-color 0.2s ease',
        resize: 'vertical' as const,
        fontFamily: 'inherit',
        boxSizing: 'border-box' as const,
    },
    error: {
        display: 'block',
        marginTop: '0.5rem',
        fontSize: '0.875rem',
        color: '#f44336',
    },
    submitButton: {
        width: '100%',
        padding: '1rem',
        fontSize: '1.125rem',
        fontWeight: 600,
        color: '#ffffff',
        backgroundColor: '#667eea',
        border: 'none',
        borderRadius: '8px',
        transition: 'background-color 0.2s ease',
    },
    successMessage: {
        maxWidth: '600px',
        margin: '0 auto',
        padding: '3rem',
        textAlign: 'center' as const,
        backgroundColor: '#e8f5e9',
        borderRadius: '12px',
    },
    successTitle: {
        fontSize: '2rem',
        fontWeight: 'bold',
        color: '#4CAF50',
        marginBottom: '1rem',
    },
    successText: {
        fontSize: '1.125rem',
        color: '#555',
        marginBottom: '2rem',
    },
    resetButton: {
        padding: '0.75rem 2rem',
        fontSize: '1rem',
        fontWeight: 600,
        color: '#667eea',
        backgroundColor: '#ffffff',
        border: '2px solid #667eea',
        borderRadius: '8px',
        cursor: 'pointer',
    },
};

export default ContactForm;

src/components/Contact.tsx

import React from 'react';
import ContactForm from './ContactForm';

const Contact: React.FC = () => {
    return (
        <section id="contact" style={styles.section}>
            <div style={styles.container}>
                <h2 style={styles.heading}>Get In Touch</h2>
                
                <p style={styles.intro}>
                    Have a project in mind or just want to chat? I'd love to hear from you! 
                    Fill out the form below and I'll get back to you as soon as possible.
                </p>
                
                <ContactForm />
                
                <div style={styles.alternativeContact}>
                    <p style={styles.alternativeText}>
                        Prefer email? Reach me directly at{' '}
                        <a href="mailto:your.email@example.com" style={styles.emailLink}>
                            your.email@example.com
                        </a>
                    </p>
                </div>
            </div>
        </section>
    );
};

const styles = {
    section: {
        padding: '5rem 2rem',
        backgroundColor: '#ffffff',
    },
    container: {
        maxWidth: '1200px',
        margin: '0 auto',
    },
    heading: {
        fontSize: '2.5rem',
        fontWeight: 'bold',
        textAlign: 'center' as const,
        marginBottom: '1rem',
        color: '#333',
    },
    intro: {
        fontSize: '1.125rem',
        textAlign: 'center' as const,
        color: '#666',
        marginBottom: '3rem',
        maxWidth: '700px',
        margin: '0 auto 3rem',
    },
    alternativeContact: {
        marginTop: '3rem',
        textAlign: 'center' as const,
    },
    alternativeText: {
        fontSize: '1rem',
        color: '#666',
    },
    emailLink: {
        color: '#667eea',
        textDecoration: 'none',
        fontWeight: 600,
    },
};

export default Contact;

src/components/Footer.tsx

import React from 'react';
import { socialLinks } from '../data/portfolio';

const Footer: React.FC = () => {
    const currentYear = new Date().getFullYear();

    return (
        <footer style={styles.footer}>
            <div style={styles.container}>
                {/* Social Links */}
                <div style={styles.socialSection}>
                    <h3 style={styles.socialHeading}>Connect With Me</h3>
                    <div style={styles.socialLinks}>
                        {socialLinks.map((link) => (
                            <a
                                key={link.platform}
                                href={link.url}
                                target="_blank"
                                rel="noopener noreferrer"
                                style={styles.socialLink}
                                aria-label={link.platform}
                            >
                                <span style={styles.socialIcon}>{link.icon}</span>
                                <span>{link.platform}</span>
                            </a>
                        ))}
                    </div>
                </div>

                {/* Divider */}
                <div style={styles.divider} />

                {/* Copyright */}
                <div style={styles.copyright}>
                    <p style={styles.copyrightText}>
                        © {currentYear} Your Name. All rights reserved.
                    </p>
                    <p style={styles.builtWith}>
                        Built with React & TypeScript
                    </p>
                </div>
            </div>
        </footer>
    );
};

const styles = {
    footer: {
        backgroundColor: '#1a1a1a',
        color: '#ffffff',
        padding: '3rem 2rem 2rem',
    },
    container: {
        maxWidth: '1200px',
        margin: '0 auto',
    },
    socialSection: {
        textAlign: 'center' as const,
        marginBottom: '2rem',
    },
    socialHeading: {
        fontSize: '1.5rem',
        fontWeight: 'bold',
        marginBottom: '1.5rem',
        color: '#ffffff',
    },
    socialLinks: {
        display: 'flex',
        justifyContent: 'center',
        gap: '2rem',
        flexWrap: 'wrap' as const,
    },
    socialLink: {
        display: 'flex',
        alignItems: 'center',
        gap: '0.5rem',
        color: '#ffffff',
        textDecoration: 'none',
        fontSize: '1.125rem',
        transition: 'color 0.2s ease',
    },
    socialIcon: {
        fontSize: '1.5rem',
    },
    divider: {
        height: '1px',
        backgroundColor: '#444',
        margin: '2rem 0',
    },
    copyright: {
        textAlign: 'center' as const,
    },
    copyrightText: {
        fontSize: '1rem',
        color: '#ccc',
        marginBottom: '0.5rem',
    },
    builtWith: {
        fontSize: '0.875rem',
        color: '#888',
    },
};

export default Footer;

src/App.tsx

Notice there's no import React from 'react' here. Since React 17, and by default in every React 19 + Vite project, JSX is transformed by the automatic runtime, so you only import React when you actually reference the namespace (for example React.FC or React.FormEvent). Our component files import it because they use those types; App doesn't, so it stays clean.

import Navigation from './components/Navigation';
import Hero from './components/Hero';
import About from './components/About';
import Skills from './components/Skills';
import Projects from './components/Projects';
import Contact from './components/Contact';
import Footer from './components/Footer';
import './App.css';

function App() {
    return (
        <div className="App">
            <Navigation />
            <main>
                <Hero />
                <About />
                <Skills />
                <Projects />
                <Contact />
            </main>
            <Footer />
        </div>
    );
}

export default App;

src/main.tsx

Vite already generated this file when you scaffolded the project — it's what mounts your App into the page. This is the modern React 19 pattern: createRoot from react-dom/client, wrapped in <StrictMode> so React surfaces potential problems during development.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import './index.css';

// The '!' tells TypeScript this element definitely exists in index.html
createRoot(document.getElementById('root')!).render(
    <StrictMode>
        <App />
    </StrictMode>
);

src/App.css

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

html {
    scroll-behavior: smooth;
}

/* Ensure sections have proper spacing with fixed nav */
section {
    scroll-margin-top: 80px;
}

/* Link hover effects */
a {
    transition: color 0.2s ease;
}

a:hover {
    opacity: 0.8;
}

/* Button hover effects */
button:hover:not(:disabled) {
    opacity: 0.9;
}

/* Input focus styles */
input:focus,
textarea:focus {
    outline: none;
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Hide navigation links on mobile - you can add a hamburger menu here */
    nav ul {
        display: none;
    }
    
    /* Adjust heading sizes for mobile */
    h1 {
        font-size: 2rem !important;
    }
    
    h2 {
        font-size: 2rem !important;
    }
    
    /* Adjust hero section for mobile */
    section#home {
        padding: 1rem;
        min-height: auto;
        padding-top: 100px;
        padding-bottom: 60px;
    }
    
    /* Stack flex items on mobile */
    .about-content,
    .button-group {
        flex-direction: column;
        align-items: center;
    }
}

Your Final Project Structure

portfolio/
├── src/
│   ├── components/
│   │   ├── Navigation.tsx          ✅
│   │   ├── Hero.tsx                ✅
│   │   ├── About.tsx               ✅
│   │   ├── Skills.tsx              ✅
│   │   ├── SkillCard.tsx           ✅
│   │   ├── Projects.tsx            ✅
│   │   ├── ProjectCard.tsx         ✅
│   │   ├── Contact.tsx             ✅
│   │   ├── ContactForm.tsx         ✅
│   │   └── Footer.tsx              ✅
│   ├── types/
│   │   └── index.ts                ✅
│   ├── data/
│   │   └── portfolio.ts            ✅
│   ├── App.tsx                     ✅
│   ├── App.css                     ✅
│   ├── main.tsx                    ✅
│   └── vite-env.d.ts
├── public/
│   └── favicon.ico
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

Development Commands

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Type check
npm run type-check

Option 1: Vercel (Recommended)

Vercel offers the easiest deployment for React applications.

# Install Vercel CLI
npm install -g vercel

# Deploy
vercel

# Follow the prompts to deploy your project

Or use the Vercel Dashboard:

1. Push your code to GitHub
2. Go to vercel.com
3. Import your GitHub repository
4. Vercel auto-detects Vite and deploys!

Option 2: Netlify

Another excellent option with drag-and-drop deployment.

# Build your project
npm run build

# The dist/ folder contains your production build

Deploy via Netlify:

1. Go to netlify.com
2. Drag and drop your dist folder
3. Or connect your GitHub repo for automatic deployments

Option 3: GitHub Pages

Free hosting directly from your GitHub repository.

# Install gh-pages
npm install --save-dev gh-pages

# Add to package.json scripts:
"scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
}

# Update vite.config.ts base URL:
export default defineConfig({
    base: '/your-repo-name/',
    // ... rest of config
})

# Deploy
npm run deploy

Module 2 Recap

Throughout this module project, you've applied:

From Lesson 2.1 (Intro to React):

• Component-based architecture
• Functional components
• Project structure and organization

From Lesson 2.2 (JSX and TSX):

• JSX syntax and expressions
• Conditional rendering
• Mapping over arrays to render lists
• TypeScript in JSX

From Lesson 2.3 (Components and Props):

• Creating reusable components (SkillCard, ProjectCard)
• Defining and typing props with interfaces
• Component composition
• Props destructuring

From Lesson 2.4 (Styling):

• Inline styles with TypeScript
• Style objects and dynamic styling
• Responsive design principles
• Professional color schemes and layouts

From Lesson 2.5 (Events):

• Event handlers (onClick, onChange, onSubmit)
• Form handling and validation
• Typing events with TypeScript
• Controlled components

📚 Additional Resources

• React Official Documentation
• TypeScript Handbook
• Vite Documentation
• Vercel Deployment Guide
• Netlify Deployment Guide