├── public
    ├── robots.txt
    ├── logo.png
    ├── manifest.json
    └── index.html
├── README.md
├── src
    ├── style
    │   ├── ytb.png
    │   ├── index.css
    │   └── App.css
    ├── component
    │   ├── StateContext.jsx
    │   ├── Header.jsx
    │   ├── Footer.jsx
    │   ├── TLItem.jsx
    │   ├── TLMap.jsx
    │   └── TLContainer.jsx
    ├── index.js
    └── App.js
├── .gitignore
└── package.json


/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EsrafilElahi/turkiyeburslari-timeline/HEAD/public/logo.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # turkiye-burslari---timeline
2 | reactjs
3 | responsive design
4 | google fonts
5 | api
6 |  
7 | 


--------------------------------------------------------------------------------
/src/style/ytb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EsrafilElahi/turkiyeburslari-timeline/HEAD/src/style/ytb.png


--------------------------------------------------------------------------------
/src/component/StateContext.jsx:
--------------------------------------------------------------------------------
1 | import {createContext} from 'react';
2 | 
3 | export const StateContext = createContext({
4 |     state:[]
5 | })


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import "./style/index.css";
4 | import App from "./App";
5 | 
6 | ReactDOM.render(<App />, document.getElementById("root"));
7 | 


--------------------------------------------------------------------------------
/src/component/Header.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const Header = () => {
 4 |   return (
 5 |     <div className='header'>
 6 |       <h1 className='header1'>react timeline</h1>
 7 |       <h1 className='header2'>for turkiye burslari 2021 application calendar</h1>
 8 |     </div> 
 9 |   )
10 | }
11 | 
12 | export default Header
13 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import './style/App.css'
 3 | import Header from './component/Header'
 4 | import TLContainer from './component/TLContainer'
 5 | import Footer from './component/Footer'
 6 | 
 7 | 
 8 | const App = () => {
 9 | 
10 |   return (
11 |     <div>
12 |       <Header />
13 |       <TLContainer />
14 |       <Footer />
15 |     </div>
16 |   )
17 | }
18 | 
19 | export default App;


--------------------------------------------------------------------------------
/.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 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/style/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/component/Footer.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ytbImg from '../style/ytb.png'
 3 | 
 4 | const Footer = () => {
 5 | 
 6 |     return (
 7 |         <div className='footer'>
 8 |             <p className='name'>Esrafil Elahi</p>
 9 |             <img src={ytbImg} alt="ytb logo" className="ytb-logo" />
10 |             <p className='subfooter'>2021 - TURKIYE SCHOLARSHIPS</p>
11 |         </div> 
12 |     );
13 | }
14 | 
15 | export default Footer;
16 | 


--------------------------------------------------------------------------------
/src/component/TLItem.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import '../style/App.css'
 3 | 
 4 | 
 5 | const TLItem = ({ info }) => {
 6 | 
 7 |   return (
 8 |     <div className='timeline-item'>
 9 |       <div className='timeline-content'> 
10 |         <span className='date'>{info.date}</span>
11 |         <p className='title'>{info.title}</p>
12 |         <p className='desc'>{info.desc}</p>
13 |         <span className='circle'></span>
14 |       </div>
15 | 
16 |     </div>
17 |   )
18 | }
19 | 
20 | export default TLItem
21 | 


--------------------------------------------------------------------------------
/src/component/TLMap.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react'
 2 | import { StateContext } from './StateContext'
 3 | import TLItem from './TLItem'
 4 | import { v4 as uuidv4 } from 'uuid'
 5 | import '../style/App.css'
 6 | 
 7 | const TLMap = () => {
 8 |   const context = useContext(StateContext)
 9 |   const { state } = context
10 | 
11 |   return (
12 | 
13 |     <div className='timeline-container'>
14 | 
15 |       {state.map(info => (
16 |         <TLItem key={uuidv4()} info={info} />
17 |       ))}
18 |       
19 |     </div>
20 | 
21 |   )
22 | }
23 | 
24 | export default TLMap
25 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <meta name="theme-color" content="#000000" />
 7 |     <meta
 8 |       name="description"
 9 |       content="Web site created using create-react-app"
