---
import BaseLayout from '../layouts/BaseLayout.astro';
import { getRepositoryRank } from '../lib/github.ts';

const repoRank = await getRepositoryRank('kamranahmedse/developer-roadmap');
---

<BaseLayout title='About roadmap.sh' permalink={'/about'}>
  <div class='bg-white border-b pt-7 pb-7 sm:pt-12 sm:pb-10'>
    <div class='container'>
      <div class='flex items-center'>
        <img
          style='--aspect-ratio:170/170'
          src='/authors/kamran.jpeg'
          class='h-[170px] w-[170px] rounded-full mr-6 hidden sm:block'
          alt='Kamran Ahmed'
        />
        <div>
          <h1 class='text-3xl sm:text-4xl mb-3 font-bold'>
            <span class='hidden sm:inline'>Hello,</span>&nbsp;I am Kamran Ahmed
          </h1>
          <p class='text-gray-500 text-md mb-5'>
            I created roadmap.sh to help developers find their path if they are
            confused and help them learn and grow in their career.
          </p>
          <p class='flex flex-col sm:flex-row gap-1.5'>
            <a
              class='bg-blue-600 hover:bg-blue-700 font-medium text-white px-2 py-1.5 rounded-md inline-flex items-center'
              target='_blank'
              href='https://twitter.com/kamrify'
            >
              <span class='ml-1.5 mr-1'>@kamrify</span>
            </a>
            <a
              class='bg-gray-500 hover:bg-gray-700 font-medium text-white px-3 py-1.5 rounded-md inline-flex items-center'
              target='_blank'
              href='mailto:kamranahmed.se@gmail.com'
            >
              kamranahmed.se@gmail.com
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class='bg-gray-50 py-7 sm:py-10'>
    <div class='container'>
      <main id='main-content'>
        <div class='mb-5'>
          <h2 class='text-2xl font-bold mb-2'>What is roadmap.sh?</h2>
          <p class='mb-3'>
            <span class='font-bold'>roadmap.sh</span> contains community-curated
            roadmaps, study plans, paths, and resources for developers. There are
            role-based roadmaps, listing skills you should know for any given role, as
            well as skill-based roadmaps listing items to learn for any given skill.
          </p>
          <p class='mb-3'>
            It started as a set of <a
              href='https://github.com/kamranahmedse/developer-roadmap'
              class='font-bold underline'
              target='_blank'>visual charts on GitHub</a
            > to guide developers who are confused about what they should learn
            next, but then expanded into interactive roadmaps where you can click
            and get resources to learn any given resource, contribute by adding new
            roadmaps, suggest changes to existing roadmaps, track your progress as
            you follow a roadmap and so on.
          </p>
        </div>

        <div class='mb-5'>
          <h2 class='text-2xl font-bold mb-2'>How are roadmaps created?</h2>
          <p class='mb-3'>
            The project has a strong community that powers everything on the
            website. It is <a
              href='https://github.com/search?o=desc&q=stars%3A%3E100000&s=stars&type=Repositories'
              target='_blank'
              class='font-bold underline'
              >the {repoRank} most starred opensource project on GitHub</a
            > and gets visited by hundreds of thousands of developers every month.
            We also have newsletter with 150,000+ developers. All the roadmaps are
            created and reviewed by community and several subject matter experts.
            Also, anyone can suggest changes to any roadmap and we have a process
            to review and approve them.
          </p>
        </div>

        <div class='mb-5'>
          <h2 class='text-2xl font-bold mb-2'>
            What are the plans for roadmap.sh?
          </h2>
          <p class='mb-3'>
            Our long-term plan is to make roadmap.sh a go-to place for
            developers whenever they plan on learning something new. We started
            with roadmaps, guides, videos and other visual content but we plan
            on introducing best practices, best-practices for certain tasks, quizzes
            to test your knowledge and prepare yourself for the interviews,
            project ideas to work on while following the roadmaps, public
            profiles to share your progress and interact with the other learners
            and so on.
          </p>
        </div>

        <div class='mb-5'>
          <h2 class='text-2xl font-bold mb-2'>How is roadmap.sh built?</h2>
          <p class='mb-3'>
            The website is built with <a
              href='https://astro.build/'
              class='font-bold underline'
              target='_blank'
              rel='nofollow'>Astro</a
            > and <a
              href='https://tailwindcss.com/'
              class='font-bold underline'
              target='_blank'
              rel='nofollow'>Tailwind</a
            > and is deployed to <a
              href='https://pages.github.com/'
              class='font-bold underline'
              target='_blank'
              rel='nofollow'>GitHub pages</a
            >. The project is open-core and the codebase
            <a
              href='https://github.com/kamranahmedse/developer-roadmap'
              class='font-bold underline'
              target='_blank'>can be found on GitHub</a
            >
          </p>
        </div>

        <div class='mb-5'>
          <h2 class='text-2xl font-bold mb-2'>How can I add a new roadmap?</h2>
          <p class='mb-3'>
            For new roadmaps, please open an issue with the textual description
            of the roadmap in the form of bulleted list. Here is an <a
              target='_blank'
              class='font-bold underline'
              href='https://github.com/kamranahmedse/developer-roadmap/issues/1387#issue-1329276631'
              >example contribution of a new roadmap</a
            >.
          </p>
          <p class='mb-3'>
            Find more details in the <a
              href='https://github.com/kamranahmedse/developer-roadmap/blob/master/contributing.md'
              class='font-bold underline'
              target='_blank'>contribution docs</a
            >.
          </p>
        </div>

        <div class='mb-5'>
          <h2 class='text-2xl font-bold mb-2'>
            How can I update an existing roadmap?
          </h2>
          <p class='mb-3'>
            Please have a look at the <a
              href='https://github.com/kamranahmedse/developer-roadmap/blob/master/contributing.md'
              class='font-bold underline'
              target='_blank'>contribution docs</a
            > for details.
          </p>
        </div>

        <div class='mb-5'>
          <h2 class='text-2xl font-bold mb-2'>
            How can I add content to existing roadmaps?
          </h2>
          <p class='mb-3'>
            Please have a look at the <a
              href='https://github.com/kamranahmedse/developer-roadmap/blob/master/contributing.md'
              class='font-bold underline'
              target='_blank'>contribution docs</a
            > for details.
          </p>
        </div>

        <div class='mb-5'>
          <h2 class='text-2xl font-bold mb-2'>
            Can I redistribute the content?
          </h2>
          <p>
            No, the license of the content on this website does not allow you to
            redistribute any of the content on this website anywhere. You can
            use it for personal use or share the link to the content if you have
            to but redistribution is not allowed.
          </p>
        </div>
        <div class='mb-5'>
          <h2 class='text-2xl font-bold mb-2'>
            What is the best way to contact you?
          </h2>
          <p>
            Tweet or send me a message <a
              class='underline font-bold'
              href='https://twitter.com/kamrify'
              target='_blank'>@kamrify</a
            > or email me at
            <a
              class='underline font-bold'
              href='mailto:kamranahmed.se@gmail.com'
              target='_blank'>kamranahmed.se@gmail.com</a
            >. I get lots of messages so apologies in advance if you don't hear
            back from me soon but I do reply to everyone.
          </p>
        </div>
      </main>
    </div>
  </div>
</BaseLayout>