Hi, I'm Pedro, a Front- End Developer
Creating modern , dynamic websites with HTML, CSS, and JavaScript.
See My WorkSkills
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Webpage</title>
</head>
<body>
<h1>Welcome to Website</h1>
<p>This is a simple webpage
created using HTML.</p>
<a href=
"https://www.example.com">
Click here to visit</a>
</body>
</html>
Expert in crafting functional, accessible, and visually appealing web pages. Skilled in semantic structure for better readability and search engine indexing. Proficient in complex forms, multimedia embedding, and dynamic graphics with SVG/canvas. Enhance accessibility with ARIA roles and boost interactivity using HTML5 APIs. Ensure responsiveness with meta viewport tags and media queries. Optimize performance with structured data, microdata, and Progressive Web App (PWA) features. Develop custom elements with Web Components while ensuring cross-browser compatibility and WCAG compliance.
CSS
body {
font-family: 'Arial',
background-color: #f4f4f4;
color: #333;
line-height: 1.6;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background-color: #333;
color: white;
padding: 10px 0;
text-align: center;
text-decoration: none;
font-weight: bold;
}
Mastery of modern styling techniques for responsive and visually engaging layouts. Proficient in Flexbox, Grid, and animations using transitions and keyframes. Enhance maintainability with Sass, LESS, and variables. Ensure consistency across browsers with vendor prefixes and graceful degradation. Use BEM for modular styles and integrate build tools like Webpack and Gulp. Leverage advanced features like custom properties, calc(), and blend modes. Apply best practices for accessibility and performance optimization.
JavaScript
const button = document.
querySelector('.btn');
const container = document.
querySelector('.container');
button.addEventListener
('click', () => {
const newElement = document.
createElement('p');
newElement.textContent =
'Hello, JavaScript!';
newElement.style.color =
'blue';
container.appendChild
(newElement);
console.log
('Button clicked!');
});
function calculateSum(a, b) Proficient in building dynamic, interactive applications with modern frameworks and ES6+ syntax. Skilled in developing single-page apps (SPAs) using React, Vue, or Angular. Expert in asynchronous programming, event handling, and browser APIs. Implement state management with Redux, Vuex, or Context API. Optimize performance with lazy loading, code splitting, and tree shaking. Ensure code quality with Jest, Mocha, or Jasmine while staying up-to-date with the latest trends and best practices.
My Projects
Interactive Photo Gallery
Dynamically filter and paginate images with intuitive navigation, immersive lightbox viewing, and refined hover effects. Responsive design and subtle CSS transitions ensure a seamless, visually engaging gallery experience, with filtering operations that automatically reset pagination.
View ProjectWeather App
Delivers real-time, location-based forecasts by integrating geolocation and manual input, presenting temperature, conditions, and dynamic icons in a clean, responsive interface. Robust asynchronous handling and smooth CSS transitions guarantee a reliable and fluid user experience.
View ProjectChat App
Enables seamless group communication through an intuitive interface where messages appear instantly and the conversation auto-scrolls. Enhanced with smooth animations, CSS transitions, and responsive event handling for a lively, real-time chat environment.
View ProjectTo-Do List App
Empowers users to create, edit, and manage tasks in real time, with persistent storage and dynamic filtering. The clean interface, responsive design, and subtle transitions promote productivity and effortless task organization.
View ProjectDemonstration Website
Showcases advanced features such as IP and location identification and a secure webmail login, all within a fully responsive, user-friendly platform. Dynamic content updates and seamless transitions ensure robust security and an intuitive experience across devices.
View ProjectRecipe Discovery Blog & Tool
Fetches curated recipes from an API based on user-input ingredients, with advanced filters for cuisine and dietary preferences. The polished, responsive interface leverages smooth transitions for an enjoyable and efficient recipe discovery process.
View ProjectPortfolio Website (SPA)
Showcases projects, skills, and experience in an engaging single-page React application. Smooth animations, dynamic content updates, client-side routing, and lazy loading deliver a fast, interactive browsing experience across all devices.
View ProjectE-commerce Product Page
Features an interactive image slider, detailed product information, dynamic variation selection, and an add-to-cart system. Modern layout techniques and smooth transitions create a sleek, responsive shopping experience.
View ProjectTrivia Quiz App
Presents a dynamic question-and-answer experience with multiple-choice questions, a countdown timer, and automatic progression. Immediate feedback, animated transitions, and responsive design ensure engaging participation and clear results.
View ProjectMovie Search App
Facilitates movie discovery via the OMDb API, allowing users to search, browse, and view detailed film information in a responsive modal. Dynamic DOM updates, smooth transitions, and robust error handling provide a seamless search experience.
View ProjectContact Me
Feel free to reach out for collaborations or inquiries!
