Skip to content

Commit

Permalink
about page
Browse files Browse the repository at this point in the history
  • Loading branch information
@ayushsaranGithuB
ayushsaranGithuB committed Aug 14, 2024
1 parent e22835f commit 07ddd2f
Show file tree
Hide file tree
Showing 5 changed files with 250 additions and 35 deletions.
2 changes: 1 addition & 1 deletion public/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ main {


a {
color: var(--primary);
color: var(--blue-primary);
text-decoration: none;
}

Expand Down
135 changes: 126 additions & 9 deletions public/home.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,8 @@

.about span.hero-image {
background-image: url('/public/images/creative-commons.svg');
background-position: center center;
width: 30%;
}


Expand Down Expand Up @@ -155,13 +157,9 @@
margin: 0 0 80px;
}

/* different margins for about page */

.about .page-header .content,
.about .secondary .inner-content {
grid-area: 2 / 2 / 2 / 3;
max-width: 100ch;
margin: 40px auto;
.centered {
text-align: center;
}


Expand Down Expand Up @@ -250,7 +248,7 @@ div.tutorials-large {
background-color: var(--tutorial-fill);
border-radius: var(--border-r-l);
padding: 15px 25px;
border: 2px solid var(--white-primary);
border: 2px solid var(--blue-primary);
font-size: 13px;
box-shadow: 8px 8px 2px rgba(0, 0, 0, 0.028);
transition: all 0.8s ease;
Expand Down Expand Up @@ -449,8 +447,120 @@ div.tutorials-medium {
display: block;
}

/* ABOUT PAGE --------------------------- */


.about .page-header .content p {
margin: 0 0 30px;
}

.about .secondary {
margin-top: 0;
padding-top: 0px;
font-size: 18px;
}

/* different margins for about page */

.about .page-header .content,
.about .secondary .inner-content {
grid-area: 2 / 2 / 2 / 3;
max-width: 90ch;
margin: 40px auto;
}


.about .secondary h2 {
padding-top: 50px;
}

.about .secondary h3 {
padding-top: 50px;
}


.about .secondary ul {
margin: 40px auto 60px;
list-style: none;
text-align: left;
padding: 0;
}

.about .secondary ul li {
margin-bottom: 50px;
border-top: 1px solid var(--border-secondary);
padding-top: 40px;
font-size: 15px;
}


.about .secondary ul h4 {
font-size: 24px;
margin: 0 0 5px;
}

li.video {
display: flex;
column-gap: 20px;
justify-content: center;
}


li.video .thumbnail {
width: 50%;
max-width: 400px;
aspect-ratio: 16/9;
overflow: hidden;
max-width: 400px;
display: flex;
align-items: center;
border-radius: var(--border-r-m);
position: relative;
}

li.video .thumbnail::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('/public/images/circle-play-white.svg') center center no-repeat;
background-size: 20%;
pointer-events: none;
opacity: 0.85;
transition: all 0.3s ease;
}

li.video:hover .thumbnail::after {
background-size: 25%;
}

li.video .info {
width: 50%;
max-width: 500px;
}

li.video .thumbnail img {
width: 100%;
}


li.video .info p {
margin: 0 0 20px;
color: var(--text-secondary);
line-height: 1.5;

}

li.video .info p.author {
font-size: 14px;
font-style: italic;
color: var(--text-secondary);
}

/* ALL RESPONSIVE STYLES */

/* RESPONSIVE STYLES --------------------------- */

#mobile-menu-checkbox {
display: none;
Expand Down Expand Up @@ -565,7 +675,6 @@ div.tutorials-medium {

/* page header */



.secondary {
padding: 40px 0;
Expand Down Expand Up @@ -647,4 +756,12 @@ div.tutorials-medium {
word-wrap: break-word;
}

.about li.video {
flex-direction: column;
}

.about li.video div {
width: 100%;
}

}
14 changes: 14 additions & 0 deletions public/images/circle-play-white.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
129 changes: 109 additions & 20 deletions src/about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ <h4>
Learning TypeScript should be accessible to everyone, without the frustration of being interrupted by ads or pressured into paying for 'premium' content.
</p>
<p>
The open-source nature of TypeScript inspired me to create a learning platform that’s just as open—free from barriers, so you can focus on what really matters: Learning Typescript.
The open-source nature of TypeScript inspired me to create a learning platform that's just as open—free from barriers, so you can focus on what really matters: Learning Typescript.
</p>
<h3>
This project is built on the belief that education, especially in the realm of programming, should be as accessible and open as the tools we use every day.
Expand All @@ -38,15 +38,15 @@ <h3>
Whether you're a seasoned developer looking to deepen your TypeScript skills or a newcomer eager to learn, you deserve a resource that's transparent, straightforward, and completely free.
</p>
<p>
Every lesson, exercise, and project is designed with one goal in mind: to provide you with a high-quality learning experience that doesn’t come with strings attached. Here, you can learn at your own pace, without worrying about subscription costs or unnecessary distractions.
Every lesson, exercise, and project is designed with one goal in mind: to provide you with a high-quality learning experience that doesn't come with strings attached. Here, you can learn at your own pace, without worrying about subscription costs or unnecessary distractions.
</p>
<p>
By keeping the learning process as open-source as TypeScript itself, we aim to foster a community where knowledge is shared freely, and everyone has the opportunity to grow and succeed."
</p>

<p>
<h4>
To keep with the spirit of openness, this entire project is not only free to use but also open-source and shared under the Creative Commons license.
</p>
</h4>

<p>
This means you can access, share, and even contribute to the content freely.
Expand All @@ -73,62 +73,151 @@ <h3>
</section>


<section class="about secondary">
<section class="about secondary centered">
<div class="inner-content">
<h3>

<h2>
Other Resources
</h3>
</h2>
<p>
There are tons of excellent resources to learn TypeScript out there on the web.
<br />
Here are some that I personally recommend:
</p>


<h2>
<h3>
Video Tutorials
</h2>
</h3>

<p>
Sometimes It's just easier to watch rather than read about something and seeing someone else work through a project makes it feel less daunting to get started, so here are some I enjoyed watching and learnt a lot from:
</p>

<ul class="video-list">
<li class="video">
<a href="https://www.youtube.com/watch?v=BwuLxPH8IDs" target="_blank">
<img src="/public/images/video1.png" alt="Video 1" />
<div class="thumbnail">
<a href="https://www.youtube.com/watch?v=BwuLxPH8IDs" target="_blank">
<img src="https://i.ytimg.com/vi/2pZmKW9-I_k/sddefault.jpg" alt="Video 1" />
</a>
</div>
<div class="info">
<h4>
Introduction to TypeScript
<a href="https://www.youtube.com/watch?v=BwuLxPH8IDs" target="_blank">
TypeScript Tutorial Playlist
</a>
</h4>
<p>
by Academind
<p class="author">
by NetNinja
</p>
<p class="note">
Shaun aka NetNinja is a great teacher and his TypeScript tutorial series is a great place to start. He also offers a lot of other tutorials on web development and his teaching style is very easy to follow.
</p>
</a>

</div>
</li>
<li class="video">
<div class="thumbnail">
<a href="https://www.youtube.com/watch?v=WBPrJSw7yQA" target="_blank">
<img src="https://i.ytimg.com/vi/WBPrJSw7yQA/sddefault.jpg" alt="Video 2" />
</a>
</div>
<div class="info">
<h4>
<a href="https://www.youtube.com/watch?v=WBPrJSw7yQA" target="_blank">
TypeScript Crash Course
</a>
</h4>
<p class="author">
by Traversy Media
</p>
<p class="note">
Brad Traversy offer a lot of great tutorials on web development and his TypeScript crash course is another good place to start if you're looking to get up to speed quickly.
</p>
</div>
</li>
<li class="video">
<div class="thumbnail">
<a href="https://www.youtube.com/watch?v=ahCwqrYpIuM" target="_blank">
<img src="https://i.ytimg.com/vi/ahCwqrYpIuM/sddefault.jpg" alt="Video 3" />
</a>
</div>
<div class="info">
<h4>
<a href="https://www.youtube.com/watch?v=ahCwqrYpIuM" target="_blank">
TypeScript - The Basics
</a>
</h4>
<p class="author">
by Fireship
</p>
<p class="note">
Fireship offers a lot of great tutorials on web development and his TypeScript Basics video is a great way to get a quick overview on the topic.
</p>
</div>
</li>
</ul>




<h2>
<h3>
Online Courses
</h2>
</h3>

<p>
Having a good teacher can make the difference between ‘Getting It’ and feeling totally lost. Here are some tutorials backed by great teachers that are totally worth paying for if you want to really immerse into TypeScript.
</p>

<ul class="online-courses">
<li>
<h4>
<a href="https://learntypescript.online/" target="_blank">
LearnTypescript.online
</a>
</h4>
<p class="author">
by Jad Joubran
</p>
<p class="note">
An excellent course that covers everything from the basics to advanced topics. Jad is a great teacher and his course is well worth the investment.
</p>
</li>
</ul>


<h2>

<h3>
Tutorial Websites
</h2>
</h3>

<p>
Some other great places to find TypeScript tutorials:
</p>

<ul class="websites">
<li>
<h4>
<a href="https://www.typescriptlang.org/docs/" target="_blank">
TypeScript Official Documentation
</a>
</h4>
<p class="note">
The official TypeScript documentation is a great place to start if you're looking for a comprehensive guide to the language.
</p>
</li>
<li>
<h4>
<a href="https://www.tutorialspoint.com/typescript/index.htm" target="_blank">
TutorialsPoint
</a>
</h4>
<p class="note">
TutorialsPoint offers a lot of great tutorials on web development and their TypeScript tutorial is another good place to start.
</p>
</li>

</ul>

</div>
</section>

Expand Down
Loading

0 comments on commit 07ddd2f

Please sign in to comment.