Jane - Tailwind CSS Personal Portfolio Template

Jane is a multipurpose personal portfolio/website template built with Tailwind CSS and available in HTML, Next.js, and Astro.

Hey guys, Rodrigo from Tailwind Awesome here 👋

I'm excited to share with you the latest and greatest personal portfolio template, built with Tailwind CSS (v3.4) and available in HTML, Next.js (Javascript & Typescript versions), and Astro. The Next.js version is built with Next.js v14.2 and leverages the latest App Router and server component functionalities. The Astro version is built with Astro v4.15, leveraging the latest View Transitions and Image Optimizations improvements.

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 was built with 0 custom CSS and relies entirely on Tailwind's utility classes, making it very easy to customize and get started with.

Features

• 7 fully responsive and pre-assembled pages (available in HTML, Next.js, and Astro)
• 28+ customizable sections
• Made with Tailwind CSS v3.4
• Includes Next.js (Javascript & Typescript) templates, HTML template, and Astro template
• Customizable design and layout
• Compatible with all modern browsers
• Detailed documentation (Each version includes a README documentation file)
• Built with 0 custom CSS
• Minimal custom javascript.
• Clean code
• Well-structured and componentized
• Simple and easy development environment setup
• Google Fonts integration
• Uses Hero Icons and Nucleo Icons
• Lifetime Free Updates

Pages

1. 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
2. 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.
3. 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.
4. 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.
5. 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.
6. 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.
7. 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.

Tech Specs

Nextjs (React) Templates
Jane now includes two versions for Next.js: one built with TypeScript for enhanced type safety and developer experience, and another with JavaScript for those who prefer a traditional approach. Both versions leverage the latest Next.js v14.2 features, including the App Router and React server components, for optimal performance and seamless navigation.

• Tailwind CSS v3.4
• Next.js v14.2
• React v18.3
• Headless UI
• Prettier and eslint for code formatting
• Mdx powered by contentlayer for all case studies and blog posts.
• SwiperJS for the Testimonials carousel.
• Prism.js for custom code syntax styles

Astro Template
A fast and highly-performant Astro template with Typescript support. Key dependencies & features:

• Tailwind CSS v3.4
• Astro v4.15
• Alpine.js v3 for interactivity
• 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 Template
Basic pre-assembled HTML files. Key dependencies & features:

• Tailwind CSS v3.4
• Alpine.js v3
• 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

Credits And Sources

• Hero Icons
• Google Fonts (Inter, Lexend, and Gochi Hand)
• 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