Portfolio ✨

🚀 Showcase your journey with this modern, interactive portfolio template 🌟

📸 Screenshots

About section with personal journey and qualities

Projects showcase with carousel

Skills visualization with interactive elements

Connect section with animated social links

🌈 Feature Highlights

🧠 About Me Section

• Professional journey highlights with responsive layout
• Core competencies with visual gradient indicators
• Personal qualities and areas of expertise

💻 Project Showcase

• Detailed project cards with:
  • Technology stack tags with custom styling
  • Live demo and GitHub links
  • Interactive carousels with hover effects
  • Animated project transitions

🛠️ Skills Visualization

• Interactive 3D technology sphere
• Categorized skill display with custom icons
• Visual representation of expertise areas

📞 Connect Section

• Social media integration with branded colors
• Animated interaction effects
• Professional contact information

✨ Key Design Principles

Minimalist Elegance

• UI/UX Approach: Clean, purposeful design that prioritizes content and user experience
• Color Palette: Sophisticated emerald and dark mode color scheme with subtle gradient transitions
• Typography: Precision-crafted using Geist Font for maximum readability and modern aesthetics

Interactive Storytelling

• Dynamic section transitions that guide users through my professional landscape
• Micro-interactions and hover effects that provide delightful user engagement
• Seamless navigation that feels more like a journey than a website

🚀 Technical Architecture

Design Approach

• Component-Driven Structure: Modular, reusable components that maintain consistency throughout the site
• Config-First Customization: Core portfolio content and styling controlled through configuration files
• Progressive Enhancement: Core functionality works without JavaScript, enhanced with animations when available

Performance Optimizations

• Optimized asset loading with automatic image optimization
• Efficient rendering with component memoization
• Smooth animations with hardware acceleration

Accessibility & Responsiveness

• Semantic HTML structure with proper ARIA attributes
• Responsive design adapts to all device sizes
• Keyboard navigation support throughout the interface
• Color contrast ratios meeting WCAG guidelines

🔧 Getting Started

Prerequisites

• Node.js 20+
• yarn

Installation Steps

# Clone repository
git clone https://github.com/praveengongada/portfolio.git

# Navigate to project directory
cd portfolio

# Install dependencies
yarn install

# Run development server
yarn dev

🛠️ Creating Your Own Portfolio

This portfolio template is designed to be easily customizable. Follow these steps to personalize it for your own use:

Configuration Overview

The entire portfolio is driven by configuration files located in the app/config directory:

• index.ts: Main portfolio configuration
• projects.ts: Your project showcase
• skills.ts: Your technical skills
• socials.tsx: Your social media profiles

Step 1: Update Main Configuration

Edit app/config/index.ts to customize:

// Personal information
siteMetadata: {
  title: "Your Name",
  description: "Your portfolio description",
  author: "Your Name",
},

// Navigation
navigation: {
  logo: {
    text: "YN", // Your initials (should match what you put in logo.tsx)
  },
  // Navigation links (no need to change unless adding new sections)
},

// Home section (landing page)
sections: {
  home: {
    greeting: "Hi, I'm",
    name: "Your Name",
    typingTexts: [
      "Your custom typing text",
      "Add multiple lines",
      "They will rotate automatically",
    ],
    description: "Write a short engaging bio here...",
    // Update button links as needed
  },

  // Continue customizing other sections...
}

Step 2: Add Your Projects

Edit app/config/projects.ts to showcase your own work:

export const projects: Project[] = [
  {
    id: 1,
    title: 'Your Project Name',
    description: 'Describe what your project does and its key features',
    tags: ['React', 'TypeScript', 'Your Technologies'],
    githubLink: 'https://github.com/yourusername/your-repo',
    type: 'Web App', // Project type (Web, Mobile, Plugin, etc.)
    liveLink: 'https://your-project-url.com', // Optional
    thumbnail: 'https://your-image-url.com/image.jpg', // Main project thumbnail

    // Optional: GIF to display when hovering over the project
    gifUrl: 'https://your-project-animation.gif',

    // Optional: Multiple images for carousel display
    carouselImages: [
      'https://your-image-url.com/slide1.jpg',
      'https://your-image-url.com/slide2.jpg',
      'https://your-image-url.com/slide3.jpg',
    ],

    // Optional: Carousel configuration
    carouselConfig: {
      interval: 3000, // Time between slides in milliseconds
      infinite: true, // Whether to loop the carousel
    },
  },
  // Add more projects...
];

Step 3: Update Your Skills

Edit app/config/skills.ts to reflect your technical expertise:

export const skills: Skill[] = [
  {
    category: 'Your Category', // e.g., Frontend, Backend, Mobile
    technologies: [
      {
        name: 'Technology Name',
        color: '#HexColorCode', // Brand color of the technology
        icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/technology/technology-original.svg',
      },
      // Add more technologies...
    ],
  },
  // Add more skill categories...
];

Step 4: Connect Your Social Media

Edit app/config/socials.tsx to link your social profiles:

export const socials: Social[] = [
  {
    name: "GitHub",
    icon: <Github size={20} />, // Using Lucide React icons
    url: "https://github.com/yourusername",
    color: "#333333",
  },
  // Add more social profiles...
];

Step 5: Update Favicon

• Replace the app/icon.svg file with your own favicon containing your initials (the code brackets are a signature part of the design)

Step 6: Customize Styling (Optional)

For deeper customization:

• Edit app/globals.css to adjust the color scheme
• Modify component files in the app/sections directory for structural changes
• Update app/components for UI element customization

Step 7: Replace Assets

• Replace /public/resume.pdf with your own resume
• Add your custom images to the /public directory

🏗️ Project Structure

portfolio/
├── app/                 # Next.js app directory
│   ├── config/          # Configuration files
│   │   ├── index.ts     # Main portfolio config
│   │   ├── projects.ts  # Projects data
│   │   ├── skills.ts    # Skills data
│   │   └── socials.tsx  # Social links
│   ├── components/      # Reusable UI components
│   │   ├── button.tsx   # Custom button component
│   │   ├── logo.tsx     # Portfolio logo
│   │   └── tech-sphere.tsx # 3D tech visualization
│   ├── sections/        # Main page sections
│   │   ├── about.tsx    # About me section
│   │   ├── connect.tsx  # Connect with me section
│   │   ├── home.tsx     # Home section (hero)
│   │   ├── projects.tsx # Projects showcase
│   │   └── skills.tsx   # Skills display
│   ├── types/           # TypeScript type definitions
|   |-- utils/           # Utility functions
│   ├── globals.css      # Global styles
│   └── layout.tsx       # Root layout
└── public/              # Static assets

🙏 Acknowledgements

This portfolio project wouldn't be possible without these amazing technologies and libraries:

• Next.js - The React framework for production
• React - A JavaScript library for building user interfaces
• TypeScript - Typed JavaScript for better code quality
• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Animation library for React
• Lucide React - Beautiful & consistent icon toolkit
• React Icon Cloud - Interactive 3D icon rendering
• Geist Font - Beautiful, modern typeface by Vercel

📄 License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.

---

Made with ❤️ by Praveen Kumar

LinkedIn • Website