first commit
This commit is contained in:
Beyhan Oğur
7
app/app.vue
Normal file
7
app/app.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
</div>
|
||||
</template>
|
||||
143
app/components/BlogArea.vue
Normal file
143
app/components/BlogArea.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="blog-section" id="blog">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<div class="section-heading wow fadeInUp" data-wow-delay="0.2s">
|
||||
<h2 class="title">
|
||||
My <span class="color">Blogs</span>
|
||||
<span class="bg-text">Blogs</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="blog-slider wow fadeInUp" data-wow-delay="0.3s">
|
||||
<div class="slider-item">
|
||||
<div class="single-blog">
|
||||
<div class="img">
|
||||
<img src="/assets/images/blog/img1.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<ul class="top-meta">
|
||||
<li>
|
||||
<p class="date">
|
||||
21 Aug, 2019
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="post-by">
|
||||
By, Admin
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="blog-details.html">
|
||||
<h4 class="title">
|
||||
5 reasons why your website
|
||||
needs more whitespace
|
||||
</h4>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slider-item">
|
||||
<div class="single-blog">
|
||||
<div class="img">
|
||||
<img src="/assets/images/blog/img2.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<ul class="top-meta">
|
||||
<li>
|
||||
<p class="date">
|
||||
21 Aug, 2019
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="post-by">
|
||||
By, Admin
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="blog-details.html">
|
||||
<h4 class="title">
|
||||
7 steps to optimize your
|
||||
website for Millennials
|
||||
</h4>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slider-item">
|
||||
<div class="single-blog">
|
||||
<div class="img">
|
||||
<img src="/assets/images/blog/img3.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<ul class="top-meta">
|
||||
<li>
|
||||
<p class="date">
|
||||
21 Aug, 2019
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="post-by">
|
||||
By, Admin
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="blog-details.html">
|
||||
<h4 class="title">
|
||||
8 Things To Know When Designing
|
||||
Augmented
|
||||
</h4>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slider-item">
|
||||
<div class="single-blog">
|
||||
<div class="img">
|
||||
<img src="/assets/images/blog/img4.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<ul class="top-meta">
|
||||
<li>
|
||||
<p class="date">
|
||||
24 Aug, 2019
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="post-by">
|
||||
By, Admin
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="blog-details.html">
|
||||
<h4 class="title">
|
||||
3 reasons why your website
|
||||
needs more whitespace
|
||||
</h4>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12 text-center">
|
||||
<a href="blogs.html" class="mybtn3 mybtn-bg wow fadeInUp"><span>View All</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
78
app/components/MyClientArea.vue
Normal file
78
app/components/MyClientArea.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="partners">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<div class="section-heading wow fadeInUp" data-wow-delay="0.2s">
|
||||
<h2 class="title">
|
||||
My <span class="color">Clients</span>
|
||||
<span class="bg-text">Clients</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="partners-slider wow fadeInUp" data-wow-delay="0.3s">
|
||||
<div class="slider-item">
|
||||
<a href="#">
|
||||
<img src="/assets/images/partner/1.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="slider-item">
|
||||
<a href="#">
|
||||
<img src="/assets/images/partner/2.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="slider-item">
|
||||
<a href="#">
|
||||
<img src="/assets/images/partner/3.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="slider-item">
|
||||
<a href="#">
|
||||
<img src="/assets/images/partner/4.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="slider-item">
|
||||
<a href="#">
|
||||
<img src="/assets/images/partner/5.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="slider-item">
|
||||
<a href="#">
|
||||
<img src="/assets/images/partner/6.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="slider-item">
|
||||
<a href="#">
|
||||
<img src="/assets/images/partner/7.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="slider-item">
|
||||
<a href="#">
|
||||
<img src="/assets/images/partner/8.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="slider-item">
|
||||
<a href="#">
|
||||
<img src="/assets/images/partner/9.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="slider-item">
|
||||
<a href="#">
|
||||
<img src="/assets/images/partner/10.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
20
app/components/Preloader.vue
Normal file
20
app/components/Preloader.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- preloader area start -->
|
||||
<ClientOnly>
|
||||
<div class="preloader" id="preloader">
|
||||
<div class="loader loader-1">
|
||||
<div class="loader-outter"></div>
|
||||
<div class="loader-inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
<!-- preloader area end -->
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
158
app/components/PriceArea.vue
Normal file
158
app/components/PriceArea.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="pricing2" id="pricing2">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<div class="section-heading wow fadeInUp" data-wow-delay="0.2s">
|
||||
<h2 class="title">
|
||||
Pricing <span class="color">Packages</span>
|
||||
<span class="bg-text">Pricing</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="price-box basic wow fadeInUp">
|
||||
<div class="price-title">
|
||||
<h3 class="heading-title">Basic Plan</h3>
|
||||
<p class="heading-sub-title">This is basic Service Plan</p>
|
||||
</div>
|
||||
<div class="price-rate">
|
||||
<div class="center-align-content">
|
||||
<p class="price">$250</p>
|
||||
<p class="duration">/mo</p>
|
||||
<i class="fas fa-dollar-sign"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-feature">
|
||||
<ul class="service-feature-list">
|
||||
<li>
|
||||
<p>Android Application</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><del>IOS Application</del></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><del>UX/UI Designs</del></p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Wordpress Develop</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>PSD to HTML</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><del>Digital Marketing</del></p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Content Editing</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="buy-btn-wrapper">
|
||||
<a class="mybtn3 mybtn-bg" href="#"><span>Start Now <i
|
||||
class="fas fa-shopping-cart"></i></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="price-box standard wow fadeInUp">
|
||||
<div class="price-title">
|
||||
<h3 class="heading-title">Standard Plan</h3>
|
||||
<p class="heading-sub-title">This is Standard Service Plan</p>
|
||||
</div>
|
||||
<div class="price-rate">
|
||||
<div class="center-align-content">
|
||||
<p class="price">$350</p>
|
||||
<p class="duration">/mo</p>
|
||||
<i class="fas fa-dollar-sign"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-feature">
|
||||
<ul class="service-feature-list">
|
||||
<li>
|
||||
<p>Android Application</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>IOS Application</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><del>UX/UI Designs</del></p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Wordpress Develop</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>PSD to HTML</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Digital Marketing</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Content Editing</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="buy-btn-wrapper">
|
||||
<a class="mybtn3 mybtn-bg" href="#"><span>Start Now <i
|
||||
class="fas fa-shopping-cart"></i></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="price-box premium wow fadeInUp">
|
||||
<div class="price-title">
|
||||
<h3 class="heading-title">Premium Plan</h3>
|
||||
<p class="heading-sub-title">This is Premium Service Plan</p>
|
||||
</div>
|
||||
<div class="price-rate">
|
||||
<div class="center-align-content">
|
||||
<p class="price">$450</p>
|
||||
<p class="duration">/mo</p>
|
||||
<i class="fas fa-dollar-sign"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-feature">
|
||||
<ul class="service-feature-list">
|
||||
<li>
|
||||
<p>Android Application</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>IOS Application</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>UX/UI Designs</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Wordpress Develop</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>PSD to HTML</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Digital Marketing</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Content Editing</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="buy-btn-wrapper">
|
||||
<a class="mybtn3 mybtn-bg" href="#"><span>Start Now <i
|
||||
class="fas fa-shopping-cart"></i></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
150
app/components/Testimonial.vue
Normal file
150
app/components/Testimonial.vue
Normal file
@@ -0,0 +1,150 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="testimonial" id="testimonial">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<div class="section-heading wow fadeInUp" data-wow-delay="0.2s">
|
||||
<h2 class="title">
|
||||
My <span class="color">Testimonial</span>
|
||||
<span class="bg-text">Testimonial</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="testimonial-slider wow fadeInUp" data-wow-delay="0.3s">
|
||||
<div class="slider-item">
|
||||
<div class="single-review">
|
||||
<div class="stars">
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>
|
||||
Believed attentive assisted picture sharpness to I to she waved the are
|
||||
and slide understand the that set task. The you due back
|
||||
</p>
|
||||
</div>
|
||||
<div class="reviewr">
|
||||
<div class="img">
|
||||
<img src="/assets/images/reviewr/p1.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<h4 class="name">
|
||||
Austin Bishop
|
||||
</h4>
|
||||
<p>
|
||||
CEO at ABC
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slider-item">
|
||||
<div class="single-review">
|
||||
<div class="stars">
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>
|
||||
Believed attentive assisted picture sharpness to I to she waved the are
|
||||
and slide understand the that set task. The you due back
|
||||
</p>
|
||||
</div>
|
||||
<div class="reviewr">
|
||||
<div class="img">
|
||||
<img src="/assets/images/reviewr/p2.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<h4 class="name">
|
||||
Alexander
|
||||
</h4>
|
||||
<p>
|
||||
CEO at DER
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slider-item">
|
||||
<div class="single-review">
|
||||
<div class="stars">
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>
|
||||
Believed attentive assisted picture sharpness to I to she waved the are
|
||||
and slide understand the that set task. The you due back
|
||||
</p>
|
||||
</div>
|
||||
<div class="reviewr">
|
||||
<div class="img">
|
||||
<img src="/assets/images/reviewr/p3.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<h4 class="name">
|
||||
Sebastian
|
||||
</h4>
|
||||
<p>
|
||||
CEO at ECS
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slider-item">
|
||||
<div class="single-review">
|
||||
<div class="stars">
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>
|
||||
Believed attentive assisted picture sharpness to I to she waved the are
|
||||
and slide understand the that set task. The you due back
|
||||
</p>
|
||||
</div>
|
||||
<div class="reviewr">
|
||||
<div class="img">
|
||||
<img src="/assets/images/reviewr/p4.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<h4 class="name">
|
||||
Christopher
|
||||
</h4>
|
||||
<p>
|
||||
CEO at XYZ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
13
app/components/home/BackToTopStart.vue
Normal file
13
app/components/home/BackToTopStart.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bottomtotop">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
992
app/components/home/MainContentArea.vue
Normal file
992
app/components/home/MainContentArea.vue
Normal file
@@ -0,0 +1,992 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main-content">
|
||||
<div class="main-content-inner">
|
||||
|
||||
<!-- About div Start -->
|
||||
<div class="home-section" id="home">
|
||||
<ClientOnly>
|
||||
<div class="particals"></div>
|
||||
</ClientOnly>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-6">
|
||||
<div class="home-content">
|
||||
<div class="home-image">
|
||||
<img src="/assets/images/about.jpg" alt="" class="wow zoomIn" data-wow-delay="0.2s">
|
||||
</div>
|
||||
<div class="home-main-content">
|
||||
<h4 class="heading wow fadeInUp" data-wow-delay="0.3s">
|
||||
Kristen Stewart
|
||||
</h4>
|
||||
<div class="designation wow zoomIn" data-wow-delay="0.4s">
|
||||
<span>
|
||||
I'm a <ClientOnly><span class="typed"></span></ClientOnly>
|
||||
</span>
|
||||
</div>
|
||||
<div class="social-info wow fadeInUp" data-wow-delay="0.5s">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fab fa-pinterest-p"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="about-links wow fadeInUp" data-wow-delay="0.6s">
|
||||
<a href="#" class="mybtn3 mybtn-bg"> <span>Contact Me</span> </a>
|
||||
<a href="https://www.youtube.com/watch?v=6zM4p_A0ISk"
|
||||
class="mybtn3 mybtn-bg video-play mfp-iframe"> <span> <i class="fas fa-play"></i> Intro</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- About div End -->
|
||||
|
||||
<!-- About div Start -->
|
||||
<div class="about-section" id="about">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<div class="section-heading wow fadeInUp" data-wow-delay="0.2s">
|
||||
<h2 class="title">
|
||||
About <span class="color">Me</span>
|
||||
<span class="bg-text">About</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="about">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="about-image wow fadeInUp" data-wow-delay="0.3s">
|
||||
<img src="/assets/images/about2.jpg" alt="">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-lg-8 align-self-center">
|
||||
<div class="short-description wow fadeInUp">
|
||||
<p>
|
||||
Randon Text Received shutters expenses ye he pleasant. Drift as blind above at up. No up
|
||||
simple county stairs do should praise as. Drawings sir gay together landlord had law smallest.
|
||||
Formerly welcomed attended declared met say unlocked. Jennings outlived no dwelling denoting
|
||||
in peculiar as he believed.
|
||||
</p>
|
||||
<p>
|
||||
Left till here away at to whom past. Feelings laughing at no wondered repeated provided
|
||||
finished. It acceptance thoroughly my advantages everything as.
|
||||
</p>
|
||||
<div class="about-links">
|
||||
<a href="#" class="mybtn3 mybtn-bg"> <span>Download CV</span> </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="about-content wow fadeInUp">
|
||||
<div class="personal-info">
|
||||
<ul>
|
||||
<li>
|
||||
<span><label>Birthday:</label> 01.07.1990</span>
|
||||
</li>
|
||||
<li>
|
||||
<span><label>Age:</label> 28</span>
|
||||
</li>
|
||||
<li>
|
||||
<span><label>City:</label> New York, USA</span>
|
||||
</li>
|
||||
<li>
|
||||
<span><label>Interests:</label> Soccer, UFC</span>
|
||||
</li>
|
||||
<li>
|
||||
<span><label>Study:</label> Chicago University</span>
|
||||
</li>
|
||||
<li>
|
||||
<span><label>Degree:</label> Master</span>
|
||||
</li>
|
||||
<li>
|
||||
<span><label>Website:</label> <a href="#">www.mywebsite.com</a></span>
|
||||
</li>
|
||||
<li>
|
||||
<span><label>Mail:</label> <a href="mailto:example@gmail.com">mymail@gmail.com</a></span>
|
||||
</li>
|
||||
<li>
|
||||
<span><label>Phone:</label> <a href="#">+77 022 177 05 05</a></span>
|
||||
</li>
|
||||
<li>
|
||||
<span><label>Twitter:</label> <a href="#">@myusername</a></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- About div End -->
|
||||
|
||||
<!-- Counter Area Start -->
|
||||
<div class="counter-area">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="single-counter wow fadeInUp">
|
||||
<img src="/assets/images/icon/005-target.png" alt="">
|
||||
<ClientOnly>
|
||||
<div class="counter-wrapper">
|
||||
<div class="counter">80</div>
|
||||
<span>k+</span>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
<p class="text">
|
||||
Project Done
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="single-counter wow fadeInUp">
|
||||
<img src="/assets/images/icon/002-medical-mask.png" alt="">
|
||||
<ClientOnly>
|
||||
<div class="counter-wrapper">
|
||||
<div class="counter">19</div>
|
||||
<span>k+</span>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
<p class="text">
|
||||
Happy users
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="single-counter wow fadeInUp">
|
||||
<img src="/assets/images/icon/053-success-1.png" alt="">
|
||||
<ClientOnly>
|
||||
<div class="counter-wrapper">
|
||||
<div class="counter">39</div>
|
||||
<span>k+</span>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
<p class="text">
|
||||
Great Reviews
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="single-counter wow fadeInUp">
|
||||
<img src="/assets/images/icon/045-hacker.png" alt="">
|
||||
<ClientOnly>
|
||||
<div class="counter-wrapper">
|
||||
<div class="counter">50</div>
|
||||
<span>+</span>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
<p class="text">
|
||||
Support Team
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Counter Area End -->
|
||||
|
||||
<!-- My service Start -->
|
||||
<div class="service-wrapper" id="service">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<div class="section-heading wow fadeInUp" data-wow-delay="0.2s">
|
||||
<h2 class="title">
|
||||
My <span class="color">Services</span>
|
||||
<span class="bg-text">Services</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<a href="service-details.html" class="single-feature wow fadeInUp">
|
||||
<img src="/assets/images/icon/024-server.png" alt="">
|
||||
<div class="content">
|
||||
<h4 class="title">
|
||||
Amazon AWS
|
||||
</h4>
|
||||
<p>
|
||||
Clarinet accustomed. Would legs of framework officers. We've to morning like a
|
||||
contracting
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<a href="service-details.html" class="single-feature wow fadeInUp">
|
||||
<img src="/assets/images/icon/062-code-1.png" alt="">
|
||||
<div class="content">
|
||||
<h4 class="title">
|
||||
Web Development
|
||||
</h4>
|
||||
<p>
|
||||
Clarinet accustomed. Would legs of framework officers. We've to morning like a
|
||||
contracting
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<a href="service-details.html" class="single-feature wow fadeInUp">
|
||||
<img src="/assets/images/icon/064-vector.png" alt="">
|
||||
<div class="content">
|
||||
<h4 class="title">
|
||||
Creative design
|
||||
</h4>
|
||||
<p>
|
||||
Clarinet accustomed. Would legs of framework officers. We've to morning like a
|
||||
contracting
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<a href="service-details.html" class="single-feature wow fadeInUp">
|
||||
<img src="/assets/images/icon/043-analytics.png" alt="">
|
||||
<div class="content">
|
||||
<h4 class="title">
|
||||
App Development
|
||||
</h4>
|
||||
<p>
|
||||
Clarinet accustomed. Would legs of framework officers. We've to morning like a
|
||||
contracting
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<a href="service-details.html" class="single-feature wow fadeInUp">
|
||||
<img src="/assets/images/icon/033-rocket.png" alt="">
|
||||
<div class="content">
|
||||
<h4 class="title">
|
||||
Fast & Optimized
|
||||
</h4>
|
||||
<p>
|
||||
Clarinet accustomed. Would legs of framework officers. We've to morning like a
|
||||
contracting
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<a href="service-details.html" class="single-feature wow fadeInUp">
|
||||
<img src="/assets/images/icon/054-puzzle.png" alt="">
|
||||
<div class="content">
|
||||
<h4 class="title">
|
||||
Pixel Precision
|
||||
</h4>
|
||||
<p>
|
||||
Clarinet accustomed. Would legs of framework officers. We've to morning like a
|
||||
contracting
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- My service End -->
|
||||
|
||||
<!-- Resume Area Start -->
|
||||
<div class="resume-wrapper" id="resume">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<div class="section-heading wow fadeInUp" data-wow-delay="0.2s">
|
||||
<h2 class="title">
|
||||
My <span class="color">Resume</span>
|
||||
<span class="bg-text">Resume</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="resume-box">
|
||||
<div class="resume-title">
|
||||
<h4 class="title">
|
||||
Education
|
||||
</h4>
|
||||
</div>
|
||||
<div class="education-list">
|
||||
<div class="single-education wow fadeInUp">
|
||||
<div class="year">
|
||||
<span>2006-2008</span>
|
||||
</div>
|
||||
<h4 class="university-name">
|
||||
Envato University
|
||||
</h4>
|
||||
<p class="degree">MSC in Computer Engineer </p>
|
||||
</div>
|
||||
<div class="single-education wow fadeInUp">
|
||||
<div class="year">
|
||||
<span>2003-205</span>
|
||||
</div>
|
||||
<h4 class="university-name">
|
||||
Envato University
|
||||
</h4>
|
||||
<p class="degree">BSC in Computer Engineer </p>
|
||||
</div>
|
||||
<div class="single-education wow fadeInUp">
|
||||
<div class="year">
|
||||
<span>2000-2002</span>
|
||||
</div>
|
||||
<h4 class="university-name">
|
||||
Envato University
|
||||
</h4>
|
||||
<p class="degree">HSC in Computer Engineer </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="resume-box">
|
||||
<div class="resume-title">
|
||||
<h4 class="title">
|
||||
Experience
|
||||
</h4>
|
||||
</div>
|
||||
<div class="education-list">
|
||||
<div class="single-education wow fadeInUp">
|
||||
<div class="year">
|
||||
<span>2014-2018</span>
|
||||
</div>
|
||||
<h4 class="university-name">
|
||||
Envato Company
|
||||
</h4>
|
||||
<p class="degree">Full Stack Web Developer</p>
|
||||
</div>
|
||||
<div class="single-education wow fadeInUp">
|
||||
<div class="year">
|
||||
<span>2011-2014</span>
|
||||
</div>
|
||||
<h4 class="university-name">
|
||||
Envato Company
|
||||
</h4>
|
||||
<p class="degree">Web Developer</p>
|
||||
</div>
|
||||
<div class="single-education wow fadeInUp">
|
||||
<div class="year">
|
||||
<span>2009-2011</span>
|
||||
</div>
|
||||
<h4 class="university-name">
|
||||
Envato Company
|
||||
</h4>
|
||||
<p class="degree"> Web Designer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="resume-box">
|
||||
<div class="resume-title">
|
||||
<h4 class="title">
|
||||
Coding Skills
|
||||
</h4>
|
||||
</div>
|
||||
<div class="skill-list">
|
||||
<div class="single-skill wow fadeInUp">
|
||||
<div class="heading">
|
||||
<h4 class="name">
|
||||
HTML
|
||||
</h4>
|
||||
<h5 class="value">
|
||||
75%
|
||||
</h5>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
|
||||
aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-skill wow fadeInUp">
|
||||
<div class="heading">
|
||||
<h4 class="name">
|
||||
JS
|
||||
</h4>
|
||||
<h5 class="value">
|
||||
75%
|
||||
</h5>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
|
||||
aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-skill wow fadeInUp">
|
||||
<div class="heading">
|
||||
<h4 class="name">
|
||||
PHP
|
||||
</h4>
|
||||
<h5 class="value">
|
||||
75%
|
||||
</h5>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
|
||||
aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-skill wow fadeInUp">
|
||||
<div class="heading">
|
||||
<h4 class="name">
|
||||
JAVA
|
||||
</h4>
|
||||
<h5 class="value">
|
||||
75%
|
||||
</h5>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
|
||||
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="resume-box">
|
||||
<div class="resume-title">
|
||||
<h4 class="title">
|
||||
Language Skills
|
||||
</h4>
|
||||
</div>
|
||||
<div class="skill-list">
|
||||
<div class="single-skill wow fadeInUp">
|
||||
<div class="heading">
|
||||
<h4 class="name">
|
||||
English
|
||||
</h4>
|
||||
<h5 class="value">
|
||||
75%
|
||||
</h5>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
|
||||
aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-skill wow fadeInUp">
|
||||
<div class="heading">
|
||||
<h4 class="name">
|
||||
Hindi
|
||||
</h4>
|
||||
<h5 class="value">
|
||||
75%
|
||||
</h5>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
|
||||
aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-skill wow fadeInUp">
|
||||
<div class="heading">
|
||||
<h4 class="name">
|
||||
Spanis
|
||||
</h4>
|
||||
<h5 class="value">
|
||||
75%
|
||||
</h5>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
|
||||
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-skill wow fadeInUp">
|
||||
<div class="heading">
|
||||
<h4 class="name">
|
||||
Arabic
|
||||
</h4>
|
||||
<h5 class="value">
|
||||
75%
|
||||
</h5>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
|
||||
aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="resume-box">
|
||||
<div class="resume-title">
|
||||
<h4 class="title">
|
||||
Professional Skills
|
||||
</h4>
|
||||
</div>
|
||||
<div class="skill-list2">
|
||||
<div class="single-skill2 wow fadeInUp">
|
||||
<div class="circle-progress" data-percent="80"></div>
|
||||
<h4 class="name">
|
||||
Web Design
|
||||
</h4>
|
||||
</div>
|
||||
<div class="single-skill2 wow fadeInUp">
|
||||
<div class="circle-progress" data-percent="90"></div>
|
||||
<h4 class="name">
|
||||
Web Devlopment
|
||||
</h4>
|
||||
</div>
|
||||
<div class="single-skill2 wow fadeInUp">
|
||||
<div class="circle-progress" data-percent="70"></div>
|
||||
<h4 class="name">
|
||||
Graphic Design
|
||||
</h4>
|
||||
</div>
|
||||
<div class="single-skill2 wow fadeInUp">
|
||||
<div class="circle-progress" data-percent="85"></div>
|
||||
<h4 class="name">
|
||||
Auto CAD
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="resume-box">
|
||||
<div class="resume-title">
|
||||
<h4 class="title">
|
||||
Knowledge
|
||||
</h4>
|
||||
</div>
|
||||
<div class="knowledge-list wow fadeInUp">
|
||||
<div class="single-knowledge">
|
||||
<p>
|
||||
Search engine marketing
|
||||
</p>
|
||||
</div>
|
||||
<div class="single-knowledge">
|
||||
<p>
|
||||
iOS and android apps
|
||||
</p>
|
||||
</div>
|
||||
<div class="single-knowledge">
|
||||
<p>
|
||||
Spreadsheets (Excel, Google Spreadsheets, etc.)
|
||||
</p>
|
||||
</div>
|
||||
<div class="single-knowledge">
|
||||
<p>
|
||||
Email Communication
|
||||
</p>
|
||||
</div>
|
||||
<div class="single-knowledge">
|
||||
<p>
|
||||
Presentation software (PowerPoint, Keynote)
|
||||
</p>
|
||||
</div>
|
||||
<div class="single-knowledge">
|
||||
<p>
|
||||
Office suites (Microsoft Office, G Suite)
|
||||
</p>
|
||||
</div>
|
||||
<div class="single-knowledge">
|
||||
<p>
|
||||
Operating systems (Windows and MacOS)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Resume Area End -->
|
||||
|
||||
<!-- My Client Area Area Strat -->
|
||||
|
||||
<!-- My Client Area Area End -->
|
||||
|
||||
|
||||
<!-- Portfolio Area Start -->
|
||||
<div class="project-gallery" id="project-gallery">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<div class="section-heading wow fadeInUp" data-wow-delay="0.2s">
|
||||
<h2 class="title">
|
||||
My <span class="color">Portfolio</span>
|
||||
<span class="bg-text">Portfolio</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="project-gallery-filter d-flex justify-content-center">
|
||||
<ul class="project-gallery-menu d-inline-block wow fadeInUp" data-wow-delay="0.3s">
|
||||
<li class="filter active" data-filter="all">All Cetagories</li>
|
||||
<li class="filter" data-filter=".cat-1">Marketing</li>
|
||||
<li class="filter" data-filter=".cat-2">Management</li>
|
||||
<li class="filter" data-filter=".cat-3">Consulting</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="row project-gallery-item">
|
||||
|
||||
<div class="mix col-md-6 col-lg-4 gallery-item cat-1 cat-3">
|
||||
<div class="gallery-item-content wow fadeInUp">
|
||||
<div class="item-thumbnail">
|
||||
<img src="/assets/images/work/7.jpg" alt="">
|
||||
<div class="content-overlay">
|
||||
<div class="content">
|
||||
<div class="links">
|
||||
<a href="portfolio-details.html" class="link"><i class="fas fa-link"></i></a>
|
||||
<a class="img-popup image-preview"
|
||||
href="/assets/images/work/7.jpg">
|
||||
<i class="fas fa-eye"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mix col-md-6 col-lg-4 gallery-item cat-3 cat-4">
|
||||
<div class="gallery-item-content wow fadeInUp">
|
||||
<div class="item-thumbnail">
|
||||
<img src="/assets/images/work/1.jpg" alt="">
|
||||
<div class="content-overlay">
|
||||
<div class="content">
|
||||
<div class="links">
|
||||
<a href="portfolio-details.html" class="link"><i class="fas fa-link"></i></a>
|
||||
<a class="img-popup image-preview"
|
||||
href="/assets/images/work/1.jpg">
|
||||
<i class="fas fa-eye"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mix col-md-6 col-lg-4 gallery-item cat-2 cat-1">
|
||||
<div class="gallery-item-content wow fadeInUp">
|
||||
<div class="item-thumbnail">
|
||||
<img src="/assets/images/work/2.jpg" alt="">
|
||||
<div class="content-overlay">
|
||||
<div class="content">
|
||||
<div class="links">
|
||||
<a href="portfolio-details.html" class="link"><i class="fas fa-link"></i></a>
|
||||
<a class="img-popup image-preview"
|
||||
href="/assets/images/work/2.jpg">
|
||||
<i class="fas fa-eye"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mix col-md-6 col-lg-4 gallery-item cat-1 cat-3">
|
||||
<div class="gallery-item-content wow fadeInUp">
|
||||
<div class="item-thumbnail">
|
||||
<img src="/assets/images/work/9.jpg" alt="">
|
||||
<div class="content-overlay">
|
||||
<div class="content">
|
||||
<div class="links">
|
||||
<a href="portfolio-details.html" class="link"><i class="fas fa-link"></i></a>
|
||||
<a class="img-popup image-preview"
|
||||
href="/assets/images/work/9.jpg">
|
||||
<i class="fas fa-eye"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mix col-md-6 col-lg-4 gallery-item cat-3 cat-4">
|
||||
<div class="gallery-item-content wow fadeInUp">
|
||||
<div class="item-thumbnail">
|
||||
<img src="/assets/images/work/5.jpg" alt="">
|
||||
<div class="content-overlay">
|
||||
<div class="content">
|
||||
<div class="links">
|
||||
<a href="portfolio-details.html" class="link"><i class="fas fa-link"></i></a>
|
||||
<a class="img-popup image-preview"
|
||||
href="/assets/images/work/5.jpg">
|
||||
<i class="fas fa-eye"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mix col-md-6 col-lg-4 gallery-item cat-1 cat-2">
|
||||
<div class="gallery-item-content wow fadeInUp">
|
||||
<div class="item-thumbnail">
|
||||
<img src="/assets/images/work/3.jpg" alt="">
|
||||
<div class="content-overlay">
|
||||
<div class="content">
|
||||
<div class="links">
|
||||
<a href="portfolio-details.html" class="link"><i class="fas fa-link"></i></a>
|
||||
<a class="img-popup image-preview"
|
||||
href="/assets/images/work/3.jpg">
|
||||
<i class="fas fa-eye"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mix col-md-6 col-lg-4 gallery-item cat-4 cat-2">
|
||||
<div class="gallery-item-content wow fadeInUp">
|
||||
<div class="item-thumbnail">
|
||||
<img src="/assets/images/work/4.jpg" alt="">
|
||||
<div class="content-overlay">
|
||||
<div class="content">
|
||||
<div class="links">
|
||||
<a href="portfolio-details.html" class="link"><i class="fas fa-link"></i></a>
|
||||
<a class="img-popup image-preview"
|
||||
href="/assets/images/work/4.jpg">
|
||||
<i class="fas fa-eye"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mix col-md-6 col-lg-4 gallery-item cat-3 cat-2">
|
||||
<div class="gallery-item-content wow fadeInUp">
|
||||
<div class="item-thumbnail">
|
||||
<img src="/assets/images/work/6.jpg" alt="">
|
||||
<div class="content-overlay">
|
||||
<div class="content">
|
||||
<div class="links">
|
||||
<a href="portfolio-details.html" class="link"><i class="fas fa-link"></i></a>
|
||||
<a class="img-popup image-preview"
|
||||
href="/assets/images/work/6.jpg">
|
||||
<i class="fas fa-eye"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mix col-md-6 col-lg-4 gallery-item cat-3 cat-1">
|
||||
<div class="gallery-item-content wow fadeInUp">
|
||||
<div class="item-thumbnail">
|
||||
<img src="/assets/images/work/8.jpg" alt="">
|
||||
<div class="content-overlay">
|
||||
<div class="content">
|
||||
<div class="links">
|
||||
<a href="portfolio-details.html" class="link"><i class="fas fa-link"></i></a>
|
||||
<a class="img-popup image-preview"
|
||||
href="/assets/images/work/8.jpg">
|
||||
<i class="fas fa-eye"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12 text-center">
|
||||
<a href="portfolios.html" class="mybtn3 mybtn-bg wow fadeInUp"><span>View All</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Portfolio Area End -->
|
||||
|
||||
|
||||
<!-- Testimonial Start -->
|
||||
|
||||
<!-- Testimonial End -->
|
||||
|
||||
<!-- Pricing Area Start -->
|
||||
|
||||
<!-- Pricing Area End -->
|
||||
|
||||
<!-- Blog Area Start -->
|
||||
|
||||
<!-- Blog Area End -->
|
||||
|
||||
<!-- Contact Area Start -->
|
||||
<div class="contact" id="contact">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<div class="section-heading wow fadeInUp" data-wow-delay="0.2s">
|
||||
<h2 class="title">
|
||||
Get In <span class="color">Touch</span>
|
||||
<span class="bg-text">Contact</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<!-- Single Info -->
|
||||
<div class="single-info wow fadeInUp">
|
||||
<div class="info-icon">
|
||||
<i class="flaticon-placeholder"></i>
|
||||
</div>
|
||||
<div class="info-content">
|
||||
<h5>My Location:</h5>
|
||||
<p>700 Oak Street, Brockton MA 2301</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<!-- Single Info -->
|
||||
<div class="single-info wow fadeInUp">
|
||||
<div class="info-icon">
|
||||
<i class="flaticon-telephone"></i>
|
||||
</div>
|
||||
<div class="info-content">
|
||||
<h5>Phone Number:</h5>
|
||||
<p>+0123 123 856</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<!-- Single Info -->
|
||||
<div class="single-info wow fadeInUp">
|
||||
|
||||
<div class="info-icon">
|
||||
<i class="flaticon-email-2"></i>
|
||||
</div>
|
||||
<div class="info-contentr">
|
||||
<h5>Email Address:</h5>
|
||||
<p>demomail@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row cAndm">
|
||||
<div class="col-lg-6">
|
||||
<div class="home-page-form">
|
||||
<div class="contact-form">
|
||||
<form id="contact-form" action="#">
|
||||
<div class="controls">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<input id="name" type="text" name="name" class="form-control" placeholder="Name*"
|
||||
required="required" data-error="Name is required.">
|
||||
<div class="help-block with-errors"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<input id="email" type="email" name="email" class="form-control" placeholder="Email*"
|
||||
required="required" data-error="Valid email is required.">
|
||||
<div class="help-block with-errors"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group">
|
||||
<input id="subject" type="text" name="subject" class="form-control" placeholder="Subject*"
|
||||
required="required" data-error="Subject is required.">
|
||||
<div class="help-block with-errors"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group">
|
||||
<textarea id="message" name="message" class="form-control" placeholder="Message*" rows="7"
|
||||
required="required" data-error="Please,leave us a message."></textarea>
|
||||
<div class="help-block with-errors"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<button type="submit" class="mybtn3 mybtn-bg"><span>Send Message</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form> <!-- End Contact From -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="google_map_wrapper">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d196281.12937357728!2d-104.99519427659213!3d39.76451867231318!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x876b80aa231f17cf%3A0x118ef4f8278a36d6!2sDenver%2C%20CO%2C%20USA!5e0!3m2!1sen!2sbd!4v1592721407423!5m2!1sen!2sbd"
|
||||
frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.row-->
|
||||
</div>
|
||||
<!--/.container-->
|
||||
</div>
|
||||
<!-- Contact Area End -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
277
app/components/home/MainMenuArea.vue
Normal file
277
app/components/home/MainMenuArea.vue
Normal file
@@ -0,0 +1,277 @@
|
||||
<script setup lang="ts">
|
||||
import type { Home, Setting, MainMenu } from "~/types";
|
||||
|
||||
interface Props {
|
||||
home?: Home | null;
|
||||
setting?: Setting | null;
|
||||
menu?: MainMenu | null;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
const apiUrl = computed(() => config.public.BASE_API_URL || 'http://127.0.0.1:8000')
|
||||
|
||||
|
||||
// Helper function to get full image URL
|
||||
const getImageUrl = (imagePath: string | null | undefined) => {
|
||||
if (!imagePath) return '/assets/images/about3.jpg'
|
||||
if (imagePath.startsWith('http')) return imagePath
|
||||
return `${apiUrl.value}${imagePath}`
|
||||
}
|
||||
|
||||
// Current active section tracking
|
||||
const route = useRoute()
|
||||
|
||||
// Initialize currentSection based on route hash (works on both server and client)
|
||||
const initializeCurrentSection = () => {
|
||||
if (route.hash) {
|
||||
return route.hash.replace('#', '')
|
||||
}
|
||||
return 'home'
|
||||
}
|
||||
|
||||
const currentSection = ref(initializeCurrentSection())
|
||||
|
||||
// Handle hash navigation for menu items
|
||||
const handleHashNavigation = (event: Event, hash: string) => {
|
||||
const route = useRoute()
|
||||
|
||||
// If we're not on the home page, navigate to home first
|
||||
if (route.path !== '/') {
|
||||
event.preventDefault()
|
||||
navigateTo('/' + hash)
|
||||
return
|
||||
}
|
||||
|
||||
// On home page, handle smooth scroll
|
||||
event.preventDefault()
|
||||
|
||||
if (import.meta.client) {
|
||||
const targetId = hash.replace('#', '')
|
||||
|
||||
// Handle home section - scroll to top
|
||||
if (targetId === 'home') {
|
||||
currentSection.value = 'home'
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
window.history.pushState(null, '', '/')
|
||||
return
|
||||
}
|
||||
|
||||
// Handle other sections
|
||||
const targetElement = document.getElementById(targetId)
|
||||
|
||||
if (targetElement) {
|
||||
// Update current section
|
||||
currentSection.value = targetId
|
||||
|
||||
// Smooth scroll to element
|
||||
targetElement.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
})
|
||||
|
||||
// Update URL hash without page jump
|
||||
window.history.pushState(null, '', hash)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Check if menu item is active
|
||||
const isMenuActive = (path: string) => {
|
||||
// Extract hash from path (e.g., "/#about" -> "about")
|
||||
const pathHash = path.includes('#') ? path.split('#')[1] : ''
|
||||
|
||||
if (import.meta.server) {
|
||||
// Server-side: URL hash kontrolü
|
||||
if (path === '/') {
|
||||
// Home is active only if there's no hash
|
||||
return route.path === '/' && !route.hash
|
||||
}
|
||||
// Other sections: check if route hash matches
|
||||
const routeHash = route.hash.replace('#', '')
|
||||
return routeHash === pathHash
|
||||
}
|
||||
|
||||
// Client-side: currentSection state kullan
|
||||
if (path === '/') {
|
||||
return currentSection.value === '' || currentSection.value === 'home'
|
||||
}
|
||||
|
||||
return currentSection.value === pathHash
|
||||
}
|
||||
|
||||
// Update current section based on scroll
|
||||
const updateCurrentSection = () => {
|
||||
if (import.meta.client) {
|
||||
const sections = ['home', 'about', 'service', 'resume', 'project-gallery', 'contact']
|
||||
const scrollPosition = window.scrollY + 100
|
||||
|
||||
for (const section of sections) {
|
||||
const element = document.getElementById(section)
|
||||
if (element) {
|
||||
const { offsetTop, offsetHeight } = element
|
||||
if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
|
||||
currentSection.value = section
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Default to home if no section matched
|
||||
if (scrollPosition < 100) {
|
||||
currentSection.value = 'home'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Reinitialize menu on mount and route change
|
||||
onMounted(() => {
|
||||
// Add scroll listener
|
||||
window.addEventListener('scroll', updateCurrentSection)
|
||||
|
||||
// Wait for DOM to be fully ready
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
initializeMenu()
|
||||
reinitWow()
|
||||
updateCurrentSection()
|
||||
}, 100)
|
||||
})
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (import.meta.client) {
|
||||
window.removeEventListener('scroll', updateCurrentSection)
|
||||
}
|
||||
})
|
||||
|
||||
watch(() => route.path, () => {
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
initializeMenu()
|
||||
reinitWow()
|
||||
updateCurrentSection()
|
||||
}, 100)
|
||||
})
|
||||
})
|
||||
|
||||
// Also watch for hash changes
|
||||
watch(() => route.hash, (newHash) => {
|
||||
if (newHash) {
|
||||
currentSection.value = newHash.replace('#', '')
|
||||
} else {
|
||||
currentSection.value = 'home'
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
initializeMenu()
|
||||
}, 100)
|
||||
})
|
||||
})
|
||||
|
||||
const initializeMenu = () => {
|
||||
if (import.meta.client && (window as any).$) {
|
||||
// Disable jQuery onePageNav plugin completely - we handle everything with Vue
|
||||
const $mainmenu = (window as any).$('#mainmenu-area')
|
||||
if ($mainmenu.length) {
|
||||
// Remove any existing onePageNav bindings
|
||||
$mainmenu.off('click.onePageNav')
|
||||
// Don't initialize onePageNav at all - Vue handles everything
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const reinitWow = () => {
|
||||
if (import.meta.client && (window as any).WOW) {
|
||||
// Only reinitialize WOW for menu items, not profile area
|
||||
const menuItems = document.querySelectorAll('#mainmenu-area li a.wow')
|
||||
menuItems.forEach((item) => {
|
||||
item.classList.remove('animated', 'fadeInUp')
|
||||
// Force reflow
|
||||
void (item as HTMLElement).offsetWidth
|
||||
item.classList.add('animated', 'fadeInUp')
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="side-menu-wrapper">
|
||||
<div class="menu-toogle-icon">
|
||||
<div id="nav-icon3">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="side-menu">
|
||||
<div class="heading-area">
|
||||
<a href="/" class="profile-photo">
|
||||
<img :src="getImageUrl(home?.image)" :alt="home?.name || 'Profile'">
|
||||
</a>
|
||||
<div class="name">
|
||||
{{ home?.name || 'Atahan Deniz' }}
|
||||
</div>
|
||||
</div>
|
||||
<ul id="mainmenu-area">
|
||||
<li :class="{ current: isMenuActive('/') }">
|
||||
<NuxtLink to="/" @click="handleHashNavigation($event, '#home')" class="wow fadeInUp" data-wow-delay="0.4s">
|
||||
<i class="fas fa-home"></i> {{ menu?.home || 'Anasayfa' }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li :class="{ current: isMenuActive('/#about') }">
|
||||
<NuxtLink to="/#about" @click="handleHashNavigation($event, '#about')" class="wow fadeInUp" data-wow-delay="0.4s">
|
||||
<i class="fas fa-user"></i> {{ menu?.about || 'Hakkımda' }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li :class="{ current: isMenuActive('/#service') }">
|
||||
<NuxtLink to="/#service" @click="handleHashNavigation($event, '#service')" class="wow fadeInUp" data-wow-delay="0.4s">
|
||||
<i class="fas fa-briefcase"></i> {{ menu?.services || 'Hizmetlerim' }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li :class="{ current: isMenuActive('/#resume') }">
|
||||
<NuxtLink to="/#resume" @click="handleHashNavigation($event, '#resume')" class="wow fadeInUp" data-wow-delay="0.4s">
|
||||
<i class="fas fa-file-alt"></i> {{ menu?.resume || 'Becerilerim' }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li :class="{ current: isMenuActive('/#project-gallery') }">
|
||||
<NuxtLink to="/#project-gallery" @click="handleHashNavigation($event, '#project-gallery')" class="wow fadeInUp" data-wow-delay="0.4s">
|
||||
<i class="fas fa-layer-group"></i> {{ menu?.portfolio || 'Portfolio' }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li :class="{ current: isMenuActive('/#contact') }">
|
||||
<NuxtLink to="/#contact" @click="handleHashNavigation($event, '#contact')" class="wow fadeInUp" data-wow-delay="0.4s">
|
||||
<i class="fas fa-check-square"></i> {{ menu?.contact || 'İletişim' }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Ensure menu items are always visible */
|
||||
#mainmenu-area li {
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
#mainmenu-area li a {
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
/* Ensure profile photo and name are always visible */
|
||||
.heading-area .profile-photo,
|
||||
.heading-area .profile-photo img,
|
||||
.heading-area .name {
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
</style>
|
||||
14
app/layouts/default.vue
Normal file
14
app/layouts/default.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<slot/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
802
app/pages/index.vue
Normal file
802
app/pages/index.vue
Normal file
@@ -0,0 +1,802 @@
|
||||
<script setup lang="ts">
|
||||
import BackToTopStart from "~/components/home/BackToTopStart.vue";
|
||||
import MainMenuArea from "~/components/home/MainMenuArea.vue";
|
||||
import type {
|
||||
Home,
|
||||
Setting,
|
||||
AboutMe,
|
||||
Service,
|
||||
ServiceTitle,
|
||||
Resume,
|
||||
Category,
|
||||
MainMenu,
|
||||
OpenClose,
|
||||
Bundle
|
||||
} from "~/types";
|
||||
import Preloader from "~/components/Preloader.vue";
|
||||
|
||||
const token = ref('')
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
const apiUrl = computed(() => config.public.BASE_API_URL || 'http://127.0.0.1:8000')
|
||||
|
||||
const {data: openClose} = await useFetch<OpenClose>(`${apiUrl.value}/api/v1/open-close/`)
|
||||
const {data: bundle} = await useFetch<Bundle>(`${apiUrl.value}/api/v1/bundle/`)
|
||||
const {data: categories} = await useFetch<Category[]>(`${apiUrl.value}/api/v1/categories/`)
|
||||
|
||||
const home = computed(() => bundle.value?.home)
|
||||
const aboutme = computed(() => bundle.value?.about_me)
|
||||
const services_title = computed(() => bundle.value?.service_title)
|
||||
const resume = computed(() => bundle.value?.resume)
|
||||
const menu = computed(() => bundle.value?.main_menu)
|
||||
const services = computed(() => bundle.value?.services)
|
||||
|
||||
// Setting and Categories are not present in the bundle JSON provided.
|
||||
// We initialize them as undefined or empty to prevent errors in template.
|
||||
const setting = computed(() => undefined)
|
||||
//const categories = computed(() => categories?.value)
|
||||
|
||||
// make a typed, safe array for template iteration
|
||||
const servicesArray = computed(() => (services.value as Service[] | undefined) ?? [])
|
||||
const categoriesArray = computed(() => (categories.value as Category[] | undefined) ?? [])
|
||||
|
||||
// Helper function to get full image URL
|
||||
const getImageUrl = (imagePath: string | null | undefined) => {
|
||||
if (!imagePath) return '/assets/images/work/placeholder.jpg'
|
||||
if (imagePath.startsWith('http')) return imagePath
|
||||
return `${apiUrl.value}${imagePath}`
|
||||
}
|
||||
|
||||
const selectedCategoryId = ref<number | 'all'>('all')
|
||||
|
||||
const normalizeCategoryIds = (
|
||||
categories?: Array<number | { id: number | null } | null>
|
||||
) => {
|
||||
return (categories || [])
|
||||
.map((entry) => (typeof entry === 'number' ? entry : entry?.id ?? null))
|
||||
.filter((id): id is number => typeof id === 'number')
|
||||
}
|
||||
|
||||
// Flatten all portfolio items from all categories, deduplicated by id
|
||||
const portfolioItems = computed(() => {
|
||||
if (!categories.value) return []
|
||||
const byId = new Map<number, any>()
|
||||
|
||||
for (const category of categories.value) {
|
||||
for (const portfolio of category.portfolio_categories || []) {
|
||||
const categoryIds = normalizeCategoryIds(portfolio.categories)
|
||||
|
||||
if (category?.id && !categoryIds.includes(category.id)) {
|
||||
categoryIds.push(category.id)
|
||||
}
|
||||
|
||||
const existing = byId.get(portfolio.id)
|
||||
if (existing) {
|
||||
const merged = Array.from(new Set([...existing.categoryIds, ...categoryIds]))
|
||||
existing.categoryIds = merged
|
||||
existing.categoryClasses = merged.map((id: number) => `cat-${id}`).join(' ')
|
||||
continue
|
||||
}
|
||||
|
||||
byId.set(portfolio.id, {
|
||||
...portfolio,
|
||||
categoryIds,
|
||||
categoryClasses: categoryIds.map((id: number) => `cat-${id}`).join(' ')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return Array.from(byId.values())
|
||||
})
|
||||
|
||||
const filteredPortfolioItems = computed(() => {
|
||||
const selected = selectedCategoryId.value
|
||||
const items = selected === 'all'
|
||||
? portfolioItems.value
|
||||
: portfolioItems.value.filter((item: any) =>
|
||||
Array.isArray(item.categoryIds) && item.categoryIds.includes(selected)
|
||||
)
|
||||
// Anasayfada maksimum 6 portfolio göster
|
||||
return items.slice(0, 6)
|
||||
})
|
||||
|
||||
/**
|
||||
* Strip HTML and truncate to `max` characters, returning plain text.
|
||||
*/
|
||||
const truncateHtml = (html?: string, max = 120) => {
|
||||
if (!html) return ''
|
||||
// remove HTML tags
|
||||
const text = html.replace(/<\/?[^>]+(>|$)/g, '')
|
||||
if (text.length <= max) return text
|
||||
return text.slice(0, max).trim() + '...'
|
||||
}
|
||||
|
||||
// Contact form state
|
||||
const contactForm = ref({
|
||||
name: '',
|
||||
email: '',
|
||||
subject: '',
|
||||
message: ''
|
||||
})
|
||||
|
||||
const isSubmitting = ref(false)
|
||||
const submitMessage = ref('')
|
||||
const submitError = ref('')
|
||||
|
||||
// Contact form submit handler
|
||||
const handleContactSubmit = async (event: Event) => {
|
||||
event.preventDefault()
|
||||
|
||||
// Reset messages
|
||||
submitMessage.value = ''
|
||||
submitError.value = ''
|
||||
|
||||
// Validate turnstile token
|
||||
if (!token.value) {
|
||||
submitError.value = 'Lütfen captcha doğrulamasını tamamlayın'
|
||||
return
|
||||
}
|
||||
|
||||
// Validate form fields
|
||||
if (!contactForm.value.name || !contactForm.value.email ||
|
||||
!contactForm.value.subject || !contactForm.value.message) {
|
||||
submitError.value = 'Lütfen tüm alanları doldurun'
|
||||
return
|
||||
}
|
||||
|
||||
isSubmitting.value = true
|
||||
|
||||
try {
|
||||
const response = await $fetch('/api/contact/post.create', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
name: contactForm.value.name,
|
||||
email: contactForm.value.email,
|
||||
subject: contactForm.value.subject,
|
||||
message: contactForm.value.message
|
||||
}
|
||||
})
|
||||
|
||||
// @ts-expect-error - API response type
|
||||
submitMessage.value = response?.message || 'Mesajınız başarıyla gönderildi!'
|
||||
|
||||
// Reset form
|
||||
contactForm.value = {
|
||||
name: '',
|
||||
email: '',
|
||||
subject: '',
|
||||
message: ''
|
||||
}
|
||||
|
||||
// Reset turnstile
|
||||
token.value = ''
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('Contact form error:', error)
|
||||
submitError.value = error?.data?.statusMessage || 'Mesaj gönderilirken bir hata oluştu'
|
||||
} finally {
|
||||
isSubmitting.value = false
|
||||
}
|
||||
}
|
||||
// http://212.64.215.243:1337/api/homes?filters[published&populate=*
|
||||
// http://127.0.0.1:8000/api/v1/services/
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="openClose?.site_active">
|
||||
<!-- <preloader/>-->
|
||||
<!--Main-Menu Area Start-->
|
||||
<main-menu-area :home="home" :setting="setting" :menu="menu"/>
|
||||
<!--Main-Menu Area Start-->
|
||||
<!-- Main Content Area Start -->
|
||||
<div class="main-content">
|
||||
<div class="main-content-inner">
|
||||
|
||||
<!-- About div Start -->
|
||||
<div class="home-section" id="home">
|
||||
<ClientOnly>
|
||||
<div class="particals"></div>
|
||||
</ClientOnly>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-6">
|
||||
<div class="home-content">
|
||||
<div class="home-image">
|
||||
<img :src="getImageUrl(home?.image)" :alt="home?.name" class="wow zoomIn" data-wow-delay="0.2s">
|
||||
</div>
|
||||
<div class="home-main-content">
|
||||
<h4 class="heading wow fadeInUp" data-wow-delay="0.3s">
|
||||
{{ home?.name }}
|
||||
</h4>
|
||||
<div class="social-info wow fadeInUp" data-wow-delay="0.5s">
|
||||
<ul>
|
||||
<li>
|
||||
<a :href="setting?.facebook">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a :href="setting?.x">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a :href="setting?.linkedin">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a :href="setting?.instagram">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a :href="setting?.pinterest">
|
||||
<i class="fab fa-pinterest-p"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- About div End -->
|
||||
|
||||
<!-- About div Start -->
|
||||
<div v-if="aboutme?.is_active" class="about-section" id="about">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<div class="section-heading wow fadeInUp" data-wow-delay="0.2s">
|
||||
<h2 class="title">
|
||||
{{ aboutme?.title }} <span class="color"></span>
|
||||
<span class="bg-text">{{ aboutme?.title }}</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="about">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="about-image wow fadeInUp" data-wow-delay="0.3s">
|
||||
<img :src="getImageUrl(aboutme?.image)" :alt="aboutme?.title">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-lg-8 align-self-center">
|
||||
<div class="short-description wow fadeInUp">
|
||||
<div v-if="aboutme?.image_sub" v-html="aboutme.image_sub"></div>
|
||||
<div class="about-links">
|
||||
<a v-if="aboutme?.cv" :href="aboutme.cv" download class="mybtn3 mybtn-bg">
|
||||
<span>CV Indir</span> </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="about-content wow fadeInUp">
|
||||
<div class="personal-info">
|
||||
<ul>
|
||||
<li>
|
||||
<span><label>Yaş Günü:</label> {{ aboutme?.birthday }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span><label>Yaşım:</label> {{ aboutme?.age }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span><label>Şehir:</label> {{ aboutme?.city }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span><label>İlgi Alanları:</label> {{ aboutme?.interests }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span><label>Üniversite:</label> {{ aboutme?.study }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span><label>Derecelendirme:</label> {{ aboutme?.degree }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span><label>Website:</label> <a :href="aboutme?.website"
|
||||
target="_blank">{{ aboutme?.website }}</a></span>
|
||||
</li>
|
||||
<li>
|
||||
<span><label>E-Posta:</label> <a :href="`mailto:${aboutme?.mail}`">{{ aboutme?.mail }}</a></span>
|
||||
</li>
|
||||
<li>
|
||||
<span><label>Telefon:</label> <a :href="`tel:${aboutme?.phone}`">{{ aboutme?.phone }}</a></span>
|
||||
</li>
|
||||
<li>
|
||||
<span><label>X:</label> <a :href="aboutme?.x" target="_blank">{{ aboutme?.x }}</a></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- About div End -->
|
||||
|
||||
<!-- Counter Area Start -->
|
||||
<div v-if="aboutme?.counter_active" class="counter-area">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="single-counter wow fadeInUp">
|
||||
<img src="/assets/images/icon/005-target.png" alt="">
|
||||
<ClientOnly>
|
||||
<div class="counter-wrapper">
|
||||
<div class="counter">{{ aboutme?.done || 80 }}</div>
|
||||
<span>k+</span>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
<p class="text">
|
||||
{{ aboutme?.project_done || 'Project Done' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="single-counter wow fadeInUp">
|
||||
<img src="/assets/images/icon/002-medical-mask.png" alt="">
|
||||
<ClientOnly>
|
||||
<div class="counter-wrapper">
|
||||
<div class="counter">{{ aboutme?.user_h || 19 }}</div>
|
||||
<span>k+</span>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
<p class="text">
|
||||
{{ aboutme?.hapy_user || 'Happy User' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="single-counter wow fadeInUp">
|
||||
<img src="/assets/images/icon/053-success-1.png" alt="">
|
||||
<ClientOnly>
|
||||
<div class="counter-wrapper">
|
||||
<div class="counter">{{ aboutme?.great || 39 }}</div>
|
||||
<span>k+</span>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
<p class="text">
|
||||
{{ aboutme?.great_reviews || 'Great Reviews' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="single-counter wow fadeInUp">
|
||||
<img src="/assets/images/icon/045-hacker.png" alt="">
|
||||
<ClientOnly>
|
||||
<div class="counter-wrapper">
|
||||
<div class="counter">{{ aboutme?.team || 25 }}</div>
|
||||
<span>+</span>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
<p class="text">
|
||||
{{ aboutme?.support_team || 'Support Team' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Counter Area End -->
|
||||
|
||||
<!-- My service Start -->
|
||||
<div v-if="services_title?.is_active" class="service-wrapper" id="service">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<div class="section-heading wow fadeInUp" data-wow-delay="0.2s">
|
||||
<h2 class="title">
|
||||
{{ services_title?.title }} <span class="color"></span>
|
||||
<span class="bg-text">{{ services_title?.title_sub }}</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<template v-for="servis in servicesArray" :key="servis.id">
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<NuxtLink :to="`/services/${servis.slug}`" class="single-feature wow fadeInUp">
|
||||
<img :src="getImageUrl(servis?.image)" :alt="servis?.title">
|
||||
<ClientOnly>
|
||||
<div class="content">
|
||||
<h4 class="title">
|
||||
{{ truncateHtml(servis?.title,21) }}
|
||||
</h4>
|
||||
<p>{{ truncateHtml(servis?.content) }}</p>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- My service End -->
|
||||
|
||||
<!-- Resume Area Start -->
|
||||
<div v-if="resume?.is_active" class="resume-wrapper" id="resume">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<div class="section-heading wow fadeInUp" data-wow-delay="0.2s">
|
||||
<h2 class="title">
|
||||
{{ resume?.title }} <span class="color"></span>
|
||||
<span class="bg-text">{{ resume?.title_sub }}</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="resume-box">
|
||||
<div class="resume-title">
|
||||
<h4 class="title">
|
||||
{{resume?.education}}
|
||||
</h4>
|
||||
</div>
|
||||
<div class="education-list">
|
||||
<div v-for="edu in resume?.edu_resume" :key="edu.id" class="single-education wow fadeInUp">
|
||||
<div class="year">
|
||||
<span>{{ edu.between_years }}</span>
|
||||
</div>
|
||||
<h4 class="university-name">
|
||||
{{ edu.title }}
|
||||
</h4>
|
||||
<p class="degree">{{ edu.content }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="resume-box">
|
||||
<div class="resume-title">
|
||||
<h4 class="title">
|
||||
{{resume?.experience}}
|
||||
</h4>
|
||||
</div>
|
||||
<div class="education-list">
|
||||
<div v-for="exp in resume?.exp_resume" :key="exp.id" class="single-education wow fadeInUp">
|
||||
<div class="year">
|
||||
<span>{{ exp.between_years }}</span>
|
||||
</div>
|
||||
<h4 class="university-name">
|
||||
{{ exp.title }}
|
||||
</h4>
|
||||
<p class="degree">{{ exp.content }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="resume-box">
|
||||
<div class="resume-title">
|
||||
<h4 class="title">
|
||||
{{resume?.coding_skills}}
|
||||
</h4>
|
||||
</div>
|
||||
<div class="skill-list">
|
||||
<div v-for="skill in resume?.skill_resume" :key="skill.id" class="single-skill wow fadeInUp">
|
||||
<div class="heading">
|
||||
<h4 class="name">
|
||||
{{ skill.title }}
|
||||
</h4>
|
||||
<h5 class="value">
|
||||
{{ skill.degree }}%
|
||||
</h5>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
|
||||
:aria-valuenow="skill.degree" aria-valuemin="0" aria-valuemax="100"
|
||||
:style="`width: ${skill.degree}%`"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="resume-box">
|
||||
<div class="resume-title">
|
||||
<h4 class="title">
|
||||
{{resume?.knowledge}}
|
||||
</h4>
|
||||
</div>
|
||||
<div class="knowledge-list wow fadeInUp">
|
||||
<div v-for="know in resume?.know_resume" :key="know.id" class="single-knowledge">
|
||||
<p>
|
||||
{{ know.title }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Resume Area End -->
|
||||
|
||||
<!-- My Client Area Area Strat -->
|
||||
|
||||
<!-- My Client Area Area End -->
|
||||
|
||||
|
||||
<!-- Portfolio Area Start -->
|
||||
<div class="project-gallery" id="project-gallery">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<div class="section-heading wow fadeInUp" data-wow-delay="0.2s">
|
||||
<h2 class="title">
|
||||
<span class="color">Portfolio</span>
|
||||
<span class="bg-text">Portfolio</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="project-gallery-filter d-flex justify-content-center">
|
||||
<ul class="project-gallery-menu d-inline-block wow fadeInUp" data-wow-delay="0.3s">
|
||||
<li
|
||||
:class="['filter', { active: selectedCategoryId === 'all' }]"
|
||||
data-filter="all"
|
||||
@click="selectedCategoryId = 'all'"
|
||||
>
|
||||
Tümü
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-for="category in categoriesArray"
|
||||
:key="category?.id"
|
||||
:class="['filter', { active: selectedCategoryId === category?.id }]"
|
||||
:data-filter="`.cat-${category?.id}`"
|
||||
@click="selectedCategoryId = category?.id"
|
||||
>
|
||||
{{ category?.title }}
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="row project-gallery-item">
|
||||
|
||||
<div
|
||||
v-for="portfolio in filteredPortfolioItems"
|
||||
:key="portfolio.id"
|
||||
:class="['col-md-6', 'col-lg-4', 'gallery-item', portfolio.categoryClasses]"
|
||||
>
|
||||
<div class="gallery-item-content wow fadeInUp">
|
||||
<div class="item-thumbnail">
|
||||
<img :src="getImageUrl(portfolio.image)" alt="">
|
||||
<div class="content-overlay">
|
||||
<div class="content">
|
||||
<div class="links">
|
||||
<a :href="portfolio.url" target="_blank" rel="noopener noreferrer" class="link">
|
||||
<i class="fas fa-link" />
|
||||
</a>
|
||||
<a
|
||||
class="img-popup image-preview"
|
||||
:href="getImageUrl(portfolio.image)"
|
||||
>
|
||||
<i class="fas fa-eye" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12 text-center">
|
||||
<NuxtLink to="/portfolio" class="mybtn3 mybtn-bg wow fadeInUp"><span>Hepsini Gör</span></NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Portfolio Area End -->
|
||||
|
||||
|
||||
<!-- Testimonial Start -->
|
||||
|
||||
<!-- Testimonial End -->
|
||||
|
||||
<!-- Pricing Area Start -->
|
||||
|
||||
<!-- Pricing Area End -->
|
||||
|
||||
<!-- Blog Area Start -->
|
||||
|
||||
<!-- Blog Area End -->
|
||||
|
||||
<!-- Contact Area Start -->
|
||||
<div class="contact" id="contact">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<div class="section-heading wow fadeInUp" data-wow-delay="0.2s">
|
||||
<h2 class="title">
|
||||
<span class="color">İletişim</span>
|
||||
<span class="bg-text">İletişim</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<!-- Single Info -->
|
||||
<div class="single-info wow fadeInUp">
|
||||
<div class="info-icon">
|
||||
<i class="flaticon-placeholder"></i>
|
||||
</div>
|
||||
<div class="info-content">
|
||||
<h5>Şehir:</h5>
|
||||
<p>{{ aboutme?.city || '700 Oak Street, Brockton MA 2301' }}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<!-- Single Info -->
|
||||
<div class="single-info wow fadeInUp">
|
||||
<div class="info-icon">
|
||||
<i class="flaticon-telephone"></i>
|
||||
</div>
|
||||
<div class="info-content">
|
||||
<h5>Telefon:</h5>
|
||||
<p>{{ setting?.phone || '+0123 123 856' }}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<!-- Single Info -->
|
||||
<div class="single-info wow fadeInUp">
|
||||
|
||||
<div class="info-icon">
|
||||
<i class="flaticon-email-2"></i>
|
||||
</div>
|
||||
<div class="info-contentr">
|
||||
<h5>E-Posta:</h5>
|
||||
<p>{{ setting?.email || 'demomail@gmail.com' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row cAndm">
|
||||
<div class="col-lg-6">
|
||||
<div class="home-page-form">
|
||||
<div class="contact-form">
|
||||
<form id="contact-form" @submit="handleContactSubmit">
|
||||
<!-- Success/Error Messages -->
|
||||
<div v-if="submitMessage" class="alert alert-success" role="alert">
|
||||
{{ submitMessage }}
|
||||
</div>
|
||||
<div v-if="submitError" class="alert alert-danger" role="alert">
|
||||
{{ submitError }}
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<input
|
||||
id="name"
|
||||
v-model="contactForm.name"
|
||||
type="text"
|
||||
name="name"
|
||||
class="form-control"
|
||||
placeholder="İsim Soyisim *"
|
||||
required
|
||||
:disabled="isSubmitting">
|
||||
<div class="help-block with-errors"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<input
|
||||
id="email"
|
||||
v-model="contactForm.email"
|
||||
type="email"
|
||||
name="email"
|
||||
class="form-control"
|
||||
placeholder="E-Posta *"
|
||||
required
|
||||
:disabled="isSubmitting">
|
||||
<div class="help-block with-errors"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group">
|
||||
<input
|
||||
id="subject"
|
||||
v-model="contactForm.subject"
|
||||
type="text"
|
||||
name="subject"
|
||||
class="form-control"
|
||||
placeholder="Konu *"
|
||||
required
|
||||
:disabled="isSubmitting">
|
||||
<div class="help-block with-errors"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group">
|
||||
<textarea
|
||||
id="message"
|
||||
v-model="contactForm.message"
|
||||
name="message"
|
||||
class="form-control"
|
||||
placeholder="Mesajınız *"
|
||||
rows="7"
|
||||
required
|
||||
:disabled="isSubmitting"></textarea>
|
||||
<div class="help-block with-errors"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center my-3">
|
||||
<NuxtTurnstile v-model="token" class="w-100 d-flex justify-content-center" />
|
||||
</div>
|
||||
|
||||
<div class="col-md-12">
|
||||
<button
|
||||
type="submit"
|
||||
class="mybtn3 mybtn-bg"
|
||||
:disabled="isSubmitting">
|
||||
<span>{{ isSubmitting ? 'Gönderiliyor...' : 'Gönder' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form> <!-- End Contact From -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="google_map_wrapper">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d48163.351005043995!2d28.738157687720992!3d41.02067366506668!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14caa4102814e62d%3A0xf17358ce73944614!2zS8O8w6fDvGvDp2VrbWVjZS_EsHN0YW5idWw!5e0!3m2!1str!2str!4v1768471478488!5m2!1str!2str" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.row-->
|
||||
</div>
|
||||
<!--/.container-->
|
||||
</div>
|
||||
<!-- Contact Area End -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Content Area End -->
|
||||
<back-to-top-start/>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
41
app/pages/menu-test.vue
Normal file
41
app/pages/menu-test.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div style="padding: 20px;">
|
||||
<h1>Menu Debug Page</h1>
|
||||
|
||||
<div style="margin: 20px 0; padding: 20px; background: #f0f0f0;">
|
||||
<h2>Raw Menu Data:</h2>
|
||||
<pre>{{ JSON.stringify(menu, null, 2) }}</pre>
|
||||
</div>
|
||||
|
||||
<div style="margin: 20px 0; padding: 20px; background: #e0e0e0;">
|
||||
<h2>Menu Items:</h2>
|
||||
<ul>
|
||||
<li>Home: {{ menu?.home }}</li>
|
||||
<li>About: {{ menu?.about }}</li>
|
||||
<li>Services: {{ menu?.services }}</li>
|
||||
<li>Resume: {{ menu?.resume }}</li>
|
||||
<li>Portfolio: {{ menu?.portfolio }}</li>
|
||||
<li>Contact: {{ menu?.contact }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style="margin: 20px 0; padding: 20px; background: #d0d0d0;">
|
||||
<h2>Test Display:</h2>
|
||||
<p>{{ menu?.home || 'Anasayfa' }}</p>
|
||||
<p>{{ menu?.about || 'Hakkımda' }}</p>
|
||||
<p>{{ menu?.services || 'Hizmetlerim' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { MainMenu } from "~/types";
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
const apiUrl = computed(() => config.public.BASE_API_URL || 'http://127.0.0.1:8000')
|
||||
|
||||
const {data: menu} = await useFetch<MainMenu>(`${apiUrl.value}/api/v1/main-menu/`)
|
||||
|
||||
console.log('Menu Test Page - menu:', menu.value)
|
||||
</script>
|
||||
|
||||
223
app/pages/portfolio/index.vue
Normal file
223
app/pages/portfolio/index.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import MainMenuArea from "~/components/home/MainMenuArea.vue";
|
||||
import type {Home, Setting, Category, PortfolioCategory, MainMenu, OpenClose} from "~/types";
|
||||
|
||||
// jQuery ve Magnific Popup için window tipini genişlet
|
||||
interface WindowWithJQuery extends Window {
|
||||
$?: any;
|
||||
}
|
||||
|
||||
declare const window: WindowWithJQuery;
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
const apiUrl = computed(() => config.public.BASE_API_URL || 'http://127.0.0.1:8000')
|
||||
const {data: openClose} = await useFetch<OpenClose>(`${apiUrl.value}/api/v1/open-close/`)
|
||||
|
||||
const {data: setting} = await useFetch<Setting>(`${apiUrl.value}/api/v1/settings/`)
|
||||
const {data: home} = await useFetch<Home>(`${apiUrl.value}/api/v1/home/`)
|
||||
const {data: menu} = await useFetch<MainMenu>(`${apiUrl.value}/api/v1/main-menu/`)
|
||||
const {data: categories} = await useFetch<Category[]>(`${apiUrl.value}/api/v1/categories/`)
|
||||
|
||||
|
||||
// Tüm portfolioları toplama
|
||||
const allPortfolios = computed(() => {
|
||||
if (!categories.value) return []
|
||||
const portfolios: PortfolioCategory[] = []
|
||||
categories.value.forEach(category => {
|
||||
category.portfolio_categories.forEach(portfolio => {
|
||||
if (!portfolios.find(p => p.id === portfolio.id)) {
|
||||
portfolios.push(portfolio)
|
||||
}
|
||||
})
|
||||
})
|
||||
return portfolios
|
||||
})
|
||||
|
||||
// Seçili kategori
|
||||
const selectedCategory = ref<number | null>(null)
|
||||
|
||||
// Filtrelenmiş portfoliolar
|
||||
const filteredPortfolios = computed(() => {
|
||||
if (!selectedCategory.value || !categories.value) return allPortfolios.value
|
||||
const category = categories.value.find(c => c.id === selectedCategory.value)
|
||||
return category ? category.portfolio_categories : []
|
||||
})
|
||||
|
||||
// Pagination
|
||||
const currentPage = ref(1)
|
||||
const itemsPerPage = 8
|
||||
const totalPages = computed(() => Math.ceil(filteredPortfolios.value.length / itemsPerPage))
|
||||
|
||||
const paginatedPortfolios = computed(() => {
|
||||
const start = (currentPage.value - 1) * itemsPerPage
|
||||
const end = start + itemsPerPage
|
||||
return filteredPortfolios.value.slice(start, end)
|
||||
})
|
||||
|
||||
// Kategori seçme
|
||||
const selectCategory = (categoryId: number | null) => {
|
||||
selectedCategory.value = categoryId
|
||||
currentPage.value = 1
|
||||
}
|
||||
|
||||
// Sayfa değiştirme
|
||||
const changePage = (page: number) => {
|
||||
if (page >= 1 && page <= totalPages.value) {
|
||||
currentPage.value = page
|
||||
}
|
||||
}
|
||||
|
||||
// Magnific Popup'ı başlat
|
||||
const initMagnificPopup = () => {
|
||||
if (typeof window !== 'undefined' && window.$) {
|
||||
window.$('.img-popup').magnificPopup({
|
||||
type: 'image',
|
||||
gallery: {
|
||||
enabled: false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Component mount olduğunda ve sayfa değiştiğinde popup'ı yeniden başlat
|
||||
onMounted(() => {
|
||||
// jQuery ve Magnific Popup'ın yüklenmesi için biraz bekliyoruz
|
||||
setTimeout(() => {
|
||||
initMagnificPopup()
|
||||
}, 100)
|
||||
})
|
||||
|
||||
// Sayfa veya kategori değiştiğinde popup'ı yeniden başlat
|
||||
watch([currentPage, selectedCategory], () => {
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
initMagnificPopup()
|
||||
}, 100)
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template >
|
||||
<div v-if="openClose?.site_active">
|
||||
<main-menu-area :home="home" :setting="setting" :menu="menu"/>
|
||||
<!-- Main Content Area Start -->
|
||||
<div class="main-content">
|
||||
<div class="main-content-inner">
|
||||
<!-- Portfolios Area Start -->
|
||||
<section class="portfolios-page">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="row">
|
||||
<div v-for="portfolio in paginatedPortfolios" :key="portfolio.id" class="col-lg-6 col-md-6">
|
||||
<div class="gallery-item-content">
|
||||
<div class="item-thumbnail">
|
||||
<img :src="`${apiUrl}${portfolio.image}`" :alt="portfolio.url">
|
||||
<div class="content-overlay">
|
||||
<div class="content">
|
||||
<div class="links">
|
||||
<a :href="portfolio.url" target="_blank" class="link"><i class="fas fa-link"></i></a>
|
||||
<a class="img-popup image-preview"
|
||||
:href="`${apiUrl}${portfolio.image}`">
|
||||
<i class="fas fa-eye"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 d-flex justify-content-center">
|
||||
<nav v-if="totalPages > 1" aria-label="Page navigation example">
|
||||
<ul class="pagination">
|
||||
<li class="page-item" :class="{ disabled: currentPage === 1 }">
|
||||
<a class="page-link" href="#" @click.prevent="changePage(currentPage - 1)" aria-label="Previous">
|
||||
<span aria-hidden="true"><i class="fas fa-angle-double-left"></i></span>
|
||||
</a>
|
||||
</li>
|
||||
<li v-for="page in totalPages" :key="page" class="page-item">
|
||||
<a class="page-link" :class="{ active: currentPage === page }" href="#" @click.prevent="changePage(page)">{{ page }}</a>
|
||||
</li>
|
||||
<li class="page-item" :class="{ disabled: currentPage === totalPages }">
|
||||
<a class="page-link" href="#" @click.prevent="changePage(currentPage + 1)" aria-label="Next">
|
||||
<span aria-hidden="true"><i class="fas fa-angle-double-right"></i></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
|
||||
<div class="categori-widget">
|
||||
<h4 class="title">
|
||||
Kategoriler
|
||||
</h4>
|
||||
<ul class="cat-list">
|
||||
<li>
|
||||
<a href="#" @click.prevent="selectCategory(null)" :class="{ active: selectedCategory === null }">
|
||||
<p>
|
||||
All
|
||||
</p>
|
||||
<span class="count">
|
||||
{{ allPortfolios.length }}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li v-for="category in categories" :key="category.id">
|
||||
<a href="#" @click.prevent="selectCategory(category.id)" :class="{ active: selectedCategory === category.id }">
|
||||
<p>
|
||||
{{ category.title }}
|
||||
</p>
|
||||
<span class="count">
|
||||
{{ category.portfolio_categories.length }}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <div class="latest-post-widget">
|
||||
<h4 class="title">
|
||||
Latest Projects
|
||||
</h4>
|
||||
<ul class="post-list">
|
||||
<li v-for="project in latestProjects" :key="project.id">
|
||||
<div class="post">
|
||||
<div class="post-img">
|
||||
<img :src="`${apiUrl}${project.image}`" alt="">
|
||||
</div>
|
||||
<div class="post-details">
|
||||
<a :href="project.url" target="_blank" class="post-title">
|
||||
{{ project.url }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Portfolios Area End -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Content Area End -->
|
||||
|
||||
|
||||
<!-- Back to Top Start -->
|
||||
<div class="bottomtotop">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
<!-- Back to Top End -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
11
app/pages/services/[slug].vue
Normal file
11
app/pages/services/[slug].vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>SERVİCES</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
217
app/types/index.ts
Normal file
217
app/types/index.ts
Normal file
@@ -0,0 +1,217 @@
|
||||
export interface Tag {
|
||||
tag: string;
|
||||
}
|
||||
|
||||
export interface Home {
|
||||
name: string;
|
||||
title: string;
|
||||
button1: string;
|
||||
button2: string;
|
||||
keywords: string;
|
||||
tags: Tag[];
|
||||
image: string;
|
||||
video?: string;
|
||||
slug: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
is_active: boolean;
|
||||
}
|
||||
|
||||
export interface Setting {
|
||||
title: string;
|
||||
meta_title: string;
|
||||
meta_description: string;
|
||||
phone: string;
|
||||
url: string;
|
||||
email: string;
|
||||
facebook: string;
|
||||
x: string;
|
||||
instagram: string;
|
||||
linkedin?: string;
|
||||
pinterest?: string;
|
||||
whatsapp: string;
|
||||
slogan: string;
|
||||
w_logo: string;
|
||||
b_logo: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
is_active: boolean;
|
||||
}
|
||||
|
||||
export interface AboutMe {
|
||||
title: string;
|
||||
image: string;
|
||||
image_sub: string;
|
||||
cv: string;
|
||||
birthday: string;
|
||||
city: string;
|
||||
study: string;
|
||||
website: string;
|
||||
phone: string;
|
||||
age: string;
|
||||
interests: string;
|
||||
degree: string;
|
||||
x: string;
|
||||
mail: string;
|
||||
project_done: string;
|
||||
hapy_user: string;
|
||||
great_reviews: string;
|
||||
support_team: string;
|
||||
slug: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
is_active: boolean;
|
||||
counter_active: boolean;
|
||||
done: number;
|
||||
user_h: number;
|
||||
great: number;
|
||||
team: number;
|
||||
}
|
||||
|
||||
export interface Service {
|
||||
id?: number;
|
||||
title: string;
|
||||
image: string;
|
||||
content: string;
|
||||
slug: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
is_active: boolean;
|
||||
}
|
||||
|
||||
export interface ServiceTitle {
|
||||
title: string;
|
||||
title_sub: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
is_active: boolean;
|
||||
}
|
||||
|
||||
export interface EduResume {
|
||||
id: number;
|
||||
between_years: string;
|
||||
title: string;
|
||||
content: string;
|
||||
resume: number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
is_active: boolean;
|
||||
}
|
||||
|
||||
export interface ExpResume {
|
||||
id: number;
|
||||
between_years: string;
|
||||
title: string;
|
||||
content: string;
|
||||
resume: number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
is_active: boolean;
|
||||
}
|
||||
|
||||
export interface SkillResume {
|
||||
id: number;
|
||||
title: string;
|
||||
degree: number;
|
||||
resume: number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
is_active: boolean;
|
||||
}
|
||||
|
||||
export interface KnowResume {
|
||||
id: number;
|
||||
title: string;
|
||||
resume: number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
is_active: boolean;
|
||||
}
|
||||
|
||||
export interface Resume {
|
||||
id: number;
|
||||
title: string;
|
||||
title_sub: string;
|
||||
edu_resume: EduResume[];
|
||||
exp_resume: ExpResume[];
|
||||
skill_resume: SkillResume[];
|
||||
know_resume: KnowResume[];
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
is_active: boolean;
|
||||
education: string;
|
||||
experience: string;
|
||||
coding_skills: string;
|
||||
knowledge: string;
|
||||
}
|
||||
|
||||
export interface PortfolioCategory {
|
||||
id: number;
|
||||
url: string;
|
||||
image: string;
|
||||
parent: number | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
is_active: boolean;
|
||||
}
|
||||
|
||||
export interface Category {
|
||||
id: number;
|
||||
title: string;
|
||||
parent: number | null;
|
||||
is_active: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
order: number;
|
||||
slug: string;
|
||||
image: string | null;
|
||||
keywords: string;
|
||||
description: string;
|
||||
portfolio_categories: PortfolioCategory[];
|
||||
}
|
||||
|
||||
export type CategoriesResponse = Category[];
|
||||
|
||||
export interface MainMenu {
|
||||
id: number;
|
||||
home: string;
|
||||
about: string;
|
||||
services: string;
|
||||
resume: string;
|
||||
portfolio: string;
|
||||
contact: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
is_active: boolean;
|
||||
}
|
||||
|
||||
export interface OpenClose {
|
||||
is_active: boolean;
|
||||
site_active: boolean;
|
||||
}
|
||||
|
||||
export interface Bundle {
|
||||
home: Home;
|
||||
about_me: AboutMe;
|
||||
service_title: ServiceTitle;
|
||||
resume: Resume;
|
||||
main_menu: MainMenu;
|
||||
services: Service[];
|
||||
education: EduResume[];
|
||||
experience: ExpResume[];
|
||||
skills: SkillResume[];
|
||||
knowledge: KnowResume[];
|
||||
}
|
||||
|
||||
export interface Bundle {
|
||||
home: Home;
|
||||
about_me: AboutMe;
|
||||
service_title: ServiceTitle;
|
||||
resume: Resume;
|
||||
main_menu: MainMenu;
|
||||
services: Service[];
|
||||
education: EduResume[];
|
||||
experience: ExpResume[];
|
||||
skills: SkillResume[];
|
||||
knowledge: KnowResume[];
|
||||
}
|
||||
Reference in New Issue
Block a user