A modern, responsive portfolio website showcasing my journey as a Computer Science student and web developer. Built with vanilla HTML, CSS/SCSS, and JavaScript, featuring an anime-inspired design with smooth animations and interactive elements.
Alternative URL: GitHub Pages
This portfolio website represents my passion for web development, combining clean code with creative design. As a Computer Science student from Nepal, I've crafted this site to showcase my skills, projects, and personality through a unique anime-inspired theme.
- Responsive Design: Optimized for all devices (desktop, tablet, mobile)
- Modern UI/UX: Clean, professional design with smooth animations
- Performance Focused: Fast loading times and optimized assets
- SEO Optimized: Meta tags, structured data, and semantic HTML
- Accessibility: WCAG compliant with proper ARIA labels
- Dynamic animated hero section
- Interactive navigation with hover effects
- Professional terminal-style loader
- Smooth scroll navigation
- Personal introduction and background
- Skills and experience showcase
- Educational journey
- Interactive image gallery with hover effects
- Responsive grid layout
- Projects showcase (coming soon)
- Technology stack highlights
- Achievement gallery
- Interactive project cards
- Anime-themed contact form
- Multiple contact methods
- Social media integration
- Interactive 3D card effects
- Form validation and submission
- Hamburger menu navigation
- Touch-friendly interactions
- Optimized typography and spacing
- Swipe gestures support
- HTML5: Semantic markup and structure
- CSS3/SCSS: Modern styling with Sass preprocessing
- JavaScript (ES6+): Interactive functionality and animations
- Google Fonts: Typography (Reenie Beanie, Amatic SC, Ninja Naruto)
- Responsive Design: Mobile-first approach
- CSS Grid & Flexbox: Modern layout techniques
- CSS Animations: Smooth transitions and hover effects
- Backdrop Filters: Modern glass-morphism effects
- Google Analytics: Traffic monitoring and insights
- Structured Data: Schema.org markup for better SEO
- Meta Tags: Complete social media and search optimization
- Sitemap: XML sitemap for search engines
- Robots.txt: Search engine crawling guidelines
aakku106.github.io/
├── index.html # Landing page
├── pages/
│ ├── about/
│ │ ├── index.html # About me page
│ │ └── blink.css # Special animations
│ ├── contact/
│ │ └── index.html # Contact page
│ └── portfolio/
│ └── index.html # Portfolio page
├── js/
│ ├── script.js # Main JavaScript functionality
│ ├── Archive.js # Additional utilities
│ └── navBar.js/ # Navigation components
│ ├── NavBar.js
│ ├── NavBarLanding.js
│ └── NavBarPages.js
├── style/
│ ├── style.scss # Main SCSS file
│ ├── style.css # Compiled CSS
│ ├── _variables.scss # SCSS variables
│ ├── _mixins.scss # SCSS mixins
│ ├── _contactMePage.scss # Contact page styles
│ ├── _desktopAboutMeBody.scss # About page styles
│ └── [other SCSS partials]
├── pictures/ # Image assets
│ ├── contactPage/
│ ├── desktop/
│ ├── mobile/
│ └── Webicon/
├── CNAME # Custom domain configuration
├── sitemap.xml # SEO sitemap
├── robots.txt # Search engine instructions
└── README.md # Project documentation
- A modern web browser
- Basic understanding of HTML, CSS, and JavaScript
- Text editor or IDE (VS Code recommended)
-
Clone the repository
git clone https://github.com/aakku106/aakku106.github.io.git cd aakku106.github.io -
Serve locally
# Using Python (if installed) python -m http.server 8000 # Using Node.js live-server (if installed) npx live-server # Or simply open index.html in your browser
-
Development with SCSS
# Install Sass (if needed) npm install -g sass # Watch for SCSS changes sass --watch style/style.scss:style/style.css
The website is automatically deployed via GitHub Pages when changes are pushed to the main branch.
- Primary:
#c77d27(Warm Orange) - Secondary:
#060310(Deep Navy) - Accent: Naruto-inspired orange and blue tones
- Headings: Ninja Naruto, Amatic SC
- Body: Reenie Beanie
- UI Elements: System fonts for readability
- Smooth Transitions: All interactions have fluid animations
- Performance First: GPU-accelerated transforms
- Accessibility: Respects user's motion preferences
// Mobile First Approach
@media (max-width: 480px) // Mobile devices @media (max-width: 768px) // Tablets @media (max-width: 1024px) // Small desktops @media (min-width: 1025px); // Large desktops- Image Optimization: Compressed images and modern formats
- CSS Minification: Production-ready compiled CSS
- Lazy Loading: Images load as needed
- Caching: Proper cache headers for static assets
- CDN: Google Fonts and external resources via CDN
- Meta Tags: Complete Open Graph and Twitter Card support
- Structured Data: Schema.org Person and ProfilePage markup
- Canonical URLs: Proper canonical tag implementation
- Multilingual Support: hreflang tags for international SEO
- Google Analytics: Integrated tracking and insights
While this is a personal portfolio, I welcome feedback and suggestions!
- Fork the repository
- Create a feature branch (
git checkout -b feature/improvement) - Commit your changes (
git commit -am 'Add some improvement') - Push to the branch (
git push origin feature/improvement) - Open a Pull Request
This project is open source and available under the MIT License.
- 🌐 Website: www.adarashagaihre.com.np
- 💼 LinkedIn: Connect with me
- 🐙 GitHub: @aakku106
- 📧 Email: Contact via website form
- Inspiration: Naruto anime series for the creative theme
- Fonts: Google Fonts for beautiful typography
- Icons: Font Awesome for UI icons
- Hosting: GitHub Pages for reliable hosting
- Community: The web development community for continuous learning
Made with ❤️ by Adarasha Gaihre