https://github.com/getssh/portfolio
https://github.com/getssh/portfolio
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/getssh/portfolio
- Owner: getssh
- Created: 2022-07-16T12:20:04.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2025-08-16T10:47:56.000Z (11 months ago)
- Last Synced: 2025-08-16T12:57:15.077Z (11 months ago)
- Language: JavaScript
- Size: 17 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Getayawkal Tamrat - Portfolio
A modern, responsive portfolio website built with React, Vite, and Tailwind CSS, optimized for SEO and performance.
## 🚀 Features
- **SEO Optimized**: Comprehensive meta tags, structured data, and semantic HTML
- **Responsive Design**: Mobile-first approach with Tailwind CSS
- **Performance**: Optimized build configuration and lazy loading
- **Accessibility**: ARIA labels, semantic HTML, and keyboard navigation
- **PWA Ready**: Manifest file and service worker support
- **Modern Tech Stack**: React 19, Vite, Framer Motion
## 🛠️ Tech Stack
- **Frontend**: React 19, Tailwind CSS, Framer Motion
- **Build Tool**: Vite
- **Styling**: Tailwind CSS with custom components
- **Animation**: Framer Motion for smooth interactions
- **Routing**: React Router DOM
- **SEO**: Custom hooks and structured data
## 📱 SEO Features
### Meta Tags
- Comprehensive meta descriptions and keywords
- Open Graph tags for social media sharing
- Twitter Card optimization
- Canonical URLs and robots.txt
### Structured Data
- JSON-LD schema markup for Person, Organization, and Website
- Rich snippets support for search engines
- Professional credentials and skills markup
### Performance
- Optimized build configuration with code splitting
- Lazy loading for images and components
- Preconnect to external domains
- PWA manifest for mobile experience
## 🚀 Getting Started
### Prerequisites
- Node.js 18+
- npm or yarn
### Installation
1. Clone the repository:
```bash
git clone https://github.com/getssh/portfolio.git
cd portfolio
```
2. Install dependencies:
```bash
npm install
```
3. Start development server:
```bash
npm run dev
```
4. Build for production:
```bash
npm run build
```
5. Preview production build:
```bash
npm run preview
```
## 📁 Project Structure
```
portfolio/
├── public/
│ ├── robots.txt # Search engine crawling instructions
│ ├── sitemap.xml # XML sitemap for SEO
│ ├── manifest.json # PWA manifest file
│ └── favicon files # Various favicon sizes
├── src/
│ ├── components/ # React components
│ ├── hooks/ # Custom hooks including SEO
│ ├── config/ # Configuration files
│ └── assets/ # Static assets
├── index.html # Main HTML with SEO meta tags
└── vite.config.js # Build configuration
```
## 🔧 SEO Configuration
### Structured Data
JSON-LD structured data is automatically included for:
- Person schema (developer profile)
- Organization schema (portfolio business)
- Website schema (portfolio site)
### Social Media
Open Graph and Twitter Card tags are optimized for:
- LinkedIn sharing
## 📊 Performance Optimization
### Build Configuration
- Code splitting for vendor libraries
- Optimized chunk sizes
- Tree shaking for unused code
### Image Optimization
- Proper alt text for all images
- Lazy loading for better performance
- Responsive image sizing
### CSS Optimization
- Tailwind CSS with PurgeCSS
- Critical CSS inlining
- Optimized class generation
## 🌐 Deployment
### Build Process
```bash
npm run build
```
## 📈 SEO Best Practices Implemented
1. **Semantic HTML**: Proper use of ``, ``, ``, ``
2. **Heading Hierarchy**: Logical H1-H6 structure
3. **Alt Text**: Descriptive alt text for all images
4. **Meta Descriptions**: Unique, compelling descriptions for each section
5. **Structured Data**: JSON-LD markup for rich snippets
6. **Performance**: Fast loading times and Core Web Vitals
7. **Mobile-First**: Responsive design for all devices
8. **Accessibility**: ARIA labels and keyboard navigation
## 📚 Resources
- [Google SEO Starter Guide](https://developers.google.com/search/docs/beginner/seo-starter-guide)
- [Schema.org Documentation](https://schema.org/)
- [Web.dev Performance](https://web.dev/performance/)
- [MDN Web Docs](https://developer.mozilla.org/)
## 🤝 Contributing
1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request
## 📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
## 📞 Contact
- **Portfolio**: [getayawkal.com](https://getayawkal.com)
- **LinkedIn**: [linkedin.com/in/getayawkal-tamrat](https://www.linkedin.com/in/getayawkal-tamrat/)
- **GitHub**: [github.com/getssh](https://github.com/getssh)