DEV Community: Kevin Abestilla

Why Joining a Startup Early Was the Best Career Move I Ever Made

Kevin Abestilla — Tue, 29 Apr 2025 04:46:43 +0000

When I was fresh out of college, armed with a degree and big dreams, I faced a choice: take the safe route with a corporate job or dive into the unpredictable world of startups. I chose the latter, and looking back, joining a startup early in my career was hands-down one of the best decisions I’ve ever made. It wasn’t just a job — it was a transformative experience that shaped my skills, mindset, and future in ways I never could have imagined. Here’s why.

1. A Crash Course in Real-World Skills
Startups don’t have the luxury of rigid job descriptions. When I joined my first startup, I wasn’t just “the marketing guy” or “the data analyst.” I was all of those things — and more. One day, I’d be drafting social media campaigns; the next, I’d be troubleshooting a bug in our app or pitching to a potential investor. This sink-or-swim environment forced me to learn fast and wear multiple hats.

Unlike the structured training programs of big corporations, startups teach you through action. I learned how to prioritize tasks under pressure, communicate across teams, and solve problems with limited resources. These aren’t skills you pick up from a textbook — they’re forged in the chaos of a startup’s early days. That hands-on education gave me a versatility that’s been invaluable throughout my career.

2. Ownership That Fuels Purpose
In a startup, your work isn’t just a drop in the bucket — it’s a wave that ripples across the company. I vividly remember the first feature I helped design for our product. When it went live, I watched real users engage with it, and their feedback shaped our next steps. Knowing my contributions directly influenced the company’s trajectory gave me a sense of purpose I’d never felt before.

This ownership fosters a unique kind of motivation. You’re not just clocking in and out; you’re invested in the mission. Every late night, every brainstorming session, every small win feels personal. That level of impact is rare in larger organizations, where layers of bureaucracy can dilute your sense of contribution.

3. A Network That Opens Doors
Startups attract dreamers, doers, and risk-takers. Working in one surrounded me with some of the most inspiring people I’ve ever met — founders with audacious visions, teammates who hustled like their lives depended on it, and investors who bet on bold ideas. These relationships became the foundation of a network that’s opened countless doors.

One coffee chat with a mentor from the startup led to a speaking opportunity at a tech conference. A teammate I collaborated with later introduced me to my next big project. In a startup, you’re not just working with colleagues — you’re building lifelong connections with people who are as driven as you are. Those bonds are worth their weight in gold.

4. Resilience Through Uncertainty
Let’s be real: startups are a rollercoaster. Budgets are tight, plans change overnight, and failure is always lurking around the corner. I learned this the hard way when our startup hit a rough patch — funding fell through, and we had to pivot our entire business model. It was stressful, but it taught me how to stay calm in the face of uncertainty.

Startups force you to embrace adaptability. You learn to pivot without hesitation, iterate on ideas, and find creative solutions when resources are scarce. More importantly, you develop a resilience that carries you far beyond the startup world. The ability to bounce back from setbacks and keep moving forward is a skill that’s served me in every aspect of life.

5. Growing Alongside the Company
Joining a startup early means you’re there for the ground floor. As the company scales, so do your opportunities. In my case, I started as a generalist, but as the startup grew, I took on more specialized roles, eventually leading a small team. That kind of upward mobility is rare in established companies, where promotions often come with years of waiting.

Being part of a startup’s growth also gives you a front-row seat to the entrepreneurial process. You witness the highs of landing a big client and the lows of missing a critical deadline. You learn what it takes to build something from scratch — an experience that’s invaluable if you ever want to start your own venture.

A Word of Caution
Startups aren’t for everyone. The long hours, financial uncertainty, and lack of structure can be overwhelming. There were nights I questioned my decision, especially when friends in corporate jobs were enjoying stable paychecks and predictable schedules. But for me, the trade-offs were worth it. The growth, the impact, and the sheer thrill of building something new outweighed the challenges.

Why You Should Consider It
If you’re early in your career, I urge you to give the startup world a chance. It’s not just a job — it’s an adventure that will push you to your limits and unlock potential you didn’t know you had. You’ll gain skills that make you indispensable, build a network that propels you forward, and develop a mindset that thrives in any environment.

