GOI17/website

My website?

โ˜… 0Forks 0JavaScriptGitHub โ†—Compare

README

Gilberto Olivas - Full-Stack Developer Portfolio

A modern, bilingual portfolio website showcasing web development projects, technical blog, and professional experience.

๐Ÿš€ Features

  • Bilingual Support: English and Spanish content
  • Modern Design: Clean, documentation-inspired layout
  • Dark/Light Themes: Professional color schemes
  • Responsive: Mobile-first design approach
  • SEO Optimized: Comprehensive meta tags and structured data
  • Performance: Optimized for fast loading

๐Ÿ“ Project Structure

/
โ”œโ”€โ”€ home.html          # Landing page with hero section
โ”œโ”€โ”€ projects.html      # Projects showcase
โ”œโ”€โ”€ blog.html          # Blog listing page
โ”œโ”€โ”€ post.html          # Individual blog post viewer
โ”œโ”€โ”€ twitch.html        # Streaming information
โ”œโ”€โ”€ main.js           # Global functionality (themes, translations)
โ”œโ”€โ”€ projects.js       # Projects page logic
โ”œโ”€โ”€ blog.js           # Blog listing logic
โ”œโ”€โ”€ post.js           # Blog post viewing logic
โ”œโ”€โ”€ style.css         # Modern CSS with CSS variables
โ”œโ”€โ”€ translations.json # Bilingual text content
โ”œโ”€โ”€ blog.json         # Blog post metadata
โ”œโ”€โ”€ robots.txt        # Search engine crawling rules
โ”œโ”€โ”€ sitemap.xml       # XML sitemap for search engines
โ””โ”€โ”€ blog/             # Markdown blog posts
    โ”œโ”€โ”€ carets-node-semantic-versioning.md
    โ”œโ”€โ”€ react-context-vs-redux.md
    โ”œโ”€โ”€ docker-nix.md
    โ””โ”€โ”€ rendering-strategies-frontend.md

๐Ÿ› ๏ธ Technologies Used

  • HTML5: Semantic markup with accessibility features
  • CSS3: Modern styling with CSS Grid and Flexbox
  • Vanilla JavaScript: No frameworks, lightweight and fast
  • Markdown: Blog content with Marked.js parser
  • GitHub Pages: Free hosting and deployment

๐Ÿ” SEO Features

Meta Tags

  • Open Graph tags for social media sharing
  • Twitter Card meta tags
  • Canonical URLs to prevent duplicate content
  • Proper title and description tags

Structured Data

  • Person schema for author information
  • Website schema for site information
  • Article schema for blog posts

Technical SEO

  • robots.txt for crawler instructions
  • XML sitemap for search engine discovery
  • Mobile-friendly responsive design
  • Fast loading with optimized assets

๐ŸŒ Live Website

๐Ÿ“ Blog Content

The blog features technical articles on:

  • Node.js: Understanding carets (^) and semantic versioning
  • React: Context vs Redux comparison
  • DevOps: Docker vs Nix containerization
  • Frontend: Rendering strategies (SSR, SSG, CSR, ISR)

All content is available in both English and Spanish.

๐ŸŽจ Design System

Colors (Light Theme)

  • Background: #ffffff
  • Text: #1a1a1a
  • Links: #2563eb
  • Borders: #e5e7eb

Colors (Dark Theme)

  • Background: #0f172a
  • Text: #f1f5f9
  • Headers: #1e293b
  • Links: #3b82f6

Typography

  • Font Family: System fonts for optimal performance
  • Line Height: 1.7 for better readability
  • Font Smoothing: Antialiased for crisp text

๐Ÿš€ Deployment

This site is automatically deployed to GitHub Pages when changes are pushed to the main branch.

๐Ÿ“ž Contact

๐Ÿ“„ License

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


Built with โค๏ธ by Gilberto Olivas

Contributors

GOI17

Issues