10 |     />
11 |     <link rel="icon" href="./logo.png" type="image/png" />
12 | 
13 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
14 | 
15 |     <title>Turkburslari Timeline</title>
16 |   </head>
17 | 
18 |   <body>
19 |     <div id="root"></div>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "turkiyeburslari-timeline",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.12.0",
 7 |     "@testing-library/react": "^11.2.7",
 8 |     "@testing-library/user-event": "^12.8.3",
 9 |     "react": "^17.0.2",
10 |     "react-dom": "^17.0.2",
11 |     "react-scripts": "4.0.3",
12 |     "uuid": "^8.3.2",
13 |     "web-vitals": "^1.1.2"
14 |   },
15 |   "scripts": {
16 |     "start": "react-scripts start",
17 |     "build": "react-scripts build",
18 |     "test": "react-scripts test",
19 |     "eject": "react-scripts eject"
20 |   },
21 |   "eslintConfig": {
22 |     "extends": [
23 |       "react-app",
24 |       "react-app/jest"
25 |     ]
26 |   },
27 |   "browserslist": {
28 |     "production": [
29 |       ">0.2%",
30 |       "not dead",
31 |       "not op_mini all"
32 |     ],
33 |     "development": [
34 |       "last 1 chrome version",
35 |       "last 1 firefox version",
36 |       "last 1 safari version"
37 |     ]
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/component/TLContainer.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | import { StateContext } from './StateContext'
 3 | import TLMap from './TLMap'
 4 | 
 5 | 
 6 | const TLContainer = () => {
 7 | 
 8 |   const [infos] = useState([
 9 |     { date: '01-2021', title: '1st Period Applications Open - Research', desc: 'Research Scholarships' },
10 |     { date: '01-2021', title: '4th Period Announcement of Results - Research', desc: 'Research Scholarships' },
11 |     { date: '10-01-2021', title: 'Applications Open - Undergraduate and Postgraduate', desc: 'Undergraduate and Postgraduate Scholarships' },
12 |     { date: '20-02-2021', title: 'Applications Close - Undergraduate and Postgraduate', desc: 'Undergraduate and Postgraduate Scholarships' },
13 |     { date: '02-2021', title: 'Evaluation Process - Start - Undergraduate and Postgraduate', desc: 'Undergraduate and Postgraduate Scholarships' },
14 |     { date: '03-2021', title: 'Interview Period - Start - Undergraduate and Postgraduate', desc: 'Undergraduate and Postgraduate Scholarships' },
15 |     { date: '03-2021', title: '1st Period Applications Close - Research', desc: 'Research Scholarships' },
16 |     { date: '04-2021', title: '2nd Period Applications Open - Research', desc: 'Research Scholarships' },
17 |     { date: '04-2021', title: '1st Period Announcement of Results - Research', desc: 'Research Scholarships' },
18 |     { date: '05-2021', title: 'Evaluation Process - End - Undergraduate and Postgraduate', desc: 'Undergraduate and Postgraduate Scholarships' },
19 |     { date: '30-06-2021', title: '2nd Period Applications Close - Research', desc: 'Research Scholarships' },
20 |     { date: '06-2021', title: 'Interview Period - End - Undergraduate and Postgraduate', desc: 'Undergraduate and Postgraduate Scholarships' },
21 |     { date: '07-2021', title: '3rd Period Applications Open - Research', desc: 'Research Scholarships' },
22 |     { date: '07-2021', title: '2nd Period Announcement of Results - Research', desc: 'Research Scholarships' },
23 |     { date: '07-2021', title: 'Announcement of Results - Undergraduate and Postgraduate', desc: 'Undergraduate and Postgraduate Scholarships' },
24 |     { date: '07-2021', title: 'Scholarship Agreement and Visa Procedures - Start - Undergraduate and Postgraduate', desc: 'Undergraduate and Postgraduate Scholarships' },
25 |     { date: '08-2021', title: 'Scholarship Agreement and Visa Procedures - End - Undergraduate and Postgraduate', desc: 'Undergraduate and Postgraduate Scholarships' },
26 |     { date: '09-2021', title: 'Travel of New Students to Turkey / Beginning of the Academic Year - Start - Undergraduate and Postgraduate', desc: 'Undergraduate and Postgraduate Scholarships' },
27 |     { date: '09-2021', title: 'Travel of New Students to Turkey / Beginning of the Academic Year - End - Undergraduate and Postgraduate', desc: 'Undergraduate and Postgraduate Scholarships' },
28 |     { date: '09-2021', title: '3rd Period Applications Close - Research', desc: 'Research Scholarships' },
29 |     { date: '10-2021', title: '3rd Period Announcement of Results - Research', desc: 'Research Scholarships' },
30 |     { date: '10-2021', title: '4th Period Applications Open - Research', desc: 'Research Scholarships' },
31 |     { date: '10-2021', title: 'Applications Open - Success', desc: 'Success Scholarships' },
32 |     { date: '10-2021', title: 'Evaluation Process - Start - Success', desc: 'Success Scholarships' },
33 |     { date: '11-2021', title: 'Applications Close - Success', desc: 'Success Scholarships' },
34 |     { date: '11-2021', title: 'Evaluation Process - End - Success', desc: 'Success Scholarships' },
35 |     { date: '11-2021', title: 'Announcement of Results - Success', desc: 'Success Scholarships' },
36 |     { date: '12-2021', title: '4th Period Applications Close - Research', desc: 'Research Scholarships' }
37 |   ]);
38 | 
39 |   return (
40 |     <div>
41 |       <StateContext.Provider value={{ state: infos }}>
42 |         <TLMap />
43 |       </StateContext.Provider> 
44 |     </div>
45 |   )
46 | }
47 | 
48 | export default TLContainer
49 | 


--------------------------------------------------------------------------------
/src/style/App.css:
--------------------------------------------------------------------------------
  1 | /* ===================== Css Reset ====================== */
  2 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&family=Roboto+Slab:wght@100&display=swap');
  3 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&family=Roboto+Slab:wght@100&display=swap');
  4 | 
  5 | body{
  6 |   background-color: #f6f5f7;
  7 | }
  8 | 
  9 | #root {
 10 |   width: 100%;
 11 | }
 12 | 
 13 | * {
 14 |   box-sizing: border-box;
 15 |   padding: 0;
 16 |   margin: 0;
 17 | }
 18 | 
 19 | /* ===================== Header ====================== */
 20 | 
 21 | .header{
 22 |   height: 130px;
 23 |   font-size: 15px;
 24 |   padding: 10px;
 25 |   text-align: center;
 26 |   line-height: 45px;
 27 |   background-color: #0275d8;
 28 |   color: white;
 29 |   text-transform: capitalize;
 30 |   font-family: 'Roboto Slab', serif;
 31 |   letter-spacing: .5px;
 32 | }
 33 | 
 34 | .header2{
 35 |   padding-bottom: 15px;
 36 | }
 37 | 
 38 | /* ===================== Main ====================== */
 39 | 
 40 | .timeline-container {
 41 |   background-color: #f6f5f7;
 42 |   display: flex;
 43 |   position: relative;
 44 |   flex-direction: column;
 45 |   margin: 85px 0;
 46 |   width: 750px;
 47 |   padding: 0 15px;
 48 |   margin-left: auto;
 49 |   margin-right: auto;
 50 | }
 51 | 
 52 | .timeline-container::after {
 53 |   background-color: rgba(207, 0, 0, 0.788);
 54 |   position: absolute;
 55 |   left: calc(50% - 2px);
 56 |   content: "";
 57 |   width: 4px;
 58 |   height: 100%;
 59 | }
 60 | 
 61 | .timeline-item {
 62 |   display: flex;
 63 |   justify-content: flex-end;
 64 |   width: 50%;
 65 |   margin: 10px 0;
 66 |   padding-right: 35px;
 67 |   font-family: 'Roboto Slab', serif;
 68 | }
 69 | 
 70 | .timeline-item:nth-child(even) {
 71 |   align-self: flex-end;
 72 |   justify-content: flex-start;
 73 |   padding-left: 35px;
 74 |   padding-right: 0;
 75 | }
 76 | 
 77 | .timeline-content {
 78 |   display: flex;
 79 |   flex-direction: column;
 80 |   align-items: flex-end;
 81 |   width: 350px;
 82 |   padding: 15px;
 83 |   text-align: right;
 84 |   position: relative;
 85 |   box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
 86 |   border-radius: 5px;
 87 | }
 88 | 
 89 | .timeline-item:nth-child(even) .timeline-content{
 90 |   align-items: flex-start;
 91 |   text-align: left;
 92 | }
 93 | 
 94 | .timeline-content::after{
 95 |   content: '';
 96 |   height: 15px;
 97 |   width: 15px;
 98 |   box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
 99 |   position: absolute;
100 |   background-color: #f6f5f7;
101 |   transform: rotate(45deg);
102 |   right: -6.5px;
103 |   top: 46%;
104 | }
105 | 
106 | .timeline-item:nth-child(even) .timeline-content::after{
107 |   right: auto;
108 |   left: -7.5px;
109 |   box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
110 | }
111 | 
112 | .circle{
113 |   background-color: #f6f5f7;
114 |   border: 3px solid rgba(207,0,0, 0.788);
115 |   width: 20px;
116 |   height: 20px;
117 |   position: absolute;
118 |   border-radius: 50%;
119 |   top: 44.5%;
120 |   right: -45px;
121 |   z-index: 1;
122 | }
123 | 
124 | .timeline-item:nth-child(even) .timeline-content .circle{
125 |   left: -45px;
126 | }
127 | 
128 | .title{
129 |   padding: 15px 0;
130 |   line-height: 25px;
131 |   font-size: 19px;
132 |   font-weight: 600;
133 | }
134 | 
135 | .date{
136 |   background-color: #0275d8;
137 |   color: white;
138 |   text-transform: uppercase;
139 |   padding: 2px 3px;
140 |   font-weight: bold;
141 |   letter-spacing: 1px;
142 | }
143 | 
144 | .desc{
145 |   font-size: 17px;
146 |   font-weight: 600;
147 |   color: rgba(41, 42, 43, 0.664);
148 | }
149 | 
150 | /* ===================== Footer ====================== */
151 | 
152 | .footer{
153 |   height: 180px;
154 |   background-color: #0275d8;
155 |   display: flex;
156 |   align-items: flex-start;
157 |   justify-content: space-between;
158 |   flex-direction: column;
159 |   padding: 15px;
160 |   font-family: 'Open Sans', sans-serif;
161 | }
162 | 
163 | .name{
164 |   font-size: 35px;
165 |   letter-spacing: 1px;
166 |   color: white;
167 | }
168 | 
169 | .ytb-logo{
170 |   align-self: flex-end;
171 | }
172 | 
173 | .subfooter{
174 |   letter-spacing: .5px;
175 |   font-size: 17px;
176 |   color: white;
177 | }
178 | 
179 | /* ===================== Media Query ====================== */
180 | 
181 | @media only screen and (max-width:767px) {
182 |   .header{
183 |     font-size: 8px;
184 |   }
185 | 
186 |   .timeline-item:nth-child(even){
187 |     align-self: flex-start;
188 |   }
189 | 
190 |   .timeline-item:nth-child(even) {
191 |     align-self: flex-start;
192 |     justify-content: flex-start;
193 |     padding-left: 0;
194 |     padding-right: 35px;
195 |   }
196 | 
197 |   .timeline-item:nth-child(even) .timeline-content{
198 |     align-items: flex-end;
199 |     text-align: right;
200 |   }
201 | 
202 |   .timeline-item:nth-child(even) .timeline-content::after{
203 |     left: auto;
204 |     right: -7.5px;
205 |     box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
206 |   }
207 | 
208 |   .timeline-item:nth-child(even) .timeline-content .circle{
209 |     left: auto;
210 |   }
211 | 
212 |   .name{
213 |     font-size: 20px;
214 |     letter-spacing: 1px;
215 |     color: white;
216 |   }
217 |   
218 |   .ytb-logo{
219 |     align-self: flex-end;
220 |     width: 110px;
221 |     height: 50px;;
222 | }
223 |   
224 |   .subfooter{
225 |     letter-spacing: .5px;
226 |     font-size: 11px;
227 |     color: white;
228 |   }
229 | }
230 | 


--------------------------------------------------------------------------------