Portfolio

Personal

A sleek, minimalist portfolio template with dynamic animations, dark/light mode, and responsive design. Features include project showcases, interactive skill CLI and performance optimizations for lightning-fast load times.

ReactTailwindCSSShadcn UIMotionReact MarkdownReact Router Dom

GitHub Live Demo

✨ Portfolio Template

A clean and modern portfolio built with React, designed for developers and creatives who want to showcase their work elegantly.

🌟 Overview#

This portfolio template combines sleek design with developer-friendly features. It leverages React and react-router-dom for seamless navigation, with Framer Motion powering smooth animations throughout the experience.

Homepage hero section with animated elements

The minimalist design puts your work and skills at the forefront, while thoughtful interactions create a memorable browsing experience for visitors.

🚀 Key Features#

⌨️ Keyboard Shortcuts#

Press Ctrl + / to access a complete list of keyboard shortcuts. Navigate quickly between sections, toggle theme settings, or access hidden features without touching your mouse.

💻 Developer Console#

For the tech-curious visitors, I've included a CLI-like interaction system in the browser's DevTools console. Visitors can type commands like help(), about(), or contact() to navigate and learn more.

🔍 Project Showcase#

Each project gets its own dedicated page with support for Markdown content, allowing for rich descriptions of your work complete with images, lists, and formatted text.

Project details page with markdown content

📱 Responsive Design#

The portfolio looks stunning on devices of all sizes, from ultrawide monitors to mobile phones. The layout intelligently adapts to provide the best experience on any screen.

🛠️ Easy Customization#

Making this template your own is straightforward. All personal information, projects, and settings are stored in configuration files within the src/config/ directory. Simply edit these files to customize:

Personal information and bio
Social media links
Projects and case studies
Skills and technologies
Color schemes and theme options

📝 Example#

// src/config/personal.config.ts
export const PersonalData = {
  name: "Aditya",
  nickname: "Adii",
  logo: "",
  description:
    "I'm a software developer based in India. I have a passion for developing software that improves the lives of those around me. I specialize in building web applications and have professional experience working with JavaScript, TypeScript, React, and Node.js.",
  title: "Student / Coder",
  avatar:
    "https://i.pinimg.com/736x/35/2b/03/352b03faa5630e37e1efbb9798b633e1.jpg",
  favicon: "./favicon.ico",
  age: 20,
  about: [
    "Hello! I'm a passionate developer with a keen interest in creating elegant and efficient solutions. With a strong foundation in computer science and years of hands-on experience, I specialize in full-stack development, focusing on modern web technologies.",
    "When I'm not coding, you can find me exploring new technologies, contributing to open-source projects, or sharing my knowledge through blog posts and community meetups. I'm always excited about new challenges and opportunities to grow both personally and professionally.",
  ],
  address: {
    city: "Ajmer",
    state: "Rajasthan",
    country: "India",
    pincode: "305817",
    longitude: 75.377394,
    latitude: 26.612028,
  },
};

No need to dig through component files unless you want to make structural changes.

🚀 Deployment Ready#

The template includes a GitHub Actions workflow file (deploy.yml) that automatically deploys your portfolio to GitHub Pages whenever you push to the main branch. This continuous deployment pipeline ensures your portfolio is always up-to-date with minimal effort.

🌐 OpenGraph Support#

Social sharing is optimized with proper OpenGraph meta tags, ensuring your portfolio and projects look great when shared on social media platforms like Twitter, Facebook, and LinkedIn.

<!-- index.html -->
<meta property="og:url" content="https://iditya.tech" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Adii | Portfolio" />
<meta
  property="og:description"
  content="Hi, I'm Adii, I'm a software developer based in India. I have a passion for developing software that improves the lives of those around me. Fun fact: Weeb by Heart, Athlete by Skill. Bridging the Gap Between Otaku Passion and Sporting Excellence. (I watch anime too)"
/>
<meta
  property="og:image"
  content="https://res.cloudinary.com/dwdbqwqxk/image/upload/v1732530896/Hi_vf73cf.png"
/>

🏁 Getting Started#

To use this template, simply clone the repository, install dependencies, customize the configuration files, and you're ready to showcase your work to the world. The documentation includes step-by-step instructions to guide you through the process.

GitHub Repository 🔗

✨ This portfolio template strikes the perfect balance between sophistication and simplicity, giving you a professional online presence without the complexity of building everything from scratch. Show off your projects in style! 🎯