Jhvn-dev×- +
Jhvn-dev
A personal portfolio site built with React.js and Tailwind CSS, presenting my projects, tech stack, and background as a fullstack web developer based in the Philippines.
The site covers my work across web and desktop applications from PERN stack systems to Laravel, Python, and Visual Basic projects alongside my skills, achievements, and contact information.
Overview
Type
Fullstack Developer / Designer
Status
Completed - Live
Users
Personal Portfolio — Jhunguide Flores
The Problem
What problem?
As a developer, I had no centralized place to present my projects, skills, and background no way for potential employers or collaborators to get a clear picture of who I am and what I've built.
Why build it?
Most basic portfolios only list project names and tech stacks without context. I needed something that could present my work clearly while reflecting my actual skill set across frontend, backend, and desktop development.
The Solution
What was built?
A personal portfolio site that organizes my projects, tech stack, achievements, and contact information in one place, built to be clean, readable, and accessible to anyone viewing my work.
How it works
Built with React.js and Tailwind CSS, the site presents my projects with descriptions and tech tags, displays my full skill set across frontend, backend, tools, and databases, and highlights my OpenIT Hackathon achievement alongside my personal background.
My Role
Fullstack Developer / Designer
- →Designed and built the entire site from scratch such as layout, sections, and visual design
- →Implemented the projects section with tech stack tags and project descriptions
- →Built the About section covering background, tech stack, skills, and achievements
- →Set up deployment on Vercel and connected the live domain
- →Wrote all content across the site — project descriptions, bio, and section copy
Process & Thinking
How I approached it
Built section by section — starting with the hero and navigation, then the About and Tech Stack sections, followed by the Projects list and Contacts. Each section was designed to be self-contained and easy to update.
Why this approach?
A simple, section-based layout was the right choice for a first portfolio, it keeps the content organized and scannable without overcomplicating the structure.
Key Insight
💡 Writing the project descriptions was harder than building the components. Summarizing each project clearly and accurately, without making it too long or too vague took more iteration than expected.
Tech Stack
Key Decisions
·Used React.js for component-based UI structure, making each section of the portfolio independently maintainable.
·Tailwind CSS handled all styling, keeping the design consistent without writing custom CSS for every element.
·Deployed on Vercel for fast, zero-config hosting with automatic redeployment on push.
Architecture
No diagram provided
Features
Projects Section
Displays all projects with titles, descriptions, tech stack tags, and preview links, covering web applications built with PERN, Laravel, PHP, and desktop apps built with Python and Visual Basic.
About & Bio
Presents my background as a fullstack web developer from the Philippines, covering my journey from PHP to the PERN stack and my adaptability across different technologies.
Tech Stack & Skills
Lists my full skill set organized by category Frontend, Backend, Tools, and Databases, covering HTML, CSS, TailwindCSS, React, Node.js, Express, Laravel, PHP, Python, MySQL, and PostgreSQL.
Achievements
Highlights my 3rd Place finish at the OpenIT Hackathon with LOMILINDOL, an earthquake monitoring system built in under two days.
Contact Information
Provides direct contact via email and phone, alongside links to GitHub, LinkedIn, Instagram, and Facebook for easy outreach.
Challenges & Learnings
Challenge
Presenting projects clearly without making each description too long or too vague, finding the right level of detail for each entry.
Learning
Settled on a consistent format: one sentence on what the project is, one on what it does, and tech tags for the stack, keeping each entry scannable without losing important context.
Challenge
Organizing the tech stack section in a way that felt readable rather than just a flat list of technologies.
Learning
Grouped skills by category, Frontend, Backend, Tools, Databases so the section communicates range and depth rather than just volume.
Challenge
Keeping the overall site design clean and consistent across all sections without a predefined design system.
Learning
Used Tailwind CSS utility classes consistently and established a limited color palette early, which kept the visual style coherent as more sections were added.
Results & Outcome
Users
Personal Portfolio — Jhunguide Flores