LoginApp: Simplifying Navigation with a Reusable ButtonLink Component
Refactoring repeated link buttons into a reusable ButtonLink component for more consistent pages.
All Blog Posts
Explore everything I‘ve written, from first steps to deeper dives into full-stack development and cybersecurity.
LoginApp: Creating a Reusable App Layout
Setting up a reusable layout component to keep pages consistent and simplify updates.
LoginApp: Building the Dashboard and Improving Form Interaction
Adding a dashboard page and improving form interaction using better label handling and page titles.
LoginApp: Registration Success Page
Displaying a success screen after account creation to confirm success and guide users to the login page.
LoginApp: Adding Password Validation Feedback
Enhancing the registration experience with real-time password validation that gives users live feedback and prevents submission errors.
LoginApp: Adding Form State and Input Handling
Refining the registration form by adding React state for password fields and preparing for interactive validation.
LoginApp: Building the Registration Form
Adding a registration page with email and confirm password fields, styled to match the login page.
LoginApp: Refining the Login Form with Floating Labels
Improving the login form with floating labels for a better user experience.
LoginApp: Creating the Homepage and Login Screen
Laying out LoginApp’s homepage and login page with a card design and gradient background.
LoginApp: Setting Up the Project
Setting up the foundation for LoginApp using Next.js, TypeScript, Tailwind CSS, and pnpm.
Introducing LoginApp
A hands-on full-stack project with Next.js, React, and Tailwind CSS, focusing on frontend and backend development while exploring potential security weaknesses.
Blog Site: Deploying to Vercel
Deploying a static blog site to Vercel with Git integration, depth-aware paths, and live site testing.
Blog Site: Scrollable Code Snippets
Improving code snippet styling for better readability, with horizontal scrolling and consistent spacing.
Blog Site: Reusable Header and Footer
Injecting shared header and footer content using depth-aware JavaScript.
Blog Site: About and Individual Blog Post Pages
Structuring the About and blog post pages using shared layout classes for a consistent design and cleaner code.
Blog Site: All Blog Posts Page
Creating a dedicated page that lists all posts in a single-column layout.
Blog Site: Latest Blog Posts Section
Showing recent posts on the homepage with cards that adapt across screen sizes.
Blog Site: Hero Section
Breaking down my hero section into wrapper, overlay, content, and button layers.
Organizing My Blog — Project Structure
How I organized my blog’s folders and why this structure matters.
Building a Blog Site
A first look at my blog project, built from scratch and ready to evolve with my skills.
Starting Out
Documenting the beginning of my journey into full-stack development and cybersecurity.