React Portfolio with Tailwind CSS

A modern, responsive, and highly maintainable personal portfolio website built with React and Tailwind CSS, following SOLID principles for scalability and flexibility.

🎯 Project Overview

This portfolio showcases a professional web developer's work, skills, and experience through a beautifully designed interface with smooth animations, responsive layouts, and an intuitive user experience.

Key Features

Responsive Design: Fully responsive across all devices (mobile, tablet, desktop)
Dark Mode: Built-in dark mode toggle with persistent theme preference
Smooth Animations: Tailwind CSS animations for enhanced user experience
Dynamic Components: Reusable components following React best practices
SOLID Principles: Code architecture designed for maintainability and scalability
Accessible: ARIA labels and semantic HTML for better accessibility
SEO Optimized: Meta tags and semantic structure for search engines

🏗️ Architecture & SOLID Principles

Single Responsibility Principle (SRP)

Each component has one clear, focused responsibility:

Hero - Displays the hero section only
SkillList - Manages and displays skills
ProjectCard - Renders individual project cards
Button - Renders styled buttons
Navigation - Handles navigation logic

Open/Closed Principle (OCP)

Components are open for extension but closed for modification:

New skills can be added by updating the data array
New projects can be added without changing component logic
Styling variants can be extended without modifying core components

Liskov Substitution Principle (LSP)

The Card component can be used anywhere a card is needed:

SkillCard extends Card functionality
ProjectCard extends Card functionality
All maintain consistent behavior

Interface Segregation Principle (ISP)

Components only depend on props they actually use:

ProjectCard optionally accepts showTags and showLinks
SkillCard only requires skill-related props
No component is forced to accept unnecessary props

Dependency Inversion Principle (DIP)

Components depend on abstractions, not concrete implementations:

Data fetching uses abstract functions (getSkills(), getProjects())
Easy to swap data sources (local → API → database)
Components don't know where data comes from

📁 Project Structure

portfolio/
├── src/
│   ├── components/          # Reusable UI components
│   │   ├── Button.jsx
│   │   ├── Card.jsx
│   │   ├── Hero.jsx
│   │   ├── Navigation.jsx
│   │   ├── Footer.jsx
│   │   ├── SkillCard.jsx
│   │   ├── SkillList.jsx
│   │   ├── ProjectCard.jsx
│   │   └── ProjectList.jsx
│   ├── pages/               # Page components
│   │   ├── Home.jsx
│   │   ├── About.jsx
│   │   ├── Projects.jsx
│   │   └── Contact.jsx
│   ├── data/                # Data abstraction layer
│   │   ├── skills.js
│   │   ├── projects.js
│   │   └── personal.js
│   ├── App.jsx              # Main app component with routing
│   ├── main.jsx             # Entry point
│   └── index.css            # Global styles
├── index.html
├── package.json
├── vite.config.js
├── tailwind.config.js
└── postcss.config.js

🚀 Getting Started

Prerequisites

Node.js (v16 or higher)
npm or yarn

Installation

Clone the repository:

git clone https://github.com/yourusername/portfolio.git
cd portfolio

Install dependencies:

npm install

Start the development server:

npm run dev

Open your browser and navigate to http://localhost:5173

Building for Production

npm run build

The optimized production build will be in the dist folder.

Preview Production Build

npm run preview

🎨 Customization

Personal Information

Update your personal information in src/data/personal.js:

Name, tagline, description
Contact information
Social media links
Work experience
Education

Skills

Add or modify skills in src/data/skills.js:

{
  id: 9,
  name: 'Your Skill',
  category: 'Category',
  level: 85,
  icon: '🎯'
}

Projects

Add your projects in src/data/projects.js:

{
  id: 7,
  title: 'Project Name',
  description: 'Project description',
  image: 'image-url',
  tags: ['React', 'Node.js'],
  github: 'github-url',
  live: 'live-demo-url',
  featured: true
}

Theme Colors

Customize colors in tailwind.config.js:

colors: {
  primary: {
    500: '#f58720',  // Main brand color
    600: '#c46c1a',
    // ...
  }
}

Fonts

Update fonts in tailwind.config.js and src/index.css:

fontFamily: {
  display: ['Your Display Font', 'serif'],
  body: ['Your Body Font', 'sans-serif'],
}

📄 Pages

Home (`/`)

Hero section with introduction
Skills showcase
Featured projects
Call-to-action buttons

About (`/about`)

Personal biography
Work experience timeline
Education information
Technology stack

Projects (`/projects`)

All projects grid
Tag-based filtering
Project details with links

Contact (`/contact`)

Contact information
Working contact form with validation
Social media links

🛠️ Tech Stack

Frontend: React 18.2
Styling: Tailwind CSS 3.3
Routing: React Router DOM 6.20
Build Tool: Vite 5.0
Language: JavaScript (ES6+)

✨ Features in Detail

Dark Mode

Automatic detection of system preference
Manual toggle with persistent storage
Smooth transitions between themes

Animations

Fade-in animations on page load
Slide-up animations for content
Hover effects on interactive elements
Staggered animations for lists

Form Validation

Real-time validation feedback
Error messages for invalid inputs
Accessible form labels and ARIA attributes
Success/error states after submission

Responsive Design

Mobile-first approach
Breakpoints for tablet and desktop
Hamburger menu for mobile navigation
Optimized images for different screen sizes

🚀 Deployment

Vercel (Recommended)

Push your code to GitHub
Import project in Vercel
Deploy with one click

Netlify

Connect your GitHub repository
Set build command: npm run build
Set publish directory: dist
Deploy

GitHub Pages

npm run build
# Deploy the dist folder to gh-pages branch

📝 Additional Features (Optional Enhancements)

Blog Integration

Add blog posts in src/data/blog.js
Create BlogPost component
Add blog route and page

Analytics

// Add to index.html
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>

SEO Optimization

Use React Helmet for dynamic meta tags
Add structured data (JSON-LD)
Generate sitemap.xml

Performance Optimization

Lazy loading for images
Code splitting for routes
Optimize bundle size

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is open source and available under the MIT License.

👤 Author

Jerico P. Jacob

Email: xiaoliners@gmail.com
Location: Philippines
GitHub: @jericojacob

🙏 Acknowledgments

Tailwind CSS for the utility-first CSS framework
React team for the amazing library
Unsplash for placeholder images
Google Fonts for typography

Built with ❤️ using React and Tailwind CSS "# MyPortfolio"

Name		Name	Last commit message	Last commit date
public		public
src		src
.eslintrc.cjs		.eslintrc.cjs
.gitignore		.gitignore
DEPLOYMENT.md		DEPLOYMENT.md
README.md		README.md
SOLID_PRINCIPLES.md		SOLID_PRINCIPLES.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
vercel.json		vercel.json
vite.config.js		vite.config.js

Latest commit

History

Folders and files

Repository files navigation