{"id":16443966,"url":"https://github.com/ayfri/portfolio","last_synced_at":"2026-03-15T15:07:08.616Z","repository":{"id":41255017,"uuid":"506808059","full_name":"Ayfri/Portfolio","owner":"Ayfri","description":"My online portfolio.","archived":false,"fork":false,"pushed_at":"2025-03-17T00:07:46.000Z","size":5128,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-17T01:25:39.069Z","etag":null,"topics":["kobweb","kotlin-website","portfolio","portfolio-website"],"latest_commit_sha":null,"homepage":"https://ayfri.com","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ayfri.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-23T22:24:00.000Z","updated_at":"2025-03-17T00:07:50.000Z","dependencies_parsed_at":"2023-01-30T23:45:17.251Z","dependency_job_id":"47582091-1ad7-4e4d-bec4-fb60ffb898d1","html_url":"https://github.com/Ayfri/Portfolio","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayfri%2FPortfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayfri%2FPortfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayfri%2FPortfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayfri%2FPortfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ayfri","download_url":"https://codeload.github.com/Ayfri/Portfolio/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245078067,"owners_count":20557274,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["kobweb","kotlin-website","portfolio","portfolio-website"],"created_at":"2024-10-11T09:22:51.032Z","updated_at":"2026-03-15T15:07:08.610Z","avatar_url":"https://github.com/Ayfri.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Portfolio\n\nWelcome to the source code of my personal portfolio website, [ayfri.com](https://ayfri.com).\n\n## 🚀 Overview\n\nThis is a modern, fully-featured portfolio website showcasing my skills, projects, experiences, and blog articles. Built with **Kotlin** and **Compose for Web**, it combines the power of a modern web framework with type-safe, functional programming.\n\nThe website is built using [Kobweb](https://kobweb.varabyte.com/), a cutting-edge Kotlin web framework that provides:\n- Type-safe DSLs for HTML and CSS\n- Compose for Web components (functional UI)\n- Static site generation capabilities\n- Built-in routing and navigation\n- Live reload development server\n\n## 📋 Features\n\n- **Responsive Design**: Fully responsive pages that work on all devices\n- **Blog System**: Markdown-based articles with front matter metadata\n- **Project Showcase**: Display of GitHub projects with integration via GitHub API\n- **Skills Section**: Categorized technical skills and expertise\n- **Experience Timeline**: Professional experience and internships\n- **About \u0026 Contact**: Personal information and contact details\n- **Static Export**: Generate optimized HTML files for deployment\n- **SEO Optimized**: Structured metadata and schema markup for search engines\n- **Syntax Highlighting**: Code blocks with language-specific highlighting (Prism.js)\n- **Custom Theme**: Dark-themed design with smooth animations\n\n## 🏗️ Project Structure\n\n```\nsrc/jsMain/\n├── kotlin/io/github/ayfri/\n│   ├── Main.kt                    # App entry point and initialization\n│   ├── Style.kt                   # Global styles and themes\n│   ├── animations.kt              # Animation utilities\n│   ├── CodeTheme.kt               # Code syntax highlighting theme\n│   ├── components/                # Reusable UI components\n│   │   ├── Header.kt              # Navigation header\n│   │   ├── Head.kt                # HTML head metadata\n│   │   └── Tabs.kt                # Tab component\n│   ├── pages/                     # Website pages\n│   │   ├── Index.kt               # Home page\n│   │   ├── AboutMe.kt             # About page\n│   │   ├── Skills.kt              # Skills showcase\n│   │   ├── Experiences.kt         # Experience timeline\n│   │   ├── Portfolio.kt           # Portfolio grid\n│   │   └── projects/              # Project pages\n│   ├── layouts/                   # Layout components (ArticleLayout, etc.)\n│   ├── jsonld/                    # JSON-LD schema markup\n│   └── utils/                     # Utility functions and helpers\n│\n└── resources/\n    ├── markdown/articles/         # Blog articles in Markdown\n    │   ├── DatapackGenerators.md\n    │   ├── KoreHelloWorld.md\n    │   ├── KoreIntroduction.md\n    │   └── ... (more articles)\n    └── public/                    # Static files\n        ├── cv.pdf                 # Resume/CV\n        ├── logo.png               # Site logo\n        ├── prism.min.js           # Code highlighting\n        └── images/                # Static images\n```\n\n## 🔧 Prerequisites\n\n- **JDK 21+** (Java Development Kit)\n- **Gradle** (included via Gradle Wrapper)\n- A terminal/shell with access to `./gradlew` commands\n\n## 🎯 Getting Started\n\n### Development Server\n\nTo run the development server with live reload:\n\n```powershell\n./gradlew kobwebStart -t\n```\n\nThe website will be available at `http://localhost:8080` and will automatically reload on file changes.\n\n### Additional Build Options\n\n- **Production Mode**: Add `-PkobwebEnv=PROD` for optimized production build\n- **Static Mode**: Add `-PkobwebRunLayout=STATIC` for HTML generation (useful for static exports)\n- **Live Reload**: `-t` flag enables automatic page reload on code changes\n\nExample with options:\n```powershell\n./gradlew kobwebStart -t -PkobwebEnv=PROD\n```\n\n### Exporting the Website\n\nTo generate optimized static HTML files:\n\n```powershell\n./gradlew kobwebExport\n```\n\nExport options:\n- **Production Mode**: `-PkobwebEnv=PROD` for optimized production build\n- **Static Mode**: `-PkobwebRunLayout=STATIC` for full HTML generation\n\nThe exported website will be available in the `.kobweb/client` directory.\n\n## 📝 Blog Articles\n\nArticles are stored in `src/jsMain/resources/markdown/articles/` as Markdown files with YAML front matter.\n\n### Creating New Articles\n\n1. Create a new `.md` file in `src/jsMain/resources/markdown/articles/`\n2. Add front matter at the top of the file\n3. Write your article content in Markdown below the front matter\n\n### Front Matter Format\n\n```yaml\n---\nnav-title: Article URL Slug\ntitle: Display Title of the Article\ndescription: Short description for SEO and previews (50-160 characters recommended)\nkeywords: comma,separated,keywords,for,seo\ndate-created: YYYY-MM-DD\ndate-modified: YYYY-MM-DD\nroot: .layouts.ArticleLayout\nrouteOverride: /articles/article-url-slug/index\n---\n\n# Article content starts here\n```\n\n### Front Matter Fields\n\n| Field           | Purpose                                                |\n|-----------------|--------------------------------------------------------|\n| `nav-title`     | URL slug for the article (e.g., `kore-hello-world`)    |\n| `title`         | Display title shown in article lists and headers       |\n| `description`   | SEO description and preview text                       |\n| `keywords`      | Comma-separated keywords for search engines            |\n| `date-created`  | Article creation date in YYYY-MM-DD format             |\n| `date-modified` | Last modification date in YYYY-MM-DD format            |\n| `root`          | Layout component (usually `.layouts.ArticleLayout`)    |\n| `routeOverride` | Full URL path for the article (`/articles/slug/index`) |\n\n### Article Features\n\n- **Markdown Formatting**: Full Markdown support (headings, lists, tables, emphasis, etc.)\n- **Code Blocks**: Syntax highlighting via Prism.js\n- **Images**: Support for local and external images\n- **Links**: Internal and external links with proper routing\n- **SEO**: Automatic meta tags and JSON-LD schema\n\n## 🔗 Data Integration\n\nThe website integrates with an external GitHub API for dynamic project data:\n\n- GitHub projects are fetched from a hosted JSON API\n- Project data includes stars, forks, and descriptions\n- The data is embedded during the build process in `build/generated/ayfri/src/jsMain/kotlin/io/github/ayfri/data/Data.kt`\n- API endpoint: `https://raw.githubusercontent.com/Ayfri/Portfolio/api/result.json`\n\nData download happens automatically during the build via the `downloadData` Gradle task.\n\n## 🏗️ Technologies Used\n\n- **Kotlin 2.2.21**: Type-safe language for web development\n- **Compose for Web 1.9.1**: Functional UI framework\n- **Kobweb 0.23.3**: Full-stack Kotlin web framework\n- **Markdown Processing**: KobwebX Markdown plugin for article conversion\n- **HTML/CSS**: Compose HTML and CSS DSLs for styling\n\n## 📦 Build System\n\nThe project uses **Gradle** with several custom tasks:\n\n- `kobwebStart`: Start development server with live reload\n- `kobwebExport`: Export static HTML files\n- `downloadData`: Download and process GitHub project data\n\n## 🎨 Customization\n\n### Styling\n\nGlobal styles are defined in `Style.kt`. The site uses:\n- CSS-in-Code via Compose DSL\n- Dark theme with accent colors\n- Custom scrollbar styling\n- Responsive media queries\n\n### Components\n\nReusable components are in `components/`:\n- `Header.kt`: Navigation and branding\n- `Head.kt`: Metadata and SEO tags\n- Custom components for portfolio sections\n\n### Layouts\n\nPage layouts are in `layouts/`:\n- `ArticleLayout`: Template for blog articles\n- `PageLayout`: General page wrapper with header/footer\n\n## 🚀 Deployment\n\nThe website can be deployed anywhere that serves static files:\n\n1. Run `./gradlew kobwebExport -PkobwebEnv=PROD`\n2. Upload contents of `.kobweb/client` to your hosting\n3. Ensure your server is configured for SPA routing (redirect 404s to index.html)\n\n## 📄 License\n\nThis project is licensed under the GNU General Public License v3.0 - see the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayfri%2Fportfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fayfri%2Fportfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayfri%2Fportfolio/lists"}