├── components
├── layout
│ ├── Header
│ │ ├── Header.md
│ │ ├── logo.png
│ │ ├── Header.module.css
│ │ └── Header.tsx
│ ├── Section
│ │ ├── SectionContext
│ │ │ ├── TitleSection.module.css
│ │ │ ├── TitleSection.md
│ │ │ └── TitleSection.tsx
│ │ ├── Section.tsx
│ │ └── Section.md
│ ├── Main.tsx
│ └── Footer
│ │ ├── Footer.module.css
│ │ ├── FooterData.json
│ │ └── Footer.tsx
├── base
│ ├── Icon
│ │ ├── FrontendshipLogo.png
│ │ ├── Icon.tsx
│ │ ├── Icon.md
│ │ └── selection.json
│ └── Title
│ │ ├── Title.module.css
│ │ ├── Title.tsx
│ │ └── Title.md
├── sections
│ ├── Banner
│ │ ├── PlayButton.tsx
│ │ ├── playButton.json
│ │ ├── Banner.module.css
│ │ └── Banner.tsx
│ ├── Contributors
│ │ ├── Contributors.module.css
│ │ ├── Card
│ │ │ ├── Card.module.css
│ │ │ └── Card.tsx
│ │ └── Contributors.tsx
│ ├── Blog
│ │ ├── Card
│ │ │ ├── sample.json
│ │ │ ├── Card.module.scss
│ │ │ └── Card.tsx
│ │ └── Blog.tsx
│ ├── Brief
│ │ ├── Brief.module.css
│ │ ├── Brief.tsx
│ │ └── sample.json
│ └── GitHub
│ │ ├── GitHub.module.css
│ │ ├── GitHub.tsx
│ │ └── Card
│ │ ├── Card.module.css
│ │ └── Card.tsx
└── index.ts
├── .eslintrc.json
├── types
├── html.types.ts
├── style.types.ts
└── index.types.ts
├── public
├── cat.jpeg
├── icon.png
├── logo.png
├── banner-asset
│ ├── image1.png
│ ├── image2.png
│ └── image3.png
├── event-asset
│ ├── event1.png
│ ├── event2.png
│ ├── event3.png
│ ├── event4.png
│ └── event-main.png
├── contributors-asset
│ ├── photo-1.png
│ ├── photo-2.png
│ ├── photo-3.png
│ ├── photo-4.png
│ └── background.png
└── logo
│ └── logo.svg
├── styles
└── globals.css
├── postcss.config.js
├── .prettierrc
├── pages
├── _app.tsx
└── index.tsx
├── next.config.js
├── .gitignore
├── tsconfig.json
├── package.json
├── tailwind.config.js
├── LICENSE
├── README.md
└── contributing.md
/components/layout/Header/Header.md:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/types/html.types.ts:
--------------------------------------------------------------------------------
1 | export type HtmlHeadLevel = 1 | 2 | 3 | 4 | 5 | 6
2 |
--------------------------------------------------------------------------------
/public/cat.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontendship/website/HEAD/public/cat.jpeg
--------------------------------------------------------------------------------
/public/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontendship/website/HEAD/public/icon.png
--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontendship/website/HEAD/public/logo.png
--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
--------------------------------------------------------------------------------
/types/style.types.ts:
--------------------------------------------------------------------------------
1 | export type StyleTypes = {
2 | readonly [key: string]: string
3 | }
4 |
--------------------------------------------------------------------------------
/public/banner-asset/image1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontendship/website/HEAD/public/banner-asset/image1.png
--------------------------------------------------------------------------------
/public/banner-asset/image2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontendship/website/HEAD/public/banner-asset/image2.png
--------------------------------------------------------------------------------
/public/banner-asset/image3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontendship/website/HEAD/public/banner-asset/image3.png
--------------------------------------------------------------------------------
/public/event-asset/event1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontendship/website/HEAD/public/event-asset/event1.png
--------------------------------------------------------------------------------
/public/event-asset/event2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontendship/website/HEAD/public/event-asset/event2.png
--------------------------------------------------------------------------------
/public/event-asset/event3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontendship/website/HEAD/public/event-asset/event3.png
--------------------------------------------------------------------------------
/public/event-asset/event4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontendship/website/HEAD/public/event-asset/event4.png
--------------------------------------------------------------------------------
/components/layout/Header/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontendship/website/HEAD/components/layout/Header/logo.png
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/public/event-asset/event-main.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontendship/website/HEAD/public/event-asset/event-main.png
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 80,
3 | "singleQuote": true,
4 | "trailingComma": "all",
5 | "semi": false
6 | }
7 |
--------------------------------------------------------------------------------
/public/contributors-asset/photo-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontendship/website/HEAD/public/contributors-asset/photo-1.png
--------------------------------------------------------------------------------
/public/contributors-asset/photo-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontendship/website/HEAD/public/contributors-asset/photo-2.png
--------------------------------------------------------------------------------
/public/contributors-asset/photo-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontendship/website/HEAD/public/contributors-asset/photo-3.png
--------------------------------------------------------------------------------
/public/contributors-asset/photo-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontendship/website/HEAD/public/contributors-asset/photo-4.png
--------------------------------------------------------------------------------
/components/base/Icon/FrontendshipLogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontendship/website/HEAD/components/base/Icon/FrontendshipLogo.png
--------------------------------------------------------------------------------
/public/contributors-asset/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontendship/website/HEAD/public/contributors-asset/background.png
--------------------------------------------------------------------------------
/types/index.types.ts:
--------------------------------------------------------------------------------
1 | export interface IBlogCard {
2 | id: number
3 | title: string
4 | image: string
5 | path: string
6 | }
7 |
--------------------------------------------------------------------------------
/components/layout/Section/SectionContext/TitleSection.module.css:
--------------------------------------------------------------------------------
1 | .subTitle {
2 | @apply text-lg font-normal leading-7 mb-10 mx-6 max-w-2xl text-center text-[#656464];
3 | }
4 |
--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import '../styles/globals.css'
2 | import type { AppProps } from 'next/app'
3 |
4 | function MyApp({ Component, pageProps }: AppProps) {
5 | return
6 | }
7 |
8 | export default MyApp
9 |
--------------------------------------------------------------------------------
/components/base/Icon/Icon.tsx:
--------------------------------------------------------------------------------
1 | import IcoMoon, { IconProps } from 'react-icomoon'
2 | import iconSet from './selection.json'
3 |
4 | const Icon = (props: IconProps) =>
5 |
6 | export default Icon
7 |
--------------------------------------------------------------------------------
/components/sections/Banner/PlayButton.tsx:
--------------------------------------------------------------------------------
1 | import IcoMoon, { IconProps } from 'react-icomoon'
2 | import iconSet from './playButton.json'
3 |
4 | const Icon = (props: IconProps) =>
5 |
6 | export default Icon
7 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 | swcMinify: true,
5 | images: {
6 | domains: ['avatars.githubusercontent.com', 'images.pexels.com'],
7 | },
8 | }
9 |
10 | module.exports = nextConfig
11 |
--------------------------------------------------------------------------------
/components/sections/Contributors/Contributors.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | @apply bg-primary-blue-400 flex flex-col gap-[65px] justify-center items-center pt-20 pb-24 pl-4 pr-4;
3 | }
4 |
5 | .titleContainer {
6 | @apply relative flex flex-col justify-center items-center text-center;
7 | }
8 |
9 | .cardContainer {
10 | @apply grid md:grid-cols-2 xl:grid-cols-4 gap-8;
11 | }
12 |
--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import type { NextPage } from 'next'
2 |
3 | import { Event, Brief, GitHub, Banner, Contributors, Main } from 'components'
4 |
5 | const Home: NextPage = () => {
6 | return (
7 | <>
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | >
16 | )
17 | }
18 |
19 | export default Home
20 |
--------------------------------------------------------------------------------
/components/sections/Blog/Card/sample.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "title": "It Does Not Matter Hows Slowly go as Long",
4 | "img": "/cat.jpeg",
5 | "path": "/"
6 | },
7 | {
8 | "title": "Netbook Network Added New Photo Filter",
9 | "img": "/cat.jpeg",
10 | "path": "/"
11 | },
12 | {
13 | "title": "We Optimised Netbooks Better Navigation",
14 | "img": "/cat.jpeg",
15 | "path": "/"
16 | }
17 | ]
18 |
--------------------------------------------------------------------------------
/components/sections/Brief/Brief.module.css:
--------------------------------------------------------------------------------
1 | .card {
2 | @apply grid gap-8 grid-cols-1 mx-6 md:mx-0 md:grid-cols-3;
3 | }
4 | .cardContent {
5 | @apply flex flex-col justify-start items-start max-w-[386px] bg-white rounded-xl py-8 px-8;
6 | }
7 |
8 | .description {
9 | @apply text-primary-blue-400 opacity-50 font-normal;
10 | }
11 |
12 | .subDescription {
13 | @apply text-lg font-normal leading-7 mb-10 mx-6 max-w-2xl text-center text-[#656464];
14 | }
15 |
--------------------------------------------------------------------------------
/components/sections/Blog/Blog.tsx:
--------------------------------------------------------------------------------
1 | import Card from './Card/Card'
2 | import { SectionContainer, SectionContext } from 'components'
3 |
4 | const Blog = () => {
5 | return (
6 |
7 |
11 |
12 |
13 | )
14 | }
15 |
16 | export default Blog
17 |
--------------------------------------------------------------------------------
/components/layout/Main.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Header, Footer } from '../index'
3 | import Head from 'next/head'
4 |
5 | function Main({ children }: { children: React.ReactNode }) {
6 | return (
7 | <>
8 |
9 |
10 | Frontendship
11 |
12 |
13 | {children}
14 |
15 | >
16 | )
17 | }
18 |
19 | export default Main
20 |
--------------------------------------------------------------------------------
/components/layout/Section/Section.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react'
2 | interface Props {
3 | bgColor?: string
4 | children: ReactNode
5 | }
6 |
7 | const Section = (props: Props) => {
8 | return (
9 |
14 | {props.children}
15 |
16 | )
17 | }
18 |
19 | export default Section
20 |
--------------------------------------------------------------------------------
/components/base/Title/Title.module.css:
--------------------------------------------------------------------------------
1 | .title-h1 {
2 | @apply text-3xl font-bold mb-3 text-primary-blue-400 text-center md:text-5xl;
3 | }
4 |
5 | .title-h2 {
6 | @apply text-3xl font-bold mb-3 text-primary-blue-400 text-center md:text-5xl;
7 | }
8 |
9 | .title-h3 {
10 | @apply text-4xl;
11 | }
12 |
13 | .title-h4 {
14 | @apply text-3xl;
15 | }
16 |
17 | .title-h5 {
18 | @apply text-2xl;
19 | }
20 |
21 | .title-h6 {
22 | @apply text-xl font-semibold text-primary-blue-400 leading-none mb-[8px];
23 | }
24 |
--------------------------------------------------------------------------------
/components/sections/Contributors/Card/Card.module.css:
--------------------------------------------------------------------------------
1 | .cardContainer {
2 | @apply bg-gray-100 rounded-2xl pl-6 pr-6 pt-7 pb-7 xl:pt-7 xl:pr-12 xl:pl-12 xl:pb-7 flex flex-col justify-center items-center text-center;
3 | }
4 |
5 | .textWrapper {
6 | @apply mt-12;
7 | }
8 |
9 | .image {
10 | @apply w-[140px] h-[140px] object-cover rounded-full;
11 | }
12 |
13 | .name {
14 | @apply font-semibold text-2xl mb-3 text-[#2F2C4A];
15 | }
16 |
17 | .title {
18 | @apply font-normal text-[#656464] text-base;
19 | }
20 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 | yarn.lock
8 |
9 | # testing
10 | /coverage
11 |
12 | # next.js
13 | /.next/
14 | /out/
15 |
16 | # production
17 | /build
18 |
19 | # misc
20 | .DS_Store
21 | *.pem
22 |
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | .pnpm-debug.log*
28 |
29 | # local env files
30 | .env*.local
31 |
32 | # vercel
33 | .vercel
34 |
35 | # typescript
36 | *.tsbuildinfo
37 | next-env.d.ts
38 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true,
17 | "baseUrl": "."
18 | },
19 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
20 | "exclude": ["node_modules"]
21 | }
22 |
--------------------------------------------------------------------------------
/components/sections/Banner/playButton.json:
--------------------------------------------------------------------------------
1 | {
2 | "generatorSource": "svgps.app",
3 | "IcoMoonType": "selection",
4 | "icons": [
5 | {
6 | "icon": {
7 | "paths": [
8 | "M405.3 704l298.7-192-298.7-192ZM512 938.7q-88.5 0-166.4-33.7-77.9-33.6-135.5-91.1-57.6-57.6-91.1-135.5Q85.3 600.5 85.3 512t33.7-166.4q33.6-77.9 91.1-135.5 57.6-57.6 135.5-91.2Q423.5 85.3 512 85.3t166.4 33.6q77.9 33.6 135.5 91.2 57.6 57.6 91.1 135.5Q938.7 423.5 938.7 512t-33.7 166.4q-33.6 77.9-91.1 135.5-57.6 57.6-135.5 91.1Q600.5 938.7 512 938.7Z"
9 | ],
10 | "attrs": [{}],
11 | "width": 1024
12 | },
13 | "properties": { "name": "play-circle" }
14 | }
15 | ]
16 | }
17 |
--------------------------------------------------------------------------------
/components/base/Title/Title.tsx:
--------------------------------------------------------------------------------
1 | import { HtmlHeadLevel } from 'types/html.types'
2 | import ModuleStyles from './Title.module.css'
3 | import React from 'react'
4 | import { StyleTypes } from 'types/style.types'
5 |
6 | export type TitleProps = {
7 | level?: HtmlHeadLevel
8 | styles?: StyleTypes | string
9 | children: React.ReactNode
10 | className?: string
11 | }
12 |
13 | const Title = (props: TitleProps) => {
14 | const { level = 1, styles: propsStyles = ModuleStyles[`title-h${level}`] } =
15 | props
16 | return React.createElement(
17 | `h${level}`,
18 | {
19 | className: `${propsStyles} ${props.className && props.className}`,
20 | },
21 | props.children,
22 | )
23 | }
24 |
25 | export default Title
26 |
--------------------------------------------------------------------------------
/components/sections/Blog/Card/Card.module.scss:
--------------------------------------------------------------------------------
1 | .blogContainer {
2 | @apply grid gap-8 grid-cols-1 md:grid-cols-3 w-5/6 my-0 mx-auto justify-items-center;
3 | }
4 |
5 | .card {
6 | @apply max-w-[347px];
7 |
8 | .imgContainer {
9 | @apply w-full mb-6;
10 |
11 | .image {
12 | @apply object-cover rounded-[20px];
13 | }
14 | }
15 |
16 | .header {
17 | @apply flex items-baseline px-6;
18 |
19 | .title {
20 | @apply text-base lg:leading-8 lg:text-xl font-semibold;
21 | }
22 |
23 | .hr {
24 | @apply flex-initial w-[40px] h-[2px] bg-black mr-3 shrink-0;
25 | }
26 | }
27 |
28 | .readMore {
29 | @apply mt-6 text-primary-gray-400 text-base font-normal hover:cursor-pointer;
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "frontendship",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint",
10 | "format": "prettier --write --ignore-path .gitignore ."
11 | },
12 | "dependencies": {
13 | "next": "12.3.1",
14 | "react": "18.2.0",
15 | "react-dom": "18.2.0",
16 | "react-icomoon": "^2.5.4",
17 | "sass": "^1.55.0"
18 | },
19 | "devDependencies": {
20 | "@types/node": "18.11.0",
21 | "@types/react": "18.0.21",
22 | "@types/react-dom": "18.0.6",
23 | "autoprefixer": "^10.4.12",
24 | "eslint": "8.25.0",
25 | "eslint-config-next": "12.3.1",
26 | "postcss": "^8.4.18",
27 | "tailwindcss": "^3.2.1",
28 | "typescript": "4.8.4"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: [
4 | './pages/**/*.{js,ts,jsx,tsx}',
5 | './components/**/*.{js,ts,jsx,tsx}',
6 | ],
7 | theme: {
8 | fontFamily: {
9 | sans: ['Inter', 'sans-serif'],
10 | },
11 | extend: {
12 | colors: {
13 | primaryBrand: '#187AEB',
14 | secondaryBrand: '#0CBACC',
15 | 'primary-blue-400': '#050B1E',
16 | 'primary-blue-300': '#0E1B31',
17 | 'primary-blue-200': '#132340',
18 | 'primary-blue-100': '#293B56',
19 | 'primary-gray-400': '#656464',
20 | },
21 | keyframes: {
22 | wiggle: {
23 | '0%': { left: '-400px' },
24 | '100%': { left: '0px' },
25 | },
26 | },
27 | },
28 | },
29 | plugins: [],
30 | }
31 |
--------------------------------------------------------------------------------
/components/sections/Contributors/Card/Card.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styles from './Card.module.css'
3 | import Image from 'next/image'
4 |
5 | interface CardProps {
6 | profileImage: String
7 | name: String
8 | title: String
9 | }
10 |
11 | const Card = ({ profileImage, name, title }: CardProps) => {
12 | return (
13 |
14 |
15 |
22 |
23 |
24 |
{name}
25 |
{title}
26 |
27 |
28 | )
29 | }
30 |
31 | export default Card
32 |
--------------------------------------------------------------------------------
/components/layout/Section/Section.md:
--------------------------------------------------------------------------------
1 | # Section Component
2 |
3 | Section component can be used to wrap content to apply padding and background color.
4 |
5 | ## Props List
6 |
7 | _Type_ **Size**: `sm`, `md`, `lg` or `xl`
8 | | `sm` | `md` | `lg` | `xl` |
9 | | ---- | ---- | ---- | ---- |
10 | | 0.5rem | 1rem | 1.5rem | 2.5rem |
11 |
12 | | Name | Type | Optional |
13 | | --------------- | --------- | -------- |
14 | | className | Size | ✔ |
15 | | p | Size | ✔ |
16 | | px | Size | ✔ |
17 | | py | Size | ✔ |
18 | | pt | Size | ✔ |
19 | | pb | Size | ✔ |
20 | | pl | Size | ✔ |
21 | | pr | Size | ✔ |
22 | | backgroundColor | Size | ✔ |
23 | | children | ReactNode | ✖ |
24 |
25 | ## Usage
26 |
27 | ```tsx
28 |
29 | ```
30 |
--------------------------------------------------------------------------------
/components/sections/GitHub/GitHub.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | @apply lg:items-start xl:h-[480px] lg:gap-1 xl:gap-[10px] md:h-[50%] items-center lg:grid-cols-3 md:w-full grid bg-primary-blue-400 justify-center xl:grid-cols-8;
3 | }
4 | .cardContainer {
5 | @apply w-full p-5 sm:p-10 md:h-full xl:h-full content-center flex justify-center items-center sm:w-full sm:h-screen xl:col-start-2 xl:col-span-4 xl:w-full xl:justify-self-center lg:col-span-2 lg:h-full md:col-span-1;
6 | }
7 | .descContainer {
8 | @apply flex-col xl:h-full xl:w-[480px] gap-4 p-5 sm:p-10 flex justify-center;
9 | }
10 | .title {
11 | @apply font-bold md:text-4xl text-2xl text-white;
12 | }
13 | .desc {
14 | @apply text-white opacity-60 md:text-base text-sm leading-7 font-normal pr-1;
15 | }
16 | .button {
17 | @apply h-[58px] lg:w-[192px] bg-white rounded-[14px] md:w-[25%];
18 | }
19 | .buttonText {
20 | @apply font-medium md:text-base text-sm tracking-tight text-primary-blue-400 flex gap-2 justify-center items-center;
21 | }
22 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Frontendship
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/components/layout/Footer/Footer.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | @apply w-full bg-primary-blue-300;
3 | }
4 |
5 | .footerSection {
6 | @apply flex lg:justify-between lg:mx-[135px] md:pt-[78px] md:pb-[85px] flex-col md:flex-row;
7 | }
8 |
9 | .logoSection {
10 | @apply bg-primary-blue-400 py-7 flex justify-center md:justify-start lg:pl-[135px];
11 | }
12 |
13 | .linksSide {
14 | @apply text-center w-full pt-2 md:flex md:items-start md:text-left md:pt-0 md:w-3/4;
15 | }
16 |
17 | .mailSide {
18 | @apply flex flex-col items-center text-center mt-4 md:w-1/4 md:text-left md:mt-0 lg:w-1/3;
19 | }
20 |
21 | .mailInputContainer {
22 | @apply relative inline-block w-72 h-12 mb-5 md:w-full;
23 | }
24 |
25 | .mailInput {
26 | @apply rounded-xl border border-solid border-gray-500 text-white bg-transparent mt-2 h-full pl-2 w-full text-sm focus:outline-none;
27 | }
28 | .mailInputButton {
29 | @apply bg-white text-black rounded-xl h-full right-[1px] mt-2 absolute text-xs px-2 md:px-4 lg:px-6;
30 | }
31 |
32 | .subsText {
33 | @apply text-white text-lg md:w-full md:text-xl md:mb-5;
34 | }
35 |
36 | .subsMailText {
37 | @apply text-[#e7e7e7] md:text-base md:mb-8 w-full;
38 | }
39 |
--------------------------------------------------------------------------------
/components/sections/Banner/Banner.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | @apply bg-primary-blue-400 justify-center items-center flex flex-col sm:flex-row sm:gap-6;
3 | }
4 |
5 | .bannerLeft {
6 | @apply text-white;
7 | }
8 |
9 | .title {
10 | @apply sm:text-[56px] text-5xl leading-none xl:w-2/4 font-bold md:w-5/6;
11 | }
12 |
13 | .description {
14 | @apply opacity-50 pt-4 pb-6 xl:w-2/3 md:w-5/6;
15 | }
16 |
17 | .buttonContainer {
18 | @apply flex gap-4;
19 | }
20 |
21 | .buttonFill {
22 | @apply sm:h-14 h-12 flex-1 sm:flex-none sm:w-36 bg-white text-xl font-medium text-black rounded-[8px];
23 | }
24 |
25 | .buttonBorder {
26 | @apply sm:h-14 h-12 flex-1 sm:flex-none sm:w-36 text-xl font-medium border rounded-[8px];
27 | }
28 |
29 | .bannerRight {
30 | @apply gap-4 pt-6 flex sm:items-center;
31 | }
32 |
33 | .videoContainer {
34 | @apply relative flex;
35 | }
36 |
37 | .playButton {
38 | @apply h-10 w-10 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10 cursor-pointer hover:scale-[1.2] transition-all hover:-rotate-12 drop-shadow-lg;
39 | }
40 |
41 | .image {
42 | @apply rounded-xl;
43 | }
44 |
45 | .imageCol {
46 | @apply flex gap-4 sm:flex-col;
47 | }
48 |
--------------------------------------------------------------------------------
/components/sections/GitHub/GitHub.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Icon } from 'components'
3 | import styles from './GitHub.module.css'
4 | import Card from './Card/Card'
5 | import { SectionContainer } from 'components'
6 |
7 | const GitHub = () => {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | Frontendship’e dair her şey bir arada!
17 |
18 |
19 | Frontend ile ilgili ihtiyacınız olan her şey tek bir noktada.
20 | Frontendship topluluğuna katılmak için tek gereken Discord kanalına
21 | katılmak.
22 |
23 |
24 |
25 | Bir parçası ol
26 |
27 |
28 |
29 |
30 |
31 |
32 | )
33 | }
34 |
35 | export default GitHub
36 |
--------------------------------------------------------------------------------
/components/sections/GitHub/Card/Card.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | @apply w-full lg:h-[340px] h-full bg-white flex rounded-[14px];
3 | }
4 | .innerContainer {
5 | @apply md:p-[44px] p-5 flex flex-col lg:gap-5 gap-4;
6 | }
7 | .titleContainer {
8 | @apply flex gap-2 sm:items-start md:items-center;
9 | }
10 | .title {
11 | @apply font-medium md:text-xl text-base text-primary-blue-400 md:leading-5 flex;
12 | }
13 | .subtitle {
14 | @apply font-bold md:text-base text-sm leading-[26px] text-primary-blue-400;
15 | }
16 | .desc {
17 | @apply font-normal md:text-base text-sm leading-[26px] text-primary-blue-400 text-ellipsis tracking-wide;
18 | }
19 | .button {
20 | @apply text-primary-blue-400 font-medium md:text-base items-center text-sm leading-4 flex gap-2;
21 | }
22 | .images {
23 | @apply flex items-center;
24 | }
25 | .text {
26 | @apply flex ml-16 md:text-base text-sm leading-[18px] text-center;
27 | }
28 | .semibold {
29 | @apply font-semibold;
30 | }
31 | .image {
32 | @apply h-6 w-6 box-border rounded-full absolute border border-white shadow-lg shadow-[#DEDEDE] object-cover;
33 | }
34 | .image:nth-child(1) {
35 | @apply ml-0;
36 | }
37 | .image:nth-child(2) {
38 | @apply ml-4;
39 | }
40 | .image:nth-child(3) {
41 | @apply ml-8;
42 | }
43 | .imageContainer {
44 | @apply flex h-7;
45 | }
46 |
--------------------------------------------------------------------------------
/components/sections/Brief/Brief.tsx:
--------------------------------------------------------------------------------
1 | import { Icon, Title, SectionContext, SectionContainer } from 'components'
2 | import style from './Brief.module.css'
3 | import sampleData from './sample.json'
4 |
5 | const Brief = () => {
6 | return (
7 |
8 |
13 |
14 |
15 | {sampleData?.map((card: any, index: number) => (
16 |
17 |
24 |
{card.title}
25 |
{card.description}
26 |
27 | ))}
28 |
29 |
30 |
31 | )
32 | }
33 | export default Brief
34 |
--------------------------------------------------------------------------------
/components/base/Icon/Icon.md:
--------------------------------------------------------------------------------
1 | # Icon Component
2 |
3 | Icon component is the base component for SVG icon displays on pages and components.
4 |
5 | ## Props List
6 |
7 | | Name | Type | Default | Sample |
8 | | ----------------- | ------------- | ------- | ----------------------------- |
9 | | iconSet | Object | - | "selection.json file content" |
10 | | icon | String | - | "home" |
11 | | size | Number,String | - | "1em", 10, "100px" |
12 | | color | String | - | "red", "#f00", "rgb(0,0,0)" |
13 | | style | Object | {...} | { color: '#ff0'} |
14 | | title | String | - | "Icon Title" |
15 | | className | String | - | "icomoon" |
16 | | disableFill | Boolean | - | true |
17 | | removeInlineStyle | Boolean | - | true |
18 |
19 | ## Usage
20 |
21 | ```tsx
22 | import Icon from './Icon'
23 | ;
24 | ```
25 |
26 | Don't forget to update selection.json file along the way. You can use `https://svgps.app/` or `https://icomoon.io/app/#/select` for adding or removing icons.
27 |
--------------------------------------------------------------------------------
/components/sections/Blog/Card/Card.tsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image'
2 | import Link from 'next/link'
3 | import { Icon } from 'components'
4 | import styles from './Card.module.scss'
5 | import sampleData from './sample.json'
6 |
7 | const Card = () => {
8 | return (
9 |
10 | {sampleData.map((blog: any) => (
11 |
12 |
13 |
21 |
22 |
23 |
24 |
25 | {blog.title}
26 |
27 |
28 |
29 | Read More {' '}
30 |
31 |
32 |
33 |
34 |
35 |
36 | ))}
37 |
38 | )
39 | }
40 |
41 | export default Card
42 |
--------------------------------------------------------------------------------
/components/layout/Footer/FooterData.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": 0,
4 | "header": "Anasayfa",
5 | "content": [
6 | {
7 | "title": "Neden Frontendship?",
8 | "href": "/"
9 | },
10 | {
11 | "title": "Katkı Sağla",
12 | "href": "/"
13 | },
14 | {
15 | "title": "Yaklaşan Etkinlikler",
16 | "href": "/"
17 | },
18 | {
19 | "title": "Ekibimiz",
20 | "href": "/"
21 | }
22 | ]
23 | },
24 | {
25 | "id": 1,
26 | "header": "Kaynaklar",
27 | "content": [
28 | {
29 | "title": "Makale",
30 | "href": "/"
31 | },
32 | {
33 | "title": "Roadmap",
34 | "href": "/"
35 | },
36 | {
37 | "title": "Video",
38 | "href": "/"
39 | },
40 | {
41 | "title": "Topluluk",
42 | "href": "/"
43 | }
44 | ]
45 | },
46 | {
47 | "id": 2,
48 | "header": "Topluluk",
49 | "content": [
50 | { "title": "Github", "href": "https://github.com/frontendship" },
51 | { "title": "Discord", "href": "https://discord.com/invite/frontendship" },
52 | {
53 | "title": "Youtube",
54 | "href": "https://www.youtube.com/channel/UCxQg0FsLbVywst5lh73FMOg"
55 | },
56 | { "title": "İletişim", "href": "https://twitter.com/frontendship" }
57 | ]
58 | }
59 | ]
60 |
--------------------------------------------------------------------------------
/components/base/Title/Title.md:
--------------------------------------------------------------------------------
1 | # Title Component
2 |
3 | The Title component is used to display a title in the page.
4 |
5 | ## Usage
6 |
7 | ```tsx
8 | My Title
9 | ```
10 |
11 | ## Props
12 |
13 | | Name | Type | Default | Description |
14 | | -------- | ------------- | ------------------------------------------ | ----------------- |
15 | | level | HtmlHeadLevel | 1 | The title level. |
16 | | styles | string | default title styles in `Title.module.css` | The title styles. |
17 | | children | ReactNode | | The title text. |
18 |
19 | ## HtmlHeadLevel
20 |
21 | | Name | Value |
22 | | ---- | ----- |
23 | | h1 | 1 |
24 | | h2 | 2 |
25 | | h3 | 3 |
26 | | h4 | 4 |
27 | | h5 | 5 |
28 | | h6 | 6 |
29 |
30 | ## Examples
31 |
32 | ```tsx
33 | My Title {/* rendered h1 */}
34 | My Title {/* rendered h2 */}
35 | My Title {/* rendered h3 */}
36 | My Title {/* rendered h4 */}
37 | My Title {/* rendered h5 */}
38 | My Title {/* rendered h6 */}
39 | ```
40 |
41 | with custom style:
42 |
43 | ```tsx
44 |
45 | My Title
46 |
47 | ```
48 |
--------------------------------------------------------------------------------
/components/layout/Section/SectionContext/TitleSection.md:
--------------------------------------------------------------------------------
1 | # Title Section Component
2 |
3 | The Title Section component is used to display a title and subtitle in the page.
4 |
5 | ## Usage
6 |
7 | ```tsx
8 |
12 | ```
13 |
14 | ## Props
15 |
16 | | Name | Type | Default | Description |
17 | | -------------- | ----------------- | ------------------------------------------------- | ------------------------ |
18 | | level | HtmlHeadLevel | 1 | The title level. |
19 | | className | string | default title styles in `TitleSection.module.css` | The titleSection styles. |
20 | | title | ReactNode/string | | The title text. |
21 | | subTitle | ReactNode/string | | The subTitle text. |
22 | | subTitleStyles | StyleTypes/string | | The subTitle styles. |
23 | | titleStyles | StyleTypes/string | | The title styles. |
24 |
--------------------------------------------------------------------------------
/components/layout/Section/SectionContext/TitleSection.tsx:
--------------------------------------------------------------------------------
1 | import { Title } from 'components'
2 | import { HtmlHeadLevel } from 'types/html.types'
3 | import { StyleTypes } from 'types/style.types'
4 | import TitleSectionStyle from './TitleSection.module.css'
5 |
6 | type TitleSectionProps = {
7 | level?: HtmlHeadLevel
8 | title: string | React.ReactNode
9 | subtitle?: string | React.ReactNode
10 | subtitleStyles?: string | StyleTypes
11 | titleStyles?: string | StyleTypes
12 | className?: string
13 | }
14 |
15 | type SubTitleProps = {
16 | text?: string | React.ReactNode
17 | styles?: string | StyleTypes
18 | }
19 | const SubTitle = (props: SubTitleProps) => {
20 | if (typeof props.text == 'string') {
21 | return (
22 |
27 | {props.text}
28 |
29 | )
30 | }
31 | return <>{props.text}>
32 | }
33 | const TitleSection = (props: TitleSectionProps) => {
34 | return (
35 |
40 |
41 | {props.title}
42 |
43 | {props.subtitle && (
44 |
45 | )}
46 |
47 | )
48 | }
49 |
50 | export default TitleSection
51 |
--------------------------------------------------------------------------------
/components/sections/Contributors/Contributors.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styles from './Contributors.module.css'
3 | import Card from './Card/Card'
4 |
5 | import { SectionContainer, SectionContext } from 'components'
6 |
7 | const Contributors = () => {
8 | const sampleData = [
9 | {
10 | profileImage: 'https://avatars.githubusercontent.com/u/74984741?v=4',
11 | name: 'Eray Gündoğmuş',
12 | title: 'Frontend Developer',
13 | },
14 | {
15 | profileImage: 'https://avatars.githubusercontent.com/u/25130814?v=4',
16 | name: 'Orhan Özkerçin',
17 | title: 'Frontend Developer',
18 | },
19 | {
20 | profileImage: 'https://avatars.githubusercontent.com/u/74984741?v=4',
21 | name: 'Eray Gündoğmuş',
22 | title: 'Frontend Developer',
23 | },
24 | {
25 | profileImage: 'https://avatars.githubusercontent.com/u/25130814?v=4',
26 | name: 'Orhan Özkerçin',
27 | title: 'Frontend Developer',
28 | },
29 | ]
30 |
31 | return (
32 |
33 |
38 |
39 | {sampleData?.map((card, index) => (
40 |
46 | ))}
47 |
48 |
49 | )
50 | }
51 |
52 | export default Contributors
53 |
--------------------------------------------------------------------------------
/components/index.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @description
3 | * All components here are exported asynchronously. This is done for better performance.
4 | * However, if there is image distortion when the application is first opened, you can re-export the components
5 | * used on the first page as in the example below.
6 | * @example
7 | * export { default as Button } from './Button/Button';
8 | *
9 | * @description
10 | * If you want to use the components in the same way as the example below, you can use the following code.
11 | * @example
12 | ```tsx
13 | import { Button } from 'components';
14 | import { Header, Title } from 'components';
15 | ```
16 | */
17 |
18 | import dynamic from 'next/dynamic'
19 |
20 | // Base
21 | export const Title = dynamic(() => import('./base/Title/Title'))
22 | export const Icon = dynamic(() => import('./base/Icon/Icon'))
23 |
24 | // Layout
25 | export const Main = dynamic(() => import('./layout/Main'))
26 | export const Header = dynamic(() => import('./layout/Header/Header'))
27 | export const Footer = dynamic(() => import('./layout/Footer/Footer'))
28 | export const SectionContainer = dynamic(
29 | () => import('./layout/Section/Section'),
30 | )
31 | export const SectionContext = dynamic(
32 | () => import('./layout/Section/SectionContext/TitleSection'),
33 | )
34 |
35 | // Sections
36 | export const Banner = dynamic(() => import('./sections/Banner/Banner'))
37 | export const GitHub = dynamic(() => import('./sections/GitHub/GitHub'))
38 | export const Brief = dynamic(() => import('./sections/Brief/Brief'))
39 | export const Event = dynamic(() => import('./sections/Blog/Blog'))
40 | export const Contributors = dynamic(
41 | () => import('./sections/Contributors/Contributors'),
42 | )
43 |
--------------------------------------------------------------------------------
/components/sections/Brief/sample.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "iconName": "open-source",
4 | "iconColor": "text-blue-500",
5 | "title": "Açık Kaynak",
6 | "description": "Her seviyeden npm paketleri geliştirerek frontendship topluluğunda yer alan herkesi açık kaynaklı projelere contribution yapmaya ve referans gösterebilecekleri işler"
7 | },
8 | {
9 | "iconName": "github",
10 | "title": "Deneyim",
11 | "iconColor": "text-[#F76268]",
12 | "description": "Git kullanmak, ekip çalışması yapabilmek, ekosistemde yaygın olarak kullanılan toolların kullanımını ve amaçlarını aktararak da alanda yeni kişileri ilk iş deneyimlerine hazırlamak."
13 | },
14 | {
15 | "iconName": "messages",
16 | "title": "Soru Cevap",
17 | "iconColor": "text-yellow-500",
18 | "description": "Sorular sorabilmek veya soruları cevaplayarak herkesin seviyesini tespit etmesini ve geliştirmesini sağlamak amaçlı yardımlaşmak."
19 | },
20 | {
21 | "iconName": "interaction",
22 | "iconColor": "text-green-500",
23 | "title": "Açık Kaynak",
24 | "description": "Her seviyeden npm paketleri geliştirerek frontendship topluluğunda yer alan herkesi açık kaynaklı projelere contribution yapmaya ve referans gösterebilecekleri işler"
25 | },
26 | {
27 | "iconName": "calendar",
28 | "title": "Deneyim",
29 | "iconColor": "text-[#1D8FBF]",
30 | "description": "Git kullanmak, ekip çalışması yapabilmek, ekosistemde yaygın olarak kullanılan toolların kullanımını ve amaçlarını aktararak da alanda yeni kişileri ilk iş deneyimlerine hazırlamak."
31 | },
32 | {
33 | "iconName": "feedback",
34 | "title": "Soru Cevap",
35 | "iconColor": "text-purple-500",
36 | "description": "Sorular sorabilmek veya soruları cevaplayarak herkesin seviyesini tespit etmesini ve geliştirmesini sağlamak amaçlı yardımlaşmak."
37 | }
38 | ]
39 |
--------------------------------------------------------------------------------
/components/layout/Header/Header.module.css:
--------------------------------------------------------------------------------
1 | .header {
2 | @apply flex
3 | justify-between
4 | items-center
5 | min-h-[5.625rem]
6 | max-[640px]:p-6 sm:p-4 md:p-10
7 | text-primary-blue-300
8 | bg-primary-blue-400;
9 | }
10 |
11 | .headerLeft {
12 | @apply flex justify-center;
13 | }
14 | .logo {
15 | @apply flex items-center px-6 ml-[-18px];
16 | }
17 | .navbar {
18 | @apply flex flex-col md:flex-row px-4;
19 | }
20 | .mainMenu {
21 | @apply flex
22 | md:items-center
23 | flex-col md:flex-row
24 | fixed md:relative
25 | h-full
26 | left-0
27 | mt-14 md:mt-0
28 | bg-primary-blue-400
29 | animate-[wiggle_1s_ease-in-out_1];
30 | }
31 |
32 | .mainMenu li {
33 | @apply md:border-primary-blue-400 border-b border-b-white md:mx-0 mx-12;
34 | }
35 |
36 | .mainMenuOpen {
37 | @apply w-full;
38 | }
39 | .mainMenuClose {
40 | @apply hidden w-0;
41 | }
42 |
43 | .link {
44 | @apply flex
45 | text-lg md:text-base
46 | text-white
47 | py-6 px-16 md:py-4 md:px-4
48 | opacity-70 hover:opacity-100
49 | duration-500;
50 | }
51 |
52 | .linkActive {
53 | @apply text-white;
54 | }
55 |
56 | .headerRight {
57 | @apply bg-primary-blue-400;
58 | }
59 | .discordButton {
60 | @apply py-[15px] w-56 mx-auto mt-12 md:mt-1 sm:w-52
61 | md:w-44
62 | px-[10px] lg:px-[23px]
63 | rounded-[8px]
64 | text-primary-blue-400
65 | bg-white;
66 | }
67 |
68 | .toggle {
69 | @apply w-6 text-gray-200;
70 | }
71 |
72 | .genericHamburgerLine {
73 | @apply h-1 w-6 my-1 rounded-full bg-white transition transform duration-300;
74 | }
75 |
76 | .part1 {
77 | @apply rotate-45 translate-y-1 opacity-80 group-hover:opacity-100;
78 | }
79 |
80 | .part2 {
81 | @apply opacity-100 group-hover:opacity-100;
82 | }
83 | .part3 {
84 | @apply opacity-0;
85 | }
86 | .secondLine {
87 | @apply opacity-100 group-hover:opacity-100;
88 | }
89 | .part5 {
90 | @apply -rotate-45 -translate-y-3 opacity-80 group-hover:opacity-100;
91 | }
92 | .part6 {
93 | @apply opacity-100 group-hover:opacity-100;
94 | }
95 |
--------------------------------------------------------------------------------
/components/layout/Footer/Footer.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import logo from '../../base/Icon/FrontendshipLogo.png'
3 | import Image from 'next/image'
4 | import styles from './Footer.module.css'
5 | import FooterData from './FooterData.json'
6 |
7 | const Footer = () => {
8 | const data = FooterData.map((data) => (
9 |
10 |
11 |
12 | {data.header}
13 |
14 |
25 |
26 |
27 | ))
28 |
29 | return (
30 |
31 |
32 |
{data}
33 |
34 |
Subscribe Circle Newsletter
35 |
36 | Subscribe to be the first one to know about updates. Enter
37 | your email
38 |
39 |
40 |
45 | Subscribe
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 | )
54 | }
55 |
56 | export default Footer
57 |
--------------------------------------------------------------------------------
/components/sections/Banner/Banner.tsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image'
2 | import PlayButton from './PlayButton'
3 | import styles from './Banner.module.css'
4 | import { SectionContainer } from 'components'
5 | const Banner = () => {
6 | return (
7 |
8 |
9 |
10 |
Kendine bir proje bul
11 |
12 | Ekosisteme dair her çeşit bilgiye ulaşmana yardımcı olmak için bir
13 | araya gelen topluluk: Frontendship
14 |
15 |
16 | Kimdir
17 | Discord
18 |
19 |
20 |
21 |
38 |
39 |
47 |
55 |
56 |
57 |
58 |
59 | )
60 | }
61 |
62 | export default Banner
63 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | - Title componentı için bir standart belirlenecek (font-size, font-weight, color)
2 | - Base componentlar belirlenip reuse edilecek (button gibi
3 |
4 | Figma: https://www.figma.com/file/LCgTUgVNpKKMQQ3xlAca4p/frontendship?node-id=0%3A1
5 |
6 | ## Getting Started
7 |
8 | ## Contribute To The Project and Run Locally
9 |
10 | To contribute:
11 |
12 | Fork the project.
13 |
14 | ```bash
15 | git clone https://github.com//website
16 | ```
17 |
18 | Go to the project directory
19 |
20 | ```bash
21 | cd website
22 | ```
23 |
24 | Change the branch
25 |
26 | ```bash
27 | git checkout development
28 | ```
29 |
30 | Install dependencies
31 |
32 | ```bash
33 | yarn
34 | ```
35 |
36 | Start the development server
37 |
38 | ```bash
39 | yarn dev
40 | ```
41 |
42 | ## How to open a pull request
43 |
44 | Make sure your fork repository is synced with remote (upstream, original) repository to avoid conflicts. You can either [check here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork) or simply use terminal codes below.
45 |
46 | ### Syncing a fork branch
47 |
48 | First add upstream with:
49 |
50 | ```bash
51 | git remote add upstream https://github.com/frontendship/website
52 | ```
53 |
54 | Then to get upstream's updates run:
55 |
56 | ```bash
57 | git fetch upstream
58 | ```
59 |
60 | Check out your fork's local default branch:
61 |
62 | ```bash
63 | git checkout
64 | ```
65 |
66 | Then merge upstream with your fork (local) repo:
67 |
68 | ```bash
69 | git merge upstream/
70 | ```
71 |
72 | ### Example
73 |
74 | ```bash
75 | git remote add upstream https://github.com/frontendship/website
76 | git fetch upstream
77 | git checkout development
78 | git merge upstream/development
79 | ```
80 |
81 | ## Usage/Examples
82 |
83 | ```javascript
84 | import Header from 'components/Header'
85 |
86 | function App() {
87 | console.log('Hello world')
88 | return
89 | }
90 | ```
91 |
92 | ## Contributing
93 |
94 | Contributions are always welcome!
95 |
96 | See `contributing.md` for ways to get started.
97 |
98 | 
99 |
--------------------------------------------------------------------------------
/components/sections/GitHub/Card/Card.tsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link'
2 | import React from 'react'
3 | import { Icon } from 'components'
4 | import styles from './Card.module.css'
5 | import Image from 'next/image'
6 |
7 | const GitHub = () => {
8 | return (
9 |
10 |
11 |
12 |
13 | Frontendship
14 |
15 |
16 |
17 |
24 |
31 |
38 |
39 |
40 |
41 | +12 Katkıda Bulunan
42 |
43 |
44 |
45 |
46 |
47 | Nasıl katılabilir ve katkı sağlayabilirsiniz?
48 |
49 |
50 | Discord sunucusuna aşağıdaki linkten katılabilirsiniz. Topluluğun
51 | sosyal medya hesaplarını takip ederek bizimle iletişime geçebilir ve
52 | günlük shiplerinizi alabilirsiniz. Frontendshipin bir parçası olarak
53 | değer katmaya başlayabilirsin.
54 |
55 |
56 |
68 |
69 |
70 | )
71 | }
72 |
73 | export default GitHub
74 |
--------------------------------------------------------------------------------
/components/layout/Header/Header.tsx:
--------------------------------------------------------------------------------
1 | import style from './Header.module.css'
2 | import logo from './logo.png'
3 | import Image from 'next/image'
4 | import { useEffect, useState } from 'react'
5 |
6 | const navbarList = [
7 | { name: 'Anasayfa', link: '/', isActive: true },
8 | { name: 'Discord', link: '/discord' },
9 | { name: 'Blog', link: '/blog' },
10 | { name: 'Etkinlikler', link: 'events' },
11 | ]
12 |
13 | const DiscordButton = () => (
14 | Discorda Katıl
15 | )
16 |
17 | type NavbarItemProps = {
18 | name: string
19 | isActive?: boolean
20 | link: string
21 | }
22 | const NavbarItem = ({ item }: { item: NavbarItemProps }) => {
23 | return (
24 |
25 |
29 | {item.name}
30 |
31 |
32 | )
33 | }
34 | const Header = () => {
35 | const [isMenuOpen, setIsMenuOpen] = useState(false)
36 | const genericHamburgerLine = style['genericHamburgerLine']
37 | const [size, setSize] = useState({
38 | width: 0,
39 | height: 0,
40 | })
41 |
42 | useEffect(() => {
43 | const handleResize = () => {
44 | setSize({
45 | width: window.innerWidth,
46 | height: window.innerHeight,
47 | })
48 | }
49 | window.addEventListener('resize', handleResize)
50 | handleResize()
51 |
52 | return () => window.removeEventListener('resize', handleResize)
53 | }, [])
54 |
55 | useEffect(() => {
56 | if (size.width > 768 && isMenuOpen) {
57 | setIsMenuOpen(false)
58 | }
59 | }, [size.width, isMenuOpen])
60 |
61 | const switchMenu = () => {
62 | setIsMenuOpen((p) => !p)
63 | }
64 | return (
65 |
66 |
67 |
68 |
69 |
70 |
71 | 768
75 | ? style['mainMenuClose']
76 | : style['mainMenuOpen'])
77 | }`}
78 | >
79 | {(isMenuOpen || size.width > 768) &&
80 | navbarList.map((item: any) => (
81 |
82 | ))}
83 |
84 | {isMenuOpen && size.width < 768 && }
85 |
86 |
87 |
88 |
89 |
90 | {size.width > 768 ? (
91 |
92 | ) : (
93 |
94 |
99 |
100 |
105 |
110 |
111 | )}
112 |
113 |
114 | )
115 | }
116 |
117 | export default Header
118 |
--------------------------------------------------------------------------------
/components/base/Icon/selection.json:
--------------------------------------------------------------------------------
1 | {
2 | "generatorSource": "svgps.app",
3 | "IcoMoonType": "selection",
4 | "icons": [
5 | {
6 | "icon": {
7 | "paths": [
8 | "M102.4 238.9A34.1 34.1 0 1 0 102.4 307.2L921.6 307.2A34.1 34.1 0 1 0 921.6 238.9L102.4 238.9zM102.4 477.9A34.1 34.1 0 1 0 102.4 546.1L921.6 546.1A34.1 34.1 0 1 0 921.6 477.9L102.4 477.9zM102.4 716.8A34.1 34.1 0 1 0 102.4 785.1L921.6 785.1A34.1 34.1 0 1 0 921.6 716.8L102.4 716.8z"
9 | ],
10 | "attrs": [{}],
11 | "width": 1024
12 | },
13 | "properties": { "name": "hamburger" }
14 | },
15 | {
16 | "icon": {
17 | "paths": [
18 | "M200.8 140.5L140.5 200.8 451.7 512 140.5 823.2 200.8 883.5 512 572.3 823.2 883.5 883.5 823.2 572.3 512 883.5 200.8 823.2 140.5 512 451.7 200.8 140.5z"
19 | ],
20 | "attrs": [{}],
21 | "width": 1024
22 | },
23 | "properties": { "name": "close" }
24 | },
25 | {
26 | "icon": {
27 | "paths": ["M0 0L0 267.7 1019.6 267.7 1019.6 0 0 0"],
28 | "attrs": [{}],
29 | "width": 1024
30 | },
31 | "properties": { "name": "logo" }
32 | },
33 | {
34 | "icon": {
35 | "paths": [
36 | "M784.4 512a781.2 781.2 0 0 0 76.8-130.8c44.4-98.4 44.8-176.8 1.6-220-70-69.6-212.8-19.6-350.8 78.8-138-98.4-280.8-148.4-350.8-78.8-43.2 43.2-42.8 121.6 1.6 220A781.2 781.2 0 0 0 239.6 512a781.2 781.2 0 0 0-76.8 130.8c-44.4 98.4-44.8 176.8-1.6 220 22.4 22.4 52.4 32.4 87.6 32.4 73.6 0 169.6-44.4 263.2-111.2 93.6 66.8 189.6 111.2 263.2 111.2 35.2 0 65.2-10 87.6-32.4 43.2-43.2 42.8-121.6-1.6-220a781.2 781.2 0 0 0-76.8-130.8Zm33.2-305.6c22.4 22.8 16.8 78-14.8 148.4a678.8 678.8 0 0 1-59.2 103.6c-25.6-31.6-54-62.8-84.4-93.6s-61.6-58-94-84.4c123.2-83.6 222-104.4 252.4-74ZM704.4 512a1109.2 1109.2 0 0 1-90.4 102 1256.4 1256.4 0 0 1-102 90.8 1256.4 1256.4 0 0 1-102-90.8A1109.2 1109.2 0 0 1 319.6 512a1109.2 1109.2 0 0 1 90.4-102A1256.4 1256.4 0 0 1 512 319.2a1256.4 1256.4 0 0 1 102 90.8 1109.2 1109.2 0 0 1 90.4 102ZM221.2 354.8c-31.6-70.4-37.2-125.6-14.8-148.4 30.4-30.4 129.2-9.6 252.4 74-32.4 26.4-64 54.8-94 84.4s-58.8 62-84.4 93.6a678.8 678.8 0 0 1-59.2-103.6Zm-14.8 462.8c-22.4-22.8-16.8-78 14.8-148.4a678.8 678.8 0 0 1 59.2-103.6c25.6 31.6 54 62.8 84.4 93.6s61.6 58 94 84.4c-123.2 83.6-222 104.4-252.4 74Zm358.8-74c32.4-26.4 64-54.8 94-84.4s58.8-62 84.4-93.6a678.8 678.8 0 0 1 59.2 103.6c31.6 70.4 37.2 125.6 14.8 148.4-30.4 30.4-129.2 9.6-252.4-74ZM560 512a48 48 0 1 1-48-48 48 48 0 0 1 48 48Z"
37 | ],
38 | "attrs": [{}],
39 | "width": 1024
40 | },
41 | "properties": { "name": "atom" }
42 | },
43 | {
44 | "icon": {
45 | "paths": [
46 | "M512 77.5l137.5 285.1L962.1 409 735.7 634.9l7.6 45.3 45.3 270.2-276.6-148.8L235.4 950.4l45.3-270.2 7.5-45.3L61.9 409l312.6-46.5L395 320z m0-61.9c-28.7 0-54.8 16.2-67 41.4l-115.9 240.6-266.7 39.7c-27.4 4.1-50.1 22.8-59 48.4-8.8 25.7-2.1 53.9 17.2 73.1l195.4 195.2-45.3 270.7c-4.6 27.3 7.2 54.6 30.4 70.6 12.7 8.7 27.7 13.2 42.6 13.1 12.3 0 24.6-3 35.8-8.9l232.5-125.2 232.5 125.2a75.9 75.9 0 0 0 35.8 8.9c15 0 29.9-4.4 42.6-13.1 23.1-16 34.9-43.3 30.3-70.6l-45.3-270.7 195.5-195.2c19.3-19.2 26-47.5 17.2-73.1-8.8-25.6-31.6-44.3-59-48.4l-266.7-39.7-115.9-240.6c-12.1-25.3-38.3-41.5-67-41.4z"
47 | ],
48 | "attrs": [{}],
49 | "width": 1024
50 | },
51 | "properties": { "name": "star" }
52 | },
53 | {
54 | "icon": {
55 | "paths": [
56 | "M576 192l-45.8 44.6L772.8 480H128v64h644.8l-242.6 242.3L576 832l320-320L576 192z"
57 | ],
58 | "attrs": [{}],
59 | "width": 1024
60 | },
61 | "properties": { "name": "arrow-right" }
62 | }
63 | ]
64 | }
65 |
--------------------------------------------------------------------------------
/contributing.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 |
3 | When contributing to this repository, please first discuss the change you wish to make via issue,
4 | email, or any other method with the owners of this repository before making a change.
5 |
6 | Please note we have a code of conduct, please follow it in all your interactions with the project.
7 |
8 | ## Pull Request Process
9 |
10 | 1. Ensure any install or build dependencies are removed before the end of the layer when doing a
11 | build.
12 | 2. Update the README.md with details of changes to the interface, this includes new environment
13 | variables, exposed ports, useful file locations and container parameters.
14 | 3. Increase the version numbers in any examples files and the README.md to the new version that this
15 | Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/).
16 | 4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you
17 | do not have permission to do that, you may request the second reviewer to merge it for you.
18 |
19 | ## Code of Conduct
20 |
21 | ### Our Pledge
22 |
23 | In the interest of fostering an open and welcoming environment, we as
24 | contributors and maintainers pledge to making participation in our project and
25 | our community a harassment-free experience for everyone, regardless of age, body
26 | size, disability, ethnicity, gender identity and expression, level of experience,
27 | nationality, personal appearance, race, religion, or sexual identity and
28 | orientation.
29 |
30 | ### Our Standards
31 |
32 | Examples of behavior that contributes to creating a positive environment
33 | include:
34 |
35 | - Using welcoming and inclusive language
36 | - Being respectful of differing viewpoints and experiences
37 | - Gracefully accepting constructive criticism
38 | - Focusing on what is best for the community
39 | - Showing empathy towards other community members
40 |
41 | Examples of unacceptable behavior by participants include:
42 |
43 | - The use of sexualized language or imagery and unwelcome sexual attention or
44 | advances
45 | - Trolling, insulting/derogatory comments, and personal or political attacks
46 | - Public or private harassment
47 | - Publishing others' private information, such as a physical or electronic
48 | address, without explicit permission
49 | - Other conduct which could reasonably be considered inappropriate in a
50 | professional setting
51 |
52 | ### Our Responsibilities
53 |
54 | Project maintainers are responsible for clarifying the standards of acceptable
55 | behavior and are expected to take appropriate and fair corrective action in
56 | response to any instances of unacceptable behavior.
57 |
58 | Project maintainers have the right and responsibility to remove, edit, or
59 | reject comments, commits, code, wiki edits, issues, and other contributions
60 | that are not aligned to this Code of Conduct, or to ban temporarily or
61 | permanently any contributor for other behaviors that they deem inappropriate,
62 | threatening, offensive, or harmful.
63 |
64 | ### Scope
65 |
66 | This Code of Conduct applies both within project spaces and in public spaces
67 | when an individual is representing the project or its community. Examples of
68 | representing a project or community include using an official project e-mail
69 | address, posting via an official social media account, or acting as an appointed
70 | representative at an online or offline event. Representation of a project may be
71 | further defined and clarified by project maintainers.
72 |
73 | ### Enforcement
74 |
75 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
76 | reported by contacting the project team at [INSERT EMAIL ADDRESS]. All
77 | complaints will be reviewed and investigated and will result in a response that
78 | is deemed necessary and appropriate to the circumstances. The project team is
79 | obligated to maintain confidentiality with regard to the reporter of an incident.
80 | Further details of specific enforcement policies may be posted separately.
81 |
82 | Project maintainers who do not follow or enforce the Code of Conduct in good
83 | faith may face temporary or permanent repercussions as determined by other
84 | members of the project's leadership.
85 |
86 | ### Attribution
87 |
88 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
89 | available at [http://contributor-covenant.org/version/1/4][version]
90 |
91 | [homepage]: http://contributor-covenant.org
92 | [version]: http://contributor-covenant.org/version/1/4/
93 |
--------------------------------------------------------------------------------
/public/logo/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------