Welcome to my personal portfolio website — a fully responsive, creative, and animated experience!
This project showcases my design skills, development capabilities, and creative thinking. 🎨
- ⚡ Responsive Design — mobile, tablet, and desktop ready
- 🎨 Creative Preloader — neon glowing text while the site loads
- 🧱 Clean Card-Based Project Section — easy to expand and mobile-optimized
- 🎥 Smooth Animations — hover effects, scroll animations, and transitions
- 💌 Newsletter-style Contact Form — users can send you messages via email
- 📬 Social Links — LinkedIn, Instagram, Facebook, and Email contact
├── index.html # Main HTML structure
├── styles.css # Complete styling including responsiveness
├── script.js # JavaScript for animations, typing effect, and preloader
├── assets/ # Images, fonts, and icons (to be added)
- HTML5
- CSS3 (with custom media queries and animations)
- JavaScript (Vanilla) (no frameworks)
- Font Awesome (for icons)
- Custom Fonts (Retro Pixel, Qiulla)
This portfolio is fully optimized for:
- Mobile devices 📱
- Tablets 📲
- Desktop screens 🖥️
Media queries and flexible grid/card systems ensure the layout adapts smoothly across screen sizes.
The original bento grid has been replaced with a modern card-style grid layout:
- 6 uniform cards with project thumbnail + title
- Zoom-in + glowing border on hover
- Slide/fade-in animation on scroll
- Fully responsive for all screen sizes
- Clickable links (e.g. Figma project URLs)
A minimal contact form (newsletter-style) is included in the footer:
- Users can enter their email and message
- On submit, their email client opens with message pre-filled
- No backend required — easy and fast for them to reach out!
A glowing neon creative preloader appears when the page loads, enhancing the user experience and keeping the site engaging.
- Clone the repository or download the files.
- Make sure you have all the image assets and fonts linked correctly.
- Open
index.htmlin your favorite browser — and enjoy!
No build tools, frameworks, or external dependencies required — it's a fully static and lightweight portfolio.
| Mobile View | Desktop View |
|---|---|
 |
 |
- Replace image placeholders (
your-image-1.png,your-about-image-1.png, etc.) with your own artwork. - Update project images and titles in the Project Section.
- Add your real Figma or live project URLs.
- Tweak animation speeds or preloader effects in
styles.css.
Feel free to reach out or follow me on social media:
Made with 💙 by Dhriti | Designed for Creativity ✨