Joining a startup early in my career wasn’t just a stepping stone; it was a launchpad. It taught me to think big, act fast, and never settle for mediocrity. If you’re ready to take a leap, a startup might just be the best decision you ever make.

How I Transformed My Single HTML Portfolio with Cursor: From Basic to Brilliant

Kevin Abestilla — Tue, 22 Apr 2025 11:16:26 +0000

April 2025 | Web Development

In web development, elegance often lies in simplicity. A single HTML file can be a powerful canvas for showcasing your skills, and with modern techniques, it can rival complex, framework-driven sites. This article chronicles how I used Cursor, an AI-powered code editor, to transform my basic HTML portfolio, kvn.bio, into a polished, feature-rich masterpiece — all within the confines of a single file. My goal is to inspire you to visit kvn.bio and see what’s possible with minimal complexity. Whether you’re a seasoned developer or just starting, this journey offers insights into creating impactful web projects.

The Starting Point: A Humble HTML File

My portfolio, hosted at kvn.bio, began as a single HTML file: clean, functional, and straightforward. It included basic sections — about, skills, projects, and contact — styled with minimal CSS and no JavaScript. While it served its purpose, it lacked the polish and interactivity expected of a modern portfolio. I turned to Cursor to help reimagine this simple file as a professional showcase without resorting to heavy frameworks or build tools.

The goal was to maintain simplicity while incorporating modern web features like SEO, dark mode, social media integration, and performance optimizations, all to make kvn.bio a standout representation of my skills. With Cursor’s intelligent code suggestions and real-time feedback, the transformation was both efficient and enlightening. Here’s how it unfolded.

The Transformation Journey

1. SEO Optimization: Making kvn.bio Discoverable
A portfolio is only as good as its visibility. With Cursor’s help, I added comprehensive SEO enhancements to ensure kvn.bio could be found by search engines and users, as Cursor suggested best practices and generated snippets for meta tags and structured data:

Meta Tags: Added description, keywords, and viewport meta tags to improve search engine indexing and mobile responsiveness.
Structured Data: Implemented JSON-LD schema markup for rich snippets, enhancing how kvn.bio appears in search results (e.g., displaying skills or contact info directly).
Canonical URLs: Used to prevent duplicate content issues, especially for hosted versions on multiple platforms.

Semantic HTML: Replaced generic <div> tags with semantic elements like <header>, <main>, <section>, and <article>for better accessibility and SEO.

Optimized Titles and Descriptions: Crafted unique, keyword-rich titles and meta descriptions for each section, improving click-through rates. Cursor’s ability to suggest SEO-compliant code and validate semantics streamlined this process, ensuring kvn.bio is discoverable and professional. Check out the result at kvn.bio to see the impact.

2. Social Media Integration: Sharing kvn.bio with Style

A portfolio should seamlessly connect to social platforms. Cursor generated clean, reusable code for social media enhancements, making sharing kvn.bio visually appealing and consistent:

Social Links: Added a clean, icon-based footer with links to GitHub, LinkedIn, and Twitter, styled with CSS to match the portfolio’s aesthetic.

Open Graph Tags: Included og:title, og:description, og:image, and og:url meta tags to ensure shared links on platforms like Facebook or LinkedIn display a professional preview with a custom thumbnail.
Twitter Cards: Added twitter:card, twitter:title, and twitter:image meta tags for optimized sharing on Twitter.
Consistent Branding: Ensured fonts, colors, and imagery aligned across platforms, reinforcing a cohesive professional identity.
Cursor’s suggestions for meta tag syntax and icon styling saved time and ensured consistency, making kvn.bio shareable and visually appealing. Share it yourself and see the polished preview!

3. Dark Mode: A Modern Necessity for kvn.bio
Dark mode is a user expectation, and Cursor made implementing it on kvn.bio straightforward by generating modular, reusable code:

System Preference Detection: Used the prefers-color-scheme media query to automatically apply light or dark mode based on the user’s system settings.

Toggle Functionality: Added a button to manually switch themes, with user preferences saved in localStorage for persistence across visits.

CSS Variables: Defined color schemes using CSS custom properties (e.g., — background, — text) for easy theme switching and maintainability.

Smooth Transitions: Applied transition: all 0.3s ease to color changes, ensuring a polished user experience.

Accessibility: Ensured sufficient color contrast ratios (WCAG-compliant) in both modes to maintain readability for all users.
Cursor’s real-time previews and accessibility checks helped fine-tune the dark mode implementation, adding a modern touch to kvn.bio. Try toggling the theme on my portfolio to experience it!

4. Skills Showcase: From Static to Interactive on kvn.bio
The skills section on kvn.bio evolved from a static list into an engaging, interactive component, with Cursor suggesting modular JavaScript and CSS:

Categorized Expertise: Grouped skills into categories (e.g., Front-End, Back-End, Tools) for clarity.
Tabbed Interface: Built a tabbed navigation using vanilla JavaScript and CSS, allowing users to switch between skill categories without page reloads.
Responsive Grid: Styled skills in a CSS Grid layout, ensuring a clean presentation on all screen sizes.
Animated Transitions: Added subtle hover effects and fade-in animations using CSS @keyframes to enhance interactivity.
Mobile-Friendly Design: Ensured touch-friendly interactions and responsive typography for smaller screens.
Cursor’s code completion and debugging tools accelerated this transformation, making the skills section a highlight of kvn.bio. Explore the interactive skills showcase on my portfolio!

5. Performance Optimizations: Speeding Up kvn.bio
Even a single HTML file benefits from performance tweaks. Cursor suggested optimizations and validated their impact on kvn.bio:

Resource Hints: Added and for external resources like Google Fonts to reduce latency.

Optimized Favicon: Used a lightweight .ico favicon and included multiple sizes for different devices (e.g., Apple Touch Icons).

Efficient CSS: Consolidated styles into a single<style> block, using shorthand properties and removing unused rules.

Minimal JavaScript: Kept JavaScript lightweight, using vanilla JS for interactivity (e.g., dark mode toggle, tabbed navigation) instead of heavy libraries.

Responsive Images: Implemented elements with WebP and fallback JPEG formats, plus srcset for resolution switching.
These tweaks, guided by Cursor’s performance insights, resulted in kvn.bio loading in under a second, even on slower connections. Visit my portfolio to feel the speed!

Technical Decisions: Simplicity Meets Power

The strength of kvn.bio lies in its adherence to a single HTML file, proving that modern web development doesn’t require complex tooling. Cursor’s intelligent suggestions shaped key technical decisions:

CSS Variables: Centralized theming with variables for colors, fonts, and spacing, simplifying maintenance and theme switching.
Vanilla JavaScript: Avoided frameworks like React or jQuery, using lightweight JS for interactivity to keep the file lean.
Modern CSS Features: Leveraged Grid, Flexbox, and custom properties for responsive, maintainable layouts.

Semantic HTML: Prioritized , , and tags for accessibility and SEO.

Accessibility Focus: Ensured keyboard navigation, ARIA labels, and high-contrast visuals for inclusive design.
These choices, refined with Cursor’s real-time feedback, balanced modern functionality with simplicity, making kvn.bio both a technical showcase and a practical tool. See these decisions in action at kvn.bio.

The Results: A Portfolio That Shines

The transformed portfolio, built with Cursor’s assistance and hosted at kvn.bio, is a testament to what’s possible with a single HTML file:

Lightning-Fast: Loads in under 1 second, even on mobile networks.

Accessible: Meets WCAG 2.1 standards, ensuring usability for all.

Modern UX: Features dark mode, interactive elements, and responsive design.

Professional Appeal: Polished visuals and cohesive branding rival multi-file sites.

Searchable: Optimized for search engines, increasing visibility.

kvn.bio now stands as a professional showcase, demonstrating my technical skill and attention to detail. I invite you to visit it and explore the results firsthand.

Lessons Learned: Principles for Impactful Web Projects

Using Cursor to enhanc

e kvn.bio reinforced timeless web development principles:

**Simplicity Is Powerful: **A single file can deliver a robust, feature-rich experience.
Performance Is Non-Negotiable: Even small optimizations make a big difference.

Accessibility Is Essential: Inclusive design broadens your audience and improves UX.
User Experience Drives Success: Intuitive navigation and modern features keep users engaged.

AI Tools Amplify Productivity: Cursor’s intelligent suggestions and real-time feedback streamlined development.
These lessons apply to projects of any scale, from personal portfolios like kvn.bio to enterprise applications.

Future Possibilities: Where kvn.bio Could Go Next

While kvn.bio is now feature-rich, there’s always room for growth. Potential enhancements, which I could explore with Cursor, include:

Progressive Web App (PWA) Features: Add a service worker for offline access and installability.
Interactive Visuals: Incorporate WebGL or Canvas for dynamic project demos.
Enhanced Animations: Use the Web Animations API for smoother transitions.
Content Expansion: Add a blog section or case studies to showcase expertise.
External Integrations: Fetch GitHub repo data via API for a live project feed (while keeping core functionality in one file).
These additions would build on the foundation of kvn.bio without sacrificing its simplicity. Stay tuned for updates on my portfolio!

Conclusion: Less Is More with the Right Tools
Using Cursor to evolve kvn.bio proved that simplicity and sophistication can coexist. By leveraging modern web standards — semantic HTML, CSS variables, vanilla JavaScript — and Cursor’s AI-powered coding assistance, a basic file became a brilliant showcase. This project is a reminder that in web development, constraints can inspire creativity, and the right tools can amplify your potential. I hope my journey inspires you to visit kvn.bio and see the power of a single HTML file for yourself.

Have you used AI tools like Cursor to enhance your projects? What creative solutions have you found for single-file web projects? Share your thoughts below, and don’t forget to check out kvn.bio to see the result of this transformation!

Vibecoding a Random Password Generator in 30 Minutes

Kevin Abestilla — Mon, 21 Apr 2025 03:40:09 +0000

It’s a chill evening, lo-fi beats humming in the background, and I’m pumped to code something quick and useful. I set a 30-minute timer to vibecode a random password generator in JavaScript, complete with a sleek UI and robust features. Using bolt.new for the UI skeleton, Cursor for tweaks, and TypeScript for the logic, I built a secure password generator with strength analysis and stats. Here’s how I pulled it off in 30 minutes, with a nod to my recent launch of getrandompassword.com!

The Vibe Setup

Tools: TypeScript, bolt.new for UI, Cursor for coding, Supabase for backend, a cup of coffee, and my favorite playlist.

Goal: Create a password generator with customizable options, strength scoring, stats, and a polished UI.

Time Limit: 30 minutes to keep the energy high and focused.

I wanted a generator that lets users pick character types, shows password strength, and provides entropy stats, all wrapped in a clean interface. Let’s dive in.

Minute 1–5: Planning and UI Kickoff

I started by outlining the core features:

Generate passwords with options for lowercase, uppercase, numbers, symbols, and custom characters.

Use crypto.getRandomValues for secure randomization.

Calculate password strength and entropy stats.

Build a minimal UI with input fields and a result display.

To save time, I used bolt.new to generate a barebones UI—a simple form with inputs for password length and character options, plus a button to generate the password. I downloaded the code (HTML, CSS, and basic JavaScript) and opened it in Cursor, my go-to editor, to start tweaking.

Minute 6–20: Coding the Logic

In Cursor, I replaced the placeholder JavaScript with TypeScript and wrote the core password generation function:

export const generatePassword = (options: PasswordOptions): string => {
  const { length, includeLowercase, includeUppercase, includeNumbers, includeSymbols, customCharacters } = options;

  let charset = customCharacters || '';
  if (includeLowercase) charset += 'abcdefghijklmnopqrstuvwxyz';
  if (includeUppercase) charset += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  if (includeNumbers) charset += '0123456789';
  if (includeSymbols) charset += '!@#$%^&*()_+~`|}{[]:;?><,./-=';

  // Fallback to lowercase if no options selected
  if (charset === '') charset = 'abcdefghijklmnopqrstuvwxyz';

  let password = '';
  const array = new Uint32Array(length);
  crypto.getRandomValues(array);

  for (let i = 0; i < length; i++) {
    const randomIndex = array[i] % charset.length;
    password += charset[randomIndex];
  }

  return password;
};

This function uses crypto.getRandomValues for secure randomization and builds a charset based on user options. I also added strength and stats functions:

export const calculatePasswordStrength = (password: string): number => {
  if (!password) return 0;

  let strength = 0;
  strength += Math.min(password.length * 2, 40); // Length: up to 40%
  if (/[a-z]/.test(password)) strength += 10; // Lowercase
  if (/[A-Z]/.test(password)) strength += 15; // Uppercase
  if (/[0-9]/.test(password)) strength += 15; // Numbers
  if (/[^a-zA-Z0-9]/.test(password)) strength += 20; // Symbols
  return Math.min(strength, 100);
};

export const calculatePasswordStats = (password: string): PasswordStats => {
  const stats: PasswordStats = {
    entropy: 0,
    characterTypes: { lowercase: 0, uppercase: 0, numbers: 0, symbols: 0, custom: 0 },
  };

  for (const char of password) {
    if (/[a-z]/.test(char)) stats.characterTypes.lowercase++;
    else if (/[A-Z]/.test(char)) stats.characterTypes.uppercase++;
    else if (/[0-9]/.test(char)) stats.characterTypes.numbers++;
    else if (/[!@#$%^&*()_+~`|}{[\]:;?><,./-=]/.test(char)) stats.characterTypes.symbols++;
    else stats.characterTypes.custom++;
  }

  const charsetSize =
    (stats.characterTypes.lowercase > 0 ? 26 : 0) +
    (stats.characterTypes.uppercase > 0 ? 26 : 0) +
    (stats.characterTypes.numbers > 0 ? 10 : 0) +
    (stats.characterTypes.symbols > 0 ? 32 : 0);
  stats.entropy = Math.floor(password.length * Math.log2(Math.max(charsetSize, 1)));

  return stats;
};

export const getStrengthLabel = (strength: number): { label: string; color: string } => {
  if (strength < 30) return { label: 'Weak', color: '#EF4444' };
  if (strength < 60) return { label: 'Moderate', color: '#F59E0B' };
  if (strength < 80) return { label: 'Strong', color: '#10B981' };
  return { label: 'Very Strong', color: '#059669' };
};

These calculate strength (length + variety), entropy, and character counts, with a helper to label strength for UI display.

Minute 21–25: UI Enhancements and Supabase

In Cursor, I tweaked the bolt.new-generated UI, adding:
Styling: Updated CSS for a modern look with a sunrise-gold (#F6831D) accent for tooltips, ensuring contrast with white text (inspired by my past tooltip color choice).
SEO: Added meta tags (title, description, keywords) and a sitemap.xml for getrandompassword.com, fixing a namespace typo (sitemx to sitemaps) from a recent deployment.
Interactivity: Connected the form to the generatePassword function, displaying the password, strength, and stats dynamically.

I also set up a Supabase connection to log generated passwords (anonymously) for analytics.

Minute 26–30: Testing and Reflecting

I tested the app in Cursor:

const options = { length: 12, includeLowercase: true, includeUppercase: true, includeNumbers: true, includeSymbols: true, customCharacters: '', }; const password = generatePassword(options); console.log('Password:', password); console.log('Strength:', calculatePasswordStrength(password)); console.log('Stats:', calculatePasswordStats(password)); console.log('Label:', getStrengthLabel(calculatePasswordStrength(password)));

Output:
Password: kX9#mP$2nJ@5 Strength: 69 Stats: { entropy: 71, characterTypes: { lowercase: 4, uppercase: 3, numbers: 3, symbols: 2, custom: 0 } } Label: { label: 'Strong', color: '#10B981' }

The UI looked sharp, SEO was solid, and Supabase logged stats flawlessly. This project, like my recent getrandompassword.com launch (vibecoded in under 30 minutes and shared on Product Hunt), shows how fast you can ship with the right tools.

If you find this useful you can upvote getrandompassword.com on Product Hunt

Why Vibecode?

Vibecoding is about coding with joy and flow. Using bolt.new for the UI, Cursor for tweaks, and Supabase for backend, I built a secure, user-friendly app in 30 minutes. Random passwords are secure because their unpredictable mix of characters thwarts brute-force attacks. Try it at getrandompassword.com! This project joins my portfolio at YourSite.com, where I share more coding adventures.

Try It Yourself

Grab the code, set up a TypeScript project, and tweak it in Cursor. Add a fancier UI, more stats, or your own backend. Coding is about making it yours. #VibeCode #Cybersecurity #WebDev

Thanks for reading! Visit kvn.bio for more projects and tutorials. Let’s keep the coding vibes strong!