$29
Introducing Jane, our modern personal portfolio/website template crafted with Tailwind CSS and available in HTML, Next.js, and Astro. This template is perfect for creative professionals looking to showcase their skills and build their personal brand.
FEATURES
7 pages
28 components
HTML + Next.js + Astro versions
Fully responsive
Use in unlimited projects
Lifetime updates
INFO
Released
Last updated
Tags
About the template
Jane is a multipurpose personal portfolio/website template built with Tailwind CSS and available in Next.js, Astro, and HTML.
Hey guys, Rodrigo from Tailwind Awesome here 👋
I'm excited to share with you the latest personal portfolio template, built with Tailwind CSS (v3.3) and available in Next.js (v13.5), Astro (v3.5), and HTML. When you purchase Jane, you'll receive all of the template versions, including the HTML, Astro, and Next.js versions of the website, allowing you to use the right stack for your needs.
This template features a sleek, modern, and creative design with a fully responsive experience. Whether you're a developer, designer, or any other type of creative professional, this template was crafted to help you showcase your skills and build your personal brand with ease.
I have structured and componentized the project, ensuring a clean and well-organized codebase. The template comes with 7 pages and a whopping 28 components, so you'll have plenty of options to make it uniquely yours. It relies entirely on Tailwind's utility classes, making it very easy to customize and get started with.
Hey guys, Rodrigo from Tailwind Awesome here 👋
I'm excited to share with you the latest personal portfolio template, built with Tailwind CSS (v3.3) and available in Next.js (v13.5), Astro (v3.5), and HTML. When you purchase Jane, you'll receive all of the template versions, including the HTML, Astro, and Next.js versions of the website, allowing you to use the right stack for your needs.
This template features a sleek, modern, and creative design with a fully responsive experience. Whether you're a developer, designer, or any other type of creative professional, this template was crafted to help you showcase your skills and build your personal brand with ease.
I have structured and componentized the project, ensuring a clean and well-organized codebase. The template comes with 7 pages and a whopping 28 components, so you'll have plenty of options to make it uniquely yours. It relies entirely on Tailwind's utility classes, making it very easy to customize and get started with.
Next.js Version:
Built with Next.js v13.5, this version takes advantage of the latest App Router and React server component features, delivering seamless navigation and performance.
Key dependencies & features:
- Tailwind CSS v3.3
- Next.js v13.5
- App router
- React 18.2
- Mdx powered by contentlayer for all case studies and blog posts.
- Headless UI
- SwiperJS for the Testimonials carousel.
- Prism.js for custom code syntax styles
- Prettier and eslint for code formatting
Astro Version:
A super fast, SEO-optimized Astro v3.5 template with full Typescript support, and nearly perfect lighthouse scores. This version takes advantage of the latest View Transitions and Image optimization features, delivering seamless navigation and performance.
Key dependencies & features:
- Tailwind CSS v3.3
- Astro v3.5
- Alpine.js v3
- Typescript v5
- Prettier
- Astro's content collections (with typescript support) powered by MDX for managing & authoring blog posts and case studies.
- SwiperJS for the Testimonials carousel.
- Prism.js for custom code syntax styles
- Leverages Astro's built-in View Transitions and image optimizations
- Automatic RSS feed and sitemap generation
- Built-in pagination implementation for blog posts and case studies
HTML Version:
If you're looking for simplicity, the HTML version is your go-to. It includes pre-assembled HTML files and uses the Tailwind CLI tool to ensure a swift and straightforward setup.
Key dependencies & features:
- Tailwind CSS v3.3
- Alpine.js 3
- Uses Tailwind CLI for a simple and quick development environment setup with hot-reloading
- SwiperJS for the Testimonials carousel.
- Prism.js for custom code syntax styles
General Features
- 7 fully responsive and pre-assembled pages
- 28+ customizable sections
- Made with Tailwind CSS v3.3
- Customizable design and layout
- Compatible with all modern browsers
- Detailed documentation (Each version includes a README documentation file)
- Minimal custom javascript.
- Well-structured and componentized
- Simple and easy development environment setup
- Uses Hero Icons and Nucleo Icons
- Lifetime Free Updates
Page details
- Home Page: This is the first impression visitors will have of your online presence. The homepage features a beautiful and playful design that showcases your best work, your unique value proposition, and gives visitors a taste of your personality, ensuring they'll want to learn more. It also includes your featured blog posts and client testimonials.
- About Page: This is your chance to share your story and background. Use the About page to highlight your skills, expertise, and the qualities that make you stand out from the crowd. I've also included sections to showcase your awards and press.
- Work Archive Page: An easy-to-navigate, visual showcase of your projects, allowing visitors to quickly browse through your portfolio and see the breadth and depth of your work.
- Case Study Page: Dive deeper into the details of your most impressive projects. Share your process, challenges, and successes, helping potential clients or employers understand the value you bring to the table. It also includes a visual showcase of your work and the client testimonial.
- Blog Page: Share your thoughts, ideas, and experiences with your audience. This page includes a creative hero section with a newsletter signup form to capture your readers' emails. The page displays your blog posts in a clean, organized fashion, encouraging readers to explore your content and stay engaged with your brand.
- Blog Article Page: A dedicated page for each blog post, allowing you to share your insights and expertise in a beautiful and easy-to-read format.
- Contact Page: Make it simple for potential clients, employers, or collaborators to get in touch with you. The Contact page includes a form, as well as your preferred contact information.
Credits And Sources
- Hero Icons
- Google Fonts (Inter)
- Unsplash
- Pexels
If you have any questions don't hesitate to reach out to me on Twitter: @raguila8 or email: rodrigo@tailwindawesome.com.
Much love ❤️
- Rodrigo
