DarkGolden Customizable Portfolio

Dark Golden: A Modern, Customizable Engineer's Portfolio Built with SvelteKit & TailwindCSS

Dark Golden Portfolio is a sleek, performance-focused portfolio template designed for engineers, developers, and technical professionals. Built with SvelteKit for server-side rendering (SSR) and seamless routing, TailwindCSS for utility-first styling, and a dark/gold theme for a sophisticated aesthetic, this template offers a fully dynamic and customizable experience through a single JSON configuration file. Below’s a technical deep dive:

### Tech Stack & Architecture

• Core Framework:
  • SvelteKit: Leverages Svelte’s compiler-driven reactivity for blazing-fast performance and SvelteKit’s file-based routing, SSR/SSG capabilities, and API endpoints.
  • TailwindCSS: Utilizes Tailwind’s JIT compiler for optimized CSS, with custom themes for dark mode and golden accent colors (`#FFD700` variants).
• Build Tools:
  • Vite-powered bundling for rapid development and production builds.
  • PostCSS integration for autoprefixing and minification.

### Customization via JSON
example JSON: ``` { "name": "Sk Shahriar Ahmed Raka", "profile_image": "/images/user_image.png", "favicon_image": "/favicon.svg", "profile_tags": ["Golang Developer", "Full-Stack Software Engineer"], "email": "skshahriarahmedraka@gmail.com", "phone": "+8801830000000", "address": "Dhaka, Bangladesh", "address_google_map": "https://www.google.com/maps/place/Dhaka/@23.7806365,90.4193257,12z/data=!3m1!4b1!4m5!3m4!1s0x3755b8b087026b81:0x8fa563bbdd5904c2!8m2!3d23.810332!4d90.4125181", "social": { "github": "https://github.com/skshahriarahmedraka", "linkedin": "https://www.linkedin.com/in/shahriarraka", "twitter": "https://twitter.com/shahriarraka7", ... }, ... ... ... } ```

All content is driven by a structured `data.json` file, enabling users to:

1. Profile Configuration:
   • Personal details (`name`, `email`, `address`), social links (GitHub, LinkedIn, etc.), and embedded Google Maps.
   • Dynamic favicon and profile image support (SVG/PNG).
2. Content Sections:
   • About Me: Markdown-supported bio with syntax highlighting for technical skills.
   • Expertise: Interactive cards with SVG icons, titles, and descriptions.
   • Technologies: Grid of SVG/PNG tech stack icons (e.g., Golang, Docker, Kubernetes).
   • Resume: Skills matrix (grouped by categories like Back End, DevOps), education, and work experience with date formatting.
   • Projects: Filterable gallery with tags, images, and URLs.
   • Blog: Markdown-to-HTML rendering for posts (with metadata like `reading_time`).
3. SEO Optimization:
   • Auto-generated meta tags, OpenGraph, and Twitter cards based on JSON data.

### Key Technical Features

1. Responsive Design:
   • Mobile-first layout with breakpoints for tablets, desktops, and ultra-wide screens.
   • CSS Grid and Flexbox for complex layouts (e.g., `technologies` grid, `expertise` cards).
2. Dynamic Content Rendering:
   • Svelte `{#each}` loops for rendering arrays (e.g., `social` links, `technologies`).
   • Conditional rendering for optional sections (e.g., hide `certifications` if empty).
3. Interactive Components:
   • Embedded Google Maps via `iframe`.
   • Clickable tags for filtering projects.
   • Smooth scroll navigation and anchor links.
4. Performance Optimizations:
   • Lazy-loaded images and SVGs.
   • Precompiled Svelte components for minimal JS overhead.
   • Critical CSS inlined via SvelteKit hooks.

### Sections Breakdown

1. Hero Section:
   • Profile image with hover effects, tags, and CTA buttons (e.g., "Download Resume").
   • Social links auto-generated from `social` object, with SVG icons.
2. Expertise:
   • Cards with animated hover states, SVG icons, and concise descriptions.
3. Technologies Grid:
   • Auto-populated grid of tech icons (supports 40+ entries) with tooltips on hover.
4. Resume:
   • Skills matrix with collapsible categories.
   • Timeline view for `education` and `experience` (formatted dates via JavaScript `Intl`).
5. Projects:
   • Responsive masonry grid with project images, tags, and GitHub links.
6. Blog:
   • Cards with featured images, tags, and estimated reading time.

### Deployment & Extensibility

• Hosting: Static export via `adapter-static` for compatibility with Vercel, Netlify, or GitHub Pages.
• CI/CD: Can be intregrated with any CI/CD pipeline
• Extensibility:
  • Add custom Svelte components (e.g., a blog engine, contact form).
  • Integrate third-party APIs (e.g., GitHub Projects, Medium RSS feed).

### This Portfolio Site is Ideal For

• Engineers showcasing backend/cloud expertise (Golang, Kubernetes, DevOps).
• Full-Stack Developers highlighting Svelte, Docker, or database design.
• Freelancers linking Upwork/Fiverr profiles and project portfolios.
• Students students who are looking for job & showcase there skill in portfolio site

Get Started: Clone the repo, populate `data.json`, and deploy. Zero coding required – just your data, hosted anywhere.

[GitHub Repository](https://github.com/skshahriarahmedraka) | [Live Demo](https://portfolio-site-template-virid.vercel.app/)

Empower your technical brand with a portfolio as robust as your code. 🚀