Salar Rezayani - VR/AR Developer Portfolio
A modern, responsive personal website showcasing VR/AR development projects, publications, and skills.
🚀 Features
- Clean, Modern Design: Professional layout with smooth animations
- Responsive: Works perfectly on desktop, tablet, and mobile devices
- Project Showcase: Display your VR/AR projects with YouTube video links
- Publications Section: Highlight your research papers and publications
- Skills Visualization: Organized skill categories with hover effects
- Interactive Elements: Smooth animations and hover effects
- SEO Optimized: Meta tags and structured content
📁 File Structure
Personal-Website/
├── index.html # Main HTML file
├── css/
│ └── style.css # Main stylesheet
├── js/
│ └── script.js # JavaScript functionality
├── images/ # Project and profile images
├── papers/ # PDF files for publications
└── README.md # This file
🎨 Customization Guide
Edit index.html to update:
- Your name and title
- Contact information and social links
- About section content
2. Projects
Update the projects section in index.html:
- Replace project images in the
images/ folder
- Update project titles, descriptions, and tags
- Add your actual YouTube video links
- Modify project tags to match your technologies
3. Publications
Update the publications section:
- Add your actual paper titles and authors
- Update venue information
- Link to actual PDF files in the
papers/ folder
- Add DOI links when available
4. Skills
Modify the skills section to reflect your expertise:
- Update skill categories
- Add/remove skill tags
- Organize by your actual specializations
5. Styling
Customize css/style.css to:
- Change color scheme (search for
#667eea and #764ba2)
- Modify fonts (currently using Inter from Google Fonts)
- Adjust spacing and layout
- Update animations
🖼️ Adding Images
Profile Image
- Add your profile photo as
images/profile.jpg
- Recommended size: 400x400px (will be displayed as 200x200px circle)
Project Images
- Add project screenshots as
images/project1.jpg, images/project2.jpg, etc.
- Recommended size: 800x600px
- Use high-quality screenshots of your VR/AR projects
📄 Adding Publications
- Create a
papers/ folder
- Add your PDF files (e.g.,
brain-volume-paper.pdf)
- Update the publication links in
index.html
🌐 Deployment Options
GitHub Pages (Free)
- Push your code to a GitHub repository
- Go to Settings > Pages
- Select source branch (usually
main)
- Your site will be available at
https://username.github.io/repository-name
Netlify (Free)
- Drag and drop your website folder to netlify.com
- Get a custom URL instantly
- Connect to GitHub for automatic deployments
Vercel (Free)
- Connect your GitHub repository to vercel.com
- Automatic deployments on every push
- Custom domain support
🔧 Technical Details
Technologies Used
- HTML5: Semantic markup
- CSS3: Modern styling with Flexbox and Grid
- JavaScript: Interactive features and animations
- Font Awesome: Icons
- Google Fonts: Inter font family
Browser Support
- Chrome (recommended)
- Firefox
- Safari
- Edge
- Mobile browsers
- Optimized images
- Lazy loading
- Smooth animations
- Responsive design
- Fast loading times
📱 Mobile Optimization
The website is fully responsive and includes:
- Touch-friendly interactions
- Optimized layouts for small screens
- Readable text sizes
- Proper spacing for mobile devices
🎯 SEO Features
- Meta description and keywords
- Semantic HTML structure
- Alt text for images
- Proper heading hierarchy
- Fast loading times
🔄 Updates and Maintenance
Regular Updates
- Keep project images current
- Update publications as they’re published
- Refresh skills as you learn new technologies
- Add new projects regularly
- Use Google PageSpeed Insights
- Monitor Core Web Vitals
- Optimize images regularly
- Keep dependencies updated
📞 Support
For questions or customization help:
📄 License
This project is open source and available under the MIT License.
Built with ❤️ for the VR/AR community