Alright, so today I’m gonna walk you through this little thing I messed around with, Bryan Hernandez. Sounds kinda fancy, right? Well, it wasn’t. Just a dude’s name I found and decided to use as a starting point for a personal project. Here’s how it went down.
First off, I needed a goal. I wasn’t just gonna stare at the name “Bryan Hernandez” all day. So, I thought, “Okay, let’s see if I can build a super simple website or landing page based on this name. Maybe like a portfolio or something?” That was the idea.
Step one: I fired up my code editor – VS Code, in case you’re wondering, it’s my go-to. Then I created a new folder called, you guessed it, “bryan-hernandez.” Inside that, I made the basic HTML, CSS, and JavaScript files. *, *, and * – the holy trinity.
In the HTML file, I started with the usual boilerplate. You know, the <!DOCTYPE html>, <html>, <head>, <body> stuff. I added a <title> that said “Bryan Hernandez – Portfolio (Maybe)”. Kept it real.
Next, I thought about the layout. I didn’t want anything too crazy. A simple header with the name, a section for a short bio, maybe a projects section, and a footer. So, I added some <header>, <section>, and <footer> tags in the body.
Then came the fun part: filling in the content. Since I didn’t actually know a Bryan Hernandez, I had to improvise. I grabbed some placeholder text from Lorem Ipsum for the bio. For the projects section, I just listed some generic things like “Web Design Project,” “Mobile App Development,” and “Database Management System.” I even threw in a fake GitHub link for each one.
Now, the CSS. This is where things got a little more interesting. I’m no designer, but I can make things look decent. I linked the * file in the HTML head. Then, I started messing with the styles. I went for a clean and modern look. Used a sans-serif font, a neutral color palette (whites, grays, and a pop of blue), and made sure everything was responsive. Flexbox and Grid were my friends here.
For the header, I centered the name and added a simple underline. For the bio section, I added some padding and made the text readable. The projects section got a grid layout with each project card having a title, description, and that fake GitHub link.
JavaScript? Didn’t really need much for this basic setup. I added a simple animation to the header on scroll, just to make it a little less boring. Listened for the scroll event, and then added or removed a class to trigger the animation using CSS transitions.
Finally, I opened the * file in my browser. Boom! A basic, but functional, landing page for a fictional Bryan Hernandez. Was it groundbreaking? Nah. But it was a good little exercise.
What did I learn? Well, even with a simple starting point like a name, you can build something. It reinforced my understanding of HTML, CSS, and JavaScript fundamentals. Plus, it was a fun way to spend an afternoon. Maybe I’ll add some actual content later, who knows? Maybe Bryan Hernandez will see it and reach out!
