Personal Resume
</title> <script src="https://cdn.tailwindcss.com"> </script> <style> body { font-family: 'Inter', sans-serif; } /* Scrollbar for comment section */ #comments { max-height: 300px; overflow-y: auto; } </style>
Creative Thinker | Problem Solver | Aspiring Web Developer
<i class="fas fa-download mr-2">
</i>
Download Resume
<h2 class="text-3xl font-bold mb-4 border-b-4 border-indigo-600 inline-block pb-1">
About Me
</h2>
<p class="text-gray-700 leading-relaxed text-lg">
About Me:
Hello! I'm Alfred, a passionate aspiring web developer with a love for creating beautiful and functional websites. I enjoy solving complex problems and continuously learning new technologies to improve my skills. When I'm not coding, I like hiking, photography, and exploring new coffee shops.
</p>
<h2 class="text-3xl font-bold mb-6 border-b-4 border-purple-600 inline-block pb-1">
Education
</h2>
<ul class="space-y-6">
<li>
<h3 class="text-xl font-semibold text-indigo-700">
Bachelor of Science in Information technology
</h3>
<p class="text-gray-600 italic">
Dominican College of Tarlac , Capas Tarlac — 2025 - 2026
</p>
<p class="mt-1 text-gray-700">
Graduated with Honors. Focused on software development, algorithms, and web technologies.
</p>
</li>
<li>
<h3 class="text-xl font-semibold text-indigo-700">
Full Stack Web Development Certification
</h3>
<p class="text-gray-600 italic">
freeCodeCamp — 2025
</p>
<p class="mt-1 text-gray-700">
Completed 300+ hours of hands-on projects covering HTML, CSS, JavaScript, React, Node.js, and databases.
</p>
</li>
<li>
<h3 class="text-xl font-semibold text-indigo-700">
Advanced JavaScript Course
</h3>
<p class="text-gray-600 italic">
Udemy — 2025
</p>
<p class="mt-1 text-gray-700">
Deep dive into asynchronous programming, and modern JavaScript frameworks.
</p>
</li>
</ul>
<h2 class="text-3xl font-bold mb-6 border-b-4 border-indigo-600 inline-block pb-1">
Skills
</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-6 text-center">
<div class="bg-indigo-100 text-indigo-800 rounded-lg py-3 font-semibold shadow hover:bg-indigo-200 transition cursor-default">
<i class="fab fa-html5 text-3xl mb-1">
</i>
HTML5
</div>
<div class="bg-purple-100 text-purple-800 rounded-lg py-3 font-semibold shadow hover:bg-purple-200 transition cursor-default">
<i class="fab fa-css3-alt text-3xl mb-1">
</i>
CSS3
</div>
<div class="bg-indigo-100 text-indigo-800 rounded-lg py-3 font-semibold shadow hover:bg-indigo-200 transition cursor-default">
<i class="fab fa-js-square text-3xl mb-1">
</i>
JavaScript
</div>
<div class="bg-purple-100 text-purple-800 rounded-lg py-3 font-semibold shadow hover:bg-purple-200 transition cursor-default">
React
</div>
<div class="bg-indigo-100 text-indigo-800 rounded-lg py-3 font-semibold shadow hover:bg-indigo-200 transition cursor-default">
Node.js
</div>
<div class="bg-purple-100 text-purple-800 rounded-lg py-3 font-semibold shadow hover:bg-purple-200 transition cursor-default">
Teamwork
</div>
<div class="bg-indigo-100 text-indigo-800 rounded-lg py-3 font-semibold shadow hover:bg-indigo-200 transition cursor-default">
Problem Solving
</div>
<div class="bg-purple-100 text-purple-800 rounded-lg py-3 font-semibold shadow hover:bg-purple-200 transition cursor-default">
Git & GitHub
</div>
<div class="bg-indigo-100 text-indigo-800 rounded-lg py-3 font-semibold shadow hover:bg-indigo-200 transition cursor-default">
Responsive Design
</div>
</div>
<h2 class="text-3xl font-bold mb-6 border-b-4 border-purple-600 inline-block pb-1">
Projects & Experience
</h2>
<div class="space-y-8">
<article class="flex flex-col sm:flex-row gap-6">
<img alt="Screenshot of a modern portfolio website with a clean white background, purple and indigo accent colors, and a grid of project cards" class="rounded-lg shadow-md w-full sm:w-48 object-cover" height="140" loading="lazy" src="https://storage.googleapis.com/a1aa/image/e7f3e0e4-98c3-47de-cef8-3b343e51180e.jpg" width="200"/>
<div>
<h3 class="text-xl font-semibold text-indigo-700 mb-1">
Personal Portfolio Website
</h3>
<p class="text-gray-700 mb-2">
Designed and developed a responsive portfolio website to showcase my projects and skills using React and Tailwind CSS.
</p>
<a class="text-indigo-600 hover:underline font-semibold" href="https://alexandramorgan.dev" rel="noopener noreferrer" target="_blank">
View Live
<i class="fas fa-external-link-alt ml-1">
</i>
</a>
</div>
</article>
<article class="flex flex-col sm:flex-row gap-6">
<img alt="Screenshot of a task manager app interface with a clean layout, task lists, and colorful priority tags" class="rounded-lg shadow-md w-full sm:w-48 object-cover" height="140" loading="lazy" src="https://storage.googleapis.com/a1aa/image/7c28da8c-9efb-4a8a-ab11-4cc4918eabd5.jpg" width="200"/>
<div>
<h3 class="text-xl font-semibold text-indigo-700 mb-1">
Task Manager App
</h3>
<p class="text-gray-700 mb-2">
Built a full-stack task management application with user authentication, CRUD operations, and real-time updates using Node.js, Express, and MongoDB.
</p>
<a class="text-indigo-600 hover:underline font-semibold" href="https://github.com/alexmorgan/task-manager" rel="noopener noreferrer" target="_blank">
View Code
<i class="fas fa-external-link-alt ml-1">
</i>
</a>
</div>
</article>
<article class="flex flex-col sm:flex-row gap-6">
<img alt="Screenshot of a blog platform homepage with featured articles, user comments, and a clean modern design" class="rounded-lg shadow-md w-full sm:w-48 object-cover" height="140" loading="lazy" src="https://storage.googleapis.com/a1aa/image/a72f56c6-cef1-4cad-cd85-72f3e92824d5.jpg" width="200"/>
<div>
<h3 class="text-xl font-semibold text-indigo-700 mb-1">
Blog Platform
</h3>
<p class="text-gray-700 mb-2">
Developed a blogging platform with rich text editing, user profiles, and comment functionality using React and Firebase.
</p>
<a class="text-indigo-600 hover:underline font-semibold" href="https://blog.alexandramorgan.dev" rel="noopener noreferrer" target="_blank">
View Live
<i class="fas fa-external-link-alt ml-1">
</i>
</a>
</div>
</article>
</div>
<h2 class="text-3xl font-bold mb-6 border-b-4 border-indigo-600 inline-block pb-1">
Contact Me
</h2>
<form class="max-w-xl mx-auto space-y-6" id="contactForm" novalidate="">
<div>
<label class="block text-lg font-semibold mb-2" for="email">
Email
</label>
<input aria-describedby="emailHelp" class="w-full border border-gray-300 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" id="email" name="email" placeholder="your.email@example.com" required="" type="email"/>
<p class="text-sm text-red-600 mt-1 hidden" id="emailHelp">
Please enter a valid email address.
</p>
</div>
<div>
<label class="block text-lg font-semibold mb-2" for="message">
Message
</label>
<textarea class="w-full border border-gray-300 rounded-md px-4 py-2 resize-y focus:outline-none focus:ring-2 focus:ring-indigo-500" id="message" name="message" placeholder="Write your message here..." required="" rows="4"></textarea>
</div>
<button aria-label="Send message" class="bg-indigo-600 text-white font-semibold px-6 py-3 rounded-lg shadow-md hover:bg-indigo-700 transition w-full sm:w-auto" type="submit">
Send
</button>
<p class="text-green-600 font-semibold mt-2 hidden" id="contactSuccess">
Message sent successfully!
</p>
</form>
<h2 class="text-3xl font-bold mb-6 border-b-4 border-purple-600 inline-block pb-1">
Comments
</h2>
<form class="max-w-xl mx-auto space-y-6" id="commentForm" novalidate="">
<div>
<label class="block text-lg font-semibold mb-2" for="commentName">
Name
</label>
<input class="w-full border border-gray-300 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500" id="commentName" name="commentName" placeholder="Your name" required="" type="text"/>
</div>
<div>
<label class="block text-lg font-semibold mb-2" for="commentText">
Comment
</label>
<textarea class="w-full border border-gray-300 rounded-md px-4 py-2 resize-y focus:outline-none focus:ring-2 focus:ring-purple-500" id="commentText" name="commentText" placeholder="Write your comment here..." required="" rows="3"></textarea>
</div>
<button aria-label="Submit comment" class="bg-purple-600 text-white font-semibold px-6 py-3 rounded-lg shadow-md hover:bg-purple-700 transition w-full sm:w-auto" type="submit">
Submit
</button>
</form>
<div class="mt-8 max-w-xl mx-auto space-y-6 overflow-y-auto" id="comments">
<!-- Comments will appear here -->
</div>
© 2024 Alfred Phillip Menor. All rights reserved.
<script> // Download Resume button functionality document.getElementById('downloadBtn').addEventListener('click', () => { // For demo, create a simple text resume and download as .txt const resumeText = ` Alfred Phillip Menor Creative Thinker | Problem Solver | Aspiring Web Developer About Me: Hello! I'm Alfred, a passionate aspiring web developer with a love for creating beautiful and functional websites. I enjoy solving complex problems and continuously learning new technologies to improve my skills. When I'm not coding, I like hiking, photography, and exploring new coffee shops. Education: - Bachelor of Science in Computer Science, University of California, Berkeley (2018 - 2022) - Full Stack Web Development Certification, freeCodeCamp (2023) - Advanced JavaScript Course, Udemy (2023) Skills: HTML5, CSS3, JavaScript, React, Node.js, Teamwork, Problem Solving, Git & GitHub, Responsive Design Projects & Experience: - Personal Portfolio Website: Designed and developed a responsive portfolio website using React and Tailwind CSS. - Task Manager App: Built a full-stack task management app with Node.js, Express, and MongoDB. - Blog Platform: Developed a blogging platform with React and Firebase. Contact: Email: your.email@example.com `.trim(); a.download = 'Alfred_Phillip_Menor_Resume.txt'; const blob = new Blob([resumeText], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'menor.alfred2704@gmail.com.txt'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }); // Contact form validation and submission const contactForm = document.getElementById('contactForm'); const emailInput = contactForm.email; const emailHelp = document.getElementById('emailHelp'); const contactSuccess = document.getElementById('contactSuccess'); contactForm.addEventListener('submit', (e) => { e.preventDefault(); contactSuccess.classList.add('hidden'); emailHelp.classList.add('hidden'); const emailValue = emailInput.value.trim(); const messageValue = contactForm.message.value.trim(); const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailValue); if (!emailValid) { emailHelp.classList.remove('hidden'); emailInput.focus(); return; } if (messageValue.length === 0) { contactForm.message.focus(); return; } // Simulate sending message contactSuccess.classList.remove('hidden'); contactForm.reset(); }); // Comment section functionality const commentForm = document.getElementById('commentForm'); const commentsContainer = document.getElementById('comments'); commentForm.addEventListener('submit', (e) => { e.preventDefault(); const name = commentForm.commentName.value.trim(); const comment = commentForm.commentText.value.trim(); if (!name || !comment) { return; } // Create comment element const commentEl = document.createElement('div'); commentEl.className = 'bg-purple-50 border border-purple-300 rounded-lg p-4 shadow-sm'; const nameEl = document.createElement('h4'); nameEl.className = 'font-semibold text-purple-700 mb-1'; nameEl.textContent = name; const dateEl = document.createElement('time'); dateEl.className = 'text-xs text-purple-500 block mb-2'; const now = new Date(); dateEl.dateTime = now.toISOString(); dateEl.textContent = now.toLocaleString(); const commentTextEl = document.createElement('p'); commentTextEl.className = 'text-purple-800 whitespace-pre-wrap'; commentTextEl.textContent = comment; commentEl.appendChild(nameEl); commentEl.appendChild(dateEl); commentEl.appendChild(commentTextEl); commentsContainer.prepend(commentEl); commentForm.reset(); }); </script>