Tools: 10 Minutes! Build a Stunning Personal CV Website with Markdown

Why Choose Lupine CV Starter? ## 🚀 Quick Start ## 1. Create Project ## 2. Start Preview ## 📝 Customize Your CV ## Modify Content ## Manage Directory & Sidebar ## Configure Top Navigation (Optional) ## Personalization Settings ## GitHub Link ## Custom Styles ## Conclusion Finding a good job starts with a great CV. If you can turn that CV into a professional personal website, it's even better and sure to catch a recruiter's eye. This article introduces how to use the CV Starter template provided by the Lupine.js framework to generate a beautiful, responsive resume website just by writing simple Markdown files. It comes with black and white theme switching, multi-language support, and can be hosted for free on GitHub Pages. Initialize your CV project with just one command: Select the cv-starter template when prompted. Enter the project directory and start the local development server: Now, open your browser and you'll see a complete resume prototype containing Profile, Experience, Projects, Skills, and Education sections! The template has already pre-set a standard resume structure for you; you only need to add, delete, or modify it according to your situation. All content is located in the web/markdown directory. You can modify the Markdown files directly. Even better, you can carefully write just one language version (like English) and let AI help you translate it into another language. Current AI is very good at handling Markdown formats and translation quality is usually high, saving you a lot of time. When you add or delete a page (e.g., adding an "Open Source" section), you need to tell the website how to display the sidebar navigation. Open the index.md file under the language root directory (e.g., web/markdown/en/index.md) and modify the sidebar configuration: After saving the file, the browser page will update automatically. What you see is what you get. Since resumes usually don't contain many pages, the template does not enable the top navigation menu by default. If you want to show navigation at the top of the page, you can add the nav configuration in index.md: This way, your configured menu items will appear on the left side of the Header. In the Frontmatter of index.md, you can make more personalized settings. The right side of the Header shows the GitHub project link by default. If you want to modify or hide it: Want to change the theme color? Want to adjust the sidebar width? No problem! You can directly override CSS variables via the styles attribute in index.md: For more style configurations, please refer to this introduction about Lupine.Press. Using Lupine.js to build a resume website not only showcases your professional skills, but the act itself also demonstrates your passion and pursuit of technology. Lupine is under active development. Welcome to GitHub to follow us and check our code frequency and contributions: 👉 https://github.com/uuware/lupine.js Wish you get your dream Offer soon! Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse CODE_BLOCK: npx create-lupine@latest my-cv Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: npx create-lupine@latest my-cv CODE_BLOCK: npx create-lupine@latest my-cv CODE_BLOCK: cd my-cv npm install npm run dev Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: cd my-cv npm install npm run dev CODE_BLOCK: cd my-cv npm install npm run dev COMMAND_BLOCK: sidebar: - text: Details items: - /en/01-experience/index - /en/02-projects/index - /en/03-skills/index - /en/04-education/index # - /en/05-open-source/index <-- New page Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: sidebar: - text: Details items: - /en/01-experience/index - /en/02-projects/index - /en/03-skills/index - /en/04-education/index # - /en/05-open-source/index <-- New page COMMAND_BLOCK: sidebar: - text: Details items: - /en/01-experience/index - /en/02-projects/index - /en/03-skills/index - /en/04-education/index # - /en/05-open-source/index <-- New page CODE_BLOCK: nav: - text: Experience link: /en/01-experience/index - text: Projects link: /en/02-projects/index Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: nav: - text: Experience link: /en/01-experience/index - text: Projects link: /en/02-projects/index CODE_BLOCK: nav: - text: Experience link: /en/01-experience/index - text: Projects link: /en/02-projects/index COMMAND_BLOCK: # Modify link github-title: View on GitHub github-link: https://github.com/yourusername/my-cv # Or delete these two lines directly to hide Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: # Modify link github-title: View on GitHub github-link: https://github.com/yourusername/my-cv # Or delete these two lines directly to hide COMMAND_BLOCK: # Modify link github-title: View on GitHub github-link: https://github.com/yourusername/my-cv # Or delete these two lines directly to hide COMMAND_BLOCK: styles: ':root': { '--primary-accent-color': '#0ac92a' } # Change primary color to green # body: { font-family: 'Inter', sans-serif; } # Change global font Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: styles: ':root': { '--primary-accent-color': '#0ac92a' } # Change primary color to green # body: { font-family: 'Inter', sans-serif; } # Change global font COMMAND_BLOCK: styles: ':root': { '--primary-accent-color': '#0ac92a' } # Change primary color to green # body: { font-family: 'Inter', sans-serif; } # Change global font - Minimalist Markdown: Focus on content, writing your CV just like writing a document. - Beautiful Design: A fresh and professional default theme that supports both Light and Dark modes. - Multi-language Support: Easily build bilingual resumes to show your international perspective. - Mobile Responsive: Perfectly adapted for mobile desktops, displaying elegantly anytime, anywhere. - Free Hosting: Pure static pages that can be deployed directly to GitHub Pages with zero cost. - en/: English version content - xx/: Any Language version content