Skip to content

added projects section #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jayantk45 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

added projects section #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6bb69c4
added projects section
jayantk45 Oct 6, 2023
cd2d4ab
compressed images
jayantk45 Oct 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 10 additions & 50 deletions namaste-react/assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1767,60 +1767,15 @@ section {
}

/* -------------------------------------------------- */
/* ANDROID APP */

.perks{
display: flex;
flex-direction: column;
align-items: center;
}

.android-btn{
width:200px;
height:60px;
border:none;
background-color:#ddd;
outline:none;
cursor:pointer;
transition:background-color 0.2s;
}

.btn__logo{
width:30px;
height:30px;
float:left;

margin: 10px 0 14px 20px;
position:relative;
}
/* projects */

.btn__content{
width: 110px;
height:28px;
font-size:12px;
float:right;
margin-right:15px;
text-align:left;
.project-box{
margin-top: -30px;
}

.btn__content--big{
height:22px;
font-size:22px;
margin-top:4px;
}

.btn--android{
background-color:#a2c437;
color:#fff;
}

.btn--android:hover{
background-color: #6e9000;
color:#fff;
}

.btn--radius{
border-radius:30px;
.project-title{
margin-top: 30px;
}

/* -------------------------------------- */
Expand All @@ -1834,4 +1789,9 @@ section {
font-size: 1rem;
margin-left: 20px;
}

.project-box{
margin-top: -30px;
margin-left: 0px;
}
}
Binary file added namaste-react/assets/img/projects/FoodApp Project.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added namaste-react/assets/img/projects/Youtube Project.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added namaste-react/assets/img/projects/netflix Project.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
260 changes: 175 additions & 85 deletions namaste-react/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -522,7 +522,7 @@ <h4>Akshay Saini</h4>
</div>
<div class="section-title" data-aos="fade-up">
<p>
Akshay Saini has taught more than 2 lakh+ developers and
Akshay Saini has taught more than 3 lakh+ developers and
counting...<br />
All the concepts are taught by Akshay himself.
</p>
Expand All @@ -531,103 +531,193 @@ <h4>Akshay Saini</h4>
</section>
<!-- End Team Section -->

<!-- ===================== ANDROID APP ================= -->
<!-- <div class="android-app section-title ">
<h4>💡 Now watch <b>Namaste JavaScript without any Ads</b></h4>
<h5>Download the <b>NamasteDev Android App</b><br> 👇👇👇</h5>
<a href="https://play.google.com/store/apps/details?id=com.namastedev.courses"><img title="Download now🚀" class="android-logo" src="../images/androidLogo.png" width="200px" alt="android_logo"></a>
</div> -->
<!-- Projects -->

<!-- ======= Android app section ======= -->
<!-- <section id="mission" class="about">
<section class="d-flex align-items-center hero">
<div class="container">
<div class="section-title" data-aos="fade-up">
<h2>Android App</h2>
<p>Download the NamasteDev Android App🚀</p>
<h2>PROJECTS COVERED</h2>
<p>These are the awesome projects covered in the Namaste React WebSeries, with the topics covered in each project🚀</p>
</div>

<div class="row d-flex justify-content-center">
<div class="col-lg-8" data-aos="fade-up" data-aos-delay="150">
<div class="perks">
<h5><b>💡 Perks of the App :</b></h5>
<ul>
<li>NO Ads</li>
<li>Download in-app videos</li>
<li>High Quality Streaming</li>
<li>Offline Access</li>
</ul>
<h4 class="section-title project-title" data-aos="fade-up">1. `NetflixGPT` - a movie recommendation App with GPT-3.5 turbo integration🔥</h4>
<br><br>
<div class="row project-box">

<div
class="col-lg-6 order-1 order-lg-1 projects"
data-aos="fade-left"
data-aos-delay="200"
>
<img src="assets/img/projects/netflix Project.jpg" style="border-radius: 2%; border: 1px solid black;" width="100%" height="300px" />
</div>

<div
class="col-lg-6 pt-5 pt-lg-0 order-2 order-lg-2 d-flex flex-column justify-content-center"
>

<div style="margin: -10px 0 30px 0">
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ GPT Search recommendation using the latest GPT-3.5 Turbo API🚀
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ Authentication - Sign Up, Log In, Sign Out
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ Form Handling, and Form validations
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ Advanced Tailwind
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ useRef hook
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ covered the concept of memoization
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ Build Multi-Language support
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ Advanced data handling with Redux Toolkit
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ Fully Responsive on mobile as well as web
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ Use of .env files to secure secret API keys
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ Working with Live API data
</h3>
</div>

</div>

</div>

<div class="section-title">
<p>
🔥 Keep <b>Namaste React</b> and <b>Namaste Javascript</b> in
your pocket.
</p>
<p>❤️ Learn anywhere anytime on your phone now.</p>
<hr>

<h4 class="section-title project-title" data-aos="fade-up">2. `Namaste YouTube` - Our own YouTube like webApp with Live chat feature🔥</h4>
<br><br>
<div class="row project-box">

<div
class="col-lg-6 order-1 order-lg-1 projects"
data-aos="fade-left"
data-aos-delay="200"
>
<img src="assets/img/projects/Youtube Project.jpg" style="border-radius: 2%; border: 1px solid black;" width="100%" height="300px" />
</div>

<div
class="col-lg-6 pt-5 pt-lg-0 order-2 order-lg-2 d-flex flex-column justify-content-center"
>

<div style="margin: -10px 0 30px 0">
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ Machine coding questions && discussion.
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ Live YouTube search bar with autocomplete functionality
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ Nested Comments feature.
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ LIVE CHAT system with anonymous chat on the watch page for interactive engagement
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ Shimmer UI effect for a polished look
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ Infinite scroll for a seamless browsing experience
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ Live YouTube video feed using YouTube API
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ Search video results by typing ahead
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ Advanced data handling with Redux Toolkit
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ Fully Responsive on mobile as well as web
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ Optimized API calls through caching for future use
</h3>
</div>

</div>

</div>

<hr>

<h4 class="section-title project-title" data-aos="fade-up">3. `Namaste Food` - Food ordering app just like Swiggy🔥</h4>
<br><br>
<div class="row project-box">

<div
class="col-lg-6 order-1 order-lg-1 projects"
data-aos="fade-left"
data-aos-delay="200"
>
<img src="assets/img/projects/FoodApp Project.jpg" style="border-radius: 2%; border: 1px solid black;" width="100%" height="300px" />
</div>

<div class="section-title">
<a
href="https://play.google.com/store/apps/details?id=com.namastedev.courses"
>
<button class="android-btn btn--android btn--radius">
<svg
class="btn__logo"
version="1.1"
id="Ebene_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="708.662px"
height="708.662px"
viewBox="0 0 708.662 708.662"
enable-background="new 0 0 708.662 708.662"
xml:space="preserve"
>
<path
id="c"
fill="#FFFFFF"
d="M607.229,229.405L607.229,229.405c-26.838,0-48.596,21.756-48.596,48.594v172.106
c0,26.838,21.758,48.594,48.596,48.594l0,0c26.839,0,48.595-21.756,48.595-48.594V277.997
C655.823,251.159,634.067,229.405,607.229,229.405z"
/>
<path
fill="#FFFFFF"
d="M538.536,220.405c0-62.651-36.705-117.381-91.341-146.892l27.939-50.406
c3.523-6.357,1.228-14.368-5.131-17.893c-6.357-3.523-14.367-1.228-17.891,5.131l-28.973,52.267
c-21.274-7.918-44.514-12.287-68.859-12.287c-27.511,0-53.606,5.574-77.05,15.552l-30.781-55.53
c-3.524-6.357-11.534-8.654-17.892-5.131c-6.357,3.523-8.654,11.534-5.13,17.893l30.344,54.741
c-50.414,30.348-83.744,82.855-83.744,142.557L538.536,220.405L538.536,220.405z M264.242,148.322
c-6.039,0-10.933-4.895-10.933-10.933s4.895-10.935,10.933-10.935c6.038,0,10.933,4.896,10.933,10.935
S270.28,148.322,264.242,148.322z M434.322,148.322c-6.039,0-10.933-4.895-10.933-10.933c0-6.037,4.894-10.935,10.933-10.935
s10.932,4.896,10.932,10.935C445.253,143.427,440.361,148.322,434.322,148.322z"
/>
<path
fill="#FFFFFF"
d="M170.241,240.093v269.753c0,24.602,19.943,44.545,44.545,44.545h17.06v92.115
c0,26.838,21.756,48.594,48.594,48.594s48.594-21.756,48.594-48.594v-92.115h40.496v92.115c0,26.838,21.756,48.594,48.594,48.594
s48.594-21.756,48.594-48.594v-92.115h27.486c24.602,0,44.545-19.943,44.545-44.545V240.093H170.241z"
/>
<path
id="c_2_"
fill="#FFFFFF"
d="M101.435,229.405L101.435,229.405c-26.838,0-48.596,21.756-48.596,48.594v172.106
c0,26.838,21.758,48.594,48.596,48.594l0,0c26.838,0,48.594-21.756,48.594-48.594V277.997
C150.028,251.159,128.272,229.405,101.435,229.405z"
/>
</svg>

<div class="btn__content btn__content--big">Download</div>
<div class="btn__content">on Google Play</div>
</button>
</a>
<div
class="col-lg-6 pt-5 pt-lg-0 order-2 order-lg-2 d-flex flex-column justify-content-center"
>

<div style="margin: -10px 0 30px 0">
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ React Project setup from scratch.
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ Deep dive into JSX and other core React features
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ More about Parcel
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ Understanding the basics of Tailwind CSS and setting it up
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ Deep Dive into all the important React Hooks
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ Exploring the React Routing World
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ Playing with Live API data, and handling it effectively, as it changes
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ Functional Vs Class Based Components
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ A Deep dive into Redux && Redux Toolkit.
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ Testing our App using Jest
</h3>
<h3 data-aos="fade-up" class="h3-header" data-aos-delay="400">
✅ Optimizing our App
</h3>
</div>

</div>

</div>


</div>
</section> -->
<!-- End of Android App Section -->
</section>

<!-- projects section -->


<!-- ======= Testimonials Section ======= -->
<section id="testimonials" class="testimonials section-bg">
Expand Down