Portfolio Website

My blackout-esque portfolio website showcasing projects, skills, and contact information.

Features

• Page Intergration: reveal-on-scroll animations and transitions
• Multi-platform Design: Works on mobile, tablet, and desktop
• Base UI: Built with Tailwind CSS 4.x, aimed for a contemporary look
• Font & Icons: Font Awesome and Lucide React icons

Tech Stack

Frontend

• React 19
• Vite 6.x
• Tailwind CSS 4.x

Development Tools

• ESLint - Code linting with React specific rules
• React Helmet - Dynamic document head management
• React Icons - used for its icon library

Deployment

• GitHub Pages - For site hositng

Vite Configuration

• Base URL configured for GitHub Pages deployment
• React plugin for JSX transformation
• Tailwind CSS Vite plugin for easier building

Naviagation

Portfolio Website/
├── public/ # Static assets
├── src/
│ ├── components/
│ │ ├── sections/
│ │ │ ├── Home.jsx # Landing section
│ │ │ ├── About.jsx # About me & skills
│ │ │ ├── Projects.jsx # Project showcase
│ │ │ └── Contact.jsx # Contact form
│ │ ├── LoadingScreen.jsx # Animated loader
│ │ ├── NavBar.jsx # Desktop navigation
│ │ ├── MobileMenu.jsx # Mobile navigation
│ │ └── RevealOnScroll.jsx # Scroll animation wrapper
│ ├── assets/ # Images and media
│ ├── App.jsx # Main app component
│ ├── main.jsx # React entry point
│ ├── App.css # Component styles
│ └── index.css # Global styles & Tailwind
├── index.html # HTML template
├── vite.config.js # Vite configuration
├── eslint.config.js # ESLint configuration
└── package.json # Dependencies and scripts

Author

Filipe Ramos

• LinkedIn: @filipearamos