A stunning, fully customizable portfolio and resume website built with Astro, Tailwind CSS, and modern web technologies. Perfect for developers, designers, data engineers, and professionals looking to showcase their work online.
- Modern Design: Sleek, professional design with glassmorphism effects and smooth animations
- Fully Responsive: Perfect display on desktop, tablet, and mobile devices
- Dark Mode Ready: Beautiful appearance in both light and dark modes
- Content Collections: Easy content management for projects and blog posts using Markdown
- Dynamic Typing Animation: Eye-catching typing effect on the homepage
- Contact Form: Integrated contact form with FormSubmit
- SEO Optimized: Meta tags and semantic HTML for better search engine visibility
- Fast Performance: Built with Astro for optimal loading speeds
- Easy Customization: Simple to personalize with your own information
- Node.js 18+ installed on your machine
- Basic knowledge of HTML, CSS, and Markdown
# Clone this repository
git clone <your-repo-url>
# Navigate to the project directory
cd cv-template
# Install dependencies
npm install
# Start the development server
npm run devVisit http://localhost:4321 to see your site!
Update these files with your information:
src/pages/index.astro
- Replace "Your Name Here" with your name
- Update the typing animation text
- Modify your professional statement
- Customize skill categories and technologies
src/pages/resume.astro
- Update personal details (name, location, contact info)
- Add your work experience
- List your education
- Customize skills section
src/pages/contact.astro
- Replace
your-email@example.comwith your actual email in the form action
src/components/NameTitle.astro
- Change
'Your'and'NAME'to your first and last name - Update "Your Professional Title"
Projects are stored in src/content/projects/ as Markdown files
Create your own projects:
Create a new file src/content/projects/my-project.md:
---
title: "My Amazing Project"
description: "Brief description of what this project does"
tags: ["React", "Node.js", "MongoDB"]
image: "/project-image.png"
link: "https://github.com/yourusername/project"
featured: true
---
Detailed description of your project goes here...Blog posts are in src/content/blog/
Remove example posts:
rm src/content/blog/*.mdAdd your own posts following the same Markdown format.
Add your own:
- Profile photo
- Project screenshots
- Resume PDF (name it
your-resume.pdfor update the link inresume.astro) - Favicon (update
favicon.svg)
Update src/layouts/Layout.astro with your default SEO information.
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:4321 |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
This template uses Tailwind CSS for styling. Customize colors, fonts, and more in:
tailwind.config.jssrc/styles/global.css
This template can be deployed to various platforms:
npm run build
# Deploy ./dist folder to Vercelnpm run build
# Deploy ./dist folder to Netlify- Framework: Astro
- Styling: Tailwind CSS
- Icons: SVG icons
- Animations: CSS animations + AOS (Animate On Scroll)
- Forms: FormSubmit
This template is open source and free to use for personal and commercial projects under the MIT License.
Contributions, issues, and feature requests are welcome!
If you found this template helpful, please give it a star on GitHub!
Built with Astro