Portfolio Generator

Build a professional portfolio from a simple form and share it with a single link. This project is frontend-only and stores data in the URL for easy sharing.

Features

• 🎨 Professional Design - Clean sidebar layout with sectioned content
• 📸 Profile Image - Add your photo via URL (upload to Imgur, Cloudinary, etc.)
• 🌐 Social Media Icons - Beautiful icons for Twitter, Facebook, Instagram, LinkedIn, GitHub, etc.
• ⚡ Simple Editor - Easy-to-use form for adding your information
• 🔗 Shareable Links - Generate unique URLs with encoded portfolio data (no backend required)
• 💾 Auto-Save - Local storage persistence so you never lose your work
• 📱 Fully Responsive - Works beautifully on mobile and desktop
• 🖨️ Print-Friendly - Export to PDF with clean layout
• 📝 Sample Data - Load example content to get started quickly

Design

The portfolio features a professional sidebar layout with:

• Fixed navigation sidebar with avatar and social links
• Smooth scrolling sections (About, Resume, Portfolio, Contact)
• Skill progress bars
• Project cards with descriptions
• Clean, modern aesthetics

Tech Stack

• React 19 - Component-based UI
• TypeScript - Type-safe development
• Vite - Fast build tool
• React Router - Client-side routing
• React Icons - Beautiful icon library
• CSS3 - Custom styling (no frameworks)

Getting Started

# Install dependencies
npm install

# Start development server
npm run dev

Visit http://localhost:5173 to start building your portfolio.

How It Works

1. Fill the Form

Add your profile information, skills, experience, projects, and social links through simple form inputs.

2. Preview

Click "Preview" to open your portfolio in a new tab and see how it looks.

3. Share

Click "Share Link" to generate a URL with your portfolio data encoded in it. Share this link with anyone!

4. Data Encoding

The app serializes your form data → converts to JSON → encodes to base64url → adds to URL. No database needed!

Export to PDF

Use your browser's Print dialog (Ctrl+P / Cmd+P) and choose "Save as PDF".

Project Structure

src/
├── components/
│   ├── forms/           # Form input sections
│   ├── common/          # Reusable UI components
│   └── PortfolioPreview.tsx  # Main portfolio display
├── routes/
│   ├── EditorPage.tsx   # Form editor page
│   └── ViewerPage.tsx   # Shared portfolio viewer
├── state/
│   └── formState.tsx    # Global state management
├── utils/
│   └── share.ts         # URL encoding/decoding
├── style.css            # Editor styles
└── portfolio.css        # Portfolio display styles

Key Concepts Demonstrated

• React hooks (useState, useContext, useReducer, useEffect)
• TypeScript type safety
• Context API for global state
• React Router for navigation
• Form handling with controlled inputs
• Data serialization and encoding
• CSS Grid and Flexbox
• Responsive design
• Local storage persistence

License

MIT

Future Ideas

• Custom color themes
• Image upload for avatar
• Multiple portfolio templates
• JSON export/import
• Dark mode option