Skip to content

gamaalice/dev-portfolio

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

38 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

My Front-End Portfolio

A dynamic, bi-language portfolio showcasing skills, projects and interactive UI components through a terminal-style interface and smooth animations.

Features

  • Multi-Language Support (PT/EN)
    Switch between Portuguese and English on the fly, with language preference saved in LocalStorage.

  • Terminal-Style Intro
    Simulated command-line header with animated lines and blinking cursor.

  • Scroll-Reveal Animations
    Sections and individual elements fade in as you scroll, powered by IntersectionObserver.

  • Tab-Based Code Preview
    “Explorer” sidebar lets you toggle between JS, HTML and CSS snippets in a live code pane.

  • Responsive Project Carousel
    Automatic rotation, manual prev/next buttons, keyboard arrows and touch swipe support.

  • Active Link Highlighting
    Navbar links update based on section in view, using IntersectionObserver and ARIA attributes.

  • Mobile-Friendly Menu
    Accessible hamburger toggle with expand/collapse states and a close button.

  • Back-to-Top Button
    Appears after scrolling down 300px for quick navigation to page top.

  • Preloader Animation
    Three-dot loader with fade-out effect on window load.

Technologies Used

  • HTML5 — Semantic structure, meta tags for SEO
  • CSS3 — Layout, responsive design, transitions and animations
  • JavaScript (ES6) — DOM manipulation, event handling, IntersectionObserver
  • Font Awesome — UI icons for navigation, social links and controls
  • Devicon — Technology icons in the skills grid
  • LocalStorage — Persisting user language preference
  • Google Translate Widget — On-page translation alternative
  • ARIA — Accessible navigation and interactive controls

What I Learned

  • Creating scroll-triggered animations with IntersectionObserver
  • Building a pseudo-terminal interface with dynamic text injection
  • Managing multilingual content and user preferences via LocalStorage
  • Crafting a touch- and keyboard-friendly carousel component
  • Structuring an accessible, responsive navbar with ARIA best practices
  • Implementing a preloader to improve perceived performance
  • Organizing a code snippet preview tool with a simulated file explorer UI

How to Access

Click here to view

